상품 상세 설명 TEMPLATE DESIGN GUIDE - doc.gmarket.co.krdoc.gmarket.co.kr/esm/상품상세설명 디자인 가이드.pdf · 비주얼 영역 Design Guide ... 디자인TIP :

G마켓 & 옥션 상품상세설명 디자인 가이드

DATE 2013.11.25 VERSION 2.0

상품 상세 설명

TEMPLATE DESIGN GUIDE

DESIGN GUIDE

G마켓 & 옥션 상품상세설명 디자인을 위한 가이드.

첨부파일 내용 1. 상세페이지 디자인 가이드 2. 템플릿 디자인 적용 샘플 디자인(전체조합) 3. 템플릿 디자인 가이드 4. 템플릿 적용 디자인 샘플 5. 폰트

TEMPLATE DESIGN GUIDE

02. 인트로

03. 선택리스트

비주얼영역

Design Guide

기본적으로 템플릿 하단의 백그라운드 칼라는 화이트로 고정. 특정 상품이나 브랜드에 대해 강조의 필요성이 있을 경우 백그라운드 컬러나 패턴 적용 가능.

템플릿 테두리는 1pixel 칼라 #dddddd (백그라운드 칼라 적용 시에도 반영해야 함) 각 템플릿의 가로 크기는 라인 포함하여 860Pixel입니다.

각각의 템플릿에 사용되는 국문, 영문서체는 반드시 정해진 서체만 사용하며, 간격과 크기, 자간, 장평, 컬러 규정에 따라 사용 가능합니다.

백그라운드칼라

전체 테두리 / 간격

폰트사용규정

각 영역별로 3~21가지의 템플릿이 존재합니다. 해당 상품과 브랜드의 특징에 따라 선택하여 사용가능하며, 단 동일 영역에 다중 선택하여 반복 사용할 수 없습니다. 반드시 해당 영역별 1개식만 선택하여 조합 할 수 있습니다. 템플릿과 템플릿 사이의 간격은 60Pixel로 반드시 준수해주세요.

템플릿 사용 01. 개별공지

04. 공통설명

06. 상품구매안내

07. 추가구성정보

08. 광고홍보

05. 디테일

TEMPLATE DESIGN SAMPLE

Template Design Sample 01. 개별공지

03. 선택리스트

04. 공통설명

05. 디테일


첨부된 PSD 파일에 각 템플릿 순서와 간격과 라인두께, 칼라 등 디테일한 가이드 첨부되어 있습니다.

가이드예시

02. 인트로


08. 광고홍보

TEXT

폰트규정 : 템플릿에 사용되는 폰트의 규정(파일첨부) 해당 템플릿 디자인의 모든 폰트는 아래 범위에서만 사용함.

메인카피-국문

서체 나눔고딕

폰트사이즈 30pt

행간 -

자간 -50

장평 95%

칼라 #000000

메인카피-영문

서체 OldSansBlack


행간 -

자간 -

장평 100%

칼라 #000000

서브카피-국문

서체 나눔고딕


행간 20

자간 -25

장평 100%

칼라 #626262

서브카피-영문

서체 나눔고딕


행간 20

자간 -25

장평 100%

칼라 #626262

* 폰트 사이즈와 행간은 템플릿 형태나 디자인에 따라 달라질 수 있습니다.

01. 개별공지

개별공지 : 상품관련 판매자 개별 공지 노출 (PSD 파일과 Html 파일 함께 제공)

* 공지사항이 없을 때 작성하지 마세요.

01. 개별공지

디자인TIP : 정해진 가이드대로 메인 카피 한 줄에 서브카피 2줄로 구성해주세요. 틀은 주어진 디자인만 사용 가능합니다.

상세가이드 : 첨부파일의 PSD에 설명되어 있습니다. 템플릿사이즈, 이미지사이즈, 간격 등.

텍스트형

01. 개별공지

이미지형

디자인TIP : 정해진 가이드대로 메인 카피 두 줄에 서브카피는 되도록 6줄로 구성해주세요. 틀은 주어진 디자인만 사용 가능합니다.


01. 개별공지

디자인TIP : 정해진 가이드대로 메인 카피 한 줄에 서브카피 2줄로 구성해주세요. 틀은 주어진 디자인만 사용 가능합니다.


시즌공지

발렌타인데이 어린이날

어버이날 크리스마스

추석 설날

02. 인트로

인트로 : 상품이나 브랜드에 대한 요약 설명

02. 인트로

디자인TIP : 이미지와 로고 그리고 소개 카피로 구성해 주세요. 테두리 라인은 항상 유지해 주세요.


브랜드 홍보형 A A

02. 인트로

디자인TIP : 이미지와 메인카피 그리고 소개 카피로 구성해 주세요. 이미지는 동일한 분위기의 이미지로 구셩해 주세요.


브랜드 홍보형 B B

02. 인트로

디자인TIP : 이미지와 메인카피 그리고 소개 카피로 구성해 주세요. 로고는 맨 하단 위치에 작은 사이즈로 구성해 주세요.


상품 홍보형 A A

02. 인트로

디자인TIP : 이미지와 메인카피 그리고 소개 카피로 구성해 주세요. 로고는 맨 하단 위치에 작은 사이즈로 구성해 주세요.


상품 홍보형 B B

02. 인트로

디자인TIP : 이미지가 배경에 깔리는 형태입니다. 되도록이면 배경이 있는 이미지를 사용해 주세요. 정해진 영역에만 카피를 구성해 주세요.


이벤트형

03. 선택리스트

선택리스트 : 각 옵션들에 대한 설명리스트 (템플릿을 반복적으로 구성해 사용할 수 있습니다.)

03. 선택리스트

가격노출 A A

디자인TIP : 선택의 갯수에 따라 계속 반복적으로 추가하여 사용할 수 있는 형태입니다. 가격과 할인율 컬러는 가이드를 준수해 주세요.


03. 선택리스트

가격노출 B B

디자인TIP : 선택의 갯수에 따라 계속 반복적으로 추가하여 사용할 수 있는 형태입니다. 가격과 할인율 컬러는 가이드를 준수해 주세요. 3개씩 반복되는 형태이므로 개수 감안하여 구성해 주세요.


03. 선택리스트

가격노출 C C

디자인TIP : 선택의 갯수에 따라 계속 반복적으로 추가하여 사용할 수 있는 형태입니다. 가격과 할인율 컬러는 가이드를 준수해 주세요. 지그재그 형식으로 옵션이 2개 이상일 때 사용할 수 있는 템플릿 입니다.


03. 선택리스트

가격노출 D D

디자인TIP : 선택의 갯수에 따라 계속 반복적으로 추가하여 사용할 수 있는 형태입니다. 가격과 할인율 컬러는 가이드를 준수해 주세요. 한가지 형태에 복합적인 요소를 가지고 있을 경우 사용하면 용이합니다.


03. 선택리스트

가격노출 E E



03. 선택리스트

가격노출 F F

디자인TIP : 선택의 갯수에 따라 계속 반복적으로 추가하여 사용할 수 있는 형태입니다. 가격과 할인율 컬러는 가이드를 준수해 주세요. 같은 형태를 상세하게 보여주고 싶을 경우 사용하면 용이합니다.


03. 선택리스트

가격노출 G G

디자인TIP : 선택의 갯수에 따라 계속 반복적으로 추가하여 사용할 수 있는 형태입니다. 가격과 할인율 컬러는 가이드를 준수해 주세요. 같은 형태를 상세하게 보여주고 싶을 경우 사용하면 용이합니다.


03. 선택리스트

가격노출 H H



03. 선택리스트

가격노출 I I

디자인TIP : 선택의 갯수에 따라 계속 반복적으로 추가하여 사용할 수 있는 형태입니다. 가격과 할인율 컬러는 가이드를 준수해 주세요. 표 형태의 옵션에 사용할 수 있는 템플릿 입니다.


03. 선택리스트

가격노출 J J



03. 선택리스트

가격노출 K K



03. 선택리스트

가격 비노출 A A

디자인TIP : 선택의 갯수에 따라 계속 반복적으로 추가하여 사용할 수 있는 형태입니다. 가격과 할인율이 표시되지 않는 템플릿 입니다.


03. 선택리스트

가격 비노출 B B

디자인TIP : 선택의 갯수에 따라 계속 반복적으로 추가하여 사용할 수 있는 형태입니다. 가격과 할인율이 표시되지 않는 템플릿 입니다. 지그재그 형식으로 옵션이 2개 이상일 때 사용할 수 있는 템플릿 입니다.


03. 선택리스트

가격 비노출 C C

디자인TIP : 선택의 갯수에 따라 계속 반복적으로 추가하여 사용할 수 있는 형태입니다. 가격과 할인율이 표시되지 않는 템플릿 입니다. 한가지 형태에 복합적인 요소를 가지고 있을 경우 사용하면 용이합니다.


03. 선택리스트

가격 비노출 D D



03. 선택리스트

가격 비노출 E E

디자인TIP : 선택의 갯수에 따라 계속 반복적으로 추가하여 사용할 수 있는 형태입니다. 가격과 할인율이 표시되지 않는 템플릿 입니다. 같은 형태를 상세하게 보여주고 싶을 경우 사용하면 용이합니다.


03. 선택리스트

가격 비노출 F F

디자인TIP : 선택의 갯수에 따라 계속 반복적으로 추가하여 사용할 수 있는 형태입니다. 가격과 할인율이 표시되지 않는 템플릿 입니다. 같은 형태를 상세하게 보여주고 싶을 경우 사용하면 용이합니다.


03. 선택리스트

가격 비노출 G G



03. 선택리스트

가격 비노출 H H

디자인TIP : 선택의 갯수에 따라 계속 반복적으로 추가하여 사용할 수 있는 형태입니다. 가격과 할인율이 표시되지 않는 템플릿 입니다. 표 형태의 옵션에 사용할 수 있는 템플릿 입니다.


03. 선택리스트

가격 비노출 I I



03. 선택리스트

가격 비노출 J J



04. 공통설명

공통설명 : 상품의 공통적인 특성에 대한 설명 (템플릿을 반복적으로 구성해 사용할 수 있습니다.)

04. 공통설명

공통설명 A A

디자인TIP : 특징 및 장점에 따라 계속 반복적으로 추가하여 사용할 수 있는 형태입니다. 특징이나 장점이 되는 이미지와 그에 해당하는 설명을 메인 카피 2줄과 서브 카피 5줄 정도로 구성해 주세요. 이미지 사이즈 때문에 높이의 제한이 있으므로 너무 많은 내용은 오히려 가독성을 저하시키는 요인이 됩니다. 좌측에 설명, 그리고 우측에 이미지가 나열되는 형태입니다.


04. 공통설명

공통설명 B B

디자인TIP : 특징 및 장점에 따라 계속 반복적으로 추가하여 사용할 수 있는 형태입니다. 특징이나 장점이 되는 이미지와 그에 해당하는 설명을 메인 카피 2줄과 서브 카피 5줄 정도로 구성해 주세요. 이미지 사이즈 때문에 높이의 제한이 있으므로 너무 많은 내용은 오히려 가독성을 저하시키는 요인이 됩니다. 좌측에 설명, 그리고 우측에 이미지가 지그재그로 나열되는 형태입니다.


04. 공통설명

공통설명 C C

디자인TIP : 특징 및 장점에 따라 계속 반복적으로 추가하여 사용할 수 있는 형태입니다. 특징이나 장점이 되는 이미지와 그에 해당하는 설명을 메인 카피 2줄과 서브 카피 5줄 정도로 구성해 주세요. 이미지 사이즈 때문에 높이의 제한이 있으므로 너무 많은 내용은 오히려 가독성을 저하시키는 요인이 됩니다. 설명과 이미지가 좌, 우, 상, 하로 나열되는 형태입니다.


05. 디테일

디테일 : 상품에 대한 상세한 설명 (템플릿을 반복적으로 구성해 사용할 수 있습니다.)

05. 디테일

가격노출 A A

디자인TIP : 상단에 선택에 해당하는 상세한 정보를 구성해 주세요. 가격과 할인율은 크기나 컬러 모두 가이드를 준수해 주세요. 센터 정렬로 상단 중앙에 배치되는 형태이며 하단에 상세한 이미지를 구성하는 형태입니다. 이미지는 상품의 특징이 될 수 있는 부분 확대 컷으로 구성해 주세요.


05. 디테일

가격노출 A-1 (선택이 없는 경우) A-1

디자인TIP : 선택이 없는 경우에 사용 되어지는 형태입니다. 가격과 할인율은 크기나 컬러 모두 가이드를 준수해 주세요. 센터 정렬로 상단 중앙에 배치되는 형태이며 하단에 상세한 이미지를 구성하는 형태입니다. 이미지는 상품의 특징이 될 수 있는 부분 확대 컷으로 구성해 주세요.


05. 디테일

가격노출 B B

디자인TIP : 상단에 선택에 해당하는 상세한 정보를 구성해 주세요. 가격과 할인율은 크기나 컬러 모두 가이드를 준수해 주세요. 센터 정렬로 상단 중앙에 배치되는 형태이며 하단에 상세한 이미지를 구성하는 형태입니다. 이미지는 상품의 특징이 될 수 있는 부분 확대 컷과 일반 상품 컷으로 혼합해서 구성해 주세요.


05. 디테일

가격노출 B-1 (선택이 없는 경우) B-1

디자인TIP : 선택이 없는 경우에 사용 되어지는 형태입니다. 가격과 할인율은 크기나 컬러 모두 가이드를 준수해 주세요. 센터 정렬로 상단 중앙에 배치되는 형태이며 하단에 상세한 이미지를 구성하는 형태입니다. 이미지는 상품의 특징이 될 수 있는 부분 확대 컷과 일반 상품 컷으로 혼합해서 구성해 주세요.


05. 디테일

가격노출 C C

디자인TIP : 상단에 선택에 해당하는 상세한 정보를 구성해 주세요. 가격과 할인율은 크기나 컬러 모두 가이드를 준수해 주세요. 센터 정렬로 상단 중앙에 배치되는 형태이며 하단에 상세한 이미지를 구성하는 형태입니다. 이미지는 상품의 특징이 될 수 있는 컷으로 구성해 주세요.


05. 디테일

가격노출 C-1 (선택이 없는 경우) C-1

디자인TIP : 선택이 없는 경우에 사용 되어지는 형태입니다. 가격과 할인율은 크기나 컬러 모두 가이드를 준수해 주세요. 센터 정렬로 상단 중앙에 배치되는 형태이며 하단에 상세한 이미지를 구성하는 형태입니다. 이미지는 상품의 특징이 될 수 있는 부분 확대 컷으로 구성해 주세요.


05. 디테일

가격 비노출 A A

디자인TIP : 상단에 선택에 해당하는 상세한 정보를 구성해 주세요. 가격과 할인율이 배제된 메인 카피와 서브카피로만 센터 정렬로 상단 중앙에 배치되는 형태이며 하단에 상세한 이미지를 구성하는 형태입니다. 이미지는 상품의 특징이 될 수 있는 부분 확대 컷으로 구성해 주세요.


05. 디테일

가격 비노출 A-1 (선택이 없는 경우) A-1

디자인TIP : 선택이 없는 경우에 사용 되어지는 형태입니다. 가격과 할인율이 배제된 메인 카피와 서브카피로만 센터 정렬로 상단 중앙에 배치되는 형태이며 하단에 상세한 이미지를 구성하는 형태입니다. 이미지는 상품의 특징이 될 수 있는 부분 확대 컷으로 구성해 주세요.


05. 디테일

가격 비노출 B B

디자인TIP : 상단에 선택에 해당하는 상세한 정보를 구성해 주세요. 가격과 할인율이 배제된 메인 카피와 서브카피로만 센터 정렬로 상단 중앙에 배치되는 형태이며 하단에 상세한 이미지를 구성하는 형태입니다. 이미지는 상품의 특징이 될 수 있는 부분 확대 컷과 일반 상품 컷으로 혼합해서 구성해 주세요.


05. 디테일

가격 비노출 B-1 (선택이 없는 경우) B-1

디자인TIP : 선택이 없는 경우에 사용 되어지는 형태입니다. 가격과 할인율이 배제된 메인 카피와 서브카피로만 센터 정렬로 상단 중앙에 배치되는 형태이며 하단에 상세한 이미지를 구성하는 형태입니다. 이미지는 상품의 특징이 될 수 있는 부분 확대 컷과 일반 상품 컷으로 혼합해서 구성해 주세요.


05. 디테일

가격노출 C C

디자인TIP : 상단에 선택에 해당하는 상세한 정보를 구성해 주세요. 가격과 할인율이 배제된 메인 카피와 서브카피로만 센터 정렬로 상단 중앙에 배치되는 형태이며 하단에 상세한 이미지를 구성하는 형태입니다. 이미지는 상품의 특징이 될 수 있는 컷으로 구성해 주세요.


05. 디테일

가격노출 C-1 (선택이 없는 경우) C-1

디자인TIP : 선택이 없는 경우에 사용 되어지는 형태입니다. 가격과 할인율이 배제된 메인 카피와 서브카피로만 센터 정렬로 상단 중앙에 배치되는 형태이며 하단에 상세한 이미지를 구성하는 형태입니다. 이미지는 상품의 특징이 될 수 있는 컷으로 구성해 주세요.


05. 디테일

표형태 A A

디자인TIP : 메인 타이틀과 이미지 그리고 테이블(표) 형태로 구성해 주세요. 이미지는 고정이며 테이블의 형태는 정보에 따라 간격이나 행의 개수가 변경될 수 있습니다.


05. 디테일

표형태 B B

디자인TIP : 메인/서브 타이틀과 이미지 그리고 테이블(표) 형태로 구성해 주세요. 이미지는 고정이며 테이블의 형태는 정보에 따라 간격이나 행의 개수가 변경될 수 있습니다.


05. 디테일

표형태 C C

디자인TIP : 메인/서브 타이틀과 이미지 그리고 테이블(표) 형태로 구성해 주세요. 이미지는 고정이며 테이블의 형태는 정보에 따라 간격이나 행의 개수가 변경될 수 있습니다.


05. 디테일

표형태 D D

디자인TIP : 메인/서브 타이틀과 이미지 그리고 테이블(표) 형태로 구성해 주세요. 이미지는 고정이며 테이블의 형태는 정보에 따라 간격이나 행의 개수가 변경될 수 있습니다. 테이블의 형태가 상단 타이틀 형태와 좌측 타이틀 형태로 혼합된 형태입니다.



상품구매안내 : 상품구매 관련 정보 안내


거래정보

디자인TIP : 타이틀과 설명으로 텍스트로만 구성 되어지는 형태입니다. 템플릿 높이는 내용에 따라 유동적일 수 있습니다.



구매 전 안내




상품스팩




상품정보 제공 고시 상세정보




수상내역

디자인TIP : 정해진 이미지 사이즈로 높이가 고정이므로 로고나 텍스트를 가이드에 맞게 구성해 주세요.



수상내역

디자인TIP : 탬플릿 높이가 고정이므로 로고나 텍스트를 가이드에 맞게 구성해 주세요.



추가구성정보 : 상품에 대한 추가적인 정보 설명 (템플릿을 반복적으로 구성해 사용할 수 있습니다.)


추가구성 A A

디자인TIP : 옵션의 개수에 따라 계속 반복적으로 추가하여 사용할 수 있는 형태입니다. 가격과 할인율 컬러는 가이드를 준수해 주세요.



추가구성 B B

디자인TIP : 옵션의 개수에 따라 계속 반복적으로 추가하여 사용할 수 있는 형태입니다. 가격과 할인율 컬러는 가이드를 준수해 주세요.



추가구성 C - 디테일 C

디자인TIP : 상단에 추가적인 상세한 정보를 구성해 주세요. 가격과 할인율은 크기나 컬러 모두 가이드를 준수해 주세요. 좌측 정렬로 상단에 배치되는 형태이며 하단에 상세한 이미지를 구성하는 형태입니다. 이미지는 상품의 추가적인 특징이 될 수 있는 컷으로 구성해 주세요.



추가구성 D - 디테일 D




추가구성 E - 디테일 E




추가구성 F F




추가구성 G G




추가구성 H H



08. 광고홍보

광고홍보 : 이벤트성 배너나 상품을 홍보 (템플릿의 사이즈나 높이는 고정입니다.)

08. 광고홍보

디자인TIP : 이미지 배너 형태입니다. 되도록이면 배경이 있는 이미지를 사용해 주시고 화이트 배경 사용시 테두리를 적용해 주세요.


이벤트형 A A

08. 광고홍보

디자인TIP : 이미지 배너 형태입니다. 되도록이면 배경이 있는 이미지를 사용해 주시고 화이트 배경 사용시 테두리를 적용해 주세요.


이벤트형 B B

08. 광고홍보

이벤트 + 상품형 A A

디자인TIP : 상단에 배너와 하단의 상품이 혼합된 형태입니다. 상단의 배너는 되도록이면 배경이 있는 이미지를 사용해 주시고, 전체 높이가 고정이므로 상품명이나 가격 그리고 가격 컬러는 가이드를 준수해 주세요.


08. 광고홍보

이벤트 + 상품형 B B

디자인TIP : 상단에 배너와 하단의 상품이 혼합된 형태입니다. 상단의 배너는 되도록이면 배경이 있는 이미지를 사용해 주시고, 전체 높이가 고정이므로 상품명이나 가격 그리고 가격 컬러는 가이드를 준수해 주세요.


08. 광고홍보

상품형 A A

디자인TIP : 상단에 대표 상품과 하단의 보조 상품이 혼합된 형태입니다. 전체 높이가 고정이므로 상품명이나 가격 그리고 가격 컬러는 가이드를 준수해 주세요.


08. 광고홍보

상품형 B B

디자인TIP : 상품으로만 구성 되어지는 형태입니다. 전체 높이가 고정이므로 상품명이나 가격 그리고 가격 컬러는 가이드를 준수해 주세요.


THANKS.

Documents

상품 상세 설명 TEMPLATE DESIGN GUIDE - doc.gmarket.co.krdoc.gmarket.co.kr/esm/상품상세설명 디자인 가이드.pdf · 비주얼 영역 Design Guide ... 디자인TIP :