속성 관리
속성 관리는 상품 상세 페이지에 표시할 사양 항목을 만들고 관리하는 기능입니다. 관리자는 속성 그룹을 만들고, 그 안에 속성 항목을 등록한 뒤, 생성된 치환 코드를 상품 상세 템플릿에 넣어 사용할 수 있습니다.
##{ATTRIBUTE_CAMERA_FAMILY}##,##{ATTRIBUTE_CAMERA_FAMILY_ICON}##,##{ATTRIBUTE_CAMERA_FAMILY_VALUE}##같은 토큰은 상품 또는 속성에 입력된 실제 값으로 자동 치환됩니다.
개요
속성은 상품의 상세 사양을 구조적으로 관리하기 위해 사용합니다. 예를 들어 카메라 상품이라면 Camera family, Sensor type, Resolution, Interface speed 같은 항목을 속성으로 만들 수 있습니다.
속성 관리는 크게 두 가지 구조로 나뉩니다.
- 속성 그룹: 관련 속성을 묶는 그룹입니다.
- 속성 정의: 실제로 값을 입력하고 출력할 개별 사양 항목입니다.
속성 그룹
속성 그룹은 관련된 사양 항목들을 묶는 단위입니다. Overview, Feature, Specification, Display, Performance 같은 상품 상세 섹션을 그룹으로 만들 수 있습니다.
| 항목 | 설명 |
|---|---|
| Group Code | 그룹을 구분하는 고유 코드입니다. 예: SPEC, FEATURE, OVERVIEW. |
| Category | 그룹이 사용될 카테고리입니다. 예: iBoard, iShop. |
| Group Name | 사용자에게 보일 그룹 이름입니다. |
| Description | 그룹에 대한 설명입니다. 리치 텍스트 편집기를 사용할 수 있습니다. |
| Display Order | 그룹이 표시되는 순서를 결정합니다. 보통 숫자가 낮을수록 먼저 표시됩니다. |
| Status | 그룹 사용 여부를 설정합니다. |
새 속성 그룹 만들기
- Admin > Attribute > List 메뉴로 이동합니다.
- New group 버튼을 클릭합니다.
- 고유한 Group Code를 입력합니다.
- Category를 선택합니다.
- Group Name을 입력합니다.
- 필요하면 설명을 입력합니다.
- 표시 순서를 입력합니다.
- 사용할 그룹이면 Active를 체크합니다.
- Save Group 버튼을 클릭합니다.
Group Code는 일관성 있게 작성하는 것이 좋습니다. 공백이나 특수문자는 가능한 사용하지 않는 것이 좋습니다.
속성 그룹 목록
Attribute Groups 목록에서는 저장된 속성 그룹을 카테고리별로 확인할 수 있습니다. 이 화면에서 속성 목록으로 이동하거나, 그룹을 수정하거나, 삭제할 수 있습니다.
| 열 | 설명 |
|---|---|
| ID | 그룹의 내부 고유 번호입니다. |
| Code | 그룹 코드입니다. |
| Category | 그룹이 연결된 카테고리입니다. |
| Name | 그룹 이름입니다. |
| Sort | 표시 순서입니다. |
| Status | 그룹의 사용 여부입니다. |
| Manage | Attributes, Edit, Delete 등의 관리 버튼입니다. |
속성 정의
속성 정의는 상품 상세 정보에 실제로 표시될 개별 사양 항목입니다. 각 속성은 하나의 속성 그룹에 속합니다.
예시는 다음과 같습니다.
Group: 0001 - OVERVIEW
Attribute: Camera family
Token: ##{ATTRIBUTE_CAMERA_FAMILY}##속성 정의 목록
Attribute Definitions 화면에서는 선택한 그룹 안에 등록된 모든 속성을 확인할 수 있습니다. 각 속성에는 상품 상세 템플릿에서 사용할 수 있는 치환 토큰이 생성됩니다.
| 열 | 설명 |
|---|---|
| ID | 속성의 내부 고유 번호입니다. |
| Code | 속성 코드입니다. 예: 1-0001. |
| Name | 속성 이름입니다. 예: Camera family. |
| Token | 템플릿에 삽입할 수 있는 치환 토큰입니다. |
| Type | 속성 값의 데이터 타입입니다. 예: text. |
| Unit | 값과 함께 표시할 단위입니다. |
| Sort | 속성이 표시되는 순서입니다. |
| Status | 속성 사용 여부입니다. |
| Manage | Edit, Delete 등의 관리 버튼입니다. |
속성 만들기 또는 수정하기
속성 생성/수정 화면에서는 상품 사양 항목의 세부 정보를 설정합니다.
| 항목 | 설명 |
|---|---|
| Attribute Code | 속성의 고유 코드입니다. 예: 1-0001. |
| Attribute Name | 속성 이름입니다. 예: Camera family. |
| Icon Type | 아이콘을 어떤 방식으로 표시할지 선택합니다. 예: Icon Class. |
| Icon Class | 아이콘 CSS 클래스입니다. 예: fa fa-camera, bi bi-cpu, ti ti-settings. |
| Icon Color | 아이콘 색상입니다. 예: #111111. |
| Icon Preview | 입력한 아이콘이 어떻게 보이는지 미리 확인합니다. |
| Data Type | 값의 데이터 타입입니다. 예: text, number, date, boolean. |
| Unit | 값과 함께 표시할 단위입니다. 예: px, mm, Gbps, MP. |
| Display Order | 속성 표시 순서를 결정합니다. |
| Placeholder | 속성 값을 입력할 때 보여줄 안내 문구입니다. |
| Help Text | 관리자나 사용자에게 보여줄 보조 설명입니다. |
Display Options
Display Options는 속성을 어디에 어떻게 사용할지 결정합니다.
| 옵션 | 설명 |
|---|---|
| Required | 상품 속성 입력 시 필수 항목으로 설정합니다. |
| Filterable | 상품 필터 조건으로 사용할 수 있게 합니다. |
| Comparable | 상품 비교 기능에서 사용할 수 있게 합니다. |
| Visible on Detail | 상품 상세 페이지에 표시합니다. |
| Visible on List | 지원되는 경우 상품 목록에서 표시합니다. |
| Show in Spec Table | 상품 사양표 안에 표시합니다. |
| Active | 속성 사용 여부를 설정합니다. |
속성 코드 생성
Generate code 버튼은 현재 속성 정의를 기준으로 샘플 HTML 코드를 생성합니다. 생성된 코드는 상품 상세 템플릿에 복사해서 사용할 수 있습니다.
생성되는 코드 예시는 다음과 같습니다.
<div class="ipx-spec__row">
##{ATTRIBUTE_CAMERA_FAMILY}##
<div class="ipx-spec__label ipx-spec__label--with-icon">
<i class="##{ATTRIBUTE_CAMERA_FAMILY_ICON}##" style="color:##{ATTRIBUTE_CAMERA_FAMILY_ICON_COLOR}##"></i>
<span>##{ATTRIBUTE_CAMERA_FAMILY}##</span>
</div>
<div class="ipx-spec__value">##{ATTRIBUTE_CAMERA_FAMILY_VALUE}##</div>
</div>치환 토큰 동작 방식
속성 토큰은 자리 표시자입니다. 상품 페이지가 출력될 때 iBoard가 해당 토큰을 실제 입력 값으로 바꿔 줍니다.
| 토큰 | 치환되는 값 |
|---|---|
##{ATTRIBUTE_CAMERA_FAMILY}## |
속성 표시 이름입니다. 예: Camera family. |
##{ATTRIBUTE_CAMERA_FAMILY_VALUE}## |
상품에 입력된 실제 속성 값입니다. 예: Mirrorless. |
##{ATTRIBUTE_CAMERA_FAMILY_ICON}## |
속성에 저장된 아이콘 클래스입니다. 예: fa fa-camera. |
##{ATTRIBUTE_CAMERA_FAMILY_ICON_COLOR}## |
속성에 저장된 아이콘 색상입니다. 예: #111111. |
토큰 이름은 보통 속성 이름을 기준으로 생성됩니다.
예를 들어 Camera family는 ATTRIBUTE_CAMERA_FAMILY 형태의 토큰으로 변환됩니다.
권장 작업 순서
- OVERVIEW 또는 SPEC 같은 속성 그룹을 만듭니다.
- 그룹을 열고 New attribute 버튼을 클릭합니다.
- 속성 코드와 속성 이름을 입력합니다.
- 아이콘이 필요한 경우 Icon Type과 Icon Class를 설정합니다.
- Data Type, Unit, Display Order, Placeholder, Help Text를 설정합니다.
- Display Options를 선택합니다.
- 속성을 저장합니다.
- Generate code 버튼을 클릭합니다.
- 생성된 코드를 복사합니다.
- 상품 상세 템플릿에 붙여 넣습니다.
- 상품별 속성 값을 입력합니다.
- 상품 상세 페이지에서 결과를 확인합니다.
자주 사용하는 구성
| 사용 목적 | 권장 설정 |
|---|---|
| 상품 개요 섹션 | OVERVIEW 그룹을 만들고 브랜드, 모델, 제품군 같은 주요 속성을 추가합니다. |
| 기술 사양표 | SPEC 그룹을 만들고 Show in Spec Table 옵션을 사용합니다. |
| 상품 비교 기능 | 비교에 필요한 속성에 Comparable 옵션을 체크합니다. |
| 상품 필터 기능 | 검색이나 필터링에 필요한 속성에 Filterable 옵션을 체크합니다. |
| 아이콘이 있는 특징 표시 | Icon Class와 Icon Color를 설정하고 생성된 아이콘 토큰을 템플릿에 사용합니다. |
주의사항
- 속성 코드는 그룹 안에서 고유해야 합니다.
- 속성 이름은 토큰 생성에 사용될 수 있으므로 명확하고 일관성 있게 작성하는 것이 좋습니다.
- 속성 이름을 변경하면 생성된 토큰 이름에도 영향을 줄 수 있습니다.
- 토큰이 정상적으로 표시되지 않으면 해당 속성이 존재하고 값이 입력되어 있는지 확인하세요.
- 속성을 삭제하면 관련 사양 출력이 사라지거나 깨질 수 있습니다.
- 속성 정의를 변경한 뒤에는 반드시 상품 상세 페이지를 테스트하세요.
관리 권장 사항
- 속성 이름은 짧고 일관성 있게 작성하세요.
- 관련 속성은 같은 그룹으로 묶으세요.
- Display Order를 사용해서 최종 출력 순서를 관리하세요.
- 아이콘은 가독성을 높일 때만 사용하는 것이 좋습니다.
- 템플릿을 배포한 뒤에는 토큰 이름을 자주 변경하지 않는 것이 좋습니다.
- 속성을 추가하거나 수정한 뒤에는 코드를 다시 생성하는 것이 좋습니다.
속성 관리는 상품 사양 데이터와 상품 상세 템플릿을 분리하기 위한 기능입니다. 이 구조를 사용하면 상품 상세 페이지를 더 체계적으로 관리하고 유지보수할 수 있습니다.