# Studio Two 에디터: 속성 검사 패널 사용하기

Source: https://support.wix.com/ko/article/studio-two-editor-working-with-the-inspector-panel-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).

속성 검사 패널에서 요소, 섹션, 페이지의 속성을 편집할 수 있습니다. 화면 중단점별 요소 크기 조정 방식 설정, 디자인 조정, 모션 추가, 콘텐츠와 데이터 소스 연결을 모두 한곳에서 할 수 있습니다.

**속성 검사 패널에 액세스하려면 어떻게 해야 하나요?**

에디터 오른쪽 상단에서 **속성 검사 열기**![](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) 아이콘을 클릭합니다. 오른쪽에 패널이 열리고 상단에 현재 작업 중인 요소의 이름이 표시됩니다.

![상단에 디자인, 모션, 설정 탭이 있는 속성 검사 패널입니다.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/6737e8ce-e145-4d66-829b-5b527d469b5b/2026/10/22/8ae76ebb-c885-46db-876a-b5e42c45db1e/a2278ff9-1-intro-inspector-tabs-fixed.png)

> **알아두세요:** 캔버스에서 선택한 항목에 따라 속성 검사에 이용 가능한 옵션이 표시됩니다.

---

## 디자인

**디자인** 탭에서 화면 중단점별 요소의 디자인과 작동 방식을 설정합니다. 속성 검사에서 가장 먼저 표시되는 탭으로, 크기와 간격부터 색상, 타이포그래피, 사용자 지정 CSS까지 모두 설정할 수 있습니다.

탭 상단의 아이콘을 클릭해 선택한 요소를 상위 요소 내에서 정렬합니다. 아이콘 아래에 표시되는 섹션은 선택한 요소에 따라 달라집니다.

* [**크기**](https://support.wix.com/ko/article/studio-two-editor-setting-the-elements-size-and-spacing)**:** 요소의 너비와 높이를 설정하고 화면별 크기 조정 방식을 선택합니다.
* **요소 디자인:** 색상, 테두리, 모서리, 음영, 타이포그래피 등 요소의 디자인을 설정합니다. 메뉴처럼 여러 부분으로 구성된 요소나 버튼처럼 고유한 마우스오버 및 비활성화 상태가 있는 요소는 먼저 디자인할 부분이나 상태를 선택합니다.
* **레이아웃(컨테이너 및 섹션):** 상위 요소 내부에서 요소가 배치되는 방식을 조정합니다. 그리드 레이아웃과 여백을 설정하고, 오버플로우 콘텐츠를 처리할 방식을 선택합니다. **세로 간격**을 **자동**에서 **수동**으로 변경하면 화면 중단점마다 요소 간격을 다르게 설정할 수 있습니다.
* [**위치**](https://support.wix.com/ko/article/studio-two-positioning-elements-and-sections)**:** 위치 유형(예: 스티키, 핀)을 선택하고 여백과 도킹을 설정해 화면 크기가 변경되어도 요소가 제자리에 유지되도록 합니다.
* **표시:** 요소의 투명도와 회전 각도를 설정합니다.
* **커서:** 요소, 섹션 또는 페이지에 사용자 지정 커서를 추가합니다.
* **앵커:** 요소로 직접 연결되는 앵커를 추가하고 앵커 URL을 복사합니다.
* **사용자 지정 CSS:** 선택한 요소에 적용할 CSS를 직접 작성합니다.

![버튼의 속성 검사 디자인 탭으로, 크기 섹션과 디자인 대상 선택 메뉴가 표시됩니다.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/6737e8ce-e145-4d66-829b-5b527d469b5b/2026/10/21/a44b6e69-ed19-4c36-a9fd-d48098252ce8/a2278ff9-2-design-tab.png)

---

## 모션

**모션** 탭에서 요소와 섹션에 움직임을 추가합니다. 하나의 요소에 여러 유형의 애니메이션을 적용할 수 있습니다. 예를 들어 요소를 로딩할 때 서서히 표시하거나, 방문자의 커서에 반응하게 하거나, 스크롤에 따라 이동하도록 설정할 수 있습니다.

> **참고:** 이용 가능한 애니메이션과 효과는 선택한 요소에 따라 달라집니다.

원하는 모션 유형을 선택합니다:

* **입장:** 요소가 처음 로드될 때 애니메이션을 적용합니다. 예를 들어 요소를 확대하거나, 서서히 표시하거나, 비스듬히 기울일 수 있습니다.
* **반복:** 특정 작업을 트리거하지 않아도 요소의 애니메이션이 계속 반복되도록 설정합니다.
* **스크롤:** 방문자가 페이지를 위아래로 스크롤할 때 요소에 애니메이션을 적용합니다.
* **마우스 효과:** 커서 움직임에 따라 요소가 애니메이션으로 반응하도록 설정합니다.
* **클릭:** 방문자가 요소를 클릭할 때 애니메이션을 적용합니다.
* **마우스오버:** 방문자가 요소에 마우스오버할 때 애니메이션을 적용합니다.  
**참고:** 버튼이나 메뉴와 같은 일부 요소에는 마우스오버 상태가 기본으로 제공되므로 마우스오버 애니메이션을 추가하는 옵션이 표시되지 않습니다. 마우스오버 상태를 사용자 지정하려면 **디자인** 탭으로 이동해 **상태** 아래에서 **마우스오버**를 선택합니다.

![Studio Two 에디터에서 섹션 셀에 선택한 페이드 애니메이션을 클릭해 미리보기](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/6737e8ce-e145-4d66-829b-5b527d469b5b/2026/10/22/cbe541fb-132c-453b-80a8-4af8b0dac108/2026-10-22_10-52-41_(1).gif)

> **도움말:** 애니메이션 프리셋을 선택하기 전에 마우스오버해 움직임을 미리 확인하세요.

---

## 설정

**설정** 탭에서 선택한 요소의 고급 동작을 설정합니다.

* **데이터 소스:** 페이지, 섹션 또는 컨테이너를 데이터 소스에 연결합니다. 그러면 내부 요소에서 해당 소스의 데이터, 작업 및 기능을 사용할 수 있습니다. **소스 연결**을 클릭해 시작합니다.
* **속성:** 선택한 요소의 콘텐츠와 동작을 편집합니다. 이용 가능한 옵션은 요소에 따라 다릅니다. 예를 들어 버튼을 선택하면 텍스트와 링크를 사용자 지정하거나 버튼을 비활성화할 수 있습니다. 값을 직접 입력하는 대신 데이터 소스에 연결하려면 입력란 옆의 **데이터에 연결** ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/6737e8ce-e145-4d66-829b-5b527d469b5b/2026/10/22/725891c7-c279-4060-98c1-979dd9434072/image.png) 아이콘을 클릭하고, Aria의 도움을 받으려면 **AI로 설정**을 클릭합니다.
* **접근성:** 보조 기술로 요소를 더 쉽게 사용할 수 있도록 설정합니다. 요소에 따라 역할을 설정하거나 장식용으로 표시하고, 접근성 이름을 추가하거나, 스크린 리더가 업데이트 내용을 안내하는 방식을 선택할 수 있습니다.
* **고급:**  
   * **가시성 조건:** 데이터 소스의 조건이 참 또는 거짓일 때 요소를 숨깁니다.  
   * **이벤트 핸들러:** 요소를 클릭하거나 마우스오버하는 등 특정 이벤트가 발생할 때 함수를 실행합니다. 이벤트 핸들러는 버튼과 같은 일부 요소에서 사용할 수 있습니다.

![버튼을 선택했을 때 속성 검사 패널에 표시되는 설정 탭](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/6737e8ce-e145-4d66-829b-5b527d469b5b/2026/10/22/11478235-dbe1-4e34-9b64-78b18c6046e8/a2278ff9-4-settings-tab.png)

---

## 자주 묻는 질문

아래 질문을 클릭해 자세한 내용을 확인하세요.

**여러 요소를 한 번에 편집할 수 있나요?**

네. 선택한 요소의 조합에 따라 표시되는 옵션이 달라집니다.

* **동일한 유형의 요소:** 공통 옵션이 표시됩니다. 여러 텍스트 요소를 선택하면 포맷팅 옵션이 표시되고, 여러 버튼을 선택하면 모든 디자인 옵션이 표시됩니다.
* **서로 다른 유형의 요소:** 정렬 아이콘만 표시됩니다.

선택한 요소가 가로축이나 세로축을 따라 나란히 배치된 경우에는 [**스택**](https://support.wix.com/ko/article/studio-two-editor-stacking-elements) 옵션도 표시됩니다. 요소를 스택으로 쌓으면 모든 화면 크기에서 간격을 적절하게 유지할 수 있습니다.

**px* 크기 단위란 무엇인가요? 퍼센트 같은 다른 단위로 변경할 수 있나요?**

Studio Two 에디터에서 크기는 px\*로 표시됩니다. 픽셀로 표시되는 값이지만 실제 단위는 반응형으로 유지됩니다. px, %, vh 등의 단위를 사용하거나 최솟값과 최댓값을 설정하려면 검사창 상단의 **추가 작업**![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/6737e8ce-e145-4d66-829b-5b527d469b5b/2026/09/02/526b16af-7d84-442f-9768-bc7550e1ac9f/more-actions-black-bg.png) 아이콘을 클릭하고 **고급 설정**을 활성화합니다. [요소 크기 조정에 대해 자세히 알아보세요](https://support.wix.com/ko/article/studio-two-editor-setting-the-elements-size)