Studio Two 에디터: 요소 크기 설정하기
이 도움말은 2026년 11월에 출시된 새로운 Studio Two 에디터에 관한 내용입니다. Studio 에디터와 Studio Two 에디터 중 어떤 에디터를 사용 중인지 확실하지 않다면 여기에서 자세한 정보를 확인하세요.
Studio Two 에디터에서는 모든 요소의 크기를 정확하게 설정해 디자인이 모든 기기에 맞게 자동으로 조정되도록 할 수 있습니다. 캔버스 또는 속성 검사 패널에서 요소의 크기를 조정해 정확한 치수를 설정합니다.
크기를 조정하면 픽셀 단위인 px*가 표시됩니다. 요소의 반응형 동작에 따라 화면 중단점별로 크기가 조정됩니다. 기본 동작이 디자인에 적합하지 않다면 동작을 변경하거나, 고급 설정을 활성화해 너비와 높이를 직접 조정할 수 있습니다.
요소 크기 조정하기
선호하는 디자인 작업 방식에 따라 요소 크기를 조정할 수 있습니다.
캔버스에서: 페이지에서 요소를 클릭해 선택한 후 원하는 크기가 될 때까지 측면 핸들을 드래그합니다. 드래그하는 동안 요소의 정확한 크기를 픽셀 단위로 확인할 수 있습니다.
속성 검사 패널에서: 요소를 클릭하고 속성 검사 패널을 열어 정확한 너비와 높이를 확인하거나 변경합니다.
측정 단위로 px* 사용하기
속성 검사 패널의 **크기** 섹션에서는 Studio Two 에디터만의 상대 측정 단위인 px*를 사용할 수 있습니다.
'px' 옆의 별표(*)는 현재 작업 중인 화면 중단점을 기준으로 크기가 달라진다는 의미입니다. 예를 들어 데스크톱에서 모바일 화면 중단점으로 전환하면 요소의 너비와 높이가 px* 단위에 맞게 줄어듭니다.
px*는 픽셀값을 나타내지만, 실제 크기는 반응형으로 계산됩니다. 패널에서 px*에 마우스오버하면 계산식과 사용 중인 반응형 크기 단위(예: 퍼센트, 비율 등)를 확인할 수 있습니다.
반응형 동작 선택하기
화면 중단점에 따라 요소의 크기를 조정할지 여부와 조정 방식을 결정하는 반응형 동작을 설정합니다. 모든 요소에는 기본 동작이 적용되지만, 디자인에 더 적합한 동작으로 변경할 수 있습니다.
요소의 반응형 동작을 변경하려면 다음 단계를 따릅니다.
에디터로 이동합니다.
해당 요소를 선택합니다.
에디터 오른쪽 상단에서 속성 검사 열기 아이콘을 클릭합니다.
아이콘을 클릭합니다.
디자인 탭을 클릭합니다.
크기 아래에서 반응형 동작 드롭다운을 클릭합니다.
새 반응형 동작을 선택합니다.
드롭다운의 옵션에 마우스오버하면 적용 모습을 보여주는 애니메이션을 확인할 수 있습니다.
고급 크기 설정 사용하기
px, %, vh 등 요소의 치수를 직접 설정하려면 px* 및 반응형 동작에 맡기는 대신 고급 설정을 사용합니다.
고급 설정을 활성화하면 선택한 요소의 모든 화면 중단점에 적용됩니다. 해당 요소에서는 고급 설정 모드가 활성화된 상태로 유지되어 쉽게 액세스할 수 있으며, 언제든 비활성화할 수 있습니다.
고급 설정을 활성화하려면 다음 단계를 따르세요.
해당 요소를 선택합니다.
에디터 오른쪽 상단에서 검사창 열기 아이콘을 클릭합니다.
(검사창에서) 오른쪽 상단의 추가 작업
아이콘을 클릭합니다.고급 설정 옆의 버튼을 활성화합니다.
너비, 높이, 최솟값 및 최댓값을 필요에 맞게 조정합니다.
도움말: 속성 검사에서 단위를 클릭하면 다른 단위(예: px에서 %로)로 변경할 수 있습니다. 해당 요소에 사용할 수 있는 측정 단위 목록이 열립니다.
