Page 1

네이버 DA 표준화 가이드 Version 1.0

01. 개요

02. 분석

03. UI 가이드

October 2008 / CMD.NAVER UXDC.UI LAB


네이버 DA 표준화 가이드

목차 01. 개요 네이버 DA 표준화 개요

02. 분석 포털사이트 DA 사용 사례 포털사이트 DA DB 분석 네이버 DA의 현재 네이버 DA 표준화 방향 별첨자료

03. UI 가이드 GRID 그리드 정의 그리드 가이드

DA DA 표준 정의 DA 표준 가이드 예외 규정

LOGIN 로그인 정의 로그인 가이드

MENU 메뉴 정의 메뉴 가이드

October 2008 / CMD.NAVER UXDC.UI LAB


네이버 DA 표준화 가이드

01. 개요 01. 개요 네이버 DA 표준화 개요

02. 분석 포털사이트 DA 사용 사례 포털사이트 DA DB 분석 네이버 DA의 현재 네이버 DA 표준화 방향 별첨자료

03. UI 가이드 GRID 그리드 정의 그리드 가이드

DA DA 표준 정의 DA 표준 가이드 예외 규정

LOGIN 로그인 정의 로그인 가이드

MENU 메뉴 정의 메뉴 가이드

October 2008 / CMD.NAVER UXDC.UI LAB


네이버 DA 표준화 가이드

01. 개요

01/01

네이버 DA 표준화 개요 네이버 DA(Display AD) 표준화를 통해 산재되어 있는 DA 사이즈와 위치를 표준화 하고 불필요한 광고들을 개선한다.

현재 A

21개 DA 서비스에 따라 크기, 위치 등이 변하는 케이스가 많음.

AS IS

B

31개 레이아웃 DA, 로그인의 위치에 따라 서비스 레이아웃은 3단, 2단으로 다양하게 생성.

C

42개 서비스 서비스에 대한 레이아웃 및 광고 표준화가 시급함.

다양한 DA 사이즈 다양한 레이아웃 불필요한 광고

네이버 DA 표준화 방향 A DA 사이즈 확대 및 통일 현재 주 DA로 쓰고 있는 240X240 사이즈보다 크고 와이드한 280X240 사이즈로 통일.

B

네이버 DA 표준화

우측 컨텐츠 영역 활성화 확대되는 DA 가로사이즈 영향으로 우측영역이 확대됨으로써 보다 효과적인 정보 노출이 가능.

C 전체 레이아웃 기본2단 변경 컨텐츠 영역이 넓어짐으로써 보다 효과적인 정보 노출이 가능.

D 서비스 전체폭 확대 서비스 전체폭을 960Pixel에서 980Pixel로 확대. 광고들의 개선 서비스UI 최적화 사용자 신뢰도 향상

기대효과 A

광고주 만족도 상승 광고제작 비용절감 및 광고효과 객관성 향상

TO BE

B

서비스 개편 효율화 네이버 DA 표준화 가이드를 제작/배포하여 일관된 가이드 제시.

C

네이버 DA 표준화로 인한 상품개발 용이 네이버 DA 표준화로 인한 일관된 마케팅정책 수립 및 서비스별 신규 상품개발이 쉬워짐.

D

사용자 경험 개선 표준화된 위치, 사이즈 적용으로 사용자 신뢰도 향상

October 2008 / CMD.NAVER UXDC.UI LAB


네이버 DA 표준화 가이드

02. 분석 01. 개요 네이버 DA 표준화 개요

02. 분석 포털사이트 DA 사용 사례 포털사이트 DA DB 분석 네이버 DA의 현재 네이버 DA 표준화 방향 별첨자료

03. UI 가이드 GRID 그리드 정의 그리드 가이드

DA DA 표준 정의 DA 표준 가이드 예외 규정

LOGIN 로그인 정의 로그인 가이드

MENU 메뉴 정의 메뉴 가이드

October 2008 / CMD.NAVER UXDC.UI LAB


02. 분석

네이버 DA 표준화 가이드 01/05

포털사이트 DA 사용 사례 DA 사이즈와 위치의 일관성이 있고 주요 서비스의 DA 사이즈는 통일되어 있다.

국내사례 (Daum 2008년 10월기준) 주요 서비스에 노출되는 DA 사이즈 및 위치가 일관성 있다. (가로세로 250X250, 300X250 사이즈가 60%이상 / 주요DA 우측 상단 노출 / GNB 가로 978Pixel)

해외사례 (MSN, AOL) 규격분화의 최소화와 사이트간 통일성이 돋보인다. (가로세로 300X250, 160X600, 728X90 사이즈를 주로 사용 / GNB 가로 978~980Pixel / IAB가이드 준수)

October 2008 / CMD.NAVER UXDC.UI LAB


02. 분석

네이버 DA 표준화 가이드 02/05

포털사이트 DA DB 분석 규격 분화의 최소화, 사이트간 통일성은 MSN, AOL, USAtoday, NYtimes 등 해외 사이트가 돋보이며, 네이트, 엠파스 등이 수적인 규격 분화는 적으나 서비스내 DA 운영의 규모가 상대적으로 낮다.

NAVER DA CTR / 판매율 비교 DA 사이즈가 클수록 CTR과 판매율이 높다.

(2007년 1월~6월 자료/E-Biz 네이버_DA표준화가이드_조사설계서 발췌)

IAB (Interative Advertising Bureau) AD Unit Guidelines 평균 18종 DA를 권장하고, 컨텐츠와 DA를 분리시키며, 레텡글타입인 경우 우측상단을 권장한다.

(2008년 2월 UXLab 리서치 자료 0215_bannerAD_benchmarking_v015 발췌)

October 2008 / CMD.NAVER UXDC.UI LAB


네이버 DA 표준화 가이드

02. 분석

03/05

네이버 DA의 현재 (2008년 1월) 네이버 각 서비스에 사용되는 DA는 개수, 크기, 위치에 대한 가이드가 다양하여 서비스 레이아웃만 변형되고 DA 개수는 늘어나고 있다.

현재

C

A 21개 DA

82X100, 148X600, 160X400, 175X130, 191X150, 200X200, 200X170, 240X240, 250X155, 350X300, 390X100, 400X70, 270X180, 100X100, 170X170, 170X180, 175X50, 228X240, 380X50, 550X365, 880X70 등 서비스에 따라 크기, 위치가 다양하고 그 중 240X240, 200X200 사이즈가 주요 DA의 50% 차지.

A

B

31개 레이아웃 DA의 위치, 로그인의 위치에 따라 서비스 레이아웃은 3단, 2단으로 다양하게 생성.

B

C 42개 서비스

42개의 서비스에 31개의 레이아웃이 있을 정도로 서비스에 대한 레이아웃 및 DA 표준화가 시급함.

October 2008 / CMD.NAVER UXDC.UI LAB


네이버 DA 표준화 가이드

02. 분석

04/05

네이버 DA 표준화 방향 DA 사이즈를 가로 280Pixel, 세로 240Pixel로 확대/통일함으로써 서비스 전체폭을 980Pixel로 확대, 전체 레이아웃을 기본 2단으로 변경, 우측 컨텐츠 영역 확대 등으로 각 컨텐츠 영역이 넓어짐으로써 보다 시원하고 효과적인 정보 노출이 가능하다.

방향 960Pixel

A DA 사이즈 확대 및 통일

현재 주 DA로 쓰고 있는 240X240 사이즈보다 크고 와이드한 280X240 사이즈로 통일. B

우측 컨텐츠 영역 활성화 확대되는 DA 가로사이즈 영향으로 우측영역이 넓어져 보다 효과적인 정보 노출이 가능.

240X240

C 전체 레이아웃 기본2단 변경

컨텐츠 영역이 넓어져 보다 효과적인 정보 노출이 가능. D 서비스 전체폭 확대

서비스 전체폭을 960Pixel에서 980Pixel로 확대.

네이버 DA 표준화 적용

980Pixel

D 280X240

A

C

B

October 2008 / CMD.NAVER UXDC.UI LAB


02. 분석

네이버 DA 표준화 가이드 05/05

별첨자료 IAB 가이드와 국내 및 해외에서 사용되는 DA 사이즈 비교자료.

(2008년 2월 UXLab 리서치 자료 0215_bannerAD_benchmarking_v015 발췌)

October 2008 / CMD.NAVER UXDC.UI LAB


네이버 DA 표준화 가이드

03. UI 가이드 01. 개요 네이버 DA 표준화 개요

02. 분석 포털사이트 DA 사용 사례 포털사이트 DA DB 분석 네이버 DA의 현재 네이버 DA 표준화 방향 별첨자료

03. UI 가이드 GRID 그리드 정의 그리드 가이드

DA DA 표준 정의 DA 표준 가이드 예외 규정

LOGIN 로그인 정의 로그인 가이드

MENU 메뉴 정의 메뉴 가이드

October 2008 / CMD.NAVER UXDC.UI LAB


03. UI 가이드 GRID

네이버 DA 표준화 가이드 01/05

그리드 정의 산재되어 있는 레이아웃을 기본 2단 그리드로 표준화하고 좌측 메뉴가 존재하는 형태를 2.5단 그리드라 정의하며, 전체 가로 폭을 980Pixel으로 넓힘으로써 중앙 메인 컨텐츠 영역의 확보와 함께 우측 서브 컨텐츠 영역에 보다 효과적인 정보 노출이 가능하다.

2단 그리드

NAVIGATION

DA

CONTENTS

LOGIN

모든 서비스의 기본이 되는 그리드 형태로 좌측은 Contents영역으로 정의하고, 우측은 DA, 로그인, Sub Contents영역으로 정의한다.

DA

MENU

CONTENTS

SUB CONTENTS FOOTER

2.5단 그리드

NAVIGATION

LOGIN

일부 서비스에 적용 되는 그리드 형태로 좌측은 Contents, Menu영역으로 정의하고, 우측은 DA, 로그인, Sub Contents영역으로 정의한다.

SUB CONTENTS FOOTER

그리드 예시

October 2008 / CMD.NAVER UXDC.UI LAB


03. UI 가이드 GRID

네이버 DA 표준화 가이드 02/05

그리드 가이드 모든 서비스의 전체 가로 폭을 980Pixel로 정의하고 DA사이즈를 기준으로 기본 2단 그리드일 경우 우측 영역 280Pixel/컨텐츠 영역 700Pixel 가이드를 적용하며, 좌측 메뉴 구성이 추가된 2.5단 그리드일 경우 우측 영역 980Pixel/컨텐츠 영역 585Pixel/메뉴 영역 115Pixel 가이드를 적용한다.

2단 그리드

NAVIGATION

DA

CONTENTS

일부 서비스를 제외한 모든 서비스의 기본이 되는 그리드이다. 좌측 메뉴 구성이 불가피할 경우 2.5단 그리드 가이드를 참고한다. 기존 좌측에 존재하던 요소들은 모두 우측 영역 내에 구성한다.

LOGIN

SUB CONTENTS FOOTER

기본 가이드

980Pixel

일부 서비스를 제외한 모든 서비스는 2단 그리드를 적용한다.

700Pixel

280Pixel

October 2008 / CMD.NAVER UXDC.UI LAB


03. UI 가이드 GRID

네이버 DA 표준화 가이드 03/05

적용사례

960Pixel

적용 전

150Pixel

610Pixel

200Pixel

980Pixel

적용 후

700Pixel

280Pixel

October 2008 / CMD.NAVER UXDC.UI LAB


03. UI 가이드 GRID

네이버 DA 표준화 가이드 04/05

2.5단 그리드

NAVIGATION

DA

MENU

CONTENTS

좌측 메뉴 구성이 불가피할 경우에 한해 2.5단 그리드를 적용한다. 메뉴를 제외한 기존 좌측에 존재하던 요소들은 모두 우측 영역 내에 구성한다.

LOGIN

SUB CONTENTS FOOTER

기본 가이드

980Pixel

555Pixel

좌측 메뉴 구성시 적용한다.

115Pixel

585Pixel

280Pixel

October 2008 / CMD.NAVER UXDC.UI LAB


03. UI 가이드 GRID

네이버 DA 표준화 가이드 05/05

적용사례

960Pixel

적용 전

115Pixel

605Pixel

240Pixel

980Pixel

적용 후

115Pixel

585Pixel

280Pixel

October 2008 / CMD.NAVER UXDC.UI LAB


03. UI 가이드 DA

네이버 DA 표준화 가이드 01/03

DA 표준 정의 산재되어 있는 DA 사이즈와 위치를 표준화하고 불필요한 DA들을 제거함으로써 광고제작 비용절감 및 광고효과 객관성을 향상한다. 표준화된 사이즈, 위치 등 가이드에 따른 제작으로 사용자 신뢰도를 향상시키며, 내부 서비스 개편 효율성을 향상한다. 단일화로 인한 일관된 마케팅정책 수립 및 서비스별 신규 상품개발의 용이성을 향상한다.

섹션홈 및 서브 DA

NAVIGATION DA

CONTENTS

섹션홈 및 서브에서의 DA 위치는 우측 배치를 기본으로 DA영역 하단에 로그인이 위치한다.

공통 로그인 DA

TOP

LOGIN

DA

공통 로그인 페이지에서 DA는 로그인 영역 우측에 위치하며, DA 사이즈를 기준으로 로그인과 DA영역의 비율은 1:1을 유지한다.

LOGIN

SERVICE LINK

FOOTER

FOOTER

적용위치

October 2008 / CMD.NAVER UXDC.UI LAB


03. UI 가이드 DA

네이버 DA 표준화 가이드 02/03

DA 표준 가이드 모든 DA의 기본 사이즈는 가로 280Pixel/세로 240Pixel로 제한하고, 우측 배치를 원칙으로 한다. DA의 외곽 라인은 광고 및 서비스내 컨텐츠 주목도를 저해하지 않도록 두께 1Pixel/색상 #E6E6E6적용을 원칙으로 한다. 단, 네이버탑과 스폰서십 광고 등 시즈널한 이슈의 광고상품은 본 가이드의 적용범위에서 제외한다.

기본 가이드

원본

280Pixel

사이즈 가로 280Pixel/세로 240Pixel 테두리 두께 1Pixel/색상 #E6E6E6

240Pixel

적용사례

October 2008 / CMD.NAVER UXDC.UI LAB


03. UI 가이드 DA

네이버 DA 표준화 가이드 03/03

예외 규정 네이버 탑과 스폰서십 광고등 시즈널한 이슈의 광고 상품들은 본 가이드에서 예외 규정으로 정의하며, 각각의 해당 가이드에 따라 적용토록 한다.

네이버 탑

사이즈 가로 595Pixel/세로 100Pixel

사이즈 가로 280Pixel/세로 150Pixel

스폰서십 (시즈널한 케이스)

프레임 & 배너 연동

Live 중계 및 문자 중계창

동영상 전/후 광고

VOD 서비스

※ 디스플레이광고/스폰서십광고 안내 참고

October 2008 / CMD.NAVER UXDC.UI LAB


03. UI 가이드 LOGIN

네이버 DA 표준화 가이드 01/05

로그인 정의 상단 GNB 영역의 로그인 버튼 및 과업 버튼을 통해 유입되는 공통형 로그인과 서비스별 개인화 정보를 제공하기 위한 독립형 로그인 등 크게 두가지 형태로 정의한다. 공통형 로그인일 경우 로그인만을 위한 전용 페이지 형태로 구성하고 독립형 로그인일 경우 우측 DA하단에 위치하는 것을 기본으로 정의한다.

공통형

TOP

LOGIN

DA

상단 GNB 영역의 로그인 버튼 및 서비스별 과업 버튼을 통해 유입되는 형태를 공통형 로그인이라 하며, 로그인 전용 페이지 형태로 구성한다.

독립형

NAVIGATION PROMOTION

DA

LOGIN CONTENTS

서비스별 개인화 정보를 제공하기 위한 로그인 형태를 독립형 로그인이라 하며, DA하단에 위치하는 것을 기본으로 하고 기본타입/응용타입 등 2가지 형태로 구성한다.

SERVICE LINK

FOOTER

FOOTER

적용위치

October 2008 / CMD.NAVER UXDC.UI LAB


03. UI 가이드 LOGIN

네이버 DA 표준화 가이드 02/05

로그인 가이드 공통형 로그인의 사이즈는 DA 사이즈와 동일한 가로 280Pixel/세로 240Pixel을 적용하고 좌측에 위치하며, DA와 맞닿는 면은 테두리를 적용하지 않는다. 독립형 로그인은 우측 DA하단에 위치, 사이즈는 가로 280Pixel로 DA의 가로 사이즈와 동일하며 높이는 로그인 전 145Pixel을 기준으로 로그인 후 노출되는 정보에 따라 유동적으로 적용 가능하다.

공통형

TOP

LOGIN

DA

SERVICE LINK

사이즈, 디자인 스타일 및 내부 요소들의 삭제, 위치이동이 불가하다. 추가요소가 불가피하게 필요할시 UCC품질팀에 사전 문의한다. 로그인 오류시 안내 메세지는 페이지 안에서 보여준다. 로그인과 DA 사이즈 비율 1:1 로그인 사이즈 : 280X240 DA 사이즈 : 280X240

FOOTER

기본 가이드

로그인

280Pixel 7 1

240Pixel

5

1

#F8F8F8

2

#E6E6E6

3

#D3D3D3

4

#404040

5

#848689

6

#5AA409

7

#EFEFEF

4

2

로그아웃

테두리 두께 1Pixel DA와 맞닿는 면 테두리X

NONE 3

FOCUSING 6

포커싱 라인 두께 2Pixel

October 2008 / CMD.NAVER UXDC.UI LAB


03. UI 가이드 LOGIN

네이버 DA 표준화 가이드 03/05

적용사례

로그인 전 (GNB 로그인 버튼)

로그인 페이지

로그인 후

October 2008 / CMD.NAVER UXDC.UI LAB


03. UI 가이드 LOGIN

네이버 DA 표준화 가이드 04/05

독립형

NAVIGATION PROMOTION

DA

LOGIN CONTENTS

로그인 전은 모든 서비스 동일하게 가이드에 따라 적용하나, 로그인 후는 서비스 필요에 따라 요소를 배치한다. 로그인 일반 오류시 네이버 공통 회원로그인 페이지로 이동하며, 보안관련 오류시 레이어로 메시지 노출한다. 서비스 섹션의 로그인영역 위치는 항상 우측 DA하단으로 고정한다. 로그인영역의 사이즈에 따른 내부 요소들의 위치이동은 불가하다. 로그아웃 및 로그인 실패 공통형 가이드에 따라 동일하게 적용한다.

FOOTER

기본 가이드

로그인 전

FOCUSING

280Pixel

6

7 3

1

132Pixel 2 4

로그인 후

5

테두리 두께 1Pixel

포커싱 라인 두께 2Pixel

1

#F8F8F8

2

#E6E6E6

3

#9F9F9F

4

#2F3743

5

#848689

6

#5AA409

7

#EFEFEF

8

#32A800

280Pixel

132Pixel

8

4

5

October 2008 / CMD.NAVER UXDC.UI LAB


03. UI 가이드 LOGIN

네이버 DA 표준화 가이드 05/05

적용사례

로그인 전

로그인 후

October 2008 / CMD.NAVER UXDC.UI LAB


03. UI 가이드 MENU

네이버 DA 표준화 가이드 01/05

메뉴 정의 기본 2단 그리드를 기준으로 상단 Navigation 영역에 메뉴들을 배치한 형태를 상단형이라 정의하고, 기본 2.5단 그리드를 기준으로 Contents 영역 좌측에 메뉴들을 배치한 형태를 좌측형이라 정의한다.

상단형 (2단 그리드 적용)

NAVIGATION

DA

CONTENTS

FOOTER

기본 2단 그리드를 기준으로 상단 Navigation 영역에서 1Depth 바로 하단에 하위 Depth의 메뉴들을 배치한 형태를 상단형이라 한다.

좌측형 (2.5단 그리드 적용)

NAVIGATION DA

기본 2.5단 그리드를 기준으로 Contents 영역내 좌측에 하위 Depth의 메뉴들을 배치한 형태를 좌측형이라 한다.

CONTENTS

FOOTER

적용위치

October 2008 / CMD.NAVER UXDC.UI LAB


03. UI 가이드 MENU

네이버 DA 표준화 가이드 02/05

메뉴 가이드 상단형일 경우 가로 980Pixel을 기준으로 Navigation 영역 1Depth 바로 하단에 노출하고 주어진 영역 내에서 Depth의 표현이 어려울 경우 Contents 영역 상단에 Tab 형태로 추가 적용 가능하다. 좌측형일 경우 가로 115Pixel영역 내에서 노출하고 좌측 영역에는 메뉴 이 외의 어떠한 컨텐츠들도 존재해서는 안되며. 기존에 존재하던 컨텐츠들은 우측 영역을 활용하여 노출한다.

상단형

NAVIGATION

DA

사이즈, 디자인 스타일 및 내부 요소들은 해당 서비스 및 LNB 가이드를 따른다. 주어진 영역 내에 Depth의 표현이 어려울 경우 Contents 영역 상단에 Tab 형태로 추가 적용 가능하다.

CONTENTS

FOOTER

기본 가이드

상단형 기본

980Pixel

스타일 및 요소들은 해당 서비스 및 LNB 가이드 적용

Tab 메뉴 추가 (Depth의 표현이 어려울 경우)

680Pixel

스타일 및 요소들은 해당 서비스 및 LNB 가이드 적용

October 2008 / CMD.NAVER UXDC.UI LAB


03. UI 가이드 MENU

네이버 DA 표준화 가이드 03/05

적용사례

상단형 기본

Tab 메뉴 추가 (Depth의 표현이 어려울 경우)

October 2008 / CMD.NAVER UXDC.UI LAB


03. UI 가이드 MENU

네이버 DA 표준화 가이드 04/05

좌측형

NAVIGATION DA

메뉴가 많아 상단 노출이 어려울 경우 좌측형을 적용한다. 좌측 영역에는 메뉴 이 외의 어떠한 요소도 존재해서는 안된다. 디자인 스타일은 해당 서비스의 가이드를 따른다.

CONTENTS

FOOTER

기본 가이드

115Pixel

이벤트 및 공지사항 우측으로 이동 좌측 영역에는 메뉴 이 외의 어떠한 요소도 존재해서는 안된다. 기존 좌측에 존재하던 모든 요소들은 우측 영역으로 이동하여 구성한다.(2단/2.5단 그리드 공통) 디자인 스타일은 해당 서비스의 가이드를 따른다.

October 2008 / CMD.NAVER UXDC.UI LAB


03. UI 가이드 MENU

네이버 DA 표준화 가이드 05/05

적용사례

좌측형 기본

October 2008 / CMD.NAVER UXDC.UI LAB


네이버 DA 표준화 가이드

문의처 문의처 본 네이버 DA 표준화 가이드에 관한 문의사항이 있으실 경우 CMD본부/네이버UXD센터/UI랩/컨버전스UI팀으로 연락주시기 바랍니다. 업무용도 외의 배포 및 외부 공유를 금합니다.

ADDRESS 경기도 성남시 분당구 서현동 254-1 미래에셋플레이스 6층

CONTAC POINT 정 : 박진홍 팀장 / 031-600-4210 / jonharuya@nhncorp.com 부 : 윤민한 선임 / 031-600-4217 / cregen@nhncorp.com

October 2008 / CMD.NAVER UXDC.UI LAB

DA_st  

test pdf file. it's about Guide

Read more
Read more
Similar to
Popular now
Just for you