SlideShare a Scribd company logo
1 of 28
HELLO GENTLE _flow 
2014.10.13 
조소연
1. Document History 
Date Member Ver. Description Remarks 
2014.10.13 조소연 1.0.0 • 초기 UI 시나리오
팀원 
기획 / 권정현 UI,GUI / 조소연 안드로이드 / 최그림, 김민지 서버 / 제현우 
Service Concept 
옷을 잘 입고 싶은 남자들을 위한 스타일리스트의 스타일링 서비스 
Key feature& Service Edge 
- 전문가가 큐레이션 한 상품 구매 가능 
- 스타일리스트의 전문적인 스타일링 경험 가능 
- 스타일리스트가 스타일링한 상품들 구매 가능
구분 내용 
Service Goal 옷을 잘 입고 싶어하는 ‘남자’들을 위한 서비스로써 사용자의 상황, 체형 등을 고려해 어울리는 스타일링 제공 앱 
Core Value 
1. 사용자가 자신에 맞는 스타일링의 필요성을 느낌. 
2. 큐레이션 한 상품을 구매할 수 있고 사용자에게 스타일리스트의 전문적인 스타일링을 공급. 
3. 사용자는 자신의 상황에 맞는 옷을 입을 수 있음. 
Target User 
- smartphone user, 
- 자신의 스타일을 변화시킬 마음이 있는 남자들. 
- 스타일링에 관해 전문적인 손길이 필요한 남자들. 
Main Concept 
‘유행에 휘둘리지 않고 자신에게 맞는 스타일링을 원한다면 이 앱을 사용하세요.’ 
- 자신의 주머니 사정에 맞게 상황에 맞게 체형에 맞는 옷 스타일 -> 전문적인 스타일링 제공
HELLO GENTLE _ Main task 
매거진보기 
GENTLE 
BOX 
MY CLOSET 
MY CART 
이 어플 사용자는 처음에 매거진을 보며 전문가가 큐레이션 한 상품들을 볼 수 있으며 마음 
에 드는 상품을 장바구니에 담을 수 있다. 
전문적인 스타일링을 원하는 사용자들을 위한 서비스이며 한 번의 스타일리스트 오프라인 
만남이 제공된다. 자신의 주머니 사정에 맞게 상황에 맞게 체형에 맞게 스타일리스트가 스 
타일 컨설팅을 해준다. 
GENTLE BOX에서 구입한 매거진에서 직접 보고 구매한 상품들을 카테고리 별로 볼 수 있는 
카테고리이다. 
MAIN / HOME에서 매거진으로 제공된 상품들을 담아둘 수 있는 카테고리이며 담겨있는 
상품들을 구매할 수 있다.
Touch Interaction 
Type Mark Touch Interactions 
Tap Get focused when touched and get launched when released 
Double Tap Quickly tap twice on the same spot 
Touch & Hold Touch on a screen and keep touching it for a while 
Touch & Move Touch a focus, drag it linearly and release the focus 
Drag & Drop Touch an item(focused), drag it and drop to move the item 
Flick 
Touch on a screen, move & release it quickly to fast scroll items in a specified direction. 
Scroll speed is accelerated. 
Pinch zoom out Zoom out the object or screen 
Pinch zoom in Zoom in the object or screen
2. General Rules 
Keypad: 각 입력창의 특성에 따라 선택하여 노출(ios 동일) 
# Description 
1 
검색창 입력 시 
한글을 기본값으로 하며, 검색 버튼이 있는 키패드 
2 
생년월일, 전화번호 입력 시 
숫자가 있는 키패드 
(User의 키패드 설정에 따라 다르게 노출될 수 있음) 
3 
ID/ e-mail 
영문 키패드 
4 
기타 
한글 키패드 
1. 검색창 
2. 생년월일, 전화번호 
3. ID, e-mail 
이동 
4. 기타 
이동 
1 
2 
3 4
2. General Rules 
Hard key (Navigation) 
1) back key 
ㄱ. Home/Main : ‘뒤로 버튼을 한번 더 누르시면 종료됩니다’ 토스트팝업 후 back key 한번 더 누르면 종료됨 
ㄴ. 1depth 이하: Depth back 
상위 depth로 이동. 
ㄷ. 특정 Task 수행 중(예. 결제): ‘***를 취소하시겠습니까? 예/아니요’ 팝업 후 이전 화면으로 이동 
ㄹ. 이외의 케이스는 서비스 별 정의 
Home 
Tap 
메뉴 
Tap 
Back 
Back 
컨텐츠 상세 
Tap 
특정 Task 
Back 
컨텐츠 상세 
1depth 
2depth 
3depth 
취소확인팝업 
Back 
2) Home key: 백그라운드에서 진행 중 상태 유지(세션 유지시간 n분) 
3) menu key: 동작 없음(서비스 별 정의)
2. General Rules 
Exception & Error case 처리 방법 (pop-up) 
네트웍을 찾을 수 없습니다. 
확인 
(네트웍 에러) 
서비스가 알 수 없는 이유로 
종료되었습니다. 
확인 
(비정상 종료)
a. Push Notification 
클릭 시 해당 컨텐츠로 이동 
(home / main) 
클릭 시 해당 
Gentle box 단계로 이동 
2. General Rules 
1 
HELLO GENTLE 
‘이 달의 컬렉션’이 발간되었습니다. 
오후 2:13 
2 
HELLO GENTLE 
GENTLE BOX가 완성되었습니다. 
오후 2:13 
# Description 
1 
• 알림 영역 닫힌 경우 indicator bar에 APP Icon 표시 
• 알림 확인 (tap하여 진입) or 지우기 후에는 노출하지 않음 
2 
해당 컨텐츠 대표사진 + 제목 + 알림 내용 
알림 내용 : 이 달의 컬렉션, 장바구니에 담겨진 제품이 품절될 
시, 스타일리스트의 컨설팅이 완성되었을 때, 주문한 상품 / 스 
타일리스트가 셀렉한 젠틀박스가 도착할 경우
주문하신 ‘GENTLE BOX’가 
도착하였습니다. 
확인하시겠습니까? 
Script 
HG 
1 
# 인트로 페이지 
HELLO 
GENTLE 
7 
1. 아이콘 터치 시 – Application 실행 
2. 프로그램 실행 시 intro page: 자동으로 2초 이내로 Display 후 Off 됨. 
3. 최초 프로그램 실행 시: 메인은 관리자가 큐레이션 한 상품들이 보여지고 magazine형식으로 되어 있다. 
magazine 형식으로 큐레이션 상품의 이미지와 설명을 제공한다. 
: 상품이미지 + 상품명 + 브랜드 + 상품설명 까지 한번에 보여줘야 한다. (단, 가격과 장바구니 아이콘은 한 화면 밖으로 나와도 됨.) 
(사용자가 불시에 앱 중단을 겪을 때 모든 페이지의 디폴트는 사용자가 보던 article을 보여준다.) 
4. 매거진 형식의 메인화면이 나오고 swiping up / down할 수 있으며 하단에 있는 텍스트 혹은 다른 상품의 이미지와 그에 관한 텍스트도 
볼 수 있다. 최대 개수는 15개이다. 매달 업데이트된다. 
과거 매거진은 삭제한다.(과거 매거진은 최하단에 링크로 보여진다.) 
5. 이미지를 Flicking을 좌 / 우로 하여 볼 수 있으며 사진의 이미지는 1~5장 정도이다. 
6. 사용자가 옷을 주문한 경우에만 보인다. 주문/배송 상태를 여기에 보여준다. 
; 탭하여 해당 배송 / 주문 정보가 있는 페이지로 이동한다. 
** 새로고침 ( (4)번처럼 swiping down하는 것)하거나 swiping up하면 확인하지 않는다는 행동으로 인식한다. 
7. 메뉴는 기본적으로 닫혀있으며, 버튼을 누르면 메뉴바가 좌측에서 미끌어져 나온다. 
# 메인 페이지_1_젠틀박스를 
시행했을 시 
4 
3 
두번누르면 팝업창 
뜨며종료 
6 
다음페이지 연결 
2 
TITLE 
스타일리스트가 큐레이션 한 상 
품들을 보여주는 공간입니다. 이 
렇게 텍스트가 쓰여있습니다. 제 
공해주는 매거진 형식의 메인화 
면.
# 메인 페이지_2 
이전페이지연결 
Script 
1 
2 
# 메인 페이지_3 
스타일리스트가 큐레이션 한 상품 
들을 보여주는 공간입니다. 이렇게 
텍스트가 쓰여있습니다. 구구절절 
쓸 게 없는데 뭐라 쓰나요… 
1 . 매거진 형식의 메인화면이 나오고 swiping up / down할 수 있으며 하단에 있는 텍스트 혹은 다른 상품의 이미지와 그에 관한 텍스트도 
볼 수 있다. 
2. 장바구니를 탭하면 장바구니(my cart)로 상품이 담겨진다. 선택 전에는 카트의 색이 채워지지 않은 상태지만, 
선택(탭)이 된 이후부터 카트의 색이 채워진다. 다시 취소할 경우 한 번 더 탭하면 원상태로 색이 채워지지 않는 상태가 되며 7)번 My cart 
탭에서 확인할 수 있다. 
3. 메인 화면에서 상품들이 작은 이미지로 보여지고 그 해당 상품이 하단에 있다. 상품 이미지를 탭 하면 하단에 있는 상품의 상세 설명, 상 
세 컷으로 내려간다. 
4. Flicking하여 상 / 하에 있는 컨텐츠를 볼 수 있다. 
5. 메뉴는 기본적으로 닫혀있으며, 버튼을 누르면 메뉴바가 좌측에서 미끌어져 나온다. 
메뉴바가 열려있는 상태에서 다시 버튼을 누르면 메뉴바는 닫힘. 
** 다음 페이지 연결 
6. Flicking 하여 상 / 하 의 컨텐츠를 볼 수 있다. 
제공해주는 매거진 형 
식의 메인화면. 
00,000원 
00,000원 
6 
3 
5 
4 
TITLE 
스타일리스트가 큐레이션 한 상 
품들을 보여주는 공간입니다. 이 
렇게 텍스트가 쓰여있습니다. 제 
공해주는 매거진 형식의 메인화 
면.
HOME 
MY PAGE 
MY CART 
# 메뉴 # 메뉴_DEFAULT_비로그인시 
MY CLOSET 
GENTLE BOX 
SETTING 
LOG OUT 
사용자이름 
내 정보 설정 
1 
2 
3 
4 
7 
6 
HOME 
MY PAGE 
SETTING 
LOG IN 
로그인해주세요. 
이전페이지연결 
Script 
5 
8 
1 
1. 두 곳을 탭하면 레이어가 왼쪽으로 슬라이딩하여 들어가고 보고 있던 화면이 보인다. 
2. 내 정보 설정을 탭하면 내 정보를 수정할 수 있는 페이지가 나온다. 
; 내 정보 설정에서는 이름, 키, 몸무게, 상의사이즈, 허리 사이즈, 신발사이즈 그리고 자신의 전신사진까지 수정할 수 있다. 
**default / log out 시에는 뜨지 않는다. 
3. 언제 어느 페이지에 있어도 탭을 하면 home / main 화면이 나온다. 
4. My page는 my cart, my closet, gentle box를 이용할 수 있는 하위 카테고리가 나온다. 
5. 탭하면 메인화면에서 담은 상품들을 my cart에서 볼 수 있다. 
** 다음 페이지 연결 
6. Setting에는 푸시 / 알림 기능을 설정할 수 있는 페이지로 간다. 
7. LOG OUT은 로그인이 되어 있는 상태에서만 활성화된다. 
8. 로그인되어 있지 않거나 회원이 아닐 경우 비활성화된다. 화살표 탭의 컬러가 옅어져 있어 비활성화인 것을 보여준다. 
다음페이지 연결 
보던화면으로넘어간다.
v 
v 
v 
v 
v 
v 
v 
v 
이전페이지연결 
Script 
삭제하실 건가요? 
1. MY CART(장바구니)에 담겨 있는 상품들을 모두 선택할 수 있다. 
2. 1)번을 누른 후 모두 선택한 다음 2)번을 탭하면 모두 삭제할 수 있다. 
3. 상품 하나씩을 선택할 수 있다. 선택을 취소할 때도 같은 방법으로 선택 취소를 한다. 
4. 상품 하나씩만을 삭제할 때 탭한다. 
5. Flicking을 하여 상 / 하에 있는 컨텐츠를 볼 수 있다. 
6. 상품 하나하나를 탭하면 상품의 상세 정보를 보여준다. 
7. 옵션 정보에는 상품 사이즈와 컬러 정보를 알 수 있다. 
8. 구매하기는 선택된 상품이 있을 때만 활성화된다. 
9 / 10. 탭을 하면 이행하지 않는다는 행동으로 인식한다. 
11. 예를 누르면 삭제할 상품들이 삭제된다. 
12. My cart의 Default이다. 
MY CART 
장바구니에 상품을 
담으세요. 
# MY CART 
구매하기 
# MY CART_Default 
1 
2 
3 
4 
5 
6 
8 
아니오 | 예 
12 
9 
7 
시 
10 
삭제가 안되고 이행하지 않는다로 인식 이 페이지에서 메뉴창이 열린다.
Script 
HOME 
# 메뉴_DEFAULT 
로그인해주세요. 
MY PAGE 
SETTING 
LOG IN 
2 
1 LOG IN 
1. Log in 카테고리를 보기 위해서 메뉴를 탭한다. 
2. log in을 하기 위해서 탭을 한다. 
3. ID와 PASSWORD를 입력하는 페이지가 나온다. 
4. ID를 입력한다. 
5. PASSWORD를 입력한다. 
6. 비밀번호와 아이디를 잊어버렸을 때 비밀번호와 아이디를 찾을 수 있다. 
7. 회원가입이 되어있지 않은 사용자가 회원가입을 하기 위해서 탭한다. 
** 다음 페이지 연결 
8. 번 ID와 4)번 PASSWORD를 완성하면 탭을 하고 항시 활성화되어 있다. 
Forgot ID / Password ? 
SIGN UP 
로그인 
ID 
PASSWORD 
8 
7 
6 
4 
5 
다음페이지 연결 
3 
전 화면으로 간다.
PW 
SIGN UP SIGN UP 
CONFIRM PW 
PHONE 
E-MAIL 
PW 
CONFIRM PW 
PHONE 
E-MAIL 
1. 회원가입할 때 필요한 항목을 다 채워야 한다. 
2. 항목을 입력하기 위해 탭을 한다. 
3. Flicking up / down을 하여 상 / 하단의 컨텐츠를 볼 수 있다. 
4. ID는 영어와 숫자를 조합하여 만들 수 있으며 
5. ID중복확인을 해야 한다. 
**중복이 된다면 ‘ID를 사용할 수 없습니다.’라고 뜬다. 
PHONE 
E-MAIL 
Email 수신에 동의합니다.(선택) 
본인은 만 14세 이상입니다. 
이용약관에 동의합니다. 
개인정보 취급 방침에 동의합니다. 
6. 비밀번호는 암호화되어 보이지 않게 된다. 
7. 2)번을 탭하면 키보드가 올라온다. 
8. ‘다음’을 탭하면 채워야 할 다음 항목으로 넘어간다. 
9. Flicking up / down 가능 (단, 사용자가 동의해야 할 항목들을 끝으로 더 이상 하단을 보여주지 않는다.) 
10. 사용자가 동의해야 할 항목들이 나오고 동의할 수 있도록 체크 표시가 되게 한다. 체크가 되지 않은 상태는 색이 빠져있고 체크가 되어 
있는 상태라면 색이 채워져 있다. 
11. 만약 사용자가 회원가입을 마치면 ‘다음’을 탭해 다음 페이지로 넘어갈 수 있다. 
(단, 사용자가 빠뜨린 문항들이 있다면 다음으로 넘어가지 않고 빠뜨린 항목에 빨간색으로 ‘입력되지 않았습니다’라고 쓰여진다. 
Script 
다음페이지 연결 
이전페이지연결 
SIGN UP 
ID 
ADDRESS 
1 
다음 
SIGN UP 
ID 
ADDRESS 
3 
2 
4 
ADDRESS 
8 
v 
v 
v 
v 
다음 
9 
SIGN UP 
taropororo 
●●●●●●●● 
●●●●●●●● 
010-1234-5678 
입력되지 않았습니다. 
서울시 관악구.. 
키보드가 내려가고 작성하던 
화면으로 
돌아간다. 
6 
7 10 
11 
중복체크 
ID중복확인 ID중복확인 
5 
12 
전 화면으로 간다. 
/ 입력된 정보가 
지워진다.
이전페이지연P결W 
4 
PHONE 
E-MAIL 
2 Email 수신에 동의합니다.(선택) 
v v 
본인은 만 14세 이상입니다. 
이용약관에 동의합니다. 
개인정보 취급 방침에 동의합니다. 
1. Swiping / Flicking 하여 상 / 하에 있는 컨텐츠를 볼 수 있다. 
2. 사용자들이 동의할 문항들이 나오며 선택 시 컬러가 채워진다. 
3. 다음 (회원가입 완료)는 항시 활성화 되어있다. 
YOUR SIZE 
Body Size 
키 cm 
몸무게 kg 
Tops 
Shirts, Sweaters, Sweatshirts, T-shirt 
Bottoms 
** 단, 사용자가 입력하지 않은 항목은 빨간글씨로 안 쓴 항목에 ‘000을 입력하지 않으셨습니다.’라고 써진다 
Script 
4. 다음을 탭하면 신체 사이즈를 입력하는 창으로 넘어간다. 
5. Flicking / swiping 할 수 있으며 상 / 하 컨텐츠를 볼 수 있다. 
6. 탭하면 folding되었던 사이즈 표가 펼쳐진다. 
7. 탭하여 folding되어있는 선택 항목들이 펼쳐지며 default는 20-30대 평균 사이즈이다. 
8. Swiping up / down할 수 있다. 
9. 이전을 누르면 회원가입 화면으로 가며 입력된 정보는 사라지지 않는다. 
10. 다음을 누르면 다음 페이지로 넘어간다. 
5 
YOUR SIZE 
Tops 
Shirts, Sweaters, Sweatshirts, T-shirt 
95 
95 
100 
Bottoms 
105 
110 
6 
28 inch 
28 
29 
30 
110 
8 
이전 | 다음 이전 | 다음 
다음페이지 연결 
팝업 창이 뜨면서 뒤로 가면 정보가 삭 
제된다는 것을 알려준다. 
ADDRESS 
1 
v 
v 
v 
v 
다음 
선택 시 
SIGN UP 
010-1234-5678 
taropororo@ggg.net 
서울시 관악구.. 
3 
7 
9 10
이전페이지연P결W 
Script 
다음페이지 연결 
YOUR SIZE 
Your Body 
전신사진을 
등록하세요. 
(프로필사진과 같은 
사진으로 등록됩니다.) 
이전 | 완료 
전신사진이 등록되지 않았습니다. 
그래도 가입하시겠습니다? 
취소 | 확인 
(사진 미등록시에 완료 탭하면) 
뒤로 가시면 입력된 정보가 삭제 
됩니다. 뒤로 가시겠습니까? 
취소 | 확인 
(입력한 정보가 있는데 뒤로를 눌렀을 시) 
팝업 창이 뜨면서 뒤로 가면 정보가 삭제된다 
는 것을 알려준다. 
1 
2 
3 4 
YOUR SIZE 
Your Body 
6 
5 
이전 | 완료 
1. 사용자의 전신사진을 불러올 수 있다. 
2. 등록된 전신사진이 없을 경우 default 
3. 이전을 탭하면 sign up으로 간다. 
4. 사용자가 전신사진을 등록하지 않고 완료를 눌렀을 때 취소/확인 팝업 창이 뜬다. 
**하지만 회원가입은 할 수 있다. 
5. 이미 등록된 사진이 있다면 사진을 다시 불러올 수 있다. 
6. 등록한 사진을 볼 수 있다 
7. 이전을 탭하면 body size로 이동한다. 
8. 완료를 누르면 회원가입이 완료된다. 
7 8
이전페이지연결 
1 
Script 
GENTLE BOX 
GENTLE 
BOX 
당신의 스타일리스트를 
고용하세요! 
2 
스타일 상담 ㅣ 젠틀박스 받아보기 ㅣ 원하는 상품결제 
3 
스타일 상담 
요청하기 
4 
5 
6 
7 
GENTLE BOX 
1. 사용자의 신체 사이즈를 입력한 후에는 gentle box에 대한 이미지와 설명이 나오고 사용자가 읽어본 뒤 gentle box를 요청할 수 있다. 
2. 스타일 상담, 젠틀박스 받아보기, 원하는 상품 결제 카테고리가 나오며 하나하나 탭하면 그 내용에 대한 이미지와 설명이 4)번에 나온다. 
3. 2)번에서 탭한 카테고리의 이름이 나온다. 
4. 2)번에서 탭한 카테고리에 대한 이미지와 설명이 나온다. 
5. 4)번의 세 개(스타일 상담 / 젠틀박스 받아보기 / 원하는 상품결제)의 이미지와 카테고리를 보여준다. 
6. 왼쪽으로 Flicking하거나 탭을 하면 이미지와 텍스트가 왼쪽으로 넘겨지며 마지막 카테고리인 원하는 상품결제에서 탭 / flicking을 하면 
빠르게 첫 카테고리인 스타일 상담으로 간다. 
7. 각각의 설명과 주의사항을 읽은 후 요청하기를 누른다. 
8. 7) 요청하기를 누르면 바로 사용자만의 스타일리스트의 얼굴 이미지, 이름, 카카오톡 ID 그리고 스타일리스트가 하는 한마디가 나온다. 
하단에는 이 서비스를 이용할 때 주의사항과 설명이 있다. 
9. 스타일리스트의 얼굴이 나온다. 
10. 스타일리스트의 이름과 카카오톡 ID가 쓰여져있다. 
11. 스타일리스트가 하는 한마디가 적혀있다. 
12. GENTLE BOX에 대한 주의사항과 설명이 적혀 있다. 
YOUR 
STYLIST 
권 정 현 
카톡ID solorose 
Fashion is passion 
스타일리스트와 오프라인 상 
담은 젠틀박스 처음 이용시 
상진담행해진야행하하는기 
8 
9 
10 
11 
12 
13 
14 
GENTLE BOX 
스타일 
컨설팅 중입니다. 
15 
다음페이지 연결 
16
GENTLE BOX 
권 정 현 
카톡ID solorose 
GENTLE BOX GENTLE BOX 
2 배송 중 입니다. 
요청과 스타일에 맞추어 
젠틀박스가 구성되었습니다. 
젠틀박스받기 
다음페이지 연결 
1 
Script 
권 정 현 
카톡ID solorose 
1. 스타일리스트와 사용자가 오프라인에서 상담을 진행하는 중이며 오프라인 상담이 끝날 시에 스타일리스트의 완료 알람을 받아 이 페이 
지로 넘어온다. 스타일리스트의 사진, 이름, 카카오톡ID가 적혀있다. 젠틀박스가 구성되었다는 것을 알려준다. 
2. 스타일리스트와 사용자가 오프라인에서 만나 상담한 후에 스타일리스트가 컨설팅를 하여 젠틀박스가 구성되었다고 알려준다. 
3. ‘받기’를 탭하여 다음 페이지로 넘어가며 이 탭은 항시 활성화한다. 
4. 젠틀박스 받기를 누른 후 배송 중이라 표시해주며 
**Default 메뉴 설정 페이지에서 GENTLE BOX를 누르면 사용자가 진행한 단계의 페이지로 이동한다 
5. 스타일리스트가 구성한 OUTFIT이 나오며 스타일리스트 얼굴, 이름, 카카오톡 ID가 보여진다. 
6. Swiping up / down 하여 상 / 하의 컨텐츠를 볼 수 있다. 
7. 스타일리스트가 구성한 OUTFIT과 하단에 구성된 아이템들이 보인다. 
소개팅 때 입으면 좋은 옷 
이전페이지연결 
4 5 
7 
6 
3
v 
GENTLE BOX 
A.P.C 
4 
00,000원 
M / GREY 
A.P.C 
00,000원 
2 
00,000원 
이전페이지연결 
1 
Script 
v 
v 
구매하기 
3 
5 
6 
총 금액 000,000원 
1. ‘스타일 컨설팅 중입니다.’라고 쓰여진 페이지가 나온다. 이 단계에서는 스타일리스트와 사용자가 오프라인에서 상담을 진행하는 중이며 오 
프라인 상담이 끝날 시에 스타일리스트의 완료 알람을 받아 다음 페이지로 넘어간다. 
2. Swiping up / down하며 상 / 하에 있는 컨텐츠를 볼 수 있다. 
3. Item(상품)을 모두 선택할 수 있다. 
4. 상품의 이름, 가격, 사이즈, 색상 정보를 보여준다. 
5. 상품을 하나씩 선택할 수 있다. 
6. 선택이 이루어지면 구매하기를 누를 수 있다. 
7. 사용자가 돌려보낼 상품을 선택하고 구매하기를 누르고 환송하는 중이면 페이지에 뜨게 한다. 
8. 환송이 완료되면 환송이 완료되었습니다.라고 뜬다. 
**관리자가 환송 확인을 하면 바로 올려준다 
9. Swiping up / down 하여 상 / 하의 컨텐츠를 볼 수 있다. 
10. 구매할 상품들의 총 금액을 보여준다. 
11. 결제하기를 탭하면 입금해야 할 금액과 계좌번호, 계좌 주명을 알려준다. 
다음페이지 연결 
GENTLE BOX 
환송 중 입니다. 
GENTLE BOX 
환송이 완료되었습니다. 
A.P.C 
00,000원 
결제하기 
7 
11 
8 
10 
9
다음페이지 연결 
이전페이지연결 
1 
하징ㅋ 
Script 
2 
GENTLE BOX GENTLE BOX 
HELLO 
GENTLE 
계좌번호 국민은행 011-2345-6789 
헬로젠틀㈜ 
3 
계좌주명 
4 
5 
1. 관리자가 환송한 물건을 받게 되면 구매할 금액 결제해야 한다. 다음을 탭하면 헬로젠틀 BI 
2. 헬로 젠틀의 BI가 적혀있다. 
3. 관리자 계좌번호 , 계좌주명이 쓰여져 있다. 사용자가 복사하여 붙여넣기에 용이하게 텍스트로 넣어준다. 
4. 관리자가 입금을 확인하면 ‘결제를 완료하였습니다.;’창을 띄어준다. 
5. 입금자 명과 입금한 금액을 보여준다. 
6. 사용자가 확인을 누르면 MAIN화면으로 넘어가며 메인서비스를 모두 이용한 것이다. 
7. 햄버거를 탭한다. 
**다음 페이지에 계속 
8. SWIPING하여 상 / 하에 있는 컨텐츠를 볼 수 있다. 
결제를 완료하였습니다. 
이상한디? 
입금자 명 
총 입금액 
최그림 
00,000원 
확인 
6 
6 
8 
TITLE 
스타일리스트가 큐레이션 한 상 
품들을 보여주는 공간입니다. 이 
렇게 텍스트가 쓰여있습니다. 제 
공해주는 매거진 형식의 메인화 
면. 
7
My information 
프로필사진 / 전신사진 변경 
최 그 림 
Body Size 
키 176 cm 
몸무게 67 kg 
HOME 
MY PAGE 
MY CART 
MY CLOSET 
GENTLE BOX 
SETTING 
LOG OUT 
사용자이름 
내 정보 설정 1 
Script 
프로필사진 / 전신사진 변경 
몸무게 67 kg 
1. 내 정보 설정을 탭하면 사용자의 정보를 수정할 수 있다. 
Body Size 
수정 
( 프로필 사진 / 전신사진 설정, 키, 몸무게, 상의 사이즈, 하의 사이즈, 신발 사이즈) 
2. 전신 사진 / 프로필사진이 보인다. 
3. 사진을 설정할 수 있다. 
4. Swiping up / down 할 수 있다. 
5. 텍스트를 입력할 수 있다. 
6. ‘수정’을 누르면 스위치되어 ‘저장’으로 변한다. 수정을 탭하여 정보를 수정할 수 있다. 
7. ‘수정’을 탭하면 ‘저장’으로 ‘저장’을 탭하면 ‘수정’으로 --- 수정을 탭하면 수정모드로 저장을 누르면 저장됨. 
다음페이지 연결 
이전페이지연결 
My information 
최 그 림 
키 176 cm 
Tops 
3 
2 
4 
5 
6 저장 7
My information 
최 그 림 
Body Size 
키 cm 
몸무게 kg 
Body Size 
Tops 
키 176 cm 
Shirts, Sweaters, Sweatshirts, T-shirt 
몸무게 67 kg 
3 
My information 
프로필사진 / 전신사진 변경 
최 그 림 
Body Size 
키 176 cm 
몸무게 67 kg 
저장 
Tops 
2 
1 
이전페이지연결 
Script 
1. 수정’이라 되어 있은 곳을 탭하여 수정모드로 만든다. 
2. 항목을 탭하여 정보를 수정한다. 
3. 수정모드에서 항목을 탭하면 키보드가 올라온다. 
4. 다음을 탭하면 다음 항목으로 간다. 
4
HOME 
MY PAGE 
MY CART 
MY CLOSET 
GENTLE BOX 
SETTING 
LOG OUT 
사용자이름 
내 정보 설정 
1 
Script 
1. Menu 탭에서 my page에서 하위에 있는 my closet을 탭한다. 
2. Gentle box에서 구입한 item들을 보여준다. 
3. 구매내역이 없으면 이렇게 나온다. 
4. 구매한 item을 이용하여 다시 한번 outfit을 볼 수 있다. 
5. 구매내역이 없을 때 outfit도 똑같은 화면을 보여준다. 
# My Closet - Dfaullt_구매내역 없을 시 
MY CLOSET 
ITEM OUTFIT 
구매내역이 없습니다. 
2 
3 
MY CLOSET 
ITEM OUTFIT 
5 
4 
구매내역이 없습니다.
# My Closet – 구매내역이 있고 카테고리 분리 전 
MY CLOSET 
ITEM OUTFIT 
A.P.C 
00,000원 
M / GREY 
A.P.C 
00,000원 
M / GREY 
1 2 
Script 
MY CLOSET 
ITEM OUTFIT 
A.P.C 
00,000원 
A.P.C 
00,000원 
M / GREY 
A.P.C 
00,000원 
M / GREY 
A.P.C 
00,000원 
TOPS 
BOTTOMS 
SHOES 
ACCESSARY 
1. 사용자가 구매한 상품들은 My closet에 담긴다. 
2. ‘> 버튼’을 탭하면 상품 종류의 카테고리가 나온다. 탭하면 버튼 모양은 아래방향 ‘v 버튼’으로 변경된다. ---> 5)번 
3. 사용자가 구입한 상품이 단품 이미지로 나온다. 
4. 사용자가 구입한 상품의 이름, 가격, 사이즈, 가격이 나온다. 
5. ‘> 버튼’을 탭하면 각 종류의 하위 카테고리가 나오며 탭하면 버튼 모양은 아래방향 ‘v 버튼’으로 변경된다. 
- 종류 카테고리를 보여주며 소분류로 또 나눠진다. 
- 대분류된 카테고리를 탭하면 ALL 모든 상품이 나온다. 
- 또 누를 때 그 탭의 색은 잠깐 색이 바뀌며 손가락을 떼면 다시 원 색상으로 돌아온다. ---> 7)번 
6. 하위 카테고리가 나온다. 
7. 탭하고 있는 상태에선 컬러가 조금 달라지고 다시 손가락을 떼면 원래 색으로 변한다. 
8. SWIPING UP / DOWN 할 수 있다. 
MY CLOSET 
ITEM OUTFIT 
A.P.C 
00,000원 
M / GREY 
A.P.C 
00,000원 
M / GREY 
A.P.C 
00,000원 
TOPS 
BOTTOMS 
SHOES 
ACCESSARY 
OUTER 
T-SHIRT 
SHIRT 
SWEATER 
3 
4 
5 
6 
탭할 시 
변경됨 
7 
8 
다음페이지 연결
Script 
MY CLOSET 
ITEM OUTFIT 
3 
1 
이름정하기 5 
소개팅1 5 2 
1. OUTFIT 카테고리를 탭할 수 있다. 
2. 이 OUTFIT의 이름을 정할 수 있다. 
3. OUTFIT을 볼 수 있다. 
4. 탭하면 이름을 변경할 수 있다. 
5. 4)번을 탭하면 키보드가 올라온다. 
6. 다 썼다면 완료를 탭하여 확정지을 수 있다. 
7. SWIPING UP / DOWN할 수 있다. 
MY CLOSET 
ITEM OUTFIT 
7 
MY CLOSET 
ITEM OUTFIT 
이름정하기 5 
완료 
4 
5 
6 
다음페이지 연결 
이전페이지연결
MY CLOSET 
ITEM OUTFIT 
A.P.C 
5 
00,000원 
2 
M / GREY 
이전페이지연결 
1 
1. OUTFIT에 사용된 구입한 상품들이 뜬다. 상품이름, 가격, 사이즈, 컬러 등을 알 수 있다. 
2. SWIPING UP / DOWN을 할 수 있다. 
** 하단에 계속 다른 OUTFIT과 그에 속한 상품들을 볼 수 있다. 
Script

More Related Content

Viewers also liked

Things Factory Introduction (한글)
Things Factory Introduction (한글)Things Factory Introduction (한글)
Things Factory Introduction (한글)Hatio, Lab.
 
Subject Guide in Chemistry(201502)
Subject Guide in Chemistry(201502)Subject Guide in Chemistry(201502)
Subject Guide in Chemistry(201502)Yulee Kwon
 
[2A6]web & health 2.0. 회사에서의 data science란?
[2A6]web & health 2.0. 회사에서의 data science란?[2A6]web & health 2.0. 회사에서의 data science란?
[2A6]web & health 2.0. 회사에서의 data science란?NAVER D2
 
Effects of Strategic Intervention Material on the Academic Achievements in Ch...
Effects of Strategic Intervention Material on the Academic Achievements in Ch...Effects of Strategic Intervention Material on the Academic Achievements in Ch...
Effects of Strategic Intervention Material on the Academic Achievements in Ch...neoyen
 
혁신적인 웹컴포넌트 라이브러리 - Polymer
혁신적인 웹컴포넌트 라이브러리 - Polymer혁신적인 웹컴포넌트 라이브러리 - Polymer
혁신적인 웹컴포넌트 라이브러리 - PolymerJae Sung Park
 
Chemistry project on chemistry in everyday life
Chemistry project on chemistry in everyday lifeChemistry project on chemistry in everyday life
Chemistry project on chemistry in everyday lifeShashvat Sharma
 

Viewers also liked (7)

Things Factory Introduction (한글)
Things Factory Introduction (한글)Things Factory Introduction (한글)
Things Factory Introduction (한글)
 
Subject Guide in Chemistry(201502)
Subject Guide in Chemistry(201502)Subject Guide in Chemistry(201502)
Subject Guide in Chemistry(201502)
 
[2A6]web & health 2.0. 회사에서의 data science란?
[2A6]web & health 2.0. 회사에서의 data science란?[2A6]web & health 2.0. 회사에서의 data science란?
[2A6]web & health 2.0. 회사에서의 data science란?
 
ACNE SCAR
ACNE SCARACNE SCAR
ACNE SCAR
 
Effects of Strategic Intervention Material on the Academic Achievements in Ch...
Effects of Strategic Intervention Material on the Academic Achievements in Ch...Effects of Strategic Intervention Material on the Academic Achievements in Ch...
Effects of Strategic Intervention Material on the Academic Achievements in Ch...
 
혁신적인 웹컴포넌트 라이브러리 - Polymer
혁신적인 웹컴포넌트 라이브러리 - Polymer혁신적인 웹컴포넌트 라이브러리 - Polymer
혁신적인 웹컴포넌트 라이브러리 - Polymer
 
Chemistry project on chemistry in everyday life
Chemistry project on chemistry in everyday lifeChemistry project on chemistry in everyday life
Chemistry project on chemistry in everyday life
 

Similar to Hello+gentle flow (1)

소셜웹셋팅하기
소셜웹셋팅하기소셜웹셋팅하기
소셜웹셋팅하기영진 유
 
POS machine term project
POS machine term projectPOS machine term project
POS machine term projectGichan Lee
 
기부자들 서버 / 클라이언트 매뉴얼
기부자들 서버 / 클라이언트 매뉴얼기부자들 서버 / 클라이언트 매뉴얼
기부자들 서버 / 클라이언트 매뉴얼진웅 김
 
SNS가입 및 설정(티스토리구글포함)
SNS가입 및 설정(티스토리구글포함)SNS가입 및 설정(티스토리구글포함)
SNS가입 및 설정(티스토리구글포함)Jin-Young Kang
 
Sns가입 및 설정(티스토리구글포함)
Sns가입 및 설정(티스토리구글포함)Sns가입 및 설정(티스토리구글포함)
Sns가입 및 설정(티스토리구글포함)준헌 이
 
Kg가족사 이메일 서명 생성 이용안내
Kg가족사 이메일 서명 생성 이용안내Kg가족사 이메일 서명 생성 이용안내
Kg가족사 이메일 서명 생성 이용안내KGinside
 
[9]ix.유엔진 사용자매뉴얼 gw리뉴얼_2차_110819
[9]ix.유엔진 사용자매뉴얼 gw리뉴얼_2차_110819[9]ix.유엔진 사용자매뉴얼 gw리뉴얼_2차_110819
[9]ix.유엔진 사용자매뉴얼 gw리뉴얼_2차_110819uEngine Solutions
 
팝쇼핑 무지개가게어플 110311
팝쇼핑 무지개가게어플 110311팝쇼핑 무지개가게어플 110311
팝쇼핑 무지개가게어플 110311상민 차
 

Similar to Hello+gentle flow (1) (10)

소셜웹셋팅하기
소셜웹셋팅하기소셜웹셋팅하기
소셜웹셋팅하기
 
POS machine term project
POS machine term projectPOS machine term project
POS machine term project
 
기부자들 서버 / 클라이언트 매뉴얼
기부자들 서버 / 클라이언트 매뉴얼기부자들 서버 / 클라이언트 매뉴얼
기부자들 서버 / 클라이언트 매뉴얼
 
SNS가입 및 설정(티스토리구글포함)
SNS가입 및 설정(티스토리구글포함)SNS가입 및 설정(티스토리구글포함)
SNS가입 및 설정(티스토리구글포함)
 
Sns가입 및 설정(티스토리구글포함)
Sns가입 및 설정(티스토리구글포함)Sns가입 및 설정(티스토리구글포함)
Sns가입 및 설정(티스토리구글포함)
 
Kg가족사 이메일 서명 생성 이용안내
Kg가족사 이메일 서명 생성 이용안내Kg가족사 이메일 서명 생성 이용안내
Kg가족사 이메일 서명 생성 이용안내
 
[9]ix.유엔진 사용자매뉴얼 gw리뉴얼_2차_110819
[9]ix.유엔진 사용자매뉴얼 gw리뉴얼_2차_110819[9]ix.유엔진 사용자매뉴얼 gw리뉴얼_2차_110819
[9]ix.유엔진 사용자매뉴얼 gw리뉴얼_2차_110819
 
팝쇼핑 무지개가게어플 110311
팝쇼핑 무지개가게어플 110311팝쇼핑 무지개가게어플 110311
팝쇼핑 무지개가게어플 110311
 
Bmg 4.0 cartoon version for junior&senior
Bmg 4.0 cartoon version for junior&seniorBmg 4.0 cartoon version for junior&senior
Bmg 4.0 cartoon version for junior&senior
 
회식팅 프로토타입 송은영
회식팅 프로토타입 송은영회식팅 프로토타입 송은영
회식팅 프로토타입 송은영
 

Hello+gentle flow (1)

  • 1. HELLO GENTLE _flow 2014.10.13 조소연
  • 2. 1. Document History Date Member Ver. Description Remarks 2014.10.13 조소연 1.0.0 • 초기 UI 시나리오
  • 3. 팀원 기획 / 권정현 UI,GUI / 조소연 안드로이드 / 최그림, 김민지 서버 / 제현우 Service Concept 옷을 잘 입고 싶은 남자들을 위한 스타일리스트의 스타일링 서비스 Key feature& Service Edge - 전문가가 큐레이션 한 상품 구매 가능 - 스타일리스트의 전문적인 스타일링 경험 가능 - 스타일리스트가 스타일링한 상품들 구매 가능
  • 4. 구분 내용 Service Goal 옷을 잘 입고 싶어하는 ‘남자’들을 위한 서비스로써 사용자의 상황, 체형 등을 고려해 어울리는 스타일링 제공 앱 Core Value 1. 사용자가 자신에 맞는 스타일링의 필요성을 느낌. 2. 큐레이션 한 상품을 구매할 수 있고 사용자에게 스타일리스트의 전문적인 스타일링을 공급. 3. 사용자는 자신의 상황에 맞는 옷을 입을 수 있음. Target User - smartphone user, - 자신의 스타일을 변화시킬 마음이 있는 남자들. - 스타일링에 관해 전문적인 손길이 필요한 남자들. Main Concept ‘유행에 휘둘리지 않고 자신에게 맞는 스타일링을 원한다면 이 앱을 사용하세요.’ - 자신의 주머니 사정에 맞게 상황에 맞게 체형에 맞는 옷 스타일 -> 전문적인 스타일링 제공
  • 5. HELLO GENTLE _ Main task 매거진보기 GENTLE BOX MY CLOSET MY CART 이 어플 사용자는 처음에 매거진을 보며 전문가가 큐레이션 한 상품들을 볼 수 있으며 마음 에 드는 상품을 장바구니에 담을 수 있다. 전문적인 스타일링을 원하는 사용자들을 위한 서비스이며 한 번의 스타일리스트 오프라인 만남이 제공된다. 자신의 주머니 사정에 맞게 상황에 맞게 체형에 맞게 스타일리스트가 스 타일 컨설팅을 해준다. GENTLE BOX에서 구입한 매거진에서 직접 보고 구매한 상품들을 카테고리 별로 볼 수 있는 카테고리이다. MAIN / HOME에서 매거진으로 제공된 상품들을 담아둘 수 있는 카테고리이며 담겨있는 상품들을 구매할 수 있다.
  • 6. Touch Interaction Type Mark Touch Interactions Tap Get focused when touched and get launched when released Double Tap Quickly tap twice on the same spot Touch & Hold Touch on a screen and keep touching it for a while Touch & Move Touch a focus, drag it linearly and release the focus Drag & Drop Touch an item(focused), drag it and drop to move the item Flick Touch on a screen, move & release it quickly to fast scroll items in a specified direction. Scroll speed is accelerated. Pinch zoom out Zoom out the object or screen Pinch zoom in Zoom in the object or screen
  • 7. 2. General Rules Keypad: 각 입력창의 특성에 따라 선택하여 노출(ios 동일) # Description 1 검색창 입력 시 한글을 기본값으로 하며, 검색 버튼이 있는 키패드 2 생년월일, 전화번호 입력 시 숫자가 있는 키패드 (User의 키패드 설정에 따라 다르게 노출될 수 있음) 3 ID/ e-mail 영문 키패드 4 기타 한글 키패드 1. 검색창 2. 생년월일, 전화번호 3. ID, e-mail 이동 4. 기타 이동 1 2 3 4
  • 8. 2. General Rules Hard key (Navigation) 1) back key ㄱ. Home/Main : ‘뒤로 버튼을 한번 더 누르시면 종료됩니다’ 토스트팝업 후 back key 한번 더 누르면 종료됨 ㄴ. 1depth 이하: Depth back 상위 depth로 이동. ㄷ. 특정 Task 수행 중(예. 결제): ‘***를 취소하시겠습니까? 예/아니요’ 팝업 후 이전 화면으로 이동 ㄹ. 이외의 케이스는 서비스 별 정의 Home Tap 메뉴 Tap Back Back 컨텐츠 상세 Tap 특정 Task Back 컨텐츠 상세 1depth 2depth 3depth 취소확인팝업 Back 2) Home key: 백그라운드에서 진행 중 상태 유지(세션 유지시간 n분) 3) menu key: 동작 없음(서비스 별 정의)
  • 9. 2. General Rules Exception & Error case 처리 방법 (pop-up) 네트웍을 찾을 수 없습니다. 확인 (네트웍 에러) 서비스가 알 수 없는 이유로 종료되었습니다. 확인 (비정상 종료)
  • 10. a. Push Notification 클릭 시 해당 컨텐츠로 이동 (home / main) 클릭 시 해당 Gentle box 단계로 이동 2. General Rules 1 HELLO GENTLE ‘이 달의 컬렉션’이 발간되었습니다. 오후 2:13 2 HELLO GENTLE GENTLE BOX가 완성되었습니다. 오후 2:13 # Description 1 • 알림 영역 닫힌 경우 indicator bar에 APP Icon 표시 • 알림 확인 (tap하여 진입) or 지우기 후에는 노출하지 않음 2 해당 컨텐츠 대표사진 + 제목 + 알림 내용 알림 내용 : 이 달의 컬렉션, 장바구니에 담겨진 제품이 품절될 시, 스타일리스트의 컨설팅이 완성되었을 때, 주문한 상품 / 스 타일리스트가 셀렉한 젠틀박스가 도착할 경우
  • 11. 주문하신 ‘GENTLE BOX’가 도착하였습니다. 확인하시겠습니까? Script HG 1 # 인트로 페이지 HELLO GENTLE 7 1. 아이콘 터치 시 – Application 실행 2. 프로그램 실행 시 intro page: 자동으로 2초 이내로 Display 후 Off 됨. 3. 최초 프로그램 실행 시: 메인은 관리자가 큐레이션 한 상품들이 보여지고 magazine형식으로 되어 있다. magazine 형식으로 큐레이션 상품의 이미지와 설명을 제공한다. : 상품이미지 + 상품명 + 브랜드 + 상품설명 까지 한번에 보여줘야 한다. (단, 가격과 장바구니 아이콘은 한 화면 밖으로 나와도 됨.) (사용자가 불시에 앱 중단을 겪을 때 모든 페이지의 디폴트는 사용자가 보던 article을 보여준다.) 4. 매거진 형식의 메인화면이 나오고 swiping up / down할 수 있으며 하단에 있는 텍스트 혹은 다른 상품의 이미지와 그에 관한 텍스트도 볼 수 있다. 최대 개수는 15개이다. 매달 업데이트된다. 과거 매거진은 삭제한다.(과거 매거진은 최하단에 링크로 보여진다.) 5. 이미지를 Flicking을 좌 / 우로 하여 볼 수 있으며 사진의 이미지는 1~5장 정도이다. 6. 사용자가 옷을 주문한 경우에만 보인다. 주문/배송 상태를 여기에 보여준다. ; 탭하여 해당 배송 / 주문 정보가 있는 페이지로 이동한다. ** 새로고침 ( (4)번처럼 swiping down하는 것)하거나 swiping up하면 확인하지 않는다는 행동으로 인식한다. 7. 메뉴는 기본적으로 닫혀있으며, 버튼을 누르면 메뉴바가 좌측에서 미끌어져 나온다. # 메인 페이지_1_젠틀박스를 시행했을 시 4 3 두번누르면 팝업창 뜨며종료 6 다음페이지 연결 2 TITLE 스타일리스트가 큐레이션 한 상 품들을 보여주는 공간입니다. 이 렇게 텍스트가 쓰여있습니다. 제 공해주는 매거진 형식의 메인화 면.
  • 12. # 메인 페이지_2 이전페이지연결 Script 1 2 # 메인 페이지_3 스타일리스트가 큐레이션 한 상품 들을 보여주는 공간입니다. 이렇게 텍스트가 쓰여있습니다. 구구절절 쓸 게 없는데 뭐라 쓰나요… 1 . 매거진 형식의 메인화면이 나오고 swiping up / down할 수 있으며 하단에 있는 텍스트 혹은 다른 상품의 이미지와 그에 관한 텍스트도 볼 수 있다. 2. 장바구니를 탭하면 장바구니(my cart)로 상품이 담겨진다. 선택 전에는 카트의 색이 채워지지 않은 상태지만, 선택(탭)이 된 이후부터 카트의 색이 채워진다. 다시 취소할 경우 한 번 더 탭하면 원상태로 색이 채워지지 않는 상태가 되며 7)번 My cart 탭에서 확인할 수 있다. 3. 메인 화면에서 상품들이 작은 이미지로 보여지고 그 해당 상품이 하단에 있다. 상품 이미지를 탭 하면 하단에 있는 상품의 상세 설명, 상 세 컷으로 내려간다. 4. Flicking하여 상 / 하에 있는 컨텐츠를 볼 수 있다. 5. 메뉴는 기본적으로 닫혀있으며, 버튼을 누르면 메뉴바가 좌측에서 미끌어져 나온다. 메뉴바가 열려있는 상태에서 다시 버튼을 누르면 메뉴바는 닫힘. ** 다음 페이지 연결 6. Flicking 하여 상 / 하 의 컨텐츠를 볼 수 있다. 제공해주는 매거진 형 식의 메인화면. 00,000원 00,000원 6 3 5 4 TITLE 스타일리스트가 큐레이션 한 상 품들을 보여주는 공간입니다. 이 렇게 텍스트가 쓰여있습니다. 제 공해주는 매거진 형식의 메인화 면.
  • 13. HOME MY PAGE MY CART # 메뉴 # 메뉴_DEFAULT_비로그인시 MY CLOSET GENTLE BOX SETTING LOG OUT 사용자이름 내 정보 설정 1 2 3 4 7 6 HOME MY PAGE SETTING LOG IN 로그인해주세요. 이전페이지연결 Script 5 8 1 1. 두 곳을 탭하면 레이어가 왼쪽으로 슬라이딩하여 들어가고 보고 있던 화면이 보인다. 2. 내 정보 설정을 탭하면 내 정보를 수정할 수 있는 페이지가 나온다. ; 내 정보 설정에서는 이름, 키, 몸무게, 상의사이즈, 허리 사이즈, 신발사이즈 그리고 자신의 전신사진까지 수정할 수 있다. **default / log out 시에는 뜨지 않는다. 3. 언제 어느 페이지에 있어도 탭을 하면 home / main 화면이 나온다. 4. My page는 my cart, my closet, gentle box를 이용할 수 있는 하위 카테고리가 나온다. 5. 탭하면 메인화면에서 담은 상품들을 my cart에서 볼 수 있다. ** 다음 페이지 연결 6. Setting에는 푸시 / 알림 기능을 설정할 수 있는 페이지로 간다. 7. LOG OUT은 로그인이 되어 있는 상태에서만 활성화된다. 8. 로그인되어 있지 않거나 회원이 아닐 경우 비활성화된다. 화살표 탭의 컬러가 옅어져 있어 비활성화인 것을 보여준다. 다음페이지 연결 보던화면으로넘어간다.
  • 14. v v v v v v v v 이전페이지연결 Script 삭제하실 건가요? 1. MY CART(장바구니)에 담겨 있는 상품들을 모두 선택할 수 있다. 2. 1)번을 누른 후 모두 선택한 다음 2)번을 탭하면 모두 삭제할 수 있다. 3. 상품 하나씩을 선택할 수 있다. 선택을 취소할 때도 같은 방법으로 선택 취소를 한다. 4. 상품 하나씩만을 삭제할 때 탭한다. 5. Flicking을 하여 상 / 하에 있는 컨텐츠를 볼 수 있다. 6. 상품 하나하나를 탭하면 상품의 상세 정보를 보여준다. 7. 옵션 정보에는 상품 사이즈와 컬러 정보를 알 수 있다. 8. 구매하기는 선택된 상품이 있을 때만 활성화된다. 9 / 10. 탭을 하면 이행하지 않는다는 행동으로 인식한다. 11. 예를 누르면 삭제할 상품들이 삭제된다. 12. My cart의 Default이다. MY CART 장바구니에 상품을 담으세요. # MY CART 구매하기 # MY CART_Default 1 2 3 4 5 6 8 아니오 | 예 12 9 7 시 10 삭제가 안되고 이행하지 않는다로 인식 이 페이지에서 메뉴창이 열린다.
  • 15. Script HOME # 메뉴_DEFAULT 로그인해주세요. MY PAGE SETTING LOG IN 2 1 LOG IN 1. Log in 카테고리를 보기 위해서 메뉴를 탭한다. 2. log in을 하기 위해서 탭을 한다. 3. ID와 PASSWORD를 입력하는 페이지가 나온다. 4. ID를 입력한다. 5. PASSWORD를 입력한다. 6. 비밀번호와 아이디를 잊어버렸을 때 비밀번호와 아이디를 찾을 수 있다. 7. 회원가입이 되어있지 않은 사용자가 회원가입을 하기 위해서 탭한다. ** 다음 페이지 연결 8. 번 ID와 4)번 PASSWORD를 완성하면 탭을 하고 항시 활성화되어 있다. Forgot ID / Password ? SIGN UP 로그인 ID PASSWORD 8 7 6 4 5 다음페이지 연결 3 전 화면으로 간다.
  • 16. PW SIGN UP SIGN UP CONFIRM PW PHONE E-MAIL PW CONFIRM PW PHONE E-MAIL 1. 회원가입할 때 필요한 항목을 다 채워야 한다. 2. 항목을 입력하기 위해 탭을 한다. 3. Flicking up / down을 하여 상 / 하단의 컨텐츠를 볼 수 있다. 4. ID는 영어와 숫자를 조합하여 만들 수 있으며 5. ID중복확인을 해야 한다. **중복이 된다면 ‘ID를 사용할 수 없습니다.’라고 뜬다. PHONE E-MAIL Email 수신에 동의합니다.(선택) 본인은 만 14세 이상입니다. 이용약관에 동의합니다. 개인정보 취급 방침에 동의합니다. 6. 비밀번호는 암호화되어 보이지 않게 된다. 7. 2)번을 탭하면 키보드가 올라온다. 8. ‘다음’을 탭하면 채워야 할 다음 항목으로 넘어간다. 9. Flicking up / down 가능 (단, 사용자가 동의해야 할 항목들을 끝으로 더 이상 하단을 보여주지 않는다.) 10. 사용자가 동의해야 할 항목들이 나오고 동의할 수 있도록 체크 표시가 되게 한다. 체크가 되지 않은 상태는 색이 빠져있고 체크가 되어 있는 상태라면 색이 채워져 있다. 11. 만약 사용자가 회원가입을 마치면 ‘다음’을 탭해 다음 페이지로 넘어갈 수 있다. (단, 사용자가 빠뜨린 문항들이 있다면 다음으로 넘어가지 않고 빠뜨린 항목에 빨간색으로 ‘입력되지 않았습니다’라고 쓰여진다. Script 다음페이지 연결 이전페이지연결 SIGN UP ID ADDRESS 1 다음 SIGN UP ID ADDRESS 3 2 4 ADDRESS 8 v v v v 다음 9 SIGN UP taropororo ●●●●●●●● ●●●●●●●● 010-1234-5678 입력되지 않았습니다. 서울시 관악구.. 키보드가 내려가고 작성하던 화면으로 돌아간다. 6 7 10 11 중복체크 ID중복확인 ID중복확인 5 12 전 화면으로 간다. / 입력된 정보가 지워진다.
  • 17. 이전페이지연P결W 4 PHONE E-MAIL 2 Email 수신에 동의합니다.(선택) v v 본인은 만 14세 이상입니다. 이용약관에 동의합니다. 개인정보 취급 방침에 동의합니다. 1. Swiping / Flicking 하여 상 / 하에 있는 컨텐츠를 볼 수 있다. 2. 사용자들이 동의할 문항들이 나오며 선택 시 컬러가 채워진다. 3. 다음 (회원가입 완료)는 항시 활성화 되어있다. YOUR SIZE Body Size 키 cm 몸무게 kg Tops Shirts, Sweaters, Sweatshirts, T-shirt Bottoms ** 단, 사용자가 입력하지 않은 항목은 빨간글씨로 안 쓴 항목에 ‘000을 입력하지 않으셨습니다.’라고 써진다 Script 4. 다음을 탭하면 신체 사이즈를 입력하는 창으로 넘어간다. 5. Flicking / swiping 할 수 있으며 상 / 하 컨텐츠를 볼 수 있다. 6. 탭하면 folding되었던 사이즈 표가 펼쳐진다. 7. 탭하여 folding되어있는 선택 항목들이 펼쳐지며 default는 20-30대 평균 사이즈이다. 8. Swiping up / down할 수 있다. 9. 이전을 누르면 회원가입 화면으로 가며 입력된 정보는 사라지지 않는다. 10. 다음을 누르면 다음 페이지로 넘어간다. 5 YOUR SIZE Tops Shirts, Sweaters, Sweatshirts, T-shirt 95 95 100 Bottoms 105 110 6 28 inch 28 29 30 110 8 이전 | 다음 이전 | 다음 다음페이지 연결 팝업 창이 뜨면서 뒤로 가면 정보가 삭 제된다는 것을 알려준다. ADDRESS 1 v v v v 다음 선택 시 SIGN UP 010-1234-5678 taropororo@ggg.net 서울시 관악구.. 3 7 9 10
  • 18. 이전페이지연P결W Script 다음페이지 연결 YOUR SIZE Your Body 전신사진을 등록하세요. (프로필사진과 같은 사진으로 등록됩니다.) 이전 | 완료 전신사진이 등록되지 않았습니다. 그래도 가입하시겠습니다? 취소 | 확인 (사진 미등록시에 완료 탭하면) 뒤로 가시면 입력된 정보가 삭제 됩니다. 뒤로 가시겠습니까? 취소 | 확인 (입력한 정보가 있는데 뒤로를 눌렀을 시) 팝업 창이 뜨면서 뒤로 가면 정보가 삭제된다 는 것을 알려준다. 1 2 3 4 YOUR SIZE Your Body 6 5 이전 | 완료 1. 사용자의 전신사진을 불러올 수 있다. 2. 등록된 전신사진이 없을 경우 default 3. 이전을 탭하면 sign up으로 간다. 4. 사용자가 전신사진을 등록하지 않고 완료를 눌렀을 때 취소/확인 팝업 창이 뜬다. **하지만 회원가입은 할 수 있다. 5. 이미 등록된 사진이 있다면 사진을 다시 불러올 수 있다. 6. 등록한 사진을 볼 수 있다 7. 이전을 탭하면 body size로 이동한다. 8. 완료를 누르면 회원가입이 완료된다. 7 8
  • 19. 이전페이지연결 1 Script GENTLE BOX GENTLE BOX 당신의 스타일리스트를 고용하세요! 2 스타일 상담 ㅣ 젠틀박스 받아보기 ㅣ 원하는 상품결제 3 스타일 상담 요청하기 4 5 6 7 GENTLE BOX 1. 사용자의 신체 사이즈를 입력한 후에는 gentle box에 대한 이미지와 설명이 나오고 사용자가 읽어본 뒤 gentle box를 요청할 수 있다. 2. 스타일 상담, 젠틀박스 받아보기, 원하는 상품 결제 카테고리가 나오며 하나하나 탭하면 그 내용에 대한 이미지와 설명이 4)번에 나온다. 3. 2)번에서 탭한 카테고리의 이름이 나온다. 4. 2)번에서 탭한 카테고리에 대한 이미지와 설명이 나온다. 5. 4)번의 세 개(스타일 상담 / 젠틀박스 받아보기 / 원하는 상품결제)의 이미지와 카테고리를 보여준다. 6. 왼쪽으로 Flicking하거나 탭을 하면 이미지와 텍스트가 왼쪽으로 넘겨지며 마지막 카테고리인 원하는 상품결제에서 탭 / flicking을 하면 빠르게 첫 카테고리인 스타일 상담으로 간다. 7. 각각의 설명과 주의사항을 읽은 후 요청하기를 누른다. 8. 7) 요청하기를 누르면 바로 사용자만의 스타일리스트의 얼굴 이미지, 이름, 카카오톡 ID 그리고 스타일리스트가 하는 한마디가 나온다. 하단에는 이 서비스를 이용할 때 주의사항과 설명이 있다. 9. 스타일리스트의 얼굴이 나온다. 10. 스타일리스트의 이름과 카카오톡 ID가 쓰여져있다. 11. 스타일리스트가 하는 한마디가 적혀있다. 12. GENTLE BOX에 대한 주의사항과 설명이 적혀 있다. YOUR STYLIST 권 정 현 카톡ID solorose Fashion is passion 스타일리스트와 오프라인 상 담은 젠틀박스 처음 이용시 상진담행해진야행하하는기 8 9 10 11 12 13 14 GENTLE BOX 스타일 컨설팅 중입니다. 15 다음페이지 연결 16
  • 20. GENTLE BOX 권 정 현 카톡ID solorose GENTLE BOX GENTLE BOX 2 배송 중 입니다. 요청과 스타일에 맞추어 젠틀박스가 구성되었습니다. 젠틀박스받기 다음페이지 연결 1 Script 권 정 현 카톡ID solorose 1. 스타일리스트와 사용자가 오프라인에서 상담을 진행하는 중이며 오프라인 상담이 끝날 시에 스타일리스트의 완료 알람을 받아 이 페이 지로 넘어온다. 스타일리스트의 사진, 이름, 카카오톡ID가 적혀있다. 젠틀박스가 구성되었다는 것을 알려준다. 2. 스타일리스트와 사용자가 오프라인에서 만나 상담한 후에 스타일리스트가 컨설팅를 하여 젠틀박스가 구성되었다고 알려준다. 3. ‘받기’를 탭하여 다음 페이지로 넘어가며 이 탭은 항시 활성화한다. 4. 젠틀박스 받기를 누른 후 배송 중이라 표시해주며 **Default 메뉴 설정 페이지에서 GENTLE BOX를 누르면 사용자가 진행한 단계의 페이지로 이동한다 5. 스타일리스트가 구성한 OUTFIT이 나오며 스타일리스트 얼굴, 이름, 카카오톡 ID가 보여진다. 6. Swiping up / down 하여 상 / 하의 컨텐츠를 볼 수 있다. 7. 스타일리스트가 구성한 OUTFIT과 하단에 구성된 아이템들이 보인다. 소개팅 때 입으면 좋은 옷 이전페이지연결 4 5 7 6 3
  • 21. v GENTLE BOX A.P.C 4 00,000원 M / GREY A.P.C 00,000원 2 00,000원 이전페이지연결 1 Script v v 구매하기 3 5 6 총 금액 000,000원 1. ‘스타일 컨설팅 중입니다.’라고 쓰여진 페이지가 나온다. 이 단계에서는 스타일리스트와 사용자가 오프라인에서 상담을 진행하는 중이며 오 프라인 상담이 끝날 시에 스타일리스트의 완료 알람을 받아 다음 페이지로 넘어간다. 2. Swiping up / down하며 상 / 하에 있는 컨텐츠를 볼 수 있다. 3. Item(상품)을 모두 선택할 수 있다. 4. 상품의 이름, 가격, 사이즈, 색상 정보를 보여준다. 5. 상품을 하나씩 선택할 수 있다. 6. 선택이 이루어지면 구매하기를 누를 수 있다. 7. 사용자가 돌려보낼 상품을 선택하고 구매하기를 누르고 환송하는 중이면 페이지에 뜨게 한다. 8. 환송이 완료되면 환송이 완료되었습니다.라고 뜬다. **관리자가 환송 확인을 하면 바로 올려준다 9. Swiping up / down 하여 상 / 하의 컨텐츠를 볼 수 있다. 10. 구매할 상품들의 총 금액을 보여준다. 11. 결제하기를 탭하면 입금해야 할 금액과 계좌번호, 계좌 주명을 알려준다. 다음페이지 연결 GENTLE BOX 환송 중 입니다. GENTLE BOX 환송이 완료되었습니다. A.P.C 00,000원 결제하기 7 11 8 10 9
  • 22. 다음페이지 연결 이전페이지연결 1 하징ㅋ Script 2 GENTLE BOX GENTLE BOX HELLO GENTLE 계좌번호 국민은행 011-2345-6789 헬로젠틀㈜ 3 계좌주명 4 5 1. 관리자가 환송한 물건을 받게 되면 구매할 금액 결제해야 한다. 다음을 탭하면 헬로젠틀 BI 2. 헬로 젠틀의 BI가 적혀있다. 3. 관리자 계좌번호 , 계좌주명이 쓰여져 있다. 사용자가 복사하여 붙여넣기에 용이하게 텍스트로 넣어준다. 4. 관리자가 입금을 확인하면 ‘결제를 완료하였습니다.;’창을 띄어준다. 5. 입금자 명과 입금한 금액을 보여준다. 6. 사용자가 확인을 누르면 MAIN화면으로 넘어가며 메인서비스를 모두 이용한 것이다. 7. 햄버거를 탭한다. **다음 페이지에 계속 8. SWIPING하여 상 / 하에 있는 컨텐츠를 볼 수 있다. 결제를 완료하였습니다. 이상한디? 입금자 명 총 입금액 최그림 00,000원 확인 6 6 8 TITLE 스타일리스트가 큐레이션 한 상 품들을 보여주는 공간입니다. 이 렇게 텍스트가 쓰여있습니다. 제 공해주는 매거진 형식의 메인화 면. 7
  • 23. My information 프로필사진 / 전신사진 변경 최 그 림 Body Size 키 176 cm 몸무게 67 kg HOME MY PAGE MY CART MY CLOSET GENTLE BOX SETTING LOG OUT 사용자이름 내 정보 설정 1 Script 프로필사진 / 전신사진 변경 몸무게 67 kg 1. 내 정보 설정을 탭하면 사용자의 정보를 수정할 수 있다. Body Size 수정 ( 프로필 사진 / 전신사진 설정, 키, 몸무게, 상의 사이즈, 하의 사이즈, 신발 사이즈) 2. 전신 사진 / 프로필사진이 보인다. 3. 사진을 설정할 수 있다. 4. Swiping up / down 할 수 있다. 5. 텍스트를 입력할 수 있다. 6. ‘수정’을 누르면 스위치되어 ‘저장’으로 변한다. 수정을 탭하여 정보를 수정할 수 있다. 7. ‘수정’을 탭하면 ‘저장’으로 ‘저장’을 탭하면 ‘수정’으로 --- 수정을 탭하면 수정모드로 저장을 누르면 저장됨. 다음페이지 연결 이전페이지연결 My information 최 그 림 키 176 cm Tops 3 2 4 5 6 저장 7
  • 24. My information 최 그 림 Body Size 키 cm 몸무게 kg Body Size Tops 키 176 cm Shirts, Sweaters, Sweatshirts, T-shirt 몸무게 67 kg 3 My information 프로필사진 / 전신사진 변경 최 그 림 Body Size 키 176 cm 몸무게 67 kg 저장 Tops 2 1 이전페이지연결 Script 1. 수정’이라 되어 있은 곳을 탭하여 수정모드로 만든다. 2. 항목을 탭하여 정보를 수정한다. 3. 수정모드에서 항목을 탭하면 키보드가 올라온다. 4. 다음을 탭하면 다음 항목으로 간다. 4
  • 25. HOME MY PAGE MY CART MY CLOSET GENTLE BOX SETTING LOG OUT 사용자이름 내 정보 설정 1 Script 1. Menu 탭에서 my page에서 하위에 있는 my closet을 탭한다. 2. Gentle box에서 구입한 item들을 보여준다. 3. 구매내역이 없으면 이렇게 나온다. 4. 구매한 item을 이용하여 다시 한번 outfit을 볼 수 있다. 5. 구매내역이 없을 때 outfit도 똑같은 화면을 보여준다. # My Closet - Dfaullt_구매내역 없을 시 MY CLOSET ITEM OUTFIT 구매내역이 없습니다. 2 3 MY CLOSET ITEM OUTFIT 5 4 구매내역이 없습니다.
  • 26. # My Closet – 구매내역이 있고 카테고리 분리 전 MY CLOSET ITEM OUTFIT A.P.C 00,000원 M / GREY A.P.C 00,000원 M / GREY 1 2 Script MY CLOSET ITEM OUTFIT A.P.C 00,000원 A.P.C 00,000원 M / GREY A.P.C 00,000원 M / GREY A.P.C 00,000원 TOPS BOTTOMS SHOES ACCESSARY 1. 사용자가 구매한 상품들은 My closet에 담긴다. 2. ‘> 버튼’을 탭하면 상품 종류의 카테고리가 나온다. 탭하면 버튼 모양은 아래방향 ‘v 버튼’으로 변경된다. ---> 5)번 3. 사용자가 구입한 상품이 단품 이미지로 나온다. 4. 사용자가 구입한 상품의 이름, 가격, 사이즈, 가격이 나온다. 5. ‘> 버튼’을 탭하면 각 종류의 하위 카테고리가 나오며 탭하면 버튼 모양은 아래방향 ‘v 버튼’으로 변경된다. - 종류 카테고리를 보여주며 소분류로 또 나눠진다. - 대분류된 카테고리를 탭하면 ALL 모든 상품이 나온다. - 또 누를 때 그 탭의 색은 잠깐 색이 바뀌며 손가락을 떼면 다시 원 색상으로 돌아온다. ---> 7)번 6. 하위 카테고리가 나온다. 7. 탭하고 있는 상태에선 컬러가 조금 달라지고 다시 손가락을 떼면 원래 색으로 변한다. 8. SWIPING UP / DOWN 할 수 있다. MY CLOSET ITEM OUTFIT A.P.C 00,000원 M / GREY A.P.C 00,000원 M / GREY A.P.C 00,000원 TOPS BOTTOMS SHOES ACCESSARY OUTER T-SHIRT SHIRT SWEATER 3 4 5 6 탭할 시 변경됨 7 8 다음페이지 연결
  • 27. Script MY CLOSET ITEM OUTFIT 3 1 이름정하기 5 소개팅1 5 2 1. OUTFIT 카테고리를 탭할 수 있다. 2. 이 OUTFIT의 이름을 정할 수 있다. 3. OUTFIT을 볼 수 있다. 4. 탭하면 이름을 변경할 수 있다. 5. 4)번을 탭하면 키보드가 올라온다. 6. 다 썼다면 완료를 탭하여 확정지을 수 있다. 7. SWIPING UP / DOWN할 수 있다. MY CLOSET ITEM OUTFIT 7 MY CLOSET ITEM OUTFIT 이름정하기 5 완료 4 5 6 다음페이지 연결 이전페이지연결
  • 28. MY CLOSET ITEM OUTFIT A.P.C 5 00,000원 2 M / GREY 이전페이지연결 1 1. OUTFIT에 사용된 구입한 상품들이 뜬다. 상품이름, 가격, 사이즈, 컬러 등을 알 수 있다. 2. SWIPING UP / DOWN을 할 수 있다. ** 하단에 계속 다른 OUTFIT과 그에 속한 상품들을 볼 수 있다. Script