명동에서 예뻐지기

Version 1.0 플랫폼 ios

작성자 작성일 2011.10.02

명동에서 예뻐지기

Apps 명

2

일정

구분 비고1/9 2/9 3/9 4/9 5/9 1/10

현장조사

시장조사

타겟분석

협의 /기획

UI 시안

현장 방문 / 문헌조사

잠재 고객 인터뷰 / 설문 조사

어플리케이션 컨셉 설정 및 기획

UI 시안 제작

Application / Web 시장 조사

Apps 명장소분석

4

주요 쇼핑 장소 – 전체 분석

[ 출처 ]2010 외래 관광객 실태조사 ( 국가별 보고서 _ 일본 )


5

서울 방문지 현황– 연도별 분석

[ 출처 ]2010 외래 관광객 실태조사 ( 국가별 보고서 _ 일본 )


6[ 출처 ]2010 외래 관광객 실태조사 ( 국가별 보고서 _ 일본 )

주요 쇼핑 장소 – 연도별 분석

Apps 명타겟분석

7

서울방문지 현황 - 계층별 분석

Apps 명타겟분석

8

계층별 방문기간 중 활동

Apps 명트렌드분석

9

여성끼리만 여행하는 경우가 증가

쇼핑 , 미용 , 먹거리에 대한 높은 관심

JTB 의 관광상품 ‘ 먹고 사고 예뻐지자 ‘

< 참고 : 일본인 여성관광객 유치 확대 방안 , 2007 /11 제주발전연구원 >

日 여성지는 지금 ' 한국 ' 으로 뜨겁다일본 여성패션지 'JJ' 한국특집 50 페이지 게재 , 대세는 ' 한국 ' 이다

2011/08/07 [12:30] 최종편집 : ⓒ 제이피뉴스

일본 20 대 여성 대표 패션지 JJ50 페이지에 달하는 한국특집

“ 에스테틱 , 화장품이 저렴하며 질이 좋다”“ 일본어가 통하고 친근감 느껴지는 곳”“24 시간 쇼핑이 가능한 곳”“ 기초제품 및 팩종류의 화장품이 인기”

Apps 명현장조사

9

日 여성지는 지금 ' 한국 ' 으로 뜨겁다일본 여성패션지 'JJ' 한국특집 50 페이지 게재 , 대세는 ' 한국 ' 이다

일본 20 대 여성 대표 패션지 JJ50 페이지에 달하는 한국특집

“ 에스테틱 , 화장품이 저렴하며 질이 좋다”“ 일본어가 통하고 친근감 느껴지는 곳”“24 시간 쇼핑이 가능한 곳”“ 기초제품 및 팩종류의 화장품이 인기”

2011/08/07 [12:30] 최종편집 : ⓒ 제이피뉴스


9

실제로 여성끼리 관광하는 경우가 많았음손에는 모두 화장품 손가방이 들려있었음

비슷한 화장품 가게가 너무 많아 복잡하다지도를 보고 길을 찾기가 쉽지 않다일본어가 능숙한 가게가 어딘지일본에 비해 얼마나 저렴한지 바로 알았으면가이드북엔 불필요한 정보가 너무 많아


9


9


9


9


9


9

Apps 명

2

Summary

서비스명 명동에서 예뻐지기 플랫폼 IOS

작성자 작성일 2011.10.02

일정 2011. 9. 1 ~ 2011. 10. 4

개요명동을 찾는 2~30 대 일본 여성들이 주로 관심을 갖고

있는 미용 관련 정보를 바탕으로 명동에서의 여행 스케줄을 관리해주는 어플리케이션

차별화1. 방문 장소간의 동선 확인 서비스

2. 체크리스트를 통한 손쉬운 스케줄 관리3. 이용자 중심의 맞춤형 정보 제공

BM 무료

기타

Apps 명

5

No. Name Symbol Definition

1 실선화살표 •Flow 진행방향을 나타냄

2 점선화살표 •사용자의 입력 없이 자동으로 실행되는 Flow 를 나타냄

3 파선화살표 •이전 , 상위 , 취소의 Flow 를 나타냄

4 Tap •화면을 눌렀다 떼었을 때를 나타냄

5 Press •화면을 누른 상태로 지속함을 나타냄

6 Multi Touch •화면의 여러 영역을 터치한 상태를 나타냄

7 Flick •화면을 일정 방향으로 밀어냄을 나타냄

8Drag

&Drop

•Drag and Drop 조작 – 특정 오브젝트를 선택해 일정한 영역에 옮겨 놓을 때 사용함

9 Load •특정 Depth 에서 업데이트 및 로딩이 진행됨을 나타냄

Indicator

19

1. Screen Description

Description1 Depth Home

1. 제목

예뻐지기라는 주제에 걸맞는 아기자기한 그림을 포함하여 앱 전체를

포괄하는 디자인 필요 ( 구체적인 디자인 미정 )

2. 메인 카테고리

일본의 국화인 벚꽃잎 하나하나를 카테고리로 이용 ,

tap 동작으로 해당 페이지로 이동한다 .

화장품샵 , 마사지샵 , 찜질방 , 네일샵에 대한 정보를 볼 수 있는 4가지

분류와 그 외에 자체제작한 미용관련 쇼핑컨텐트를 제공하는 1가지

카테고리로 총 5가지 카테고리를 제시한다 .

3. 하단 메인탭

home, schedule, map, more 네 가지 탭으로 구성되어있으며 ,

각 탭을 tap할 시 해당 페이지로 이동한다 .


앱을 구동하고 아무런 조작없이 맞게되는 메인메뉴

HOME SCHEDULE

MAP MORE

화장품 샵

20


2 Depth 항목 세부정보 페이지

( 자체컨텐트 페이지 )BACK

HOME SCHEDULE

MAP MORE

1. 자체적으로 미용에 관한 컨텐트를 제작하여 볼 수 있도록 한다 .


서강 에스테틱을 가다 !

곤자가 찜질방에서 양머리 만드는 법을 배웠어요 !

The saem 명동 1 호점에서 샘플팩 1개 더 받는 방법은 ?

한국 아이돌 화장법 따라하기 !

달팽이 크림과 뱀독크림 , 브랜드별 용량대 가격 대 비교 !

21


2 Depth 항목 리스트

Description

에뛰드하우스

화장품BACK

미샤

더페이스샵

홀리카홀리카

Sort by

HOME SCHEDULE MAP MORE

A to Z

1. 상단 바

페이지 제목을 표기

뒤로가기 및 페이지 전체내용를 포괄하는 동작이 위치

2. 상단보조 바

특정 기준 (ex. Gps 이용한 현재위치로부터의 거리 , 사용자평가도 및 항목의 속성을 나타내는 tag)를 이용해 화면에 나타난 항목을 재정렬 가능

3. 항목표시 리스트 홈화면에서 선택한 카테고리 내부의 항목들을 정렬

같은 브랜드 (ex. 화장품 ) 의 경우 , 지점별로 항목을 표시하며 각 지점마다의 특징을 태그아이콘 및 항목에대한 별점으로 간단하게 표기

항목을 tap 하면 해당 항목의 구체적인 정보페이지로 이동


22


2 Depth 항목 리스트

Description

에뛰드하우스

화장품BACK

미샤

더페이스샵

홀리카홀리카

Sort by


A to Z

일본어능통

이벤트

심야영업

카드결제

A to Z 1. 정렬 기준

페이지 이동 없이 해당 위치에 팝업

이름등의 기준 및 항목별 특징을 드러내는 간결한 아이콘 tag 으로 사용자가 항목리스트를 재정렬


23



위치 리뷰제품정보

에뛰드하우스BACK

HOME SCHEDULE

MAP MORE

평가하기평가하기

내 스케줄에 추가내 스케줄에 추가

a. 평가하기

사용자가 직접 해당 항목에 별점을 부여 ( 팝업 )

1.항목 개괄정보 표시란

제 점수는요 ~ !제 점수는요 ~ !

확인

별점을 매겨주세요 !별점을 매겨주세요 !

확인

1. 별 위에 flick 동작 또는 tap동작으로 입력가능

2. 별점은 ½개 단위로 부여가능

3. 사용자들이 부여한 별점의 평균이 항목 개괄정보 표시란에 표시


24






평가하기평가하기


a. 내 스케줄에 추가

자신의 쇼핑스케줄 리스트에 해당 항목을 추가

버튼을 tap 하면 별도의 팝업창 없이 버튼 모양변화

추가되었습니다추가되었습니다


1.항목 개괄정보 표시란

샵에 대한 상세정보 , 위치정보 , 사용자 리뷰로 구분

본문 구분 탭을 tap 하면 본문내용이 해당 내용으로 변화

3. 본문

2. 본문구분 탭


25


3 Depth 본문 – 상세정보



HOME

SCHEDULE

MAP

MORE

평가하기

평가하기내 스케줄에

추가내 스케줄에 추가



HOME

SCHEDULE

MAP

MORE

# ( 항목 개괄정보 표시란 과 본문을 위 /아래 스크롤이 가능한 하나의 페이지로 본다 .)

ex. 화면을 아래로 내리는 경우 , 항목 개괄정보 표시란 은 상단 바를 경계로 화면에서 보이지 않게되는데

항목 개괄정보 표시란이 차지하던 화면의 공간을 본문 란을 확장한 공간으로 사용함으로써 정보를 더 큰 화면에 볼 수 있게 한다 .

단 , 본문구분 탭은 고정된 상단 바에 걸리게 되어 그 이상 화면 스크롤을 내린대도 본문을 읽다가 언제든 본문구분 탭을 이용해 탭 간 자유로운 이동을 가능하게 한다 .

1. 위 /아래 방향 flick 동작시 , 화면 내의 스크롤이 이동하여 항목 개괄정보 표시란 이 사라지거나 다시 보이는 방법으로 본문 란을 더 넓은 화면으로 사용할 수 있다 .

항목 개괄정보 표시란 이 화면에서 보이지 않고

본문구분 탭 은 걸려있는 상태에서 아래의 본문을 계속 읽을 수 있다 .


26


3 Depth 본문 – 위치Description

리뷰제품정보 위치



1. 지도 상에 특정 상점의 위치 정보를 표시

2. 상점의 위치정보를 파악하여 상점을 쉽게 찾아갈 수 있도록 부근의 사진정보 기재

Ex. <konest>


27


3 Depth 본문 – 리뷰 Description




리뷰를 남겨보세요리뷰를 남겨보세요

민영기 (2011/10/02)

직원들이 예뻐요 ~ *^^* 제품의 질은 그냥 그런 듯 친구들한테 뿌려야겠어요

민영기 (2011/10/02)


김수민 (2011/09/02)

소문듣고 왔는데 친절하더라 !

김수민 (2011/09/02)

소문듣고 왔는데 친절하더라 !

1. 본문 – 리뷰

사용자이 해당 장소 및 제품을 이용해 본 후 각자 리뷰를 남길 수 있도록 한다 .

2. 리뷰를 남겨보세요

직접 본인이 리뷰를 작성할 수 있다 .

“ 리뷰를 남겨보세요”버튼을 tap 하면 리뷰작성 페이지로 이동


28


4 Depth 리뷰작성 Description

리뷰작성BACK

HOME SCHEDULE

MAP MORE

PW

등록

COMMENTS

1. 리뷰작성 페이지는 닉네임 , pw( 비밀번호 ) 그리고 comments 3개의 빈 칸으로 구성되어 있다 .

2. 닉네임과 pw 라고 적힌 두 개의 빈 칸을 tap 하면 , 빈 칸안에 적혀있던 회색 글씨가 사라지고 커서가 생겨 입력이 가능해 진다 .

3. 작성을 마친 후 , 등록을 tap 하면 글이 등록되며 2 depth 본문 -리뷰 페이지로 이동한다 .


29


3 Depth



HOME SCHEDULE

MAP MORE

리뷰를 남겨보세요리뷰를 남겨보세요

민영기 (2011/10/02)


민영기 (2011/10/02)


현대원 (2011/10/03)

옴니텔

현대원 (2011/10/03)

옴니텔

EDIT

1. 리뷰를 등록하면 이와 같이 리뷰가 등록됨을 확인할 수 있다 .

2. 자신이 등록한 리뷰는 이와 같이 edit버튼이 있어서 수정 혹은 삭제가 가능하게 한다 .

3. Edit 버튼을 tap할 경우 ,이미 tap 한 Edit 버튼 옆에 cancel 버튼이 새로 생기고 Edit 버튼 활성화 .

a. Edit 버튼을 다시 한번 tap 하여 3depth 로 돌아가 수정할 수 있도록 하며

b. cancel 버튼을 tap 하여 동작을 취소할 수 있도록 한다 . c. 에 휴지통 모양의 아이콘이 등장

EDIT CANCEL

EDITEDIT CANCEL

삭제

휴지통 아이콘을 tap 하면 삭제할 수 있다 .


30


2 Depth SCHEDULE 스케줄

Edit

Add to schedule

scheduleBACK

HOME SCHEDULE

MAP MORE

ROUTEROUTE

에뛰드하우스 명동 2호점

홀리카홀리카 명동 1 호점

더페이스샵 명동 3 호점

1

2

3

1. 을 tap 하면 추가한 일정을 바탕으로 지도에 경로가 표시ROUTEROUTE

2. 스케줄에 추가하기위해 0depth 인 홈화면 ( 카테고리 ) 로 이동

HOME

3. 추가한 스케줄 리스트

해당 이미지 , 이름 , 별점 , 태그가 표시

4. Edit 을 tap 하면 ,

a. 각 항목의 좌우에 각각 삭제아이콘과 항목의 순서를 조정하기위해 drag and drop 을 할 수 있도록 하는 터치탭 생성

3

더페이스샵 명동 3 호점

5. 화면에서 Add to schedule과 Edit 이 차지하는 공간은 ios 의 연락처의 사례를 적용하여 유동적으로 사용가능

c. 리스트의 항목을 길게터치하면 drag and drop동작으로 Edit 을 tap 하지 않고 항목의 순서 조정가능

Edit Done

b. 한번 tap 한 Edt 버튼은 Done 버튼으로 변화


31


2 Depth MAP 지도

MAPBACK

HOME SCHEDULE

MAP MORE

ROUTEROUTE

1. 지도 화면을 터치하면 해당 지도에서 특정 샵을 볼 수 있도록 선택하는 투명한 option menu 가 나타난다 .

Option menu 를 선택하면 해당되는 위치가 지도에 표시된다 .

화장품

2. 표시된 spot 을 tap 하면 해당 spot 의 정보가 간략하게 팝업으로 나타난다 .

에뛰드하우스 (1호점 ) 02)123-5708


32


2 Depth MAP 지도

MAPBACK


ROUTEROUTE

12

3

1. 완성한 스케줄 페이지에서 를 tap 하면 지도페이지로

이동하여 순서대로 경로와 함께 지도위에 표시한다 .

2. 버튼을 다시 tap 하면 표시됐던 경로는 사라지고 아무것도

표시되지 않은 지도로 바뀐다 .

3. 이미지로 앱에 담겨있는 위치를 중심으로한 길찾기 기능을 어떻게 구현할지에 대한 논의가 더 필요

ROUTEROUTE

ROUTEROUTE


33


2 Depth MORE

1. 메인 하단탭 중 3가지인 HOME, SCHEDULE, MAP 에서 다루지

못했던 정보들을 MORE탭에서 다룬다 .

1. 다른 탭이 특정한 기능을 가지고 formal 하게 화면이

구성되었다면 , MORE 에서는 비교적 informal 하게 아래로

열거되어있다 .

Ex. Bulleted head -> 항목특성의 아이콘

줄노트 배경화면 etc.

1. 각 항목을 tap 하면 그 내용에 해당하는 페이지로 이동한다 .

MoreBACK

HOME SCHEDULE

MAP MORE

환율정보

명동이야기

SNS 계정관리

사용법About us


34


3 Depth 환율정보

1. 원 또는 엔화 어느 한가지 화폐단위를 입력하면 환율에 따라

동일가치에 해당하는 결과를 보여준다 . 환율정보BACK

HOME SCHEDULE

MAP MORE

1,584

30,000

￥ /￦

￦

￥

업데이트업데이트

2. 업데이트 버튼을 tap 하면 ,

인터넷 연결이 가능한 경우 환율정보를 갱신한다 .


Apps 명

6

2. Scenario

Menu Flow – 명동에서 예뻐지기 실행

아이콘 선택 인트로 화면-별도의 동작 없이 홈 화면 이동 홈 화면

HOME

SCHEDULE

MAP

MORE

화장품 샵

Apps 명2. Scenario

Menu Flow – 명동에서 예뻐지기 실행 > 상품 선택

상품 카테고리 tap 시상품 정보 제공 화면으로 이동

상품 관련 가게 정보 제공이름순으로 기본 정렬

정렬 기준에 따른 순서 재 배열

HOME

SCHEDULE

MAP

MORE

화장품 샵

Apps 명

8

2. Scenario

Menu Flow – 명동에서 예뻐지기 실행 > 상품 선택 > 정보 선택

상품 관련 가게 정보 선택 가게 별 상세 정보 제공 상하 Flick 시 상세 정보 창 확대 /축소 가능

위치 메뉴 tap 시 지도 상의가게 위치 정보 제공

Apps 명

9

2. Scenario

Menu Flow – 명동에서 예뻐지기 실행 > 상품 선택 > 정보 선택 ( 리뷰 )

상품 정보 별 리뷰 보기 /쓰기기능 제공 리뷰 쓰기 활성화 시

- QWERTY 자판 생성됨- 닉네임 , 비밀번호 입력- 리뷰 내용 입력

리뷰 작성 후 등록 버튼 tap- QWERTY 자판 사라짐

Apps 명

10

2. Scenario

Menu Flow – 명동에서 예뻐지기 실행 > 상품 선택 > 정보 선택 ( 리뷰 )

자신의 리뷰 편집 가능- 자신이 남긴 리뷰에만 편집 키가 보인다 .- 편집 키 tap 시 수정 /삭제 가능

Apps 명

11

2. Scenario

Menu Flow – 명동에서 예뻐지기 실행 > 상품 선택 > 정보 선택 ( 평가 )

별점 주기 버튼 tap- 업소 별 별점 주기 기능 제공- 색이 없는 별점 팝업 생성

팝업 창에서 좌우 Flick 시별점 증가 /감소

- 확인 버튼 클릭시 등록- X 버튼 클릭시 취소

Apps 명

12

2. Scenario

Menu Flow – 명동에서 예뻐지기 실행 > 상품 선택 > 정보 선택 ( 추가 )

내 스케줄에 추가 버튼 tap 스케줄 리스트에 상품 정보 추가- 팝업 창을 생성해 상품이 스케줄 리스트에 추가되었음을 사용자에 게 알려준다 .- 확인 버튼을 top 시 팝업 사라짐

Apps 명

13

2. Scenario

Menu Flow – 명동에서 예뻐지기 실행 > 스케줄

스케줄 리스트에서 수정버튼top 시 스케줄 관리 가능 수정 버튼 tap

- 목록 별 우측 부분에 삭제 버튼 생성됨- 목록 상단에 스케줄 추가 버튼 생성됨- 상하 Drag and drop 시 순서 재 배치

삭제 버튼 tap- 해당 목록 리스트에서 삭제추가 버튼 tap- 새로운 목록을 추가

Apps 명

14

2. Scenario

Menu Flow – 명동에서 예뻐지기 실행 > 지도

지도 상의 spot 지역을 제외한부분을 tap 할 경우- 지도 상단에 spot 지역 선택 목록 생성 ( 반투명 layer)다시 한번 지도 위를 tap할 경우- 상단에 있던 선택 목록 사라짐

spot 지역 선택 시- 해당 spot 에 대한 정보가 지도 위에 표시됨- 복수 선택 가능

Apps 명

15

2. Scenario

Menu Flow – 명동에서 예뻐지기 실행 > 지도

생성된 spot tap 시- 프로필 정보 제공- 프로필 정보 tap 할 경우 가게 정보 제공 화면으로 이동

우측 상단 route 버튼 tap- 스케줄에 따른 위치 정보 경로 표시다시 한번 route 버튼 tap- 스케줄에 따른 위치 정보 경로 사라진다 .

Apps 명

16

2. Scenario

Menu Flow – 명동에서 예뻐지기 실행 > More

추가적인 서비스 제공 환율 정보- 상단에 기본 환율 정보 창 - 원화 입력시 엔화를 계산해 엔화 창에 표시해준다 .- 엔화 입력시 원화를 계산해 원화 창에 표시해준다 .

Documents

명동에서 예뻐지기