커뮤니티 개편 Style Guide 각 템플릿에 해당하는 원본파일은 Template PSD 폴더에 있음 2010. 08.26 작성자 : 콘텐츠개발팀 노영미/유지숙 Copyright © DANAWA Co., Ltd. All rights reserved. 다나와 - 쇼핑의 시작 1/30 다나와 – 쇼핑의 시작 DANAWA INDEX 본 가이드라인의 목적은 1) 사이트의 일관적이고 통일된 아이덴티티 (Identity)와 브랜드(Brand) 이미지를 형성한다. 2) 다나와 커뮤니티 서비스에 가이드라인 (Guide Line)을 제시하여 Site의 효과적인 수행, 유지, 관리, 갱신을 제어하기 위한 것이다. 01. File Info --------- 03 02. Design Template --------- 04 03. Layout System --------- 06 04. Grid System --------- 08 05. Color System --------- 28 06. Font System --------- 29 07. UI Standard Structure --------- 30 2/30 다나와 – 쇼핑의 시작 DANAWA 1.File Info 파일경로 PSD \\Ts-htgl4b7\design\02_GUIDE\39_커뮤니티 메인 섹션메인 게시판 main.psd 템플릿 1 (디카) section_main_last.psd 템플릿 2 (노트북) section_notebook.psd 템플릿 3 (유아동) section_baby.psd 목록 list.psd 보기 view.psd 글쓰기 write.psd 캐릭터 character.psd HTML http://img.danawa.com/new/nCommunity/htmlList.html CSS http://www.danawa.com/new/css/nCommunity.css http://www.danawa.com/new/css/nCom_board.css 3/30 다나와 – 쇼핑의 시작 DANAWA 2.Design Template 메인 섹션메인 4/30 다나와 – 쇼핑의 시작 DANAWA 2.Design Template 커뮤니티 게시판_보기 커뮤니티 게시판_목록 5/30 다나와 – 쇼핑의 시작 DANAWA 3.Layout System #wrap 메인 #header #m_spot #container #wrap 전체 영역 #header 다나와 로고, 검색, 로그인, 서비스 메뉴 영역 #m_spot 로그인 및 각 카테고리별 이슈된 게시물 #m_left / #m_right 콘텐츠 영역 #footer 보조메뉴와 copyright 영역 #wrap 전체 영역 #header 다나와 로고, 검색, 로그인, 서비스 메뉴 영역 .navigation_wrap LNB (네비게이션) 영역 .con 콘텐츠 영역 .se_side 콘텐츠 영역 #footer 보조메뉴와 copyright 영역 #m_right #m_left #footer 섹션/게시판 #wrap #header #container .navigation _wrap .con_550 .con_730 . se_side #footer 6/30 다나와 – 쇼핑의 시작 DANAWA 4.Grid System 메인 7/30 다나와 – 쇼핑의 시작 DANAWA 4.Grid System •가로 : 925px / 세로 : 가변적 main.psd 925 > 메인 • 중요 콘텐츠 1024 해상도에서 180 745 벗어나지 않도록 주의 ※ 코딩파일 참조 330 61 10 285 10 165 10 200 555 360 10 8/30 다나와 – 쇼핑의 시작 DANAWA 4.Grid System main.psd > TOP 게시물 582 156 140 x 140 330 50 32 77 • 영역라인 : 3px / #947add • 게시글 top 1 타이틀 : 18px / #cf4d66 ※ 캐릭터 아이콘은 comty3.0 Character.ppt 문서 참조 • 게시글 top 2.3.4 타이틀 : 기본 스타일 적용 • 댓글표기 : bold / #6367cb • 작성 및 정보표기 : 11px / #999 9/30 다나와 – 쇼핑의 시작 DANAWA 4.Grid System main.psd > TOP 게시물 582 156 140 x 140 330 50 32 77 • 카테고리 #ffffff 10/30 #424242 다나와 – 쇼핑의 시작 DANAWA 4.Grid System main.psd > 커뮤니티 검색 925 60 • 영역라인 : 1px / #dcdcdc • 타이틀 # 1c1c1c 11/30 # 49339a 다나와 – 쇼핑의 시작 DANAWA 4.Grid System main.psd > 커뮤니티 검색 • 검색창 : 1px / #bebebe 100 220 24 • 선택창 : 12px / #999999 – 활성화시 배경 : #e5e5e5 • 검색버튼 : 12px / #000000 • 출석체크버튼 : width-132px / height-26px # 333333 12/30 다나와 – 쇼핑의 시작 DANAWA 4.Grid System main.psd > 테마커뮤니티 배너 270 270 56 • 영역라인 : 2px / #dcdcdc • 배너 이미지 - 타이틀 : 15pt / 윤고딕 550 / #2e2e2e ※ 상단 가이드대로 제작하는 것이 기본이지만, 커뮤니티 이슈 및 중요도에 따라 강조되거나 해당 커뮤니티 디자인 요소대로 적용되도 무방함. > 게시글 썸네일 없는 경우 _ noimg • 각 콘텐츠 게시물의 대표 썸네일이 없는 경우 적용 • 영역 라인 : 1px / #e2e2e2 • 배경 : #f4f4f4 13/30 다나와 – 쇼핑의 시작 DANAWA 4.Grid System main.psd > 각 콘텐츠 영역 콘텐츠마다 달리 적용 56 • 영역라인 : 1px / #dcdcdc • 타이틀 : font system 참고 가변적 • 타이틀배경 : #f9f9f9 • 더보기버튼 : 11px / #8d8d8d > 커뮤니티 서비스 목록 23 20 20 160 20 • 서비스 타이틀 : 12px / bold / #000 • 서비스명 : 11px / #666 14/30 다나와 – 쇼핑의 시작 DANAWA 4.Grid System 섹션메인 15/30 다나와 – 쇼핑의 시작 DANAWA 4.Grid System •가로(925) / 세로 (가변적) section_main_last.psd > 섹션메인 925 각 기기별 해상도(사이즈)에 따라 10 가변적으로 사이즈가 변할도록 하며, 155 요소 단위별로 화면에서 일그러지는 현상이 발생되지 않도록 블록 단위별로 움지이도록 한다. 255 ※ 코딩파일 참조 10 가변적 75 x 75 75 x 75 16/30 다나와 – 쇼핑의 시작 DANAWA 3.Grid System section_main_last.psd > LNB 153 12 12 • 타이틀 44 82 #2f2f2f #212121 가변적 • 메뉴 타이틀 137 x 65 - 타이틀 블랙 : 12px / #000000 / bold / 돋움 - 텍스트 블랙 : 12px / #333333 / 돋움 - 타이틀 하단 라인 : 1px solid #E5E5E5 - 점선 구분라인 : http://img.danawa.com/new/main_new/img/line_dash.gif • 박스 - 테두리 : 1px solid #DDDDDD 17/30 다나와 – 쇼핑의 시작 DANAWA 3.Grid System section_main_last.psd > LNB 153 10 38 10 • 박스 타이틀 - 타이틀 블루 : 12px / #5065A8 / bold / 돋움 - 타이틀 블랙 : 12px / #000000 / bold / 돋움 - 텍스트 블랙 : 12px / #333333 / 돋움 • 박스 - 테두리 : 1px solid #D1D7EA 가변적 - 배경 : #F6F7F8 18/30 다나와 – 쇼핑의 시작 DANAWA 3.Grid System section_main_last.psd > TOP 게시글 15 15 10 10 237 ※ 메인과 동일 19/30 다나와 – 쇼핑의 시작 DANAWA 3.Grid System section_main_last.psd > 게시글_섬네일+리스트형 15 10 • 박스 타이틀 22 - 텍스트 레드 : 12px / #D04B66 / bold / 돋움 15 - 텍스트 블랙 : 12px / #333333 / bold / 돋움 75 x 75 • 박스 라인 - 1px solid #DDDDDD 가변적 - 텍스트 블랙 : 12px / #333333 / bold / 돋움 15 15 10 • 블루 타이틀 - 텍스트 : 12px / #6367CB / bold / 돋움 • 블랙 타이틀 - 텍스트 : 12px / #4B4B4B/ bold / 돋움 10 10 • 글쓰기 (class=“rightBtn”) - 텍스트 : 12px / #333333 / bold / 돋움 • 더보기 (class=“moreBtn) • 닉네임 / 날짜(class=“description”) - 텍스트 : 12px / #999999 / 돋움 20/30 다나와 – 쇼핑의 시작 DANAWA 3.Grid System section_main_last.psd > 게시글_대표섬네일 + 리스트형 15 10 10 22 • 섬네일 박스 (수동으로 제작되는 섬네일 임) 15 - 테두리 라인 : 1px solid #DBDBDB - 안쪽라인 : 4px solid #FFFFFF 68 x 68 68 - 이미지 사이즈 : 68px * 68px 10 10 • 구분라인 - 하단 : 1px solid #EFEFEF 15 15 • 텍스트 - 타이틀 텍스트 : 12px / #4b4b4b / bold / 돋움 80 x 80 - 기간 텍스트 : 12px / #999999 / 돋움 - 날짜 텍스트 : 12px / #EB5149 / 돋움 15 49.9% 21/30 다나와 – 쇼핑의 시작 DANAWA 3.Grid System section_main_last.psd > 게시글_리스트형 15 10 • 텍스트 22 - 텍스트 블랙 : 12px / #606060 / 돋움 15 68 - 텍스트 블루 : 12px / #6367CB / 돋움 68 x 68 15 22/30 다나와 – 쇼핑의 시작 DANAWA 3.Grid System section_main_last.psd > 갤러리 15 10 22 20 80 x 80 가변적 24.8% 15 15 • 섬네일 타이틀 - 텍스트 : 12px / #606060 / bold / 돋움 • 사용자 닉네임 - 텍스트 : 11px / #787878 / 돋움 • 갤러리 박스 (class=“galleryBox”) - 배경 : http://img.danawa.com/new/nCommunity/img/bg_se_mainall.gif 23/30 다나와 – 쇼핑의 시작 DANAWA 3.Grid System section_main_last.psd > 사이드 콘텐츠 10 10 10 75 x 75 80 x 80 10 178 x 54 가변적 178 x 32 24/30 다나와 – 쇼핑의 시작 DANAWA 4.Grid System 게시판 25/30 다나와 – 쇼핑의 시작 DANAWA 4.Grid System •가로 : 925px / 세로 : 가변적 board_list.psd 925 > 게시판 • 중요 콘텐츠 1024 해상도에서 155 10 550 10 200 벗어나지 않도록 주의 ※ 코딩파일 참조 ※ 세부요소는 게시판 가이드 참조 가변적 730 26/30 다나와 – 쇼핑의 시작 DANAWA 4.Grid System board_list.psd > 타이틀 & 현재위치 550 / 730 게시판에 따라 가변적 30 • 타이틀 • 선택박스 : 검색 셀렉트와 동일 #422b9a > 카테고리 탭 550 / 730 게시판에 따라 가변적 32 15 • 활성화 : 12px / bold / #fff / 배경 #a291e2 • 비활성화 : 12px / bold / #999 / 배경 #ebebeb 27/30 다나와 – 쇼핑의 시작 DANAWA 5.Color System 이슈되는 게시글과 GNB메뉴에 주조 칼라로 포인트를 주어 시선이 가도록 유도하며, 많은 정보로 인한 시선의 분산을 줄이기 위해 칼라 요소는 주.조칼라로 제한하였으며, 중요요소에는 포인트 칼라를 사용한다. - 포인트 칼라 사용 : 게시글 타이틀, 댓글 수등 > Concept Keyword 친근한, 감성적인, 정다운 분류 칼라값 주칼라 RGB : 100,76,189 / #644cbd 보조칼라 RGB : 148,122,221 / #947add RGB : 207,77,102 / #cf4d66 포인트칼라 RGB : 9,103,203 / #6367cb 28/30 다나와 – 쇼핑의 시작 DANAWA 6.Font System • 일부 타이틀을 제외한 모든 페이지의 LNB 타이틀 및 모든 텍스트는 시스템폰트를 기본으로 한다. • 강조되어야 하는 경우 칼라 시스템의 포인트 칼라를 적용. > Text / Base Font (기본폰트) 돋움 가 나 다 라 마 바 사 아 자 차 카 타 파 하 Size : 12px Color Code : #666666 ABCDEFGHIJKLMNOPQRSTUVWXYZ > Title (타이틀) 윤고딕 540 Size : 13px Color Code : #333333 > 텍스트 포인트 이슈게시물 타이틀 Color Code : #cf4d66 class=tit 댓글수 Color Code : #6367cb class=pointBlueB 29/30 다나와 – 쇼핑의 시작 DANAWA 7.UI Standard Structure > Labeling | Image의 명명법 기준 테이블 Object (name) Object 명칭 Object (name) Object 명칭 버튼액션 액션명칭 일반이미지 (image) img 배경 (background) bg 일반 없음 타이틀 (title) tit 버튼 (button) btn 마우스액션 _on 블릿, 아이콘 (icon), 화살표 ico 탭 (tab) tab 사용방법 • 단어 사이의 구분은 ‘_’를 사용하며, Image는 기능단위로 구분하여 가능한 짧은 이름을 사용하되 해당 파일의 용도를 명확히 구분할 수 있도록 한다. Object 명칭_컷파일명.gif Object 명칭_컷파일명.gif 예) 출석하기버튼 : btn_check.gif Object 명칭_컷파일명_액션이름.gif 예) 베스트 공감댓글 : tit_bestcom.gif 예) top게시물 컴퓨터 탭 : talk_com.gif/ talk_com.gif | 파일명 기준 테이블 File Type 확장명 File Type 확장명 HTML File .html JPEG, JPG File .jpg GIF File .gif CSS File .css File Type Java Script File 확장명 .js | 이미지 파일 FTP 정보 이미지 http://img.danawa.com/new/nCommunity/img/ 30/30 다나와 – 쇼핑의 시작 DANAWA 7.UI Standard Structure • 사이트 전체의 본문 및 일반텍스트일 경우 최대한 가독성과 디테일을 보장 > Cascading Style Sheets | 기본 CSS : http://www.danawa.com/new/css/default.css / init.css 하는 서체 크기와 자간, 줄간격을 정의한다. • 링크되는 텍스트, 타이틀, 메뉴, 스크롤바 등을 정의한다. 각 페이지별로 특화되는 링크 및 텍스트일 경우 color system에서 크게 벗어나지 않는 칼라로 정의한다. /* default Selector */ body {font-family: "돋움", "Arial", "Verdana“; font-size: 12px; color:#666666; text-align:left; background-color:#ffffff;} td table {text-align:left;} a{text-decoration:none; cursor:pointer;} a:hover {text-decoration:none; cursor:pointer;} /* 링크스타일 */ span.pointPink {color:#F1679B;} span.pointPink_B {font-weight:bold; color:#F1679B;} /* Type Selector */ img, fieldset, button {border:none;} li {list-style:none;} textarea {overflow:auto;} select { font-size:12px; font-family: "돋움","Arial","Verdana"; color:#333333; border:1px solid #cccccc;} html:first-child select{padding-right:6px; height:20px;} /* Opera 9 & Below Fix */ option {padding-right:6px;} /* Firefox Fix */ legend {position:absolute; top:0; left:0; width:0; height:0; overflow:hidden; visibility:hidden; font-size:0; line-height:0;} /* For Screen Reader */ --------------------------------------------------------------------------------------------------------------html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, table, tbody, tfoot, thead, tr, th, td, button {margin: 0; padding: 0;border: 0; font-family: "돋움", "Arial", "Verdana";} ol, ul {list-style: none;} blockquote, q {quotes: none;} ins {text-decoration: none;} del {text-decoration: line-through;} table {border-collapse: collapse; border-spacing: 0; font-size:12px;} a {text-decoration:none;} a img {border:none;} legend, caption, hr {visibility:hidden;height:0; line-height:0; font-size:0; width:0; position:absolute; margin:0; padding:0; text-indent:1000px; } button {cursor:pointer; overflow:visible;} | 커뮤니티 CSS import : http://www.danawa.com/new/css/nCommunity.css | 게시판 CSS 정의 : http://www.danawa.com/new/css/init.css >> nCommunity.css에 import 31/30 다나와 – 쇼핑의 시작 DANAWA 7.UI Standard Structure > 기타 | Web Brower • Microsoft Internet Explorer : 5.0~8.0버전을 지원하도록 한다. - 8.0지원가능 방법 : <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 추가 • FireFox/Netscape등 : 우선순위는 아니지만 지원이 가능하도록 한다. | Resolution / Support Color • 해상도 : 1024 X 768를 기본으로 지원한다. • 지원색상 : 16bit High Color를 기준으로 한다. | Window Title • 브라우저 상단에 표시되는 Window Title은 아래의 형식을 따른다. – 행복쇼핑의 시작! 다나와 (가격비교) | Cursor 표시 • 모든 링크 항목은 반드시 링크항목에 마우스 오버시 손가락모양의 커서로 변경되도록 처리하여 사용자 혼돈을 막을 수 있도록 한다. | Form Tag의 위치 • HTML페이지 내에서 폼 태그 사용시 위치는 해당 블럭라인 요소를 감싸도록 한다. 예) <form name=”user” method=”post”> <table> <tr> <td></td> </tr> </table> </form> | HTML Cording 기본 규칙 - Indent Size : 4, Tab Size : 4 - Comment (주석) <!-- 대상이름 시작 //--> <table cellpadding=“0” celspacing=“0” border=“0”> <tr> <td>내용</td> </tr> </table> <!-- 대상이름 끝 //--> 32/30 다나와 – 쇼핑의 시작 DANAWA 7.UI Standard Structure > 기타 | 기타 고려사항 • 플래시와 동영상 입력시 HTML Head 부분에 아래 자바스크립트를 링크 시킨다. <script language="javascript" src="http://www.danawa.com/js/ie_embed.js"></script> 링크가 들어갈 부분에 아래와 같이 넣어 주시면 됩니다 <script language="javascript"> ieEmbed("src=플래시 및 동영상 주소","width=넓이","height=높이","wmode=transparent"); </script> • IMG태그의 WIDTH, HEIGHT - IMG태그를 사용할 경우 WIDTH와 HEIGHT의 속을 지정하여 주는 것이 웹 브라우저가 HTML문서를 보다 빨리 읽는데 효과적이다. - 이때 사이즈값에 양쪽에 “ “을 넣는다. (예 : width=“100” height=“100”) - 검색 최적화를 위해 타이틀에 해당하는 이미지에 alt를 넣도록 한다. • 복잡한 테이블 과다사용 억제 - 과다한 테이블 태그도 로딩속도의 적이 된다는 것도 유념해야 한다. - 레이아웃에 해당하는 것은 <div>사용하여 css로 컨트롤 하도록 마크업을 한다. 33/30 다나와 – 쇼핑의 시작 DANAWA