DESIGN STYLE GUIDE

DESIGN STYLE GUIDE 대한민국 구석구석 -국문 Version 1.0 2010-09-10

사용권한 본 문서에 대한 서명은 SKC&C내부에서 본 문서에 대하여 수행 및 유지관리의 책임이 있음을 인정하는 것임. 본 문서는 작성, 검토, 승인하여 승인된 원본을 보관한다. 작성자 : 김태령 일자 :: 2010-09-10 검토자 : 일자 : 본인은 서명으로써 본 문서가 SKC&C의 업무활동 범위 내에서 사용될 것을 인가함. 승인자 : 일자 : 제.개정 이력

Top Main Sub Main 04 05 Layout System Grid System Navigation System Color System Bullet/title System Tab system Button System Font Style CSS System 07 16 20 22 25 26 27 44 29 31 Visual Style Banner Style 사진및 동영상 Style List Style Table Style Footer 34 40 43 41 42 목차 1. Overview 본 Manual Book은 site 제작의 전반적인 guide line을 제시하고 있습니다. 이는 site의 효과적인 수행, 유지, 관리, 갱신을 제어하기 위한 것이며 제작자들은 전체사항들을 유념하여 제작하여야 합니다. 2. Style 3. Template

1. Overview 본사이트는 1024*768해상도에 최적화 되어있습니다. 메인 Visitkora사이트는한국관광 포털 사이트로써의 통합 브랜드 이미지 구축, 여행중심의 정보전달의 역할로직관적이며 쉬운 메뉴 및 디자인을 통해 여행에 대한 정보에 초점을 맞추어 제작하였다. 많은 정보를 제공해야 하는 메인 페이지는 사용자가 보다 쉽게 컨텐츠를 이해하도록 하기 위해 2단 그리드를 사용하였다. 2단 그리드는 포틀릿 형태의 명확한 그룹을 형성하여 정보의 전달을 용이하게 구성하였다. 세부 컨텐츠에 대한 접근성을 높이기 위해 검색기능과 네비게이션 기능이 복합된 GNB를 상단에 배치하고 주요 컨텐츠 중 접근성을 요하는 내용과 기사성 글 또는 긴 내용을 부각시켜야 하는 내용은 왼쪽에 두며, 지도 및 검색기능과 내 · 외부 홍보성의 배너 기능을 가진 컨텐츠는 오른쪽에 둔다.

1. Overview Visitkora의 여행정보 통합 브랜드 이미지 구축, 여행중심의 정보전달의 역할에 충실, 직관적이고 쉬운 메뉴 및 디자인을 통해 여행에 대한 정보에 초점을 맞추어 제작하였다. 관광산업, 고객참여를유도하는메뉴로구성되어어 있으며 전체적인 Identity를 일관적으로 보여질 수 있게 끔 네비게이션과 서브메인 페이지에 대한 디자인 Layout과 Tone & Manner를 통일 하였다. 서브 메인 1 2 3 4

1. Overview Visitkora의 여행정보 통합 브랜드 이미지 구축, 여행중심의 정보전달의 역할에 충실, 직관적이고 쉬운 메뉴 및 디자인을 통해 여행에 대한 정보에 초점을 맞추어 제작하였다. 관광산업, 고객참여를유도하는메뉴로구성되어어 있으며 전체적인 Identity를 일관적으로 보여질 수 있게 끔 네비게이션과 서브메인 페이지에 대한 디자인 Layout과 Tone & Manner를 통일 하였다. 서브 메인 5 6 7 8

본문 1. Style 메인에 현재 페이지의 grid가 적용 되며 사이트의 Web Identity유지와 기능성, 효율성 측면에서도 계속 유지되어야 합니다. 또한 유지관리에서도 이 Layout을 Template화 하면 site를 보다 효율적으로 운영할 수 있습니다. 2.1.1 Layout System Main 메인 네비게이션/검색 • 시각적 중요도 1 • 메인 네비게이션 • 시각적 중요도 2 • 본문 1 • 여행정보 콘텐츠(프로모션, Culture, Lifestyle, Experience, • 인기여행지, 이달의 i트래블로거) • 지도, 검색기능, 오늘의날씨, 트위터, 배너 • 시각적 중요도 3 • 스페셜 컨텐츠 • 시각적 중요도 4 • 본문2(축제/공연/행사, 이색뜨는여행) • 배너.풋터 (별도사이트링크, 외부기관홍보배너 , 풋터) 지도 검색 1024*768 본문2 배너/ 트위터 스페셜컨텐츠 배너/풋터

1. Style A G F E D C B I H J 2.1.2 Layout System Main A_메인 네비게이션/검색 B_ 메인프로모션 C_ 여행정보 콘텐츠 D_ 여행지 홍보 E_ 축제/공연/행사. 여행지 추천 F_ 스페셜컨텐츠 노출영역 G_별도사이트 링크, 풋터영역 H_지도 I_오늘의 날씨, 숙박/음식/쇼핑/교통 검색 J_트위터, 미투데이, 이벤트배너

1. Style 2.1.2 Layout System Main • 메인 네비게이션 / 검색 • 모든 페이지의 상단에 위치하며 각 메뉴 오버 시 롤오버 이미지를 적용 하여 시각적인 선택의 강조. • 검색서비스 영역으로, 원하는 검색어를 입력하면 상세한 검색결과를 얻을 수 있다. • 메인 프로모션 • 주요 이벤트가 고정으로 3개가 노출된다. • 여행정보 콘텐츠 • 3개의 컨텐츠가 노출되는 영역으로 이미지출력과 제목 일부내용이 두줄로 보여진다. • 여행지 홍보 • 선택한 컨텐츠 2개 노출되는 영역으로 이미지출력과 제목 그리고 리스트가 보여진다. • 이달의 축제/공연/행사 • 랜덤으로 4개의 컨텐츠가 보여지는 영역으로 이미지 출력과 해당 제목이 한줄로 구성된다. • 스페셜 컨텐츠 영역 • 컨텐츠의 양에 따라 1~2줄로 가변적인 노출을 인정하는 영역이다.

1. Style 2.1.2 Layout System Main • 외부 연개 사이트 배너 및 풋터 영역 • 한번에 6개씩 무채색의 외부 연개 배너가 롤링되어 보여지며, 마우스 오버 시 컬러 배너로 롤 오버 된다. • 지도 • 플래시로 제작 시각적 단조로움을 최소화 • 오늘의 날씨, 숙박/음식/쇼핑/교통 검색 • 오늘의 날씨를 지역별로 롤링하여 노출하고 클릭 시 팝업을 띄운다. • 숙박,음식,쇼핑,교통 컨텐츠 검색은 각각의 탭을 클릭 시 영역이 활성화된다. • 트위터, 미투데이, 이벤트 배너 • 관광공사의 트위터글 중 가장 최근 것 하나를 노출시킨다. • 관광공사의 이벤트 바로가기 배너가 위치한다.

1. Style 2.1.3 Layout System 서브 메인은 본문1(검색및 이미지 배너),본문2(이미지형 2개),본문3(이미지형 1개, 텍스트형 3개) 로 구성한다. 서브 리스트는 본문(검색및 결과노출)과 간략리스트보기의 2단으로 구성한다. 서브 상세보기 본문1(내용),본문2(추천,의견등록및 의견리스트)와 콘텐츠 리스트보기로 구성한다. 950 Sub 950 950 서브 타이틀 / 네비게이션 서브 타이틀 / 네비게이션 서브 타이틀 / 네비게이션 리스트 본문1(검색및 이미지 배너) 본문(검색및 결과노출) 본문1 리스트 본문2 본문3 서브 메인 서브 리스트 서브 상세보기 본문2 풋터 풋터 풋터

1. Style E A B C F D 2.1.3 Layout System Sub-메인 A_서브 네비게이션/검색 B_ 이미지배너4개 롤링 C_ 이벤트프로모션 D_ 여행정보 컨텐츠 (이미지형 2개) E_ 여행정보 컨텐츠 (이미지형 1개,텍스트형 3개) F_풋터영역

1. Style 2.1.3 Layout System Sub_메인 • 서브 메인 네비 이션 / 검색 • 메인 네비게이션과 동일하게 일관성을 유지한다. • 서브 카테고리 안에 2Depth 메뉴중 시도/ 구군 선택이 가능한 검색 영역이 별도 구성된다. • 이미지 배너 • 등록한 배너 4개를 주기적으로 롤링하여 노출한다. • 이벤트 프로모션 • 이벤트 프로모션 영역으로 다양한 이미지 활용이 가능하다. • 여행정보 컨텐츠 • 테마별 여행 컨텐츠가 이미지 출력과 함께 제목 및 해당내용이 2줄씩 2개가보여진다. • 콘텐츠 영역 • - 테마별 컨텐츠가 이미지출력과 함깨 제목 및 해당내용 2줄, 그리고 리스트 가 3개씩 보여진다. • 풋터 • 메인풋터영역과 동일하게 일관성을 유지한다.

1. Style B1 B A A D D B2 C C 2.1.3 Layout System Sub-list & Sub-view A_서브 네비게이션 / 검색 B_ 여행정보 콘텐츠 영역 B2_ 여행정보 추천 및 의견등록 의견보기 영역 C_ 여행정보 리스트 영역 D_ 풋터 영역

1. Style 2.1.3 Layout System Sub • 서브 메인 네비 이션 / 검색 • 메인 네비게이션과 동일하게 일관성을 유지한다. • 지역별 선택이 가능한 검색 영역이 별도 구성된다. • B. 여행정보 컨텐츠 • 페이지당 5개의 컨텐츠가 노출된다. • 이미지 출력과 함께 해당 제목과 내용이 3줄까지 보여진다. • 동영상이 등록되어 있는 경우 아이콘으로 노출되고 아이콘 클릭 시 동영상 팝업이 뜬다. • B-1.여행정보 컨텐츠 • cms에 등록되어진 내용이 뿌려지는 영역이다. • B-2.여행정보 추천 및 의견등록 의견보기 영역 • 의견등록 및 추천하기 기능을 담당하는 영역으로 여행정보 만족도체크 및 최근 순 의견이 5개로 디폴트 노출이 이루어진다. • 여행정보 리스트 • 카테고리 내 컨텐츠 중 조회수가 높은 컨텐츠 5개의 제목을 노출한다. • RSS 피드를 제공한다. • 풋터 • 메인 풋터 영역과 동일하게 일관성을 유지한다.

1. Style 대한민국구석구석을 이루는 요소중 그리드 시스템은 효과적으로 콘텐츠를 담을 수 있는 구조여야 된다. 그에 따라 단순하지만 짜임새 있게 구성할 수 있는 2,3단의 구조이며 이것은 가장 범용적으로 쓰인다. 2.2.1 Grid System W:639 W:28 W:283 Main H:49 H:73 H:8 H:226 H:400 W:10 H:29 H:159 W:950 H:35 H:1250 H:26 H:31 W:30 W:10 H:167 H:19 H:175 H:130 H:5 H:90 H:40 W:7 W:30 H:124 H:5 H:70 W:13 H:41 H:44 H:91 H:3 H:31 H:29 W:6 H:12 H:39 H:26 H:48

1. Style Width : 950 2.2.2 Grid System Sub W:930 H:59 H:34 H:15 H:222 H:7 H:248 H:42 W:9 W:13 H:252 W:13 H:252 H:50

1. Style Width : 950 2.2.3 Grid System Sub W:712 W:10 H:59 H:49 H:38 H:15 H:141 H:14 W:208 W:20 H:34 H:27 H:50

1. Style Width : 950 2.2.4 Grid System W:10 W:20 Sub W:712 H:59 H:49 H:38 H:35 H:20 W:208 H:19 H:38 H:9 H:99 H:24 H:가변적 H:20 H:62 H:50

1. Style 2 3 1 3 2 1 2.3.1 Navigation System Main Sub W:103 W:187 W:13 W:294 W:950 RixMgo B 14px 자간 -30 sharp white 일반배경 한글 : RixMgo B 10.5px strong 자간 -30 #787878 영문 : Dinmed 10.5px strong 자간 -30 #787878 over 및 select RixMgo B 10.5px 자간 -30 sharp #787878 레이어효과 strok 1px #9cafb2

1. Style 3 1 3 2 1 2 2.3.2 Navigation System Main Sub • 전체보기 클릭시 H:46 돋움 12px 자간-50 Bold Style None # ffffff H:261 돋움 12px 자간-50 행간 20px Style None # 666666 W:151 W:950 • 열기 클릭시 돋움 12px 자간-50 행간 20px Style None # 666666 H:75 W:950

1. Style 2.4.1 Color System html에 쓰이는 컬러는 모든 브라우져에서 상호호환이 되는 256snap adaptive color를 사용함을 원칙으로 합니다. 모든 이미지 파일은 디더링한 gif포멧을 기본으로 하며,컬러는 web optimized colord의 사용을 원칙으로 합니다. 다만 이미지 컬러의 왜곡이 심할경우 컬러 팔레트에서 컬러를 추가 할 수 있습니다 Color System 단색 이미지 스케일 배색 이미지 스케일

1 2 1. Style 2.4.2 Color System Navigation Main Color 한국관광공사의 브랜드를 강화하기 위해 저체도의 남색을 사이트의 고정영역(GNB)에 적용하여 일관된 브랜드 이미지를 구축. 분명하면서도 안전한 느낌의 컬러이미지를 구축. Sub Color 메인 컬러에서 명도를 낮추어 화이트와 그레이를 이용하여 전체적인 Tone을 조화시켜 사용. 깨끗하고, 청청한 컬러이미지를 구축 3 Point Color 화면의 주목성과 활기를 불어넣기 위해 보조적 컬러로 사용. 채도와 명도가 모두 높은 색상을 사용함. (컬러의 점유영역은 전체 페이지 영역의 5%를 넘어서지 않는다.)

■ 한국관광공사 메인 컬러 ■ 보조컬러 ■ 한국관광공사 서브컬러 ■ 보조컬러 ■ 본문 텍스트컬러 ■ 제목 텍스트컬러 1. Style 2.4.3 Color System Navigation Color system 적용범위 web identity의 일관성을 유지하기 위해 모든 페이지에서 제목,서브메뉴, 비쥬얼영역 블렛등과 이에 따라 발생하는 이미지들은 컬러 시스템을 그대로 적용하거나 응용하여 사용하도록 합니다. 그러나 컬러시스템 적용이 어려운 사진 이미지나 고유컬러를 필요로하는 이미지는 제외하도록하며, 필요시 강조를 하기위해 특수한 컬러를 도입하여 사용할수 있습니다. 컬러는 지정된 컬러 범위안에서 응용하여 사용할수 있으며 컬러정의가 된 부분(메인네비게이션, 좌측네비게이션, 풋터, 퀵링크)등에 한에서는 꼭 지정된 컬러를 사용하셔야됩니다. main 화면에서 비쥬얼의 컬러에 맞게 응용되어질 수 있습니다.

1. Style 6 2 5 3 3 1 1 2 5 4 6 4 2.5.1 Bullet/title System Bullet/title System 순서 사용 불릿 공통사용 불릿 2Dep. title : RixMgo B 20px 자간-30 sharp black 2Dep 상세보기 탭 안에 제목: 돋움 bold 14px 자간 -50 none black 3Dep. title: 돋움 bold 12px 자간 -50 none black 2Dep. 상세보기 제목 : 돋움 bold 12px 자간 0 none #525252 팝업 title: 돋움 bold 14px 자간 0 none #ffffff 2Dep. 상세보기 내용제목 : 돋움 bold 14px 자간 0 none #525252

1. Style 4 1 2 3 2.6.1 Tap System Tap W:84 W:151 W:113 W:151 • 선택시 : 돋움 bold12px 자간 -50 none #ffffff • 돋움 12px 자간 -50 none black • 선택시 : 돋움 bold12px 자간 0 none # ff4326 • 선택시 : 돋움 bold12px 자간 -50 none #505050 • 선택시 : 돋움 bold12px 자간 -50 none black • 돋움 12px 자간-50 none black • 돋움 12px 자간-50 none #5d4f4d • 돋움 bold12px 자간 0 none #5d4f4d

1. Style 2.7.1 Boutton System Button • 천리안 11px 자간 -50 none black • 천리안 11px 자간 -50 none black 투명도 50% • 천리안 11px bold 자간 -40 none #black • 천리안 11px bold 자간 -40 none #787878 • 천리안 11px bold 자간 -40 none #ff4326 • 천리안 9px 자간 0 none #black • 천리안 11px 자간 -50 none #ffffff • RixMGo B11px 자간 -50 sharp #ffffff 자평 98% • RixGoEB EB 10.2px 자간 -50 smooth #000000 • 천리안 11px 자간 0 none #ffffff

1. Style 2.7.1 Boutton System Button • RixGo B10px 자간 -50 sharp #6a6a6a 자평95% • RixMGo B11.2px 자간 -50 sharp #545454 • RixMGo B16px 자간 -50 sharp #ffffff 자평98% • 천리안 9px 자간 0 none #000000 • RixMGo B16px 자간 -50 sharp #ffffff 자평 98% • RixMGo EB11px 자간 -50 smooth #5d4f4d 자평 95% • RixMGo EB11px 자간 -50 smooth #5d4f4d 자평 95% 투명도 50% • RixGoEB EB 10.2px 자간 -50 smooth #000000 • 천리안 bold12px 자간 0 none #ffffff • RixMGo B12px 자간-30 smooth # fefffe

1. Style 2.8.1 Font System - 시스템의 확장성과 Loading 속도를 고려하여 시스템에 쓰이는 모든 서체는 Browser용 System Font를 사용한다. - Image Font는 꼭 필요할 때만 쓰고 되도록 사용을 자제한다. - 배너나 기타 프로모션 창은 콘텐츠의 느낌에 따라 다른 서체를 사용하되 기본서체 외 세 개의 미만으로 허용한다. Font System 이미지폰트

1. Style 2.8.2 Font System Font System 시스템 폰트 • 한국관광공사 콘텐츠의 모든 텍스트 : 굴림 / 12pixel / #666666 • 한국관광공사 콘텐츠의 모든 텍스트 : 굴림 / 12pixel / #666666 / bold 사진설명이나 Bread Crumbs, 테이블 내의 설명글 등에 사용 : 돋움 / 11px / #666666 • 한국관광공사 • Korea 영문 서체 : Arial / 12pixel / #666666 영문 서체 : Arial / 12pixel / #666666 / bold • Korea • Korea 영문 서체 : Verdana/ 12pixel / #666666 • Korea 영문 서체 : Verdana/ 12pixel / #666666 / bold

/* 공통 */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, big, cite, code, del, dfn, em, font, img, ins, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: none ; } body {padding:0;margin:0;text-align:center;vertical-align:top;} body, input, button, textarea { font-size:12px; line-height:1.5em; font-family:"돋움", Dotum, Helvetica, AppleGothic, Sans-serif; color:#000000; } h1, h2, h3, h4, h5, h6 { font-size:12px; text-align:left; } /* 기본 링크 */ a:link{text-decoration:none; color: #666666;} a:visited { text-decoration:none; color: #aaaaaa; } a:hover { text-decoration:underline; cursor:pointer; } 1. Style 2.9.1 Font CSS Style Css에서는 일반텍스트, 헤드라인텍스트, 강조텍스트, 링크 텍스트로 나누어 각각의 크기와 서체 및 데코리이션 방식을 정의하여 필요에 따라 font family를 추가할 수 있습니다. 메뉴얼에서는 가장 기본이 되는 css만 다루고 있습니다.기타 부분은 기능적으로 추가된 부분이며 필요에 따라 추가될 수 있습니다.

/*공통주소 */ /kor/ut/front/css/common.css /kor/ut/front/css/board.css /*서브페이지주소 */ 메인 /kor/ut/front/css/main.css 서브 /kor/ut/front/css/sub01_what.css 1. Style 2.9.1 Font CSS Style

3. Template 3.1.1 Visual Style Main W:639 H:226 W:188 W:283 W:143 W:228 H:70 H:39 H:44

3. Template 3.1.2 Visual Style Sub-메인 무엇을 할까 W:151 W:151 W:151 W:151 H:261 H:261 H:261 H:261

3. Template 2 3 1 3.1.3 Visual Style Sub 무엇을 할까_ 시티투어 W:722 W:682 W:682 • RixGoEB EB 18px 자간-50 자평95% sharp #ffffff • Drop Shadow – Opacity 75% Angle -113 size 3px Mulyiply #5e0208 • RixGoEB EB 40px 자간-50 자평98% sharp #ffffff Drop Shadow – Opacity 75% Angle -113 size 8px Nomal #5e0208그라데이션 # d39f2b 1 W:722 H:400 H:400 1 • RixGo M 12px 자간-50 자평100% strong #ffffff Drop Shadow – Opacity 75% Angle -113 size 8px Nomal #5e0208 W:199 W:722 H:165 W:199

3. Template 3.1.4 Visual Style Sub-메인 어디로 갈까 W:233 W:233 W:502 H:71 H:182 H:198

3. Template 3.1.5Visual Style Sub 무엇을 먹을까 W:289 W:289 W:225 W:950 W:950 H:97 H:65 H:45 H:120 H:375 H:374 H:224 • RixMj M 23.94px 자간0 sharp #f0ff00 • RixMj M 23.94px 자간0 sharp #000000 • RixMj M 16.94px 자간0 sharp #000000

W:208 W:186 W:220 3. Template 3.1.6Visual Style Sub 이야기 나눌까 W:702 • RixMGo L 48px 자간-30 smooth #ffffff H:48 • Helvetica75 bold 18px smooth #ffffff • Helvetica75 bold 9px 자간-30 smooth #ffffff H:232 H:261 • RixMGo B 14px 자간-50 smooth #ffffff • RixMGo B 11px 자간-50 smooth #ffffff

3. Template 3.2.1Banner Style Sub 어디로 갈까 이야기가 있는 그곳 배너 W:158 W:705 H:23 H:151 • layer style : drop shadow • RixMGo B 14px 자간-50 sharp #ffffff • 띠컬러는 다양한 활용이 가능함

199 W:485 W:484 3. Template 3.3.1 사진및 동영상Style 사진보기 동영상보기 H:39 H:311 H:371

W:208 W:208 W:208 W:208 W:48 3. Template 1 1 3.4.1 List Style 오른쪽 List 모음 W:188 H:28 H:38 W:15 W:59 H:48 H:25 H:48 • 04_8b 8 #ffffff • strok 2 #000000 • RixGo B 13 자간 -50 sharp #000000

3. Template 3.5.1 Table Style 게시판및 팝업 • strok 2px # 5c7187 H:36 H:17 • Dotum 12px bole 자간 -50 #ffffff H:29 H:29 H:35 • strok dash 1px # dedede • strok 1px # 5c7187 Dotum bold 12px # ffffff W:28 W:44 Line Weight: 1px Line Color: #CCCCCC • Bgcolor # 5c7187 제목폰트: daum bold 14px none #ffffff • 팝업의 높이와 넓이는 내용에 따라 가변적

3. Template 1 2 1 2 3.6.1Footer footer W:224 W:121 W:10 W:598 • RixMGo B 자간 -30 bold 11px strong #787878 • 국문 : RixMGo B 9 .61px 자간 -30 smooth #919191 영문및 숫자 : AvantGarde condMedium W:722 H:62 assignment team & contact info • 돋움 B/12pt/#000000, stroke box 3px #e7e7e7 • 각페이지 콘텐츠의하단에콘텐츠담당부서의 정보와, 연락처가나온다.

DESIGN STYLE GUIDE