Transcript 웹사이트 구축 기획서

여행 웹사이트 구축 기획서
팬스타투어(가칭) 웹사이트 구축 기획서
2010 / 01 / 28
신규사업팀 > 웹마케팅,디자인> 손한창 과장
참조문건 : 여행ERP구축 프로젝트 기획안(사무혁신팀), 각 참여업체 세부견적서
Copyright ©2011-2015 PANSTAR. CO., LTD. All rights reserved.
Reproduction, transfer, distribution or storage of part or all of the contents in this document
in any form without the express written consent of PANSTAR. is prohibited.
This is proprietary material of PANSTAR. CO., LTD.
It contains trade secrets and confidential business information that is the property of PANSTAR. CO., LTD.
목차
PAGE - 1
Contents
1. Summary of Project
1) Agency & Purpose
2) Workflow of Project
3) Focus of Planning
2. Analysis of Reference Site
3. Positioning Strategy
4. Information Architecture
1) Menu Tree (Back, Front Office)
2) Information Specification
5. Design Image Map
차례
1. 프로젝트 진행요점
1) 업체선정 및 선정배경
2) 프로젝트 진행 프로세스
3) 프로젝트 단계별 스케쥴링
2. 관련 웹사이트 분석
3. 포지셔닝 전략
4. 정보구성 및 설계
1) 메뉴 구조(시스템,홈페이지)
2) 기능정의서
5. 디자인 이미지맵
6. Grid & Layout System
6. 레이아웃 & 그리드 기획
4. Graphic User Interface
7. 그래픽 유저 인터페이스
6. Style Guide of Elements
1) Color Planning
2) Basic Graphic Type
3) Font Type _ Korean, English
8. 주요 요소 스타일 가이드
1) 컬러사용계획
2) 주요 그래픽 표현
3) 폰트타이프 사용 규칙
1-1. 업체선정 및 개발목표
PAGE - 2
A. 견적 참여 업체별 타당성 분석
1. 여행 ERP 시스템 개발 업체
운용 안정성
기능확장성
구축기간
구축견적
유지비용
비고
FIT System
풍부한 개발 겸험으로 안정성 확보
커스트마이징 작업이 다소 제한적임.
3개월
\20,000,000
월 \500,000
구축사례풍부, 신뢰도가 높음.
Click
사용성에 관한 뚜렷한 장점이 부족.
확장기능에 관한 개발역량의 부족.
\26,000,000
월 \600,000
구축 실례 부족으로 신뢰도가 낮음.
행복한여행
기존 이용자들의 높은 평가를 획득
확장이 용이하고 커스트마이징 편리.
2.5개월
\15,000,000
월 \400,000
기존 이용자들의 높은 평가.
코인랩
사용성에 관한 뚜렷한 장점이 부족.
확장에 관한 기획/제작 노하우 부족.
3개월
\15,000,000
요청 따른 실비
구축 실례 부족으로 신뢰도가 낮음.
*여행ERP구축 프로젝트 기획안(사무혁신팀) 및 업체별 세부견적서 참조.
2. 여행사 웹사이트 제작 업체
디자인 퀄리티
확장성 및 구축환경
구축기간
구축견적
유지비용
비고
FIT System
보편적인 여행사 기본포맷을 유지.
운영이 제한적이며 웹표준 적용불가.
40일
\12,000,000
요청 따른 실비
가격대비 운용기대치가 낮음
플립
대형 프로젝트 경험 풍부하고 고퀄리티.
확장성 높고 웹표준 및 완성도가 높다.
60일
\25,000,000
요청 따른 실비
안정적이나 가격이 다소 높음.
리드온
컨셉 브랜드 구축기반으로 비쥬얼 강점.
확장이 용이하고 여행전문인력 보유.
50일
\14,000,000
요청 따른 실비
구축기간 및 가격이 적합함.
이트라이브
대형 프로젝트 경험 풍부하고 고퀄리티.
확장성 높고 웹표준 및 완성도가 높다.
90일
\16,000,000
요청 따른 실비
구축사례풍부, 제작기간이 김.
*여행ERP구축 프로젝트 기획안(사무혁신팀) 및 업체별 세부견적서 참조.
1-1. 업체선정 및 개발목표
PAGE - 3
B. 개발업체 선정 및 업체별 주요개발목표
개발영역별 개별 선정의 배경
여행사ERP개발 전문업체들의 경우 프론트(웹사이트) 제작에서의 퀼리티와 노하우가 다소 떨어지고 정형화되어 있어 팬스타투어만의 컨셉 전달과 시각적인 아
이덴티티 확보가 어려운 반면 전문 웹에이젼시의 경우 여행 ERP제작에 관한 노하우가 떨어지고 개발소요기간이 길고 가격경쟁력이 떨어지기 때문에 웹사이트
(Front Office)와 ERP시스템(Back Office) 개발 업체를 각 영역에 강점이 있는 업체로 별도 선정하고 별도 선정시 야기될 수 있는 업무조율, 협업 등의 차질을
팬스타투어에서 적극 지원하는 것이 최선의 결과를 이끌어 낼 수 있다고 판단 됩니다.
여행ERP시스템
• 선정업체 : (주)행복한여행
• 선정이유 : 운영 안정성 및 개발 확장성이 높음.
통합ERP와의 연계성이 비교적 용이함.
시스템특허등록으로 신뢰도 확보.
• 개발목표 : ERP 인터페이스의 개선.
메뉴 및 기능의 최적화.
시스템속도향상 및 안정성 유지.
기존 여객시스템과의 DB연동.
여행사 웹사이트
• 선정업체 : (주)리드온
• 선정이유 : 비쥬얼 컨텐츠 생산에 강점이 있음.
컨셉 브랜드 위주의 풍부한 구축사례.
전문 웹에이젼시중 가격경쟁력이 높음.
• 개발목표 : G,U.I와 메인디자인의 시각 전달성 확보.
확장성의 용이한 상품, 컨텐츠 페이지 생산.
웹표준에 맞춘 안정적인 크로스브라우징.
추후 운영에 요구되는 스타일가이드 확보.
1-2. 프로젝트 진행 프로세스
PAGE - 4
진행 프로세스 및 협업방식
구축 업체의 장점을 강화하고 협업에서 발생하는 약점을 보완하기 위해
PanStar여행 이 프로젝트 기획과 P.M 역할을 수행하도록 한다.
PanStar
사무혁신팀
PanStar Tour
•
•
•
•
개발, 제작주체에 업무를 요청시 범위와 목적을 명시하고 명확한 개발정의서 제작.
기존 PanStar ERP 시스템과의 연동을 위한 사무혁신팀과 개발업체간 의견조율.
시스템 개발업체와 홈페이지 개발업체간 원할한 업무 진행을 위해 스토리보드 작성.
구축에 요구되는 컨텐츠를 수집하고 문서화하여 개발업체에 제공.
행복한여행 ERP개발팀
•
•
•
•
프로젝트를 위한 별도 인터페이스 환경 개발 및 주요기본기능 조기 구축.
요청되는 개발정의서에 따라 ERP 기능 커스트마이징 및 신규기능 개발.
ERP개발에 요구되는 각종 업무(전자결재,온라인팩스)대행 및 커스트마이징.
웹에이젼시에서 퍼블리싱된 웹사이트 산출물로 변경없이 웹프로그래밍 작업.
리드온
웹에이진시
Div
PanStarTour
행복한여행
기획, 업무조율
ERP개발팀
리드온 웹에이젼시팀
•
•
•
•
여행, 여객 주요페이지를 제외한 웹사이트 각 페이지의 스토리보드 작성.
G.U.I 디자인에 따라 운영에 요구되는 상세한 스타일가이드 제공.
웹사이트 기획안에 맞춘 디자인컨셉 도출 및 세부페이지 디자인 및 웹표준 퍼블리싱.
ERP 개발업체에서 요구하는 시스템 환경 디자인 지원.
PanStar
여객서비스팀
1-3. 프로젝트 단계별 스케쥴
PAGE - 5
단게별 진행 스케쥴
웹사이트 구축과 시스템이전의 모든 과정은 2011년 3월 말 시스템을 정상적으로 베타 오픈하고 4월 초까지의 충분한 사용성 검토와 업데이트를 거쳐 서비스 이전
에 무리가 없도록 하기 위해 각 단계별 업무를 구분하고 이를 기간 내 엄수하도록 한다.
1단계 : 기획 단계 : 메뉴 구조(Architecture) 기획 / 메인 네비게이션(U.I) 디자인 / 디자인 스타일 가이드 제작 / 헤르메스 서비스 구조 확정.
2단계 : 웹사이트 제작 단계 : 메인페이지 디자인, 주요 서브페이지 디자인 확정 / 웹사이트 코딩 및 기본 프로그램 연동 / 헤르메스 시스템 커스트마이징 작업.
3단계 : 시스템 개발 단계 : 구축된 웹사이트와 헤르메스 시스템 연동 / 관리자페이지 인터페이스 제작.
4단계 : 베타 오픈단계 : 실사용이 가능하도록 시스템을 완전히 가동시키고 기간 중 사용성 검토와 버그 체크 및 시스템 이용 교육.
1단계
3단계
| 기술부분 토의 및 웹사이트 리뉴얼 컨셉 확정.
| 주요 메뉴 구성 및 인터페이스, 페이지 레이아웃 확정.
| 디자인 스타일 가이드 제작.
0 day
10 day
| 프로그램 개발.
| 웹사이트 각 페이지 사용성 검토 및 수정 .
15 day
45 day
| 메인페이지, 주요 서브페이지 디자인.
| 웹사이트 페이지 코딩 및 주요 컴포넌트 제작.
2단계
각 단계별 소요일수는 주간 5일 업무일수에 맞추어 산정되었으며 세부일정은 개발업체별 협의 후 변경될 수 있습니다.
60 day
Total 70 days
| 웹사이트 기본 DB 업데이트 및 컨텐츠 정비.
| 구축 전반 수정내역에 따른 수정 작업.
4단계
2-1. 웹사이트 구축 중점사항
1. 구축 완료 후 운영에 따른 확장성과 리뉴얼 편의성 의 최대화
주요점검대상
• 웹사이트 구조 설계시 각 주요 영역별로 규격화하고 일괄적인 스타일가이드 적용과 엄격한 스타일쉬트 규정이 사용되어 제작될 수 있도록 한다.
• ERP시스템 메뉴구조와 인터페이스가 직접적인 사용자위주로 최적화될 수 있도록 설계하고 순차적 업무진행에 무리가 없도록 Workflow를 점거한다.
• 추후 메뉴 및 기능 추가에 용이하도록 운영 영역별로 스타일쉬트를 분리하고 통합적인 사용이 요하는 부분은 가능한 최소한 하도록 한다.
2. 브랜드 포지셔닝 전략에 따라 비쥬얼 컨셉이 명확하고 일괄적인 아이덴티티를 확립
주요점검대상
• 기획된 이미지맵의 컨셉에 맞게 디자인가이드를 체계적으로 수립하고 배너 등 주요요소의 스타일가이드를 디테일하게 생산하여 운용할 수 있도록 한다.
• 아이덴티티 컬러와 주요 비쥬얼간의 컬러 비율을 일정하게 조절하고 특성화된 그래픽 엘리먼트를 사용하여 신규 브랜드의 아이덴티티 전달성을 높인다.
• 비쥬얼 표현과 관계된 디자인요소는 스타일쉬트상에서 주석과 함께 별도 파일로 분리시키고 운영에 필요한 원본 파일을 스타일가이드내에 포함시킨다.
3. ERP시스템을 통한 제어범위를 최대화 (프로모션 정보 및 컨텐츠 포함)
주요점검대상
• 메인메뉴 및 상품카테고리를 ERP시스템에서 설정하고 이를 XML을 통해 웹사이트상에서 실시간 전시설정이 가능하도록 제작한다.
• 상품정보의 각 영역(관광지, 숙소, 일정, 현지티켓, 옵션 등)이 ERP시스템을 통해 등록/관리되고 상품과 연계하여 설정이 가능하도록 한다.
• 주요 여행 컨텐츠 및 기획전 등과 같은 프로모션 정보가 ERP시스템을 통해 등록/관리되고 건별 리포트를 작성,보관할 수 있도록 지원한다.
PAGE - 6
2-2. 웹사이트 주요 컨셉 도출
PAGE - 7
팬스타투어 포지셔닝 전략의 핵심 내용을 웹사이트를 통해 명확히 전달될 수 있도록 비쥬얼 전달성 강조
팬스타투어는 일본여행시장에서 크루즈 연계일본여행 시장을 확대하고 새로운 일본여행 트렌드를 제공하는 브랜드로 포지셔닝한다.
팬스타투어는 일본여행시장에서 팬스타만이 가지는 강점들을 최대한 부곽한 상품을 기획, 제공하고 연근해 크루즈여행 트랜드 프로모션에 적극 참여함으로써
치열한 레드오션속에서 크루즈연계여행의 영역을 확대해 나가고 창출된 시장을 선도한다.
1.크루즈 연계여행상품을 가장 편리하게 이용할수 있는 팬스타투어
비쥬얼 포인트 : 추후 웹에이젼시와 협의 진행.
웹사이트 노출 : 추후 웹에이젼시와 협의 진행.
카피라이트 사용 : 추후 웹에이젼시와 협의 진행.
2.특별한 체험의 일본여행을 제공하는 팬스타 투어
비쥬얼 포인트 : 추후 웹에이젼시와 협의 진행.
웹사이트 노출 : 추후 웹에이젼시와 협의 진행.
카피라이트 사용 : 추후 웹에이젼시와 협의 진행.
3.선사가 운영하여 실시간 크루즈부킹이 가능한 팬스타투어
비쥬얼 포인트 : 추후 웹에이젼시와 협의 진행.
웹사이트 노출 : 추후 웹에이젼시와 협의 진행.
카피라이트 사용 : 추후 웹에이젼시와 협의 진행.
3-1. 관련 웹사이트 분석
•
•
•
•
PAGE - 8
웹사이트명 : 소쿠리트래블
운영업체 : (주)르씨에나
URL : http://www.socuritravel.com
선정배경 : 상품과 컨텐츠의 볼륨이 비슷하며 컨셉 중심의 전문여행사라는 유사점이 있다.
메인페이지
서브 메인페이지
상품리스트 페이지
분석 웹사이트 참조사항
1.
2.
3.
4.
5.
브랜드 아이덴티티 컬러를 웹사이트 전반과 G.U.I를 통해 적절히 유지해 주고 있으며 컬러의 분배가 안정적이다.
상품 리스트와 상세정보페이지의 간결하고 직관적인 레이아웃 사용으로 정보전달성이 높으며 컨텐츠가 잘 정리되어 있다.
상품이외의 메뉴에서까지 일률적인 레이아웃 사용으로 단조로운 인상을 주며 게시판 등의 디자인에서 스타일 표현이 어색하다.
검색기능이 단조로우며 크로스 브라우징에 최적화 되어 있지 않다.
메인페이지와 지역메인페이지의 레이아웃이 동일하게 적용되어 있어 단조로운 인상을 주고 있다.
상품상세 정보 페이지
3-1. 관련 웹사이트 분석
•
•
•
•
PAGE - 9
웹사이트명 : 자유나침반
운영업체 : (주)자유나침반
URL : http://www.compassfree.com/
선정배경 : 메뉴구조와 컨텐츠 볼륨이 유사하며 컨셉 중심의 전문여행사라는 유사점이 있다.
메인페이지
서브 메인페이지
상품리스트 페이지
상품상세 정보 페이지
분석 웹사이트 참조사항
1.
2.
3.
4.
웹사이트 내에서 현지전문가이드투어라는 컨셉 유지가 잘 되고 있으며 컨텐츠와 상품에서도 컨셉의 지속적인 노출이 이루어지고 있다.
메뉴가 직관적이고 쉽게 구성되어 있으며 메인페이지를 이용한 주요 상품 및 컨텐츠 이동이 용이하도록 구성되어 있다.
비쥬얼 오브젝트와 컬러의 사용이 과도하여 산만한 인상을 주며 박스형 개체 디자인이 반복적으로 사용되어 시각적인 피로를 유발하고 있다.
모든 메뉴에서 일률적인 레이아웃을 고수하고 있어 메뉴 이동시 단조롭고 메뉴별 U.I에서 시각적인 균형이 떨어진다.
3-1. 관련 웹사이트 분석
•
•
•
•
PAGE - 10
웹사이트명 : 블루트래블
운영업체 : (주)블루항공
URL : http://australia.bluetravel.co.kr/
선정배경 : 취급상품의 범위와 컨텐츠의 볼륨이 방대하나 상품, 컨텐츠 노출과 비쥬얼 사용면에 참조할 부분이 많다.
메인페이지
서브 메인페이지
상품리스트 페이지
상품상세 정보 페이지
분석 웹사이트 참조사항
1.
2.
3.
4.
5.
메인 페이지에서 상품과 컨텐츠 노출 방식이 웹진형태를 갖추고 있어 사용자의 흥미를 유발함과 동시에 시각적인 전달력이 높다.
메인컬러와 주요 비쥬얼의 컬러분포를 적절히 분배하여 아이덴티티를 확보하면서도 조화로운 구성이 가능하도록 했다.
인터페이스 설계상 낭비되는 부분을 최소화시키면서도 공간 안배를 통해 산만함을 억제하고 있다.
여행 관련 컨텐츠들을 그래픽 위주로 편집 제공하여 흥미를 유발하면서도 이를 웹게시판을 통해 서비스하여 DB활용이 가능하도록 한다.
사용되는 텍스트의 사이즈나 주요버튼 등이 전반적으로 작게 설정되어 있어 시각적인 피로감을 유발한다.
3-1. 관련 웹사이트 분석
•
•
•
•
PAGE - 11
웹사이트명 : 크럽토마스
운영업체 : (주)월드비젼
URL : http://www.clubthomas.co.kr/
선정배경 : 크루즈 여행이라는 동일한 컨셉을 가지고 있다.
메인페이지
서브 메인페이지
상품리스트 페이지
상품상세 정보 페이지
분석 웹사이트 참조사항
1. 단순해 보이지만 플래쉬 액션을 통한 메뉴설명으로 알기 쉬운 U.I를 제공하여 세부 상품, 컨텐츠로의 접근이 용이하도록 설계되어 있다.
2. 컨셉 비쥬얼 영역을 넓게 확보하여 컨셉의 전달성을 높으나 제한적인 사진으로만 이루어져 있어 주요 영역의 활용성이 떨어진다.
3. 상품 카테고리 메인과 상품리스트 페이지 모두 과도히 단순하고 일률적이어서 지루한 인상을 남긴다.
3-1. 관련 웹사이트 분석
•
•
•
•
PAGE - 12
웹사이트명 : 크루즈 얼라이언스
운영업체 : (주)크루즈 얼라이언스
URL : http://www.cruiseall.co.kr/
선정배경 : 크루즈 여행이라는 동일한 컨셉을 가지고 있다.
메인페이지
서브 메인페이지
상품리스트 페이지
분석 웹사이트 참조사항
1. 크루즈 여행이라는 컨셉의 표현이 이루어지고 있으나 정형화되고 일반적인 포맷을 사용하고 있어 브랜드만의 특성을 찾아보기 어렵다.
2. 주요 비쥬얼과 폰트의 처리가 계획적이지 못하고 스타일가이드가 확립되지 못해 효율적인 정보전달에 어려움이 있다.
3. 크루즈 여행에 관한 컨텐츠가 잘 리스트업 되어 있으나 컨텐츠의 질이 떨어지고 텍스트 위주의 구성으로 전달력이 떨어진다.
상품상세 정보 페이지
3-1. 관련 웹사이트 분석
•
•
•
•
PAGE - 13
웹사이트명 : 크루즈 인터내셔널
운영업체 : (주)크루즈 인터내셔날
URL : http://www.cruise.co.kr/
선정배경 : 크루즈 여행이라는 동일한 컨셉을 가지고 있다.
메인페이지
서브 메인페이지
상품리스트 페이지
분석 웹사이트 참조사항
1.
2.
3.
4.
확장, 운용성을 고려하지 않은 사이트 설계로 U.I와 주요영역에서 에러가 난 것 같은 인상을 준다.
웹사이트의 전체적인 스타일가이드가 확립되지 못해 메뉴 또는 페이지별로 통합된 인상을 주지 못하고 있다.
메인비쥬얼 영역을 최대한 확보하여 주요 상품의 즉각적이고 일방적인 홍보가 가능하도록 하고 있다.
컨텐츠의 구성이 획일화 되어 있고 외부사이트 이동으로 컨텐츠를 전달하고 있어 정보의 질이 떨어진다.
상품상세 정보 페이지
4-1. 웹사이트 정보구성 및 설계 _ Fornt Office
NO.
1-0-0
depth 1
depth 2
depth 3
PAGE - 14
depth 4
depth 5
구분
연동
자료
비고
Pan Route [여행상품]
자유/배낭 여행
메인
스토리보드
레이아웃 관리자 설정
에어텔
3차 상품메뉴 가능
○
스토리보드
메뉴명/노출 관리자 설정
팬크루즈
3차 상품메뉴 가능
○
스토리보드
메뉴명/노출 관리자 설정
팬스타에어
3차 상품메뉴 가능
○
스토리보드
메뉴명/노출 관리자 설정
허니문크루즈
메인
○
스토리보드
레이아웃 관리자 설정
맞춤여행
메인
○
스토리보드
레이아웃 관리자 설정
원나잇크루즈
메인
○
스토리보드
레이아웃 관리자 설정
원나잇크루즈예약
○
스토리보드
크루즈티켓박스
메인
○
스토리보드
현지 티켓/패스
메인
○
스토리보드
티켓/패스 리스트
○
스토리보드
티켓,패스 활용법
image
○
스토리보드
별도 컨텐츠
알뜰 할인쿠폰
image
○
스토리보드
소개 및 프린트 지원
○
스토리보드
테마 이미지
○
스토리보드
소개 및 특징, 사용방법
○
스토리보드
예약1단계 - 예약상품확인
○
스토리보드
예약2단계 - 로그인
○
스토리보드
예약3단계 - 예약자정보입력
○
스토리보드
예약4단계 - 예약내역확인
○
스토리보드
예약5단계 - 예약완료/안내
○
스토리보드
예약1단계 - 예약상품확인
○
스토리보드
예약2단계 - 로그인
○
스토리보드
예약3단계 - 예약자정보입력
○
스토리보드
예약4단계 - 예약내역확인
○
스토리보드
예약5단계 - 예약완료/안내
○
스토리보드
료칸팬
메인
료칸 이야기
료칸상품 리스트
상품예약페이지
옵션예약페이지
크루즈 발권
image
비회원예약 지원
비회원예약 지원
4-1. 웹사이트 정보구성 및 설계 _ Fornt Office
NO.
2-0-0
depth 1
Pan Story [커뮤니티]
depth 2
depth 4
depth 5
구분
연동
자료
비고
메인
팬스타크루즈 즐기기
image
○
컨텐츠준비
안내 & 승선주의사항
팬스타 만나기
image
○
컨텐츠준비
출발~터미널 도착까지story
추천! Pan Route
board
○
컨텐츠준비
추천관광지 & 추천 맛집
도전! PanStar 여행기
board
스토리보드
기획,오픈형 여행기
Dream People
image
스토리보드
승무원,OP 소개
Star Gallery
board
○
스토리보드
갤러리형식 게시판
일본은 이런나라
html
○
컨텐츠준비
웹진스타일 편집
공항, 터미널 체험
html
○
컨텐츠준비
웹진스타일 편집
대중교통을 타보자
html
○
컨텐츠준비
웹진스타일 편집
알뜰 할인정보(패스)
html
○
컨텐츠준비
웹진스타일 편집
실전여행 일본어
html
○
컨텐츠준비
웹진스타일 편집
일본여행백서
3-0-0
depth 3
PAGE - 15
About PanStar [회사소개]
팬스타 소개
html
기존 참조
팬스타투어는
html
컨텐츠준비
제휴안내
webmail
찾아오시는 길
html
홍보/보도 자료
board
○
스토리보드
기존 참조
○
스토리보드
일반형 게시판
4-2. 웹사이트 정보구성 및 설계 _ Fornt Office
NO.
4-0-0
depth 1
My PanStar [마이페이지]
depth 2
depth 3
PAGE - 16
depth 4
depth 5
구분
연동
자료
비고
메인
회원 로그인
아이디비번 찾기
기존 참조
우편번호 검색
기존 참조
회원가입
약관동의/실명인증
○
기존 참조
제휴회원 전환가입 안내
○
컨텐츠준비
가입정보입력
○
기존 참조
가입완료/혜택안내
○
컨텐츠준비
○
스토리보드
나의 예약상황
개인정보관리
정보변경/탈퇴신청
스토리보드
상담내역
내 관심상품
5-0-0
Star Lounge [고객센터]
○
메인
스토리보드
일반형 게시판
스토리보드
별도 전용 게시판
스토리보드
질문과 답변
board
○
기존 참조
일반형 게시판
자주묻는 질문
board
○
기존 참조
별도 전용 게시판
고객의 소리
webmail
○
스토리보드
별도 전용 게시판
○
스토리보드
별도 전용 게시판
여행자보험 가입
공지사항
board
○
기존 참조
이용약관/개인정보취급방침
html
○
기존 참조
사이트 맵
6-0-0
별도 전용 게시판
일반형 게시판
기존 참조
이벤트/기획전
진행중인 이벤트
○
스토리보드
별도 전용 게시판
종료된 이벤트
○
스토리보드
별도 전용 게시판
이벤트 당첨자 발표
○
스토리보드
별도 전용 게시판
4-2. 웹사이트 정보구성 및 설계 _ Back Office
NO.
1-0-0
depth 1
depth 2
depth 3
PAGE - 17
depth 4
depth 5
구분
비고
기본자료관리
거래처관리
등록/수정/통계 보기
이미지/파일 관리
환률관리
사원관리
사원정보
사원근태관리
연차/휴가 관리
온라인통장관리
온라인통장
가상계좌연동
지역별계좌관리
입금요청내역
온라인팩스
2-0-0
외부연동
상품/정보 관리
상품메뉴관리
등록/수정/노출 동시 설정
폴더트리방식
코드지정기능
상품관리/등록
상품전시설정
노출기간 설정기능.
항공/해운 스케쥴 관리
상품 등록/수정
행사 등록/수정
출발일/요금 설정
블록/요금 불러오기 기능.
상품소개
일정표 설정
일정 등록/수정
일정 불러오기 기능.
투어/옵션 설정
관련 컨텐츠 설정
컨텐츠 불러오기 기능.
기타 정보 설정
호텔/숙소 관리
카테고리 등록/노출 관리
폴더트리방식
코드지정기능
폴더트리방식
코드지정기능
폴더트리방식
코드지정기능
호텔/숙소 등록
투어/티켓 관리
카테고리 등록/노출 관리
별도투어 등록
현지티켓 등록
관광지 정보 관리
카테고리 등록/노출 관리
호텔/숙소 등록
4-2. 웹사이트 정보구성 및 설계 _ Back Office
NO.
3-0-0
depth 1
depth 2
예약/영업 관리
depth 3
PAGE - 18
depth 4
예약건별 별도진행 창
depth 5
구분
진행프로세스 표시
여행상품 예약관리
주문내역확인/진행 변경
단체상품 예약관리
상담등록
기타 단품 예약관리
문자/메일 보내기
금액정정/입금내역
정산서보기
모객현황관리
오버츄어 등록/관리
4-0-0
외부연동
정산/회계 관리
담당자별 정산내역
미정산 진행상태 관리
기간별 정산 통계
거래처별 정산
상품별 수익현황
수익/지출 현황
세금계산서
입출금 계정관리
결의서대장
자금현황
온라인통장
외부연동
비고
3-2. 웹사이트 정보구성 및 설계 _ Back Office
NO.
5-0-0
depth 1
depth 2
depth 3
PAGE - 19
depth 4
depth 5
구분
비고
홈페이지 관리
메인페이지 관리
상품메인 관리
베스트,추천 상품 관리
자동 검색어 등록
팝업창 등록/관리
게시판 관리
노출형태/기간 설정.
메인
공지사항
자주묻는 질문
질문과답변
홍보/보도 자료
고객의 소리
회원탈퇴
Star 갤러리
html 소스 복사 지원.
주요 컨텐츠 관리
여행기 관리
Pan Route 관리
Pan People 관리
기획전/이벤트 관리
이벤트 등록/수정
당첨자 SMS,메일 지원.
이벤트 당첨자 발표
주요 접속통계
6-0-0
회원 관리
회원등록/관리
탑승/웹 회원 관리
단체메일발송
회원상세검색지원
멀티 메신저
팩스,SMS,메일 지원
SMS액션등록/발송
7-0-0
업무 관리
업무공지사항
개인정보관리
업무일지
공용 스케줄 관리
공문서관리
양식등록지원
인보이스 등 생성.
5-1. 메인 인터페이스 그리드 시스템
90 px
PAGE - 20
01_ Signature Area
B.I 와 브랜드 슬러건이 마우스액션 애니메이션으로 제작.
02_ Product Menu Area
여행상품메뉴 - 상품 메뉴를 ERP에서 설정된 Xml 정보를 연동 플래쉬 네이게이션으로 제작. (2Depth 지원)
03_ Short Cut Menu Area
테마상품메뉴 - 실시간크루즈예약, 원나잇크루즈, 단체맞춤여행, 전통료칸. (1~2개 메뉴 추가/삭제 가능)
04_ Contents Menu Area
PanStory메뉴 - PanStar만나기 / 크루즈즐기기 / 추천, Pan Route / PanStar 여행기 / Dream People 등 하위 메뉴 선택적 노출.
05_ Basic Menu Area
로그인, 사이트맵, 예약확인, 고객센터 (그룹 분할 가능)
06_ Search Area
상품 및 컨텐츠 검색창 영역. (메인 G.U.I 에서 제외 가능.)
07_ Sliding menu Area
전체 상품 카테고리를 xml연동하여 한눈에 볼 수 있도록 텍스트 기반으로 제작.
01_ Signature Area
페이스북/트위터/미투데이 아이콘 지원
04_ Contents Menu Area
05_ Basic Menu Area
02_ Product Menu Area
03_ Shortcut Menu Area
07_ Sliding Menu Area
180 px
540 px
900 px
180 px
5-2. 여행상품 메뉴 노출방식
PAGE - 21
1. Product Menu ( 여행상품메뉴 )
• 1Depth (상품 형태에 따른 분류) - 크루즈텔 (CRUISE 타고 놀자! ) 에어크루즈 (AIR & CRUISE 타고 놀자!) 에어텔 (비행기 타고 놀자!)
• 2Depth (여행 일정에 따른 분류) – 2박3일 / 3박4일 / 4박5일 / 5박6일 / 6박7일
• 3Depth (숙소 성격에 따른 분류) – 베이직(비지니스급호텔) / 다이나믹(4성급호텔) / 럭셔리(5성급호텔) / 릴렉스(전통료칸,특급호텔)
메인 G.U.I
1. 상품메뉴관리 ERP페이지를 통해 메뉴명 설정하고 플래쉬 네비게이션에서 Xml 연동 제작하되 메뉴 추가 및 글자수 변경에 대처 가능하도록 제작한다.
2. 상품의 1Depth 메뉴명만 고정 노출, 2 Depth 메뉴는 롤오버시 애니메이션 종료 후 노출하도록 한다.
3. 상품의 3Depth 까지 모든 카테고리 정보를 슬라이딩 방식으로 노출하도록 하는 버튼을 G.U.I 에 포함하도록 한다.
서브 G.U.I
1. 모든 상품 관련 페이지의 본문 좌측 상단에 공통된 형식으로 제작하며 이동한 1Depth 하위 메뉴만 모두 노출하는 형태로 제작한다.
2. 서브 G.U.I 상단에 1Depth 타이틀 영역에서 상품군의 성격을 충분히 표현할 수 있도록 제작한다.
2. Short Cut Menu ( 옵션상품메뉴 )
• 실시간 크루즈 예약 – 팬스타 오사카 정기 크루즈 안내 및 예약 페이지 이동.
• 단체맞춤여행 – 팬스타 크루즈를 이용한 단체 여행 신청 페이지 이동.
• 원나잇 크루즈 예약 – 팬스타 주말 원나잇 크루즈 안내 및 예약 페이지 이동.
메인 페이지
1. 메인 G.U.I 에 포함되거나 메인페이지 본문상의 배너 형태 노출도 가능하다.
2. 고정 3개 메뉴 외 추가메뉴 개수가 시즌에 따라 유동적이므로 개수의 추가가 용이하도록 플래쉬 롤링배너 형태로 제작하도록 한다.
서브 페이지
1. 메인 G.U.I 에 포함시 서브페이지 별도 노출이 불필요하며 메인 G.U.I 불포함시 좌측메뉴 하단에 플래쉬 롤링 배너 형태로 제작한다.
5-3. 메인페이지 주요 컨텐츠
PAGE - 22
메인 로그인 고객센터 예약확인 사이트맵
팬Story
크루즈텔(베이직/다이나믹/디럭스) 에어크루즈 에어텔
선내면세쇼핑
부산 원나잇크루즈
오사카 정기크루즈
♣피크닉플래너
상품, 프로모션 영역
상품검색창
(일본여행|원나잇크루즈|오사카크루즈)
출국일/여행일수
크루즈/항공/복합
크루즈,항공 선실 등급
숙소등급/형태
인원/성인,어린이,유아
패밀리가 떳다!
원나잇크루즈 가족 페스티발
엄마,아빠도 함께 크루즈 크루즈~
하나, 온 가족이 함께라면 엄마는 무료!
둘, 행복가득! 가족 크루즈 기념사진 앨범
셋, 도전! 팬스타 슈퍼스타패밀리
2011년 5월 10일 패밀리가 뜬다.
드림호는 우리가 점령한다!
단체크루즈여행 문의!
크루즈일본여행 따라가기
팬스타 타고 떠나는
이색적인 일본 여행
타는 순간 시작되는
즐거운 크루즈 여행을
미리 만나보자.
국제 크루즈 터미널
도심에 위치해 더욱 편리한
크루즈 터미널 이용하기
고객만족센터
1566-3082
평일 09:00~18:00
MD추천상품 or 긴급특가상품
상품대표이미지+상품명+가격+(출발일)
알콩달콩 크루즈 여행기
벌써 도착했는데…
아직 내리고 싶지 않다면?
거긴 바로
팬스타 드림호
크루즈 Duty Free 예약
선배 면세점 간략한 안내
면세점 이벤트 노출
Hot NEWS
팬스타 드림 운항 일정표
( 1개월 노출 )
(월별 이동 지원)
드림호 선내 이벤트
Panstar.co.kr
이벤트페이지내
진행이벤트 참조
유니버셜 스튜디오 재팬
환상과모험의 세계로 빠져든다
나는 뱃속에서 논다
주요 컨텐츠 영역
벌써 도착했는데…
아직 내리고 싶지 않다면?
거긴 바로
팬스타 드림호
이달의 드림 크루
크루즈 안내,홍보 영역
외국인 크루 위주의
간략한 프로필과 인삿말
날씨(부산,오사카,동경) | 환률
일반 안내 영역
5-4. 여행 컨텐츠 운영
PAGE - 23
웹사이트 오픈 시 제공해야 할 컨텐츠 제작 계획
1. 컨텐츠 형태별 운영/제작 계획
I.A 분류상 메뉴
등록/노출 형태
수량
자료수급
비고
제작형 컨텐츠
1D 회사소개, 팬스토리 이하 5~7개 메뉴
FTP 별도 등록/노출 관리.
20~30 P
손한창/마혜영
자체 기획/제작/배포 하는 홍보용 컨텐츠
기획형 컨텐츠
1D 팬스토리 이하 2개 메뉴
ERP 관리자 등록/노출 관리.
10~20 P
마혜영
기획 후 전문가 단위에 의뢰 제작하는 컨텐츠
오픈형 컨텐츠
1D 팬스토리 이하 2~3개 메뉴
Front 유저 직접 등록/노출
10~20 P
이미화
웹사이트 이용자가 직접 거재하는 컨텐츠
정보형 컨텐츠
2D 일본여행백서 이하 5~7개 메뉴
FTP 별도 등록/노출 관리.
5~10 P
이미화
간략한 형태의 기본정보제공 컨텐츠
*유형별 각 해당 메뉴는 I.A 세부내역 참조.
2. 주요 컨텐츠 자료수급, 제작 방식
• 팬스타 소개, 팬스타투어는 등 회사 소개 컨텐츠
• 팬스타크루즈는, 에어크루즈란 등 상품 안내 컨텐츠
• 팬스타여행기, 추천 팬루트, 팬스타찾기 등 참여형 컨텐츠
• 일본여행백서, 도시정보, 관광지 정보 등 정보형 여행 컨텐츠
6-1. 웹사이트 디자인 레퍼런스
PAGE - 24
디자인 참조 사이트의 선정 방향
1. 정형화된 여행사 웹사이트의 형식을 탈피하고 브랜드의 컨셉과 정체성을 최대한 어필할 수 있는가?
2. 정보전달이 쉽고 심플하면서도 필요 컨텐츠들의 노출이 제한적이지 않는가?
3. 메인컬러와 이미지들의 사용이 과도하지 않으면서 충분히 전달성을 높일 수 있는가?
LG 유플러스
OK캐쉬백 피클
신한카드 아름인
광동 옥수수수염차
URL : http://home.uplus.co.kr/
URL : http://www.pickl.kr/
URL : http://arumin.shinhancard.com
URL : http://www.oksusutea.com
참조사항
참조사항
참조사항
참조사항
-메인컬러 사용의 비중과 톤 안배.
-메인이벤트 영역의 표현.
-시그니취 영역과 검색 영역의 표현.
-메인 주요 컨텐츠 노출 방식.
-메인컬러 사용의 비중과 톤 안배.
-메인 컨텐츠의 표현과 레이아웃.
-롤오버 버튼들의 애니메이션 효과.
-세부 컨텐츠 노출 방식.
-메인컬러 사용의 비중과 톤 안배.
-메인 컨텐츠의 표현과 레이아웃.
-롤오버 버튼들의 애니메이션 효과.
-세부 컨텐츠 노출 방식.
-메인컬러 사용의 비중과 톤 안배.
-포토이미지와 그래픽 조화.
-일러스트 에니메이션을 통한 재미.
6-2. 비쥬얼 이미지맵
PAGE - 25
7-1. 컬러 사용 규정
PAGE - 26
컬러 사용 규정 _ 사이트의 특성상 많은 컬러가 사용되어질 우려가 있음으로 세부 디자인 시에도 아래의 컬러 규정에 의거하여 최대한 컬러가 통제될 수 있도록 한다.
컬러의 톤은 아래의 주된 3가지 톤 이외에는 어두운 톤 [ 80~90% Gray ]와 밝은 톤 [ 10~20% Gray]를 사용하여 비중을 조율하도록 한다.
특히, 각 버튼의 제작, 배너, 이벤트이미지 시에도 아래의 컬러규정을 제외한 컬러가 튀는 느낌으로 사용되지 않도록 주의한다.
Identity Color
Camel Red
#722028
#EBB555
#FFE49E
Main Color 와 30% 대비의 보색인 브라운에
서채도를 낮추고 투명도를 높인 세피아톤으
로 톤보정을 위한 보조 Color로 사용한다.
DecoratIon Color
Light Sepia
#736A66
#B2AA9C
#DAD1C3
Navy Blue느낌이 첨가된 Blue을 사용함으로
써 너무 튀지 않으면서도 강조할 영역과 전체
톤 보정할 수 있도록 한다.
Accent Color
Navy Blue
팬스타 고유 컬러인 Orange계열 중 Brown을
가미하여 안정감을 주는 Camel Orangde
채도 10% 명도 10% 다운하여 사용함으로
Main Color의 무게를 실어준다.
#005355
#009095
#9BD6C9
7-2. 폰트 사용 규정 - 한글
TITLE
PAGE - 27
윤고딕 120
36 PT
자간 100% 장평 90%
S U B_ T I T L E
SD_Gothic M
18 PT
자간 100% 장평 100%
CONTENTS
SPECIAL
SD_Gothic M
11 PT
자간 100% 장평 90%
CONTENTS
BASIC
돋움
12 PT
자간 100% 장평 100%
7-3. 폰트 사용 규정 - 영문
PAGE - 28
DIN Schrift_ 1451 36pt
HEAD
DIN Schrift_ 1451 Mittel
자간 100% 장평 100%
LINE
CONTENTS
TITLE
CONTENTS
BASIC
DIN Schrift_ 1451 14pt
DIN Schrift_ 1451 Mittel
16 PT
자간 100% 장평 100%
verdana
11 PT
자간 100% 장평 100%
PAGE - 29
본 웹사이트구축기획안은 진행상황에 맞춰 수정되어 질 수 있으며
수정시에 수정자와 주요수정사항, 수정일시가 하단에 추가 됩니다.
2011 PANSTAR TOUR Website Planning
팬스타투어 웹사이트구축기획안
수정일_ 2011년 01월 28일
초안 신규사업팀 손 한 창 과장 2011. 01. 12