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