Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents

1. 카테고리 관리

1.1 정의

  • 카테고리는 정형화된 구조로 관리되며 전시카테고리를 기준으로 전시된다.

1.2 유형

  • 카테고리는 트리 구조를 가지며 최대 4Depth로 구성된다.

...

유형명

...

설명

...

대분류 카테고리

...

카테고리를 구성하는 최상위 그룹

...

중분류 카테고리

...

대 카테고리의 하위 카테고리

...

소분류 카테고리

...

중 카테고리의 하위 카테고리

...

세분류 카테고리

...

제일 하위의 카테고리를 의미하며 상품을 할당한다.

1.3 정책

1.3.1 표준카테고리 정책

  • 상품속성에 따른 분류체계이며 상품등록시 속성 기준정보로 활용한다.

  • 통합하거나 해체할 수 없는 기본 단위이다.

  • 반드시 하나의 상품은 하나의 표준카테고리와 1:1 매칭되어야 한다.

  • 지정된 관리자 이외의 공급사, MD 등 다른 운영자가 추가하거나 삭제해서는 안된다.

  • 상품그룹으로 관리되며 전시카테고리와 상품단위가 아닌 그룹단위로 연동한다.

1.3.2 전시카테고리 정책

  • 실제 서비스에 노출되는 카테고리로 운영자에 의해 관리된다.

  • 하나의 상품이 여러 개의 전시카테고리를 가질 수 있다.

  • 운영자 필요에 따라 추가, 수정, 삭제가 가능하다.

  • 전시카테고리의 우선순위를 설정할 수 있다.

1.3.3 전시상품 목록 정책

  • 전시카테고리에 매핑되는 상품목록으로 운영자에 의해 관리된다.

  • 표준카테고리에 있는 상품을 그룹단위로 추가할 수 있다.

  • 운영자 필요에 따라 상품을 전시/비전시 처리할 수 있다.

1.3.4 상품목록 노출 정책

  • 사용자 화면에서는 전시상품목록에 대표단품이 노출된다.

  • 대표단품이 품절인 경우 다음순위의 단품이 노출된다.

  • 상품이 전체품절인 경우에도 전시상품목록에 노출된다.

  • 상품 가격에는 정상가와 최종 할인가가 노출된다.

1.4 관리

1.4.1 관리항목

...

관리항목

...

설명

...

카테고리명

...

전시카테고리명을 텍스트로 입력한다.

...

메뉴 사용여부

...

메뉴사용여부가 Y이면 FO화면에 LNB 카테고리 메뉴에 노출된다.

...

사용여부

...

사용중인 매장은 Y로 선택하여 운영한다.

사용여부를 N으로 선택하면 전시여부가 Y라도 FO에 비노출 된다.

...

전시여부

...

전시여부가 Y이면 FO 화면에 노출된다.

...

대표이미지

...

사용자화면에 노출될 카테고리별 대표 이미지를 등록한다.

...

상품등록 가능여부

...

상품등록 여부를 N으로 선택하면 계속해서 하위 Depth의 카테고리를 추가할 수 있다.

상품등록 여부를 Y로 선택하면 상품등록이 가능하며 하위 Depth를 추가할 수 없다.

최하위가 아닌 카테고리를 Y로 선택후 저장시 저장이 불가하다.

...

상품등록방식

...

전시카테고리에 연결할 상품을 등록한다.

  • 상품필터 : 선택한 표준 카테고리와 매핑하여 사이트 상품을 등록

  • 상품쿼리 : 전체 표준 카테고리와 매핑하여 사이트 상품을 등록

  • 상품등록 : 표준상품을 직접 검색/선택하여 등록

  • 대량등록 : 다수의 상품을 엑셀로 업로드

2. 전시관리

2.1 유형

...

유형명

...

설명

...

메인

...

사용자 화면 첫 진입시 보여지는 화면으로 모든 메뉴의 콘텐츠를 아우르는 인덱스형 전시화면이다.

...

핫세일

...

세일을 진행하고 있는 상품들을 보여주는 전시화면이다. ( ❖ 데모 버전: “타임세일”만 진행 )

...

베스트

...

사용자가 선호하는 상품을 유형별로 분류하여 보여주는 전시화면이다.

2.2 정책

2.2.1 메인 정책

  • 메인 화면의 ‘타임세일’ 상품 영역에는 할인정보를 직관적으로 확인할 수 있도록 D-day할인율을 표기한다.

2.2.2 핫세일 정책

  • 세일 상품을 유형별로 구분하여 상품 진열형으로 보여준다.

  • 세일 유형별로 노출정책이 아래와 같이 적용된다.

...

항목

...

기준

...

오늘만 특가

...

프로모션 관리에서 운영자가 1일 단위로 등록한 금일 특가상품 8개 노출된다.

...

타임세일

...

판촉/이벤트에서 정의된 타임세일 상품이 노출된다.

2.2.3 베스트 정책

  • 기준 기간별 베스트 상품을 노출한다.

  • 구매수량/구매금액 모두 집계 ( ❖ 데모 버전: “구매수량”만 집계 )

...

상품정렬 항목

...

기준

...

실시간 베스트

...

  • 시간 기준 24시간동안 순판매수량 높은순

  • 전체/대카테고리 기준 조회 TOP 100개 베스트 상품 조회 가능

...

주간 베스트

...

  • 전일 기준 지난 7일동안 판매량 높은순

  • 전체/대카테고리 기준 조회 TOP 100개 베스트 상품 조회 가능

...

스테디 셀러

...

  • 사이트 판매 시작일이후 누적 판매수량 높은순

  • 전체/대카테고리 기준 조회 TOP 100개 베스트 상품 조회 가능

❖ 베스트 페이지 데이터 계산 기준 예시

현재 2022년 2월 9일(수) 11:20이라고 가정한다면, 순수판매량 계산 일자 기준은 다음과 같다.

- 실시간 베스트 : 2022.02.08 11:00 ~ 2022.02.09 11:00 / 24 hours

- 주간 베스트 : 2022.02.02 ~ 2022.02.09 / 1 week

- 스테디 셀러 : SINCE 2022 ~ (사이트 오픈 후, 누적 데이터)

2.3 관리항목

  • 매장의 전시여부가 Y이면 FO화면에 노출되므로 운영자 확인 없이 노출되지 않도록 최초 생성시 전시여부를 N상태로 생성한다. ( ❖ 데모 버전: “판매사/공급사” 어드민 없음 )

...

관리항목

...

설명

...

메뉴 사용여부

...

메뉴사용여부가 Y이면 FO LNB 카테고리 메뉴에 노출된다.

...

사용여부

...

사용중인 매장은 Y로 선택하여 운영한다.

사용여부를 N으로 선택하면 전시여부가 Y라도 FO에 비노출 된다.

...

전시여부

...

전시여부가 Y이면 FO 화면에 노출된다.

3. 이벤트/기획전

3.1 이벤트 정책

  • 신규이벤트는 전시시작일이 가장 최근인 이벤트를 노출한다.

  • 마감임박 이벤트는 전시종료일이 가장 최근인 이벤트를 노출한다.

...

항목

...

기준

...

할인 이벤트

...

할인 상품등을 매핑하여 전시하는 이벤트이다.

...

일반 이벤트

...

단순한 이미지 등록을 통한 정보성 이벤트이다.

...

사은품 이벤트

...

상품 지정조건에 따라 구매시 사은품이 제공되는 이벤트이다.

...

즉시지급 이벤트

...

퀴즈, 댓글 등의 이벤트를 통하여 쿠폰 및 포인트를 즉시 지급하는 이벤트이다.

...

확률 이벤트

...

확률을 설정하여 룰렛 등의 이벤트를 통하여 쿠폰 및 포인트를 즉시 지급하는 이벤트이다.

...

추첨 이벤트

...

댓글 등의 이벤트를 통하여 즉시 참여되며, 추후에 랜덤 추첨이 가능한 이벤트이다.

3.2 기획전 정책

  • 신규 기획전는 전시시작일이 가장 최근인 기획전을 노출한다.

  • 관리자는 홈메인 페이지 저작 기능(Builder)을 통해 홈메인에 노출시킬 기획전을 직접 설정할 수 있다.

  • 노출 기간이 지난(종료) 기획전은 자동으로 비노출 한다.

  • 기획전 등록 시, 기획전 컨텐츠 저작 기능(Builder)을 사용 할 수 있다.

  • 기획전 등록 시, 등록된 사이트 상품을 그룹핑하여 노출 할 수 있다.

4. 화면 전시정책

4.1 환경정의

4.1.1 정의

  • 서비스를 이용함에 있어 사용자의 접속환경을 고려하여 최적의 화면으로 서비스를 제공하기 위해 화면사이즈와 OS 및 브라우저 범위를 정의한다.

4.1.2 유형

  • 접속환경에 따라 아래와 같은 기준으로 정의한다.

...

유형명

...

설명

...

시스템

...

사용자화면 혹은 운영어드민을 구분한다.

...

디바이스

...

PC 및 노트북, 태블릿 PC 그리고 스마트폰 등 서비스에 접속하는 H/W를 구분한다.

...

운영체제 및 버전

...

접속 가능한 운영체계 및 버전을 구분한다.

...

브라우저 및 버전

...

접속 가능한 브라우저 및 버전을 구분한다.

4.1.3 정책

  • 모바일의 경우 휴대폰 교체시기를 고려하여 출시 3년이상 전체 점유율 1%이하 OS 및 브라우저는 적용하지 않는다.

4.1.4 관리

  • 신규 운영체계 및 브라우저 버전이 출시될 경우 서비스 영향도 파악을 위한 전수테스트를 시행한다.

    서비스 범위는 UI가이드로 정의한다.

4.2 공통영역

4.2.1 정의

  • PC, MO에서 공통적으로 적용되는 UI가이드에 대한 정책을 기술한다.

4.2.2 유형

  • 화면을 구성하는 유형을 아래와 같이 정의한다.

...

유형명

...

설명

...

네비게이션

...

서비스를 이동하는 방식에 대한 정의를 의미한다.

...

레이아웃

...

사이트의 정보와 내용을 보다 쉽게 인지하고 기능을 수행하기 위한 정보 배치를 의미한다.

...

타이틀 및 용어

...

메뉴, 카테고리, 버튼명이나 안내글 등을 일관성있게 제공하고자 하는 규칙이다.

...

UI 요소

...

사용자 인터페이스의 일부인 메뉴 또는 누름 버튼과 같은 컨트롤에 대한 정의이다.

...

인터랙션

...

서비스를 이용하면서 Task 수행에 대한 상호작용을 정의한다.

4.2.3 네비게이션

  • 고객이 어떤 위치에 있는지 화면의 이름을 명시한다. 화면명은 항상 화면 상단에 나타나며 중앙 정렬 혹은 왼쪽 정렬이 가능하며 배너로 표현할 수 있다.

  • 최상위 단계의 메뉴로 바로 이동할 수 있는 기능을 상단에 배치한다.

  • 고객이 이동했던 경로를 표시한다. PC의 경우 breadcrumb으로 고객의 접속 경로를 확인할 수 있고 MC의 경우 타이틀과 이전버튼을 통한 History Back으로 확인할 수 있도록 한다.

  • 정보의 계층이 너무 깊으면 고객은 다른 정보를 찾기 위한 이동방법이 복잡해지기 쉽기 때문에 PC/MC 모두 3depth 이상 깊이는 지양한다. 3Depth이상의 깊이가 있을 경우 LNB를 두어 해당 위치를 안내한다

4.2.4 레이아웃

  • PC의 우측 Sky Scrapper는 고객 개인화 기능을 제공하며 좌측 Sky Scrapper는 마케팅 콘텐츠를 노출한다.

  • MC의 페이지 스크롤 시 이동성을 위해 항상 맨위로 이동 할 수 있는 TOP 버튼을 제공한다.

  • 콘텐츠 배치 순서는 좌측에서 우측, 위에서 아래 방향으로 배치된다.

  • 푸터는 최하단에 위치한다.

4.2.5 타이틀 및 용어

  • 타이틀은 텍스트의 경우 개발텍스트를 사용하고 이미지의 경우 배너형태로 표현한다.

  • 화면 타이틀 영역은 비교적 좁은 영역에 표현되므로 글자 수를 제한한다. 필요에 따라서 서브 타이틀로 해당 카테고리 혹은 콘텐츠 영역을 부가설명할 수 있다.

  • 탭형식으로 표현된 경우 선택된 메뉴표현으로 타이틀을 대신할 수 있다.

  • 용어 및 폰트는 인지와 가독성을 우선하며 서비스 전반의 일관성을 유지한다.

4.2.6 UI 요소

  • UI요소는 PC와 MC 모두 적용될 수 있도록 마우스 클릭과 터치 제스처에서 모두 용이한 엘리먼트로 구성한다.

  • 액션이 필요한 기능은 마우스나 터치 시 고객행태에 기반하여 오른쪽에서 왼쪽으로 중요한 기능을 배치한다.

4.2.7 인터랙션

  • 데이터를 로딩하고 있을 때 현재 진행 중이라는 신호를 사용자에게 제공한다.

  • 하나의 Task를 완료할 때 결과에 대한 피드백을 명확히 한다. Task가 수행되지 않았을 경우 어떤 사유로 수행되지 않았는지 명시한다.

4.3 관리

  • 전체 서비스의 UX/UI 일관성을 위해 정책기준을 변경하지 않는다.

  • UI요소는 UI가이드로 정의한다.

5. 상품목록

5.1 정의

  • Mobile 화면에서 어떤 방식으로 Tablet 화면을 확장 시킬지 정의한다.

5.2 유형

5.2.1 PC 일반 상품목록

  • PC에서 전시되는 자동화 매장(카테고리, 검색결과 등) 및 전시코너의 상품정보를 노출하는 모든 영역을 정의한다.

    PC의 경우 4단 그리드를 기준으로 정의한다.

5.2.2 MC 일반 상품목록

  • MC에서 전시되는 자동화 매장(카테고리, 검색결과 등) 및 전시코너의 상품정보를 노출하는 모든 영역을 정의한다.

  • MC의 경우 2단 그리드를 기준으로 정의한다. MC에서 확장되는 Tablet화면의 경우 3단 그리드를 준용한다.

5.3 정책

5.3.1 레이아웃 구조

  • 상품목록이 전시되는 레이아웃은 카테고리명, 필터, 소팅 및 보기방식, 상품유닛, 페이징 순으로 구성된다.

5.3.2 전시필터

...

전시필터는 공통필터와 옵션필터로 정의된다.

...

공통필터는 하위 카테고리, 가격대, 혜택, 상품속성, 품절제외로 정의되며 상품목록 상단에서 노출된다.

...

옵션필터는 상품의 옵션을 통해 노출되며 카테고리 특성에 맞춰 세분화되어 노출된다. 공통필터를 통해 노출된 하위 카테고리 선택 시 해당 하위 카테고리의 옵션항목을 조회 후 가변필터에 노출된다.

...

Table of Contents

...

1. 카테고리 관리

1.1 정의

  • 카테고리는 정형화된 구조로 관리되며 전시카테고리를 기준으로 전시된다.

1.2 유형

  • 카테고리는 트리 구조를 가지며 최대 4Depth로 구성된다.

유형명

설명

대분류 카테고리

카테고리를 구성하는 최상위 그룹

중분류 카테고리

대 카테고리의 하위 카테고리

소분류 카테고리

중 카테고리의 하위 카테고리

세분류 카테고리

제일 하위의 카테고리를 의미하며 상품을 할당한다.

1.3 정책

1.3.1 표준카테고리 정책

  • 상품속성에 따른 분류체계이며 상품등록시 속성 기준정보로 활용한다.

  • 통합하거나 해체할 수 없는 기본 단위이다.

  • 반드시 하나의 상품은 하나의 표준카테고리와 1:1 매칭되어야 한다.

  • 지정된 관리자 이외의 공급사, MD 등 다른 운영자가 추가하거나 삭제해서는 안된다.

  • 상품그룹으로 관리되며 전시카테고리와 상품단위가 아닌 그룹단위로 연동한다.

1.3.2 전시카테고리 정책

  • 실제 서비스에 노출되는 카테고리로 운영자에 의해 관리된다.

  • 하나의 상품이 여러 개의 전시카테고리를 가질 수 있다.

  • 운영자 필요에 따라 추가, 수정, 삭제가 가능하다.

  • 전시카테고리의 우선순위를 설정할 수 있다.

1.3.3 전시상품 목록 정책

  • 전시카테고리에 매핑되는 상품목록으로 운영자에 의해 관리된다.

  • 표준카테고리에 있는 상품을 그룹단위로 추가할 수 있다.

  • 운영자 필요에 따라 상품을 전시/비전시 처리할 수 있다.

1.3.4 상품목록 노출 정책

  • 사용자 화면에서는 전시상품목록에 대표단품이 노출된다. ( ❖ 데모 버전: 등록최신순 정렬 )

  • 대표단품이 품절인 경우 다음순위의 단품이 노출된다.

  • 상품이 전체품절인 경우에도 전시상품목록에 노출된다.

  • 상품 가격에는 정상가와 최종 할인가가 노출된다.

1.4 관리

1.4.1 관리항목

관리항목

설명

카테고리명

전시카테고리명을 텍스트로 입력한다.

메뉴 사용여부

GNB 메뉴 유형을 사이트카테고리 로 설정하여 등록하면, GNB에 카테고리 메뉴가 노출된다.

사용하지 않을 경우 사용여부를 N으로 변경하여 관리한다.

카테고리 사용여부

사용중인 카테고리는 Y로 선택하여 운영/노출한다.

( ❖ 데모 버전: 전시여부 별도 관리 없음 )

대표이미지

사용자화면에 노출될 카테고리별 대표 이미지를 등록한다.

등록한 카테고리 아이콘 이미지는 홈메인 카테고리 배너에 사용된다.

상품등록 가능여부

상품등록 여부를 N으로 선택하면 계속해서 하위 Depth의 카테고리를 추가할 수 있다.

상품등록 여부를 Y로 선택하면 상품등록이 가능하며 하위 Depth를 추가할 수 없다.

최하위가 아닌 카테고리를 Y로 선택후 저장시 저장이 불가하다.

( ❖ 데모 버전: 상품등록 가능여부 별도 관리 없음 )

  • 전시 카테고리 상품설정 여부에 상관없이, Leaf 카테고리일 경우 상품목록 페이지로 노출

  • Leaf 카테고리가 아닌 경우 카테고리 페이지로 노출

상품등록방식

1. 표준카테고리에 연결할 표준 상품을 등록한다.

  • 상품등록 : 단일/세트/그룹 상품 등록

  • 대량등록 : 다수의 상품을 엑셀로 한번에 업로드

2. 전시카테고리에 연결할 사이트 상품을 등록한다.

  • 상품필터 : 선택한 표준 카테고리와 매핑하여 사이트 상품을 등록

  • 상품쿼리 : 전체 표준 카테고리와 매핑하여 사이트 상품을 등록

  • 상품선택 : 표준상품을 직접 검색/선택하여 등록

...

2. 전시관리

2.1 유형

유형명

설명

메인

사용자 화면 첫 진입시 보여지는 화면으로 모든 메뉴의 콘텐츠를 아우르는 인덱스형 전시화면이다.

핫세일

세일을 진행하고 있는 상품들을 보여주는 전시화면이다. ( ❖ 데모 버전: “타임세일”만 진행 )

베스트

사용자가 선호하는 상품을 유형별로 분류하여 보여주는 전시화면이다.

2.2 정책

2.2.1 메인 정책

  • 메인 화면의 ‘타임세일’ 상품 영역에는 할인정보를 직관적으로 확인할 수 있도록 D-day할인율을 표기한다.

2.2.2 핫세일 정책

  • 세일 상품을 유형별로 구분하여 상품 진열형/배너형으로 노출한다.

  • 세일 유형별로 노출정책이 아래와 같이 적용된다.

항목

기준

오늘만 특가

프로모션 관리에서 운영자가 1일 단위로 등록한 금일 특가상품 8개 노출된다.

타임세일

판촉/이벤트에서 정의된 타임세일 상품이 노출된다.

2.2.3 베스트 정책

  • 기준 기간별 베스트 상품을 노출한다.

  • 구매수량/구매금액 모두 집계 ( ❖ 데모 버전: “구매수량”만 집계 )

상품정렬 항목

기준

실시간 베스트

  • 시간 기준 24시간동안 순판매수량 높은순

  • 전체/대카테고리 기준 조회 TOP 100개 베스트 상품 조회 가능

주간 베스트

  • 전일 기준 지난 7일동안 판매량 높은순

  • 전체/대카테고리 기준 조회 TOP 100개 베스트 상품 조회 가능

스테디 셀러

  • 사이트 판매 시작일이후 누적 판매수량 높은순

  • 전체/대카테고리 기준 조회 TOP 100개 베스트 상품 조회 가능

❖ 베스트 페이지 데이터 계산 기준 예시

현재 2022년 2월 9일(수) 11:20이라고 가정한다면, 순수판매량 계산 일자 기준은 다음과 같다.

- 실시간 베스트 : 2022.02.08 11:00 ~ 2022.02.09 11:00 / 24 hours

- 주간 베스트 : 2022.02.02 ~ 2022.02.09 / 1 week

- 스테디 셀러 : SINCE 2022 ~ (사이트 오픈 후, 누적 데이터)

2.3 관리항목

  • 매장의 전시여부가 Y이면 FO화면에 노출되므로 운영자 확인 없이 노출되지 않도록 최초 생성시 전시여부를 N상태로 생성한다. ( ❖ 데모 버전: “판매사/공급사” 어드민 없음 )

관리항목

설명

메뉴 사용여부

메뉴사용여부가 Y이면 FO LNB 카테고리 메뉴에 노출된다.

사용여부

사용중인 매장은 Y로 선택하여 운영한다.

사용여부를 N으로 선택하면 전시여부가 Y라도 FO에 비노출 된다.

전시여부

전시여부가 Y이면 FO 화면에 노출된다.

...

3. 이벤트/기획전

3.1 이벤트 정책

  • 신규이벤트는 전시시작일이 가장 최근인 이벤트를 노출한다.

  • 마감임박 이벤트는 전시종료일이 가장 최근인 이벤트를 노출한다.

항목

기준

할인 이벤트

할인 상품등을 매핑하여 전시하는 이벤트이다.

일반 이벤트

단순한 이미지 등록을 통한 정보성 이벤트이다.

사은품 이벤트

상품 지정조건에 따라 구매시 사은품이 제공되는 이벤트이다.

즉시지급 이벤트

퀴즈, 댓글 등의 이벤트를 통하여 쿠폰 및 포인트를 즉시 지급하는 이벤트이다.

확률 이벤트

확률을 설정하여 룰렛 등의 이벤트를 통하여 쿠폰 및 포인트를 즉시 지급하는 이벤트이다.

추첨 이벤트

댓글 등의 이벤트를 통하여 즉시 참여되며, 추후에 랜덤 추첨이 가능한 이벤트이다.

3.2 기획전 정책

  • 신규 기획전는 전시시작일이 가장 최근인 기획전을 노출한다.

  • 관리자는 홈메인 페이지 저작 기능(Builder)을 통해 홈메인에 노출시킬 기획전을 직접 설정할 수 있다.

  • 노출 기간이 지난(종료) 기획전은 자동으로 비노출 한다.

  • 기획전 등록 시, 기획전 컨텐츠 저작 기능(Builder)을 사용 할 수 있다.

  • 기획전 등록 시, 등록된 사이트 상품을 그룹핑하여 노출 할 수 있다.

...

4. 화면 전시정책

4.1 환경정의

4.1.1 정의

  • 서비스를 이용함에 있어 사용자의 접속환경을 고려하여 최적의 화면으로 서비스를 제공하기 위해 화면사이즈와 OS 및 브라우저 범위를 정의한다.

4.1.2 유형

  • 접속환경에 따라 아래와 같은 기준으로 정의한다.

유형명

설명

시스템

사용자화면 혹은 운영어드민을 구분한다.

디바이스

PC 및 노트북, 태블릿 PC 그리고 스마트폰 등 서비스에 접속하는 H/W를 구분한다.

운영체제 및 버전

접속 가능한 운영체계 및 버전을 구분한다.

브라우저 및 버전

접속 가능한 브라우저 및 버전을 구분한다.

4.1.3 정책

  • 모바일의 경우 휴대폰 교체시기를 고려하여 출시 3년이상 전체 점유율 1%이하 OS 및 브라우저는 적용하지 않는다.

4.1.4 관리

  • 신규 운영체계 및 브라우저 버전이 출시될 경우 서비스 영향도 파악을 위한 전수테스트를 시행한다.

    서비스 범위는 UI가이드로 정의한다.

4.2 공통영역

4.2.1 정의

  • PC, MO에서 공통적으로 적용되는 UI가이드에 대한 정책을 기술한다.

4.2.2 유형

  • 화면을 구성하는 유형을 아래와 같이 정의한다.

유형명

설명

네비게이션

서비스를 이동하는 방식에 대한 정의를 의미한다.

레이아웃

사이트의 정보와 내용을 보다 쉽게 인지하고 기능을 수행하기 위한 정보 배치를 의미한다.

타이틀 및 용어

메뉴, 카테고리, 버튼명이나 안내글 등을 일관성있게 제공하고자 하는 규칙이다.

UI 요소

사용자 인터페이스의 일부인 메뉴 또는 누름 버튼과 같은 컨트롤에 대한 정의이다.

인터랙션

서비스를 이용하면서 Task 수행에 대한 상호작용을 정의한다.

4.2.3 네비게이션

  • 고객이 어떤 위치에 있는지 화면의 이름을 명시한다. 화면명은 항상 화면 상단에 나타나며 중앙 정렬 혹은 왼쪽 정렬이 가능하며 배너로 표현할 수 있다.

  • 최상위 단계의 메뉴로 바로 이동할 수 있는 기능을 상단에 배치한다.

  • 고객이 이동했던 경로를 표시한다. PC의 경우 breadcrumb으로 고객의 접속 경로를 확인할 수 있고 MC의 경우 타이틀과 이전버튼을 통한 History Back으로 확인할 수 있도록 한다.

  • 정보의 계층이 너무 깊으면 고객은 다른 정보를 찾기 위한 이동방법이 복잡해지기 쉽기 때문에 PC/MC 모두 3depth 이상 깊이는 지양한다. 3Depth이상의 깊이가 있을 경우 LNB를 두어 해당 위치를 안내한다

4.2.4 레이아웃

  • PC의 우측 Sky Scrapper는 고객 개인화 기능을 제공하며 좌측 Sky Scrapper는 마케팅 콘텐츠를 노출한다.

  • MC의 페이지 스크롤 시 이동성을 위해 항상 맨위로 이동 할 수 있는 TOP 버튼을 제공한다.

  • 콘텐츠 배치 순서는 좌측에서 우측, 위에서 아래 방향으로 배치된다.

  • 푸터는 최하단에 위치한다.

4.2.5 타이틀 및 용어

  • 타이틀은 텍스트의 경우 개발텍스트를 사용하고 이미지의 경우 배너형태로 표현한다.

  • 화면 타이틀 영역은 비교적 좁은 영역에 표현되므로 글자 수를 제한한다. 필요에 따라서 서브 타이틀로 해당 카테고리 혹은 콘텐츠 영역을 부가설명할 수 있다.

  • 탭형식으로 표현된 경우 선택된 메뉴표현으로 타이틀을 대신할 수 있다.

  • 용어 및 폰트는 인지와 가독성을 우선하며 서비스 전반의 일관성을 유지한다.

4.2.6 UI 요소

  • UI요소는 PC와 MC 모두 적용될 수 있도록 마우스 클릭과 터치 제스처에서 모두 용이한 엘리먼트로 구성한다.

  • 액션이 필요한 기능은 마우스나 터치 시 고객행태에 기반하여 오른쪽에서 왼쪽으로 중요한 기능을 배치한다.

4.2.7 인터랙션

  • 데이터를 로딩하고 있을 때 현재 진행 중이라는 신호를 사용자에게 제공한다.

  • 하나의 Task를 완료할 때 결과에 대한 피드백을 명확히 한다. Task가 수행되지 않았을 경우 어떤 사유로 수행되지 않았는지 명시한다.

4.3 관리

  • 전체 서비스의 UX/UI 일관성을 위해 정책기준을 변경하지 않는다.

  • UI요소는 UI가이드로 정의한다.

...

5. 상품목록

5.1 정의

  • Mobile 화면에서 어떤 방식으로 Tablet 화면을 확장 시킬지 정의한다.

5.2 유형

5.2.1 PC 일반 상품목록

  • PC에서 전시되는 자동화 매장(카테고리, 검색결과 등) 및 전시코너의 상품정보를 노출하는 모든 영역을 정의한다.

    PC의 경우 4단 그리드를 기준으로 정의한다.

5.2.2 MC 일반 상품목록

  • MC에서 전시되는 자동화 매장(카테고리, 검색결과 등) 및 전시코너의 상품정보를 노출하는 모든 영역을 정의한다.

  • MC의 경우 2단 그리드를 기준으로 정의한다. MC에서 확장되는 Tablet화면의 경우 3단 그리드를 준용한다.

5.3 정책

5.3.1 레이아웃 구조

  • 상품목록이 전시되는 레이아웃은 카테고리명, 필터, 소팅 및 보기방식, 상품유닛, 페이징 순으로 구성된다.

5.3.2 전시필터

  • 전시필터는 공통필터와 옵션필터로 정의된다.

  • 공통필터는 하위 카테고리, 가격대, 혜택, 상품속성, 품절제외로 정의되며 상품목록 상단에서 노출된다.

  • 옵션필터는 상품의 옵션을 통해 노출되며 카테고리 특성에 맞춰 세분화되어 노출된다. 공통필터를 통해 노출된 하위 카테고리 선택 시 해당 하위 카테고리의 옵션항목을 조회 후 가변필터에 노출된다.

  • 카테고리 매장은 전시되는 필터에 대해 비노출 처리가 가능하다.

( ❖ 데모 버전: 전시 필터는 상품목록과 검색결과 페이지 상단에 노출되며, 다음과 같은 조회 옵션을 갖는다. )

No

상품 조회 옵션

타입

상품목록 페이지

검색결과 페이지

1

브랜드

필터

O

O

2

가격범위(선택, 직접입력)

필터

O

O

3

상품속성

필터

O

X

4

카테고리

필터

X

O

5

결과내 재검색

필터

X

O

6

최신순, 인기순, 평점 높은순, 낮은 가격순, 높은 가격순

정렬

O

O

7

우선노출 {정기배송, 무료배송, 가격흥정}

정렬

O

O

5.3.3 보기방식

  • PC 및 MC에서는 썸네일 보기가 디폴트이다.

...