Embed Size (px)
Citation preview
전세계 카쉐어링 가입 회원 수 현황 (EMBARQ, 2012)
-1대의 자동차를 여러 명의 회원이 공동 이용 -기본 대여시간은 30분이며 이후 10분 단위로 요금 계산 -스마트폰에서 차량위치 조회 가능(자동차가 어디에나 있다) -언제 어디서나 편리하게 필요한 시간만큼 사용
가장 트렌디한 유행을 앞서가는 누구나 갖고 싶어 하는
스마트폰만 있으면 예약 가능 렌터카 대여와 다르게 복잡한 계약서 작성 절차가 필요 없이 스마트폰 하나로 실시간 예약이 가능
무인 대여 시스템 스마트폰 애플리케이션을 사용하여 무인 대여가 가능 예약부터, 차량 잠금장치, 이용요금 대납, 차량 반납 등
웨어러블 디바이스/ 음성인식 가능 스마트폰 뿐만 아니라 웨어러블 디바이스로 서비스 이용 문을 열거나, 비상등, 경적 등 음성인식
갤럭시 렌터카 http://www.galaxyjeju.com/
전체적인 레이아웃 구성
쏘카 http://www.socar.kr/
그린카 http://www.greencar.co.kr/
컨텐츠 구성(쿠폰 북, 서비스 안내, 예약 페이지, 주행요금 계산기 등)
1depth 2depth 구성내용
Main Page 메인 페이지 메인 비주얼, 소개글, 잇카의 장점, 이벤트, 공지사항, 이용후기를 한 눈에 볼 수 있음
it car
서비스 소개 It car 회사 소개, 카쉐어링 안내
이용방법 카쉐어링/렌터카 이용 방법, 이용 에티켓 안내
잇카zone 신청
잇카 가이드
홍보자료
요금안내
요금/보험 안내 카쉐어링 요금 및 보험 안내
특가상품
부가서비스
요금 문의하기
법인/단체
가입 및 이용방법 법인/단체 이용 방법 안내
법인 잇카zone 신청
제휴신청
커뮤니티
공지사항
FAQ 자주 묻는 질문, 1:1 문의 폼
이용후기 it car를 해시태그한 SNS 게시물 모음
이벤트 이벤트 이벤트 안내, 쿠폰 북 게시, 당첨자 발표
렌터카
렌터카 예약 렌터카 예약(캘린더 사용) 및 장/단기 렌트 이용 안내
요금안내
정비패키지
비즈케어
보험대차
카쉐어링 예약 카쉐어링 예약 카쉐어링 예약
프로젝트 명 title date Page no.
화면 구성 화면 제목
location
Description
12
It CAR 카쉐어링 서비스
Main Page
전체사이즈: 1920px 컨텐츠사이즈: 1280px 1. 메인 비주얼은 정지된 화면(슬라이
드 사용하지 않음 ,랜덤 비주얼)
2. 소개글, 잇카 장점(4개) 게시 -마우스 오버시 올라오는 형태, 갤럭시 렌터카 웹페이지 참조(http://www.galaxyjeju.com/)
3. 컨텐츠 구성 -이벤트:각 페이지를 만들고 bx슬라이드 제작 -공지사항/사회공헌:일반적인 ul태그를 사용해서 사용 -잇카 콘서트/실시간예약:마우스 오버시 102장의 이미지 재생 기능 -이용 후기: 마우스 오버시 슬라이드 다운으로 글을 내리고 페이드인과 아웃으로 이미지 변경
2차 프로젝트 2015-09-24 It car 메인
프로젝트 명 title date Page no.
화면 구성 화면 제목
location
Description
13
홈 > it car소개 > 서비스 소개
1. 카쉐어링 소개 -카쉐어링 서비스 안내
2. 카쉐어링 장점 -스마트폰 예약 -웨어러블 디바이스/음성인식 -무인 대여 시스템 (동적인 화면 구성)
3. 렌터카와 카쉐어링 비교
2차 프로젝트 It car 서비스소개 2015-10-23
서비스 소개
Sub Visual Image
It car의 최신기
술
카쉐어링 설명
1
2
location
It car의 최신기
술
It car의 최신기
술
렌터카 카쉐어링 비교
3
프로젝트 명 title date Page no.
화면 구성 화면 제목
location
Description
content
14
홈 > it car 소개 > 이용방법
1. 탭브라우징 제이쿼리
2. 아이콘을 플랫디자인을 사용하여 보기 좋게 나열 (단순한 설명페이지)
2차 프로젝트 이용방법 | It car 2015-10-23
이용방법/에티켓
Sub Visual Image
탭브라우징
1
2
location
프로젝트 명 title date Page no.
화면 구성 화면 제목
location
Description
15
홈 > 요금안내> 요금/보험 안내
1. 잇카 회원제 -테이블로 간략하게 명시함
2. 차량 상세 부분 -차량 정보와 함께 이미지 슬라이드 -하단 부분 특이사항 제작
3. 보험안내 -아코디언 형식으로 제작
4. 잇카 요금활용 TIP -미정(이미지 형식/제이쿼리 사용)
2차 프로젝트 It car 요금/보험 안내
2015-09-24
It CAR 카쉐어링 서비스
1
2
3
4
프로젝트 명 title date Page no.
화면 구성 화면 제목
location
Description
16
홈 > 법인/단체 > 가입 및 이용방법
1. 법인/단체 프로그램 소개 - 법인/단체 프로그램 안내
2. 법인 단체 프로그램 서비스 - 서비스 5가지(임직원 업무효율, 임직원 편리함 증대, 비용 절감, 차량 이용 관리 부담 해소, 친환경 차량 공급)에 대한 내용을 아이콘과 슬라이더로 보기 쉽게 나타남.
3. 법인/단체 혜택 - 혜택 3가지(보험 적용, 요금 할인, 프로모션)에 대한 내용을 분리된 탭브라우징을 이용하여 보여줌.
4. 법인/단체 회원가입 - 아이콘을 사용하여 가입 절차를 알아보기 쉽게 표현.
2차 프로젝트 가입 및 이용방법 | It CAR 2015-10-23
법인/단체
Sub Visual Image
법인/단체 프로그램 설명
1 location
법인/단체 프로그램 서비스(5가지, 슬라이더)
2
법인/단체 프로그램 혜택(3가지, 분리된 탭브라우징)
3
법인/단체 프로그램 회원가입
3
프로젝트 명 title date Page no.
화면 구성 화면 제목
location
Description
아코디언
17
홈 > 커뮤니티> FAQ
1. FAQ 페이지는 한번에 자신이 원하는 정보를 잘알수 있게 아이콘을 사용한 분리탭
2. 정보는 아코디언 제이쿼리를 이용하여 소비자가 보기 쉽게 만듦
2차 프로젝트 FAQ | It car 2015-10-23
FAQ
Sub Visual Image
분리탭
1
2
location
프로젝트 명 title date Page no.
화면 구성 화면 제목
location
Description
18
홈 > 커뮤니티 > 이용후기
1. Sns에 올라오는 후기를 모아서 한번에 보여주는 페이지 (카드 배열방식의 디자인)
2. 동적인 효과를 넣어 소비자에 흥미를 유발할 수 있도록 제작
2차 프로젝트 이용후기 | It car 2015-10-23
이용후기
Sub Visual Image
Image
location
Image Image Image
Image Image Image Image
2
프로젝트 명 title date Page no.
화면 구성 화면 제목
location
Description
19
1. 이벤트는 이벤트, 당첨자 발표, 쿠폰북의 탭으로 이루어져 있음
2. 이벤트 > 이벤트 탭 -간략하게 이미지와 함께 이벤트 글을 보여주는 기본적인 형태로 제작 예정
2차 프로젝트 It car 프로모션 이벤트 2015-09-24
It CAR 카쉐어링 서비스
홈 > 이벤트
프로젝트 명 title date Page no.
화면 구성 화면 제목
location
Description
20
홈 > 렌터카 > 렌터카 예약
1. 렌터카 예약 - 대여일, 반납일, 대여시간, 차종 선택 버튼을 만들고 대여일, 반납일엔 달력을 사용하여 날짜 선택이 가능하게 하고, 이걸로 대여 시간이 얼마인지, 차종을 선택할 수 있도록 가능함.
2. 렌터카 예약 안내 - 렌터카 대여의 유의사항 안내와 자격조건에 대한 안내가 보여짐. 밑 부분에 차량 검색 버튼이 있음.
3. 렌터카 차량 소개 - 선택한 렌터카에 대한 소개가 아코디언 형식으로 나옴
2차 프로젝트 렌터카 예약 | It car 2015-10-23
렌터카 예약 서비스
Sub Visual Image
대여 2015-10-24 10시
1 location
렌터카 예약 유의사항 안내
2
렌터카 차량 소개
3
반납 2015-10-25 10시 차종 선택
프로젝트 명 title date Page no.
화면 구성 화면 제목
location
Description
21
홈 > 카쉐어링 예약
2차 프로젝트 It car 카쉐어링 예약 2015-10-23
It CAR 카쉐어링 서비스
Sub Visual Image
location
대여일시 2015-09-23 15:30 반납일시 2015-09-23 18:00 위치선택 차종선택
| 2시간 30분 | 18,000원 | 서울역, 서울특별시 용산구 한강대로 405 서울역
대여시간 예상비용 주소
1 2
3
4 5
예약하기
꼭 필요한 내용 -주행거리별 요금 계산 -차종 결정(외제차) -예약ZONE 설정(서울 내 5지점) -지도(위치기반 LBS) 서울지도 고정 -대여기간(달력, 시간) 10분 단위로 계산 -요금 정산 기준: 주행거리+대여 시간 1. 대여일시/반납일시
date()메서드 호출로 현재 시간에서 올림한 후 표시, 반납일시는 ‘대여일시+30분’으로 표시
2. 위치 선택시 하단 지도에 icon이 해당 위치로 옮겨짐
3. 2번에서 선택한 위치에 icon뜸
4. 대여시간 : 반납일시 시간-대여일시 예상비용 : 주행거리 X 해당 차종의 연비(200원)
5. 클릭하면 상제 주소 팝업 (EXR홈페이지 참조http://www.exrkorea.com/html/store.asp)
지 침 인식의 용이성(Perceivable) 5.1(대체 텍스트) 텍스트 아닌 콘텐츠에는 대체 텍스트를 제공해야 한다.
검사항목 5.1.1 적절한 대체 텍스트 제공 텍스트 아닌 콘텐츠는 그 의미나 용도를 인식할 수 있도록 대체 텍스트를 제공해야 한다.
적용사례
1. 이미지에 alt 속성 값을 빠짐 없이 적어 대체 텍스트를 제공함
지 침 인식의 용이성(Perceivable) 5.3(명료성) 콘텐츠는 명확하게 전달되어야 한다.
검사항목 5.3.1 색에 무관한 콘텐츠 인식 콘텐츠는 색에 관계없이 인식될 수 있어야 한다.
적용사례
1. 웹페이지에서 사용한 색상은 4.5:1 이상
지 침 운용의 용이성(Operable) 6.1(입력장치 접근성) 콘텐츠는 다양한 입력장치로 접근할 수 있어야 한다.
검사항목 6.1.1 입력장치 사용 보장 모든 기능은 키보드만으로도 사용할 수 있어야 한다.
적용사례
1. 키보드 하나로 모든 레이어창을 컨트롤 할 수 있습니다
지 침 운용의 용이성(Operable) 6.4(쉬운 내비게이션) 콘텐츠는 쉽게 내비게이션할 수 있어야 한다.
검사항목 6.4.1 반복 영역 건너뛰기 콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.
적용사례
1. GNB 상단에 ‘본문바로가기’버튼을 배치하여, 반복 영역을 건너 뛸 수 있게 하였음
지 침 운용의 용이성(Operable) 6.4(쉬운 내비게이션) 콘텐츠는 쉽게 내비게이션할 수 있어야 한다.
검사항목 6.4.2 제목 제공 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다.
적용사례
1. 사용자가 현재페이지를 쉽게 알 수 있게 현재 위치의 적절한 제목을 제공함
지 침 이해의 용이성 (Understandable) 7.4(입력 도움) 입력 오류를 방지하거나 정정할 수 있어야 한다.
검사항목 7.4.1 레이블 제공 사용자 입력에는 대응하는 레이블을 제공해야 한다.
적용사례
1. 텍스트 입력 상자에 적절한 레이블을 제공함
지 침 견고성(Robust) 8.1(문법 준수) 웹 콘텐츠는 마크업 언어의 문법을 준수해야 한다.
검사항목 8.1.1 마크업 오류 방지 마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.
적용사례
1. 마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없이 통과함
지 침 견고성(Robust) 8.2(웹 애플리케이션 접근성) 웹 애플리케이션은 접근성이 있어야 한다.
검사항목 8.2.1 웹 애플리케이션 접근성 준수 콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 한다.
적용사례
1. IE8 이상, 크롬, 파이어폭스, 사파리, 오페라 등의 브라우저에서 모두 동일한 화면을 보여줌
