# Studio Two 에디터: 요소 크기 설정하기 Source: https://support.wix.com/ko/article/studio-two-editor-setting-the-elements-size-ko (updated 2026-11-13) Related: Wix developer documentation, https://dev.wix.com/docs/llms.txt; Help Center index, https://support.wix.com/en/llms.txt > 이 도움말은 2026년 11월에 출시된 새로운 Studio Two 에디터에 관한 내용입니다. Studio 에디터와 Studio Two 에디터 중 어떤 에디터를 사용 중인지 확실하지 않다면 [여기에서 자세한 정보를 확인하세요](https://support.wix.com/ko/article/studio-two-editor-the-difference-between-studio-editor-and-studio-two-editor). Studio Two 에디터에서는 모든 요소의 크기를 정확하게 설정해 디자인이 모든 기기에 맞게 자동으로 조정되도록 할 수 있습니다. 캔버스 또는 속성 검사 패널에서 요소의 크기를 조정해 정확한 치수를 설정합니다. 크기를 조정하면 픽셀 단위인 px\*가 표시됩니다. 요소의 반응형 동작에 따라 화면 중단점별로 크기가 조정됩니다. 기본 동작이 디자인에 적합하지 않다면 동작을 변경하거나, 고급 설정을 활성화해 너비와 높이를 직접 조정할 수 있습니다. --- ## 요소 크기 조정하기 선호하는 디자인 작업 방식에 따라 요소 크기를 조정할 수 있습니다. * **캔버스에서:** 페이지에서 요소를 클릭해 선택한 후 원하는 크기가 될 때까지 측면 핸들을 드래그합니다. 드래그하는 동안 요소의 정확한 크기를 픽셀 단위로 확인할 수 있습니다. ![Dragging the side handle of a selected text element on the canvas to resize it](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/6737e8ce-e145-4d66-829b-5b527d469b5b/2026/10/25/c52717a5-047a-43db-a88d-8a13342b135d/size-1a-canvas.png) * **속성 검사 패널에서:** 요소를 클릭하고 속성 검사 패널을 열어 정확한 너비와 높이를 확인하거나 변경합니다. ![Selected text element on the canvas, with its width and height shown in the Inspector Size section](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/6737e8ce-e145-4d66-829b-5b527d469b5b/2026/10/25/ae5095b5-f39b-42ac-b6f3-db0f30b260d1/size-1b-canvas-and-inspector.png) --- ## 측정 단위로 px* 사용하기 속성 검사 패널의 \*\*크기\*\* 섹션에서는 Studio Two 에디터만의 상대 측정 단위인 **px\***를 사용할 수 있습니다. 'px' 옆의 별표(\*)는 현재 작업 중인 화면 중단점을 기준으로 크기가 달라진다는 의미입니다. 예를 들어 데스크톱에서 모바일 화면 중단점으로 전환하면 요소의 너비와 높이가 px\* 단위에 맞게 줄어듭니다. ![속성 검사 패널의 **크기** 섹션에 X, Y, W, H 값이 px* 단위로 표시된 모습](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/6737e8ce-e145-4d66-829b-5b527d469b5b/2026/10/25/3e5b196c-eac4-4cff-9294-08d474fd25b4/size-2-px-fields-1x.png) > **알아두세요.** px\*는 픽셀값을 나타내지만, 실제 크기는 반응형으로 계산됩니다. 패널에서 px\*에 마우스오버하면 계산식과 사용 중인 반응형 크기 단위(예: 퍼센트, 비율 등)를 확인할 수 있습니다. > > ![Hovering over px* next to width in the Inspector panel, the popup reads that the actual unit is percentage](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/6737e8ce-e145-4d66-829b-5b527d469b5b/2026/10/25/56f2b60e-fd1e-4f39-b14d-1221ad7b0104/size-3-px-tooltip-1x.png) --- ## 반응형 동작 선택하기 화면 중단점에 따라 요소의 크기를 조정할지 여부와 조정 방식을 결정하는 반응형 동작을 설정합니다. 모든 요소에는 기본 동작이 적용되지만, 디자인에 더 적합한 동작으로 변경할 수 있습니다. **반응형 동작에는 어떤 차이가 있나요?** 각 반응형 동작에는 화면 크기에 따라 요소 크기를 자동으로 조정하는 고유한 방식이 적용됩니다. 요소별로 이용 가능한 동작이 다르며, 가장 일반적인 동작은 다음과 같습니다. * **비례적 크기 조정:** 모든 화면에서 요소의 너비와 높이가 동일한 비율로 유지됩니다. * **상대 너비:** 상위 요소를 기준으로 요소의 너비가 자동으로 변경됩니다. * **고정:** 화면 크기와 관계없이 요소의 크기가 동일하게 유지됩니다. * **늘리기:** 각 화면 중단점에서 상위 컨테이너에 맞게 요소가 늘어납니다. * **허그:** 요소와 경계 상자 사이에 간격이 없습니다. 각 화면 중단점에서 경계 상자의 크기는 콘텐츠에 따라 달라집니다(예: 버튼 텍스트의 글자 수 및 글꼴 크기). **참고:** 가로 스택에도 이 동작이 기본으로 적용됩니다. **섹션 동작:** * **자동 높이:** 모든 화면 크기에서 콘텐츠에 맞게 섹션 높이가 자동으로 조정됩니다. * **고정 높이:** 화면 크기와 관계없이 섹션 높이가 동일하게 유지됩니다. * **스크린에 자동 맞춤:** 섹션이 뷰포트 전체 높이(100vh)를 차지합니다. 필요한 경우 vh 값을 조정해 섹션이 차지하는 공간을 줄일 수 있습니다. ### 요소의 반응형 동작을 변경하려면 다음 단계를 따릅니다. 1. [에디터로 이동](https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26)합니다. 2. 해당 요소를 선택합니다. 3. 에디터 오른쪽 상단에서 **속성 검사 열기** ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2026/07/03/7a2108d4-e689-4bc2-ab56-4cd429ad0062/7e829fa7-aefd-41bf-9201-836a19bff654.png) 아이콘을 클릭합니다. ![Studio Two 에디터에서 속성 검사 패널을 여는 화살표 클릭하기](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/6737e8ce-e145-4d66-829b-5b527d469b5b/2026/08/18/464a146e-ac9f-495f-be67-560b93fdb995/open-inspectornew.png) 1. **디자인** 탭을 클릭합니다. 2. **크기** 아래에서 **반응형 동작** 드롭다운을 클릭합니다. 3. 새 반응형 동작을 선택합니다. ![속성 검사 패널에 열린 반응형 동작 드롭다운과 강조 표시된 옵션의 애니메이션 미리보기](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/6737e8ce-e145-4d66-829b-5b527d469b5b/2026/10/25/99fd2586-7b18-487e-9012-0bc47a5f4972/size-4-responsive-dropdown-1x.png) > **알아두세요:** 드롭다운의 옵션에 마우스오버하면 적용 모습을 보여주는 애니메이션을 확인할 수 있습니다. --- ## 고급 크기 설정 사용하기 px, %, vh 등 요소의 치수를 직접 설정하려면 px\* 및 반응형 동작에 맡기는 대신 고급 설정을 사용합니다. > **알아두세요:** 고급 설정을 활성화하면 선택한 요소의 모든 화면 중단점에 적용됩니다. 해당 요소에서는 고급 설정 모드가 활성화된 상태로 유지되어 쉽게 액세스할 수 있으며, 언제든 비활성화할 수 있습니다. ### 고급 설정을 활성화하려면 다음 단계를 따르세요. 1. [에디터로 이동합니다](https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26). 2. 해당 요소를 선택합니다. 3. 에디터 오른쪽 상단에서 **검사창 열기**![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2026/07/03/7a2108d4-e689-4bc2-ab56-4cd429ad0062/7e829fa7-aefd-41bf-9201-836a19bff654.png) 아이콘을 클릭합니다. ![Studio Two 에디터에서 속성 검사 패널을 여는 화살표를 클릭하는 모습입니다.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/6737e8ce-e145-4d66-829b-5b527d469b5b/2026/08/18/464a146e-ac9f-495f-be67-560b93fdb995/open-inspectornew.png) 1. (검사창에서) 오른쪽 상단의 **추가 작업**![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/6737e8ce-e145-4d66-829b-5b527d469b5b/2026/08/05/00f6b671-6132-4bc1-9610-b17a2af28697/more-actions-black-bg.png) 아이콘을 클릭합니다. 2. **고급 설정** 옆의 버튼을 활성화합니다. ![Studio Two 에디터의 속성 검사 패널에서 고급 설정 버튼이 활성화된 모습입니다.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/6737e8ce-e145-4d66-829b-5b527d469b5b/2026/08/05/4e7f19bb-54f1-4d9c-b945-61607d943fb4/advanced-settings-on.png) 1. 너비, 높이, 최솟값 및 최댓값을 필요에 맞게 조정합니다. **도움말:** 속성 검사에서 단위를 클릭하면 다른 단위(예: px에서 %로)로 변경할 수 있습니다. 해당 요소에 사용할 수 있는 측정 단위 목록이 열립니다. ![Studio Two 에디터의 속성 검사 패널에서 고급 설정을 활성화해 너비, 높이, 최솟값 및 최댓값을 표시한 모습입니다.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/6737e8ce-e145-4d66-829b-5b527d469b5b/2026/10/25/9b64d910-3f63-4a5f-b53d-4fc8d04cf077/size-5-advanced-settings.png)