카테고리 트리

개요

카테고리 트리 페이지는 두 개의 주요 섹션으로 나뉘며, 빠르게 시작할 수 있도록 강력한 메뉴에서 빌드 기능이 포함되어 있습니다:

🌳 트리 뷰 (왼쪽 패널)

목적: 이 계층 구조는 매장 전면에 표시되는 빵 부스러기 및 하위 카테고리 블록을 정의합니다. 트리 뷰의 컬렉션은 다음과 같습니다:

• ✅ 빵 부스러기 내비게이션 경로에 표시됨

• ✅ 컬렉션 페이지에서 하위 카테고리로 표시됨

• ✅ 다단계 내비게이션 구조 생성

• ✅ 구조화된 데이터(SEO)에 포함됨

📦 할당되지 않은 카테고리 (오른쪽 패널)

목적: 숨겨진 빵 부스러기 및 하위 카테고리 - 매장에 존재하지만 내비게이션 구조의 일부가 아닌 컬렉션입니다. 할당되지 않은 카테고리의 컬렉션은 다음과 같습니다:

• ❌ 빵 부스러기에 표시되지 않음

• ❌ 하위 카테고리 블록으로 표시되지 않음

• ❌ 내비게이션 계층 구조에 포함되지 않음

• ✅ 여전히 직접 URL을 통해 접근 가능

트리 뷰 - 주요 기능

🔍 검색

위치: 트리 뷰 상단의 검색 상자 기능:

• 이름으로 카테고리를 빠르게 찾기

• 트리를 실시간으로 필터링

• 큰 카테고리 구조 탐색에 도움

🔄 새로 고침 버튼

위치: 오른쪽 상단 목적: Shopify 매장에서 최신 게시된 컬렉션을 가져오고 메뉴를 동기화 사용 시기:

• Shopify 관리자에서 새 컬렉션을 추가한 후

• 매장의 최근 변경 사항을 동기화할 때

• 대규모 재구성을 하기 전에

• 드롭다운에서 메뉴가 보이지 않을 때

🎯 메뉴에서 빌드

위치: 트리 뷰 제목 옆 버튼 그룹 목적: 기존 Shopify 내비게이션 메뉴 구조를 기반으로 카테고리 트리를 자동으로 생성

작동 방식

• 드롭다운에서 메뉴 선택 (메인 메뉴, 푸터 메뉴 등)

• "Build from menu" 버튼 클릭

• 앱이 자동으로:

• - 메뉴에서 모든 게시된 컬렉션을 가져옴

• - 메뉴 계층 구조(부모 → 자식 관계)를 유지함

• - 다단계 중첩(3단계 이상)을 지원함

• - 사용되지 않은 컬렉션을 "할당되지 않음" 패널로 이동

가져오는 항목:

• ✅ 게시된 컬렉션만 - 게시된 컬렉션에 연결된 메뉴 항목만 포함

• ✅ 메뉴 계층 구조 - 부모 → 자식 관계가 유지됨

• ✅ 다단계 중첩 - 깊은 메뉴 구조(3단계 이상)를 지원합니다

제외된 항목:

• ❌ 초안/미발행 컬렉션 - 발행된 컬렉션만 가져옵니다

• ❌ HTTP 링크 - 외부 링크 및 사용자 지정 URL은 건너뜁니다

• ❌ 제품 링크 - 직접 제품 링크는 가져오지 않습니다

• ❌ 페이지 링크 - 페이지 링크는 제외됩니다

• ❌ 기타 메뉴 항목 - 블로그, 검색, 장바구니 링크 등은 가져오지 않습니다

중요 제한 사항:

• ⚠️ 발행된 컬렉션만 - 초안 또는 미발행 컬렉션은 가져오지 않습니다

• ⚠️ 메뉴 링크만 - 메뉴에 있는 컬렉션만 가져옵니다

• ⚠️ 시작점만 - 빌드 후에 맞춤 설정(컬렉션 추가, 재구성 등)이 필요할 수 있습니다

메뉴 캐싱

메뉴는 더 빠른 로딩을 위해 24시간 동안 캐시됩니다. 캐시 타임스탬프는 버튼 그룹 옆에 표시됩니다(예: "Cached 14:30:25").

메뉴를 동기화해야 하나요?

드롭다운에 메뉴가 보이지 않으면 새로 고침 버튼을 클릭하여 Shopify 스토어에서 최신 메뉴를 동기화하세요.

메뉴 드롭다운의 시각적 표시기

• 컬렉션 항목 - 일반 색상, 트리에 동기화 가능

• 비컬렉션 항목(HTTP 링크 등) - 연한 회색과 유형 배지(예: "HTTP")

• 기본 메뉴 - 녹색 "Default" 배지

⬇️ 모두 접기 버튼

위치: 검색 상자 옆 목적: 확장된 모든 카테고리를 접어 최상위 항목만 표시 사용 사례:

• 주요 카테고리 개요 확인

• 복잡한 트리를 빠르게 탐색

• 구조 변경 전

⬆️ 모두 펼치기 버튼

위치: 모두 접기 옆 목적: 모든 카테고리를 펼쳐 전체 계층 구조 표시 사용 사례:

• 전체 카테고리 구조 보기

• 깊게 중첩된 항목 찾기

• 전체 내비게이션 한 번에 검토

드래그 앤 드롭 작업

트리는 카테고리 정리를 위한 강력한 드래그 앤 드롭 기능을 지원합니다.

다중 선택

여러 항목 선택 방법:

• 첫 번째 항목 선택: 카테고리 클릭

• 항목 추가: - ⌘/Ctrl + 클릭 = 개별 항목 추가 - Shift + 클릭 = 항목 범위 선택

• 함께 드래그: 선택한 항목 중 아무거나 드래그하면 모두 함께 이동

카테고리 이동

단일 항목:

• 카테고리를 클릭하고 누르기

• 새 위치로 드래그

• 놓기 위치: - 항목 사이 = 같은 수준(형제) - 항목 위에 = 해당 항목의 자식(중첩) - 중첩된 상태에서 왼쪽으로 드래그 = 중첩 해제(한 단계 위로 이동)

여러 항목:

• 여러 카테고리 선택(⌘/Ctrl + 클릭)

• 선택한 항목 중 아무거나 드래그

• 선택한 모든 항목이 함께 이동

• 그룹으로 놓기

시각적 피드백

• 드래그 표시선은 항목이 놓일 위치를 보여줌

• 대상 상위 카테고리에 마우스 오버 강조 표시

• 들여쓰기 수준은 중첩 깊이를 나타냄

할당되지 않은 카테고리 패널

목적 및 동작

이 패널의 컬렉션은 다음에서 숨겨집니다:

• Breadcrumbs

• 하위 카테고리 블록

• 카테고리 계층 구조

• 구조화된 데이터

컬렉션을 할당하지 않은 상태로 두는 이유는?

• 내부/관리자 전용 컬렉션

• 현재 활성화되지 않은 시즌 컬렉션

• 테스트 컬렉션

• 기타 용도로 사용되는 컬렉션(할인, 번들 등)

트리 뷰에 추가하기

방법 1: 트리에서 카테고리가 선택된 경우

• 트리 뷰(왼쪽 패널)에서 카테고리를 클릭하여 선택합니다

• 할당되지 않은 패널에서 하나 이상의 컬렉션을 선택합니다

• 추가를 클릭하거나 컬렉션을 드래그합니다

• → 컬렉션이 선택된 카테고리의 하위 항목이 됩니다

방법 2: 카테고리가 선택되지 않은 경우

• 트리 뷰에서 아무것도 선택되어 있지 않은지 확인합니다

• 할당되지 않은 패널에서 하나 이상의 컬렉션을 선택합니다

• 추가를 클릭하거나 컬렉션을 드래그합니다

• → 컬렉션이 트리의 맨 아래(루트 레벨)에 추가됩니다

할당되지 않은 항목 검색

위치: 할당되지 않은 패널 상단의 검색 상자 기능:

• 할당되지 않은 컬렉션 목록 필터링

• 특정 컬렉션을 빠르게 찾기

• 개수 표시: "할당되지 않은 컬렉션 27개 표시 중"

할당되지 않은 항목 새로고침

아이콘: 검색 옆의 새로고침 아이콘 목적: Shopify에서 할당되지 않은 컬렉션 목록을 업데이트합니다

키보드 단축키

• ⌘/Ctrl + 클릭 = 다중 선택 카테고리

• Shift + 클릭 = 카테고리 범위 선택

• Drag = 카테고리 이동

• Click collapse icon = 카테고리 하위 항목 토글

• Hold ⌘/Ctrl + 클릭 축소 = 모든 하위 항목 재귀적으로 축소

변경 사항 저장

자동 저장: 변경 사항은 자동으로 저장되지 않습니다 수동 저장:

• 오른쪽 하단의 "저장" 버튼을 클릭하세요

• 모든 변경 사항이 함께 적용됩니다

• 업데이트를 보려면 스토어프론트를 새로고침하세요

사용자 지정 컬렉션 표시 이름

트리에서 사용하는 모든 컬렉션에 대해 사용자 지정 표시 이름을 설정할 수 있습니다. 이를 통해 실제 Shopify 컬렉션 이름을 변경하지 않고도 Breadcrumbs 및 하위 카테고리에 더 깔끔하고 짧거나 고객 친화적인 레이블을 표시할 수 있습니다.

• ✅ 내부/관리자 용도로 원래 Shopify 컬렉션 제목 유지

• ✅ 스토어프론트 내비게이션(브레드크럼 + 하위 카테고리)에 다른 레이블 표시

• ✅ SEO 친화적인 문구, 약어 또는 일관된 명명에 유용

표시 이름 편집 방법

카테고리 트리에서 컬렉션을 클릭하고 표시 이름을 인라인으로 편집하세요. 참고:

• 변경 사항은 저장을 클릭할 때 저장됩니다(트리 구조 변경과 동일)

• 표시 이름을 비워두면 사용자 지정 이름이 제거되고(컬렉션 제목으로 대체) 기본값으로 돌아갑니다

• 권장: 모바일 UX 향상을 위해 짧게 유지하세요(예: 20-40자)

스토어프론트에서의 표시 방식

표시 이름이 있으면 스토어프론트 UI가 원래 제목보다 표시 이름을 우선합니다. 표시 이름이 설정되지 않은 경우 앱은 Shopify 컬렉션 제목을 사용합니다. 영향을 받는 부분:

• 컬렉션 레벨의 Breadcrumb 레이블

• 하위 카테고리 블록 제목/링크(테마에서 활성화된 경우)

카테고리 구조 예시

메뉴에서 빌드 예시

빌드 전: 귀하의 Shopify Main Menu:

Main Menu
├─ Women (COLLECTION)
│  ├─ Dresses (COLLECTION)
│  │  ├─ Summer Dresses (COLLECTION)
│  │  └─ Evening Dresses (COLLECTION)
│  └─ Tops (COLLECTION)
├─ Men (COLLECTION)
│  ├─ Shirts (COLLECTION)
│  └─ Pants (COLLECTION)
├─ About Us (HTTP) ← Skipped
└─ Contact (HTTP) ← Skipped

"Build from menu" 클릭 후: 귀하의 Categories Tree:

📁 Women
  └─ 👗 Dresses
      └─ ☀️ Summer Dresses
      └─ 🌙 Evening Dresses
  └─ 👕 Tops

📁 Men
  └─ 👔 Shirts
  └─ 👖 Pants

결과:

• 계층 구조가 유지된 모든 컬렉션 항목이 가져와짐

• HTTP 링크(About Us, Contact)는 자동으로 건너뜀

• 드래그 앤 드롭으로 추가 맞춤 설정 가능

패션 스토어 예시

📁 Women
  └─ 👗 Dresses
      └─ ☀️ Summer Dresses
      └─ 🌙 Evening Dresses
      └─ 👔 Casual Dresses
  └─ 👕 Tops
  └─ 👖 Bottoms

📁 Men
  └─ 👔 Shirts
  └─ 👖 Pants
  └─ 🧥 Outerwear

📁 Sale
  └─ 50% Off
  └─ Clearance

전자제품 스토어 예시

📁 Computers
  └─ 💻 Laptops
      └─ Gaming Laptops
      └─ Business Laptops
  └─ 🖥️ Desktops
  └─ ⌨️ Accessories

📁 Smartphones
  └─ 📱 iPhone
  └─ 📱 Samsung
  └─ 📱 Google Pixel

모범 사례

Build from Menu로 시작하기

추천 워크플로우:

• 먼저 Build from menu 사용 - 이미 내비게이션 메뉴가 있다면 Build from Menu를 사용해 빠르게 시작하세요

• 구조 검토 - 가져온 계층 구조가 적절한지 확인하세요

• 필요에 따라 맞춤 설정 - 누락된 컬렉션 추가, 재구성 또는 깊이 조정

• 저장 및 테스트 - 변경 사항을 저장하고 스토어프론트에서 Breadcrumbs를 확인하세요

장점:

• 수동 설정에 비해 시간 절약

• 기존 메뉴 구조 보존

• 맞춤 설정을 위한 견고한 출발점 제공

간단하게 유지하기

좋은 구조:

• 최대 2-3단계 깊이

• 단계별 5-7개 카테고리

• 명확하고 설명적인 이름

나쁜 구조:

• 너무 깊은 중첩 단계(혼란스러움)

• 한 번에 너무 많은 카테고리(압도적임)

• "기타" 또는 "잡다한" 같은 모호한 이름

고객 관점에서 조직하기

고객처럼 생각하세요:

• 고객은 어떻게 제품을 검색하나요?

• 고객의 사고 모델은 무엇인가요?

• 고객에게 가장 중요한 것은 무엇인가요?

패션 예시: ✅ 성별 우선 (Women > Dresses) ❌ 색상 우선 (Red > Women's Items) 전자제품 예시: ✅ 기기 유형별 (Laptops > Gaming) ❌ 브랜드 우선 (Apple > All Products)

일관된 명명법 사용

해야 할 것:

• Women's Dresses

• Men's Shirts

• Kids' Shoes

하지 말아야 할 것:

• Dresses for Women

• Shirts (Men)

• Children Footwear

폭과 깊이의 균형 맞추기

폭(평면): 작은 카탈로그에 적합

📁 Dresses
📁 Tops
📁 Pants
📁 Accessories

깊이(중첩): 큰 카탈로그에 적합

📁 Women
  └─ Dresses
  └─ Tops
  └─ Pants

피해야 할 일반적인 실수

❌ 너무 깊은 계층 구조

나쁨:

Home › Fashion › Women › Clothing › Dresses › Casual › Summer › Floral

좋음:

Home › Women › Dresses › Summer Dresses

❌ 일관성 없는 명명

나쁨:

• Women's Dresses

• Tops for Women

• Female Accessories

• Women Shoes

좋음:

• Women's Dresses

• Women's Tops

• Women's Accessories

• Women's Shoes

❌ 중복되는 카테고리

나쁨:

📁 Sale Items
📁 Clearance
📁 Discounted Products

좋음:

📁 Sale
  └─ 50% Off
  └─ Clearance

다양한 매장 규모를 위한 팁

소규모 매장 (< 100개 상품)

단순하고 평면적으로 유지하세요:

📁 New Arrivals
📁 Dresses
📁 Tops
📁 Accessories
📁 Sale

중간 규모 매장 (100-1000개 상품)

한 단계 깊이를 추가하세요:

📁 Women
  └─ Dresses
  └─ Tops
📁 Men
  └─ Shirts
  └─ Pants
📁 Sale

대규모 매장 (1000개 이상 상품)

전체 계층 구조를 사용하세요:

📁 Women
  └─ Clothing
      └─ Dresses
      └─ Tops
  └─ Accessories
📁 Men
  └─ Clothing
  └─ Accessories

자주 묻는 질문