Studio 에디터: 사용자 지정 커서 추가하기

4 분 분량
사용자 지정 커서는 클라이언트의 사이트에 고유한 브랜딩을 추가합니다. 페이지, 섹션 또는 방문자가 상호 작용하는 특정 요소(예: 컨테이너, 이미지 등)에 사용자 지정 커서를 적용하세요. 다양한 제안 중 하나를 사용하거나 고유한 커서를 업로드하고 필요에 맞게 크기를 설정할 수 있습니다. 
도움말:
JPG, PNG, SVG 파일을 사용할 수 있습니다. 배경과 대조되는 색상의 명확한 테두리를 사용해 커서가 잘 보이도록 설정하세요.
페이지의 다른 섹션에 적용된 사용자 지정 커서가 있는 사이트의 예
다음 지침을 참고하세요.
도움말:
상위 요소와 하위 요소에 다른 커서를 추가해 경험을 더욱 맞춤화할 수 있습니다. 방문자가 하위 요소와 상호 작용 시에는 상위 요소에 적용된 커서가 아닌 특정 커서를 보게 됩니다.  

사용자 지정 커서 추가하기

방문자가 페이지, 섹션 또는 요소와 상호 작용 시 표시되는 커서를 변경하세요. 다양한 디자인 중 선택하거나 자신만의 이미지 파일(예: JPG, PNG, SVG)을 업로드할 수 있습니다.
참고:
사이트를 편집하는 동안 커서에 대한 변경 사항은 캔버스에 표시되지 않습니다. 커서가 어떻게 작동하는지 확인하려면 미리보기 또는 라이브 사이트로 이동하세요.

사용자 지정 커서를 추가하려면:

  1. 해당 페이지, 섹션 또는 요소를 선택합니다.
  2. 에디터 오른쪽 상단에서 속성 열기 화살표를 클릭합니다.
  3. 커서 섹션으로 스크롤합니다.
  4. 커서를 추가합니다.
    1. 미디어 아래 + 이미지 또는 .svg 파일 추가를 클릭합니다.
    2. 미디어 관리자에서 제안된 커서 중 하나를 선택하거나 고유 파일을 업로드합니다. 
    3. 준비가 되면 추가를 클릭합니다.
  5. (선택 사항) 사이트 미리보기를 통해 커서가 어떻게 보이는지 확인합니다. 
페이지에 대해 이미 커서가 선택되어 있는 속성 패널의 커서 섹션 스크린샷
다음 단계:
  • 페이지에 커서 적용 시 다른 페이지에 적용을 클릭해 다른 사이트 페이지에 빠르게 커서를 추가할 수 있습니다.
  • 다른 이미지 또는 크기를 선택해 중단점별로 커서를 사용자 지정할 수 있습니다.

사용자 지정 커서 크기 조정하기

디자인 중인 사이트에 이상적으로 보이도록 커서 크기를 변경하세요.
커서 크기는 16x16에서 128x128 픽셀 사이로 유지하는 것이 좋습니다. 커서가 권장 크기보다 큰 경우, 방문자 브라우저에 전혀 표시되지 않을 수 있습니다. 권장 크기보다 작은 경우, 방문자는 커서를 볼 수는 있으나 선명하지 않습니다.
도움말:
미디어 아래 표시되는 미리보기는 라이브 사이트에서 정의한 실제 크기로 커서가 어떻게 보이는지 보여줍니다. 

사용자 지정 커서 크기를 조정하려면:

  1. 해당 페이지, 섹션 또는 요소를 선택합니다.
  2. 에디터 오른쪽 상단에서 속성 열기 화살표를 클릭합니다.
  3. 커서 섹션으로 스크롤합니다.
  4. 크기 아래 슬라이더를 끕니다.
속성 패널의 크기 아래 슬라이더의 커서 섹션 스크린샷

사용자 지정 커서 변경하기

이전에 추가한 사용자 지정 커서는 언제든지 변경할 수 있습니다. 제안 사항 중 하나를 선택하거나 새 파일을 업로드하세요. 

사용자 지정 커서를 변경하려면:

  1. 해당 페이지, 섹션 또는 요소를 선택합니다.
  2. 에디터 오른쪽 상단에서 속성 열기 화살표를 클릭합니다.
  3. 커서 섹션으로 스크롤합니다.
  4. 미디어 변경을 클릭합니다.
  5. 미디어 관리자에서 새 커서를 선택하거나 업로드합니다.
  6. 업데이트를 클릭합니다.
속성 패널의 커서 섹션, 미디어 변경을 클릭해 다른 커서를 선택하는 스크린샷

사용자 지정 커서 제거하기

언제든지 사용자 지정 커서를 제거할 수 있습니다. 이는 방문자가 일반, 기본 커서를 다시 볼 수 있음을 의미합니다.

사용자 지정 커서를 제거하려면:

  1. 해당 페이지, 섹션 또는 요소를 선택합니다.
  2. 에디터 오른쪽 상단에서 속성 열기 화살표를 클릭합니다.
  3. 커서 섹션으로 스크롤합니다.
  4. 미디어 변경 옆 제거 아이콘을 클릭합니다.
속성 패널의 커서 섹션에서 제거 아이콘을 클릭하는 스크린샷

도움이 되었나요?

|