Studio 에디터: 레이어 사용하기

5 분 분량
Studio 에디터에서 작업 중인 페이지의 레이어를 관리하세요. 계층 구조를 더 잘 이해할 수 있도록 모든 섹션과 요소가 표시됩니다. 레이어 패널은 캔버스에서 찾기 어려운 요소를 선택해야 하는 경우에도 유용합니다. 
페이지에서 선택된 특정 요소를 보여주는 레이어 패널의 스크린샷
다음 도움말을 참고하세요.

레이어 패널 구조

레이어 패널에는 현재 페이지의 모든 섹션이 위에서 아래로 계층 구조로 표시됩니다. 예를 들어, 페이지 상단에 머리글이 있는 경우, 목록 상단에 표시됩니다.
다른 요소 내에 요소를 중첩할 경우, 요소 사이에 상위/하위 관계가 생성됩니다. 예를 들어, 컨테이너 내의 텍스트 요소는 하위 요소입니다. 그리고, 해당 컨테이너는 이를 표시하는 섹션의 하위가 됩니다. 
레이어 패널은 이러한 상하위 논리에 따라 구성되어 있으므로, 상위 요소를 클릭해 하위 요소를 확인할 수 있습니다. 페이지에 글로벌 섹션이 있는 경우 녹색으로 강조 표시됩니다. 

레이어 선택 및 관리하기

레이어 패널은 페이지의 특정 요소를 탐색할 수 있는 유용하고 빠른 방법입니다.또한, 겹치는 요소가 있고 필요한 요소를 찾거나 선택할 수 없는 경우 요소를 찾는 좋은 방법이기도 합니다.
레이어에 마우스오버하면 페이지에서 해당 레이어가 강조 표시됩니다. 레이어를 클릭하면 에디터가 해당 요소로 바로 스크롤합니다. 이 시점에서 패널을 닫아도 선택 사항은 저장됩니다. 
레이어 패널에서 로그인 버튼 요소를 선택하면 페이지가 스크롤되는 방식을 보여주는 GIF
도움말:
Shift 키를 누른 채 요소를 클릭해 여러 요소를 선택하세요. 

레이어 관리하기

필요한 레이어를 찾았다면, 이 패널에서 레이어 복사, 위 또는 아래로 이동, 표시할 페이지 선택 등과 같은 작업을 수행할 수 있습니다. 
다음 중 하나를 수행해 레이어를 관리하세요.
  • 레이어 이름을 마우스 오른쪽 버튼으로 클릭합니다.
  • 레이어 이름에 마우스오버한 후 추가 작업 아이콘을 클릭합니다.
패널에서 선택한 각 레이어에 사용할 수 있는 작업 메뉴의 스크린샷

레이어 선택 기본설정 지정하기

Studio 에디터를 사용하면 캔버스에서 레이어를 가져오기 위한 기본 경로를 선택할 수 있습니다. 하위 요소가 있는 상위 컨테이너 클릭 시, 어떤 요소가 "선택"되는지 결정하세요.  
  • 부모 컨테이너 순: 클릭하면, 상위 컨테이너(예: 컨테이너 상자, 스택 등)가 선택됩니다. 그런 다음 내부 요소를 다시 클릭해 편집할 수 있습니다. 
  • 자식 요소 순: 상위 컨테이너가 아닌, 클릭한 특정 하위 요소가 선택됩니다. 

레이어 선택 기본설정을 지정하려면:

  1. 왼쪽 상단에서 Wix Studio 아이콘을 클릭합니다.
  2. 보기에 마우스오버합니다.
  3. 레이어 선택에 마우스오버합니다.
  4. 부모 컨테이너 순 또는 자식 요소 순 중 옵션을 선택합니다.
Studio 에디터에서 레이어 선택 기본설정 지정하기

레이어 이름 변경하기

페이지에 여러 섹션, 컨테이너 및 요소 등 추가 시, 레이어 패널에서 이를 구분하기 어려울 수 있습니다. 쉽게 인식할 수 있도록 레이어 이름을 변경할 수 있습니다. 관련 레이어를 두 번 클릭한 후 새 이름을 지정하세요. 
패널에서 레이어를 두 번 클릭해 이름을 변경하는 방법을 보여주는 GIF
개발자 모드를 사용 중인 경우:
코드에서 요소를 쉽게 식별할 수 있도록 레이어 패널에 요소 ID를 표시합니다.ID 표시하기 버튼을 활성화해 속성 패널에 정의된 ID를 확인하세요. 

레이어 순서 변경하기

드래그-앤-드롭을 사용해 현재 페이지에서 요소와 섹션의 순서를 쉽게 변경할 수 있습니다. 레이어 패널은 위에서 아래로 구성되어 있으므로 요소를 이동하면 페이지에서의 위치에도 영향을 줍니다. 
요소가 겹치는 경우, 요소를 재정렬하면 Z 순서에 영향을 미칩니다. 예를 들어, 텍스트를 모양 위에 표시하려면 레이어 패널에서 텍스트가 모양 위에 있어야 합니다. 
레이어 패널에서 드래그-앤-드롭 기능을 보여주는 GIF

요소 비공개 및 비공개 해제하기

비공개를 선택해 캔버스에서 직접 현재 중단점에서 요소를 빠르게 비공개할 수 있습니다. 
캔버스에 표시되는 요소를 그대로 표시하지 않는 옵션의 스크린샷
하지만, 요소 비공개를 해제해야 하는 경우에는 레이어 패널에서 비공개 설정을 해제해야 합니다. 비공개 요소는 레이어 패널에 비공개 아이콘과 함께 표시되어 목록에서 쉽게 찾을 수 있습니다.
도움말:
더 작은 중단점(예: 모바일)에 요소를 추가하는 경,우 더 큰 중단점(예: 데스크톱)에서는 항상 비공개됩니다.다음 단계에 따라 요소가 더 큰 중단점에 표시되도록 설정할 수 있습니다.

요소 비공개 설정을 해제하려면:

  1. 에디터 왼쪽에서 레이어를 클릭합니다.
  2. 목록에서 비공개 요소를 찾습니다.
  3. 요소에 마우스오버한 후 추가 작업 아이콘을 클릭합니다.
  4. 표시 옵션을 클릭합니다.
레이어 패널에서 비공개 요소를 선택해 표시하는 옵션의 스크린샷

도움이 되었나요?

|