Fashion dictionary proj by Mondrian

1. 패션 딕셔너리 프로젝트
Team 몬드리안 | 안소현 | 이정은
어플리케이션 디자인
안리아

2. 목차
00 문제 제기
01 목표 정의
02 프로젝트 계획
∴ 디자인 과정은 정보통신산업진흥원 소프트웨어공학센터, 한국디자인 진흥원에서 기획한 ‘사용자 중심 소프트 웨어 개발 UI/UX 참조모델’을 따름.
03 요구사항 정의
04 설계 및 구현
05 마치며
UX 전략 수립
UX 차별화 전략 수립
사용자 요구사항 도출
UX 컨셉션 정의
UI/UX 개발 목표 및 범위 정의 UI 상세 설계
GUI 화면 디자인

3. 00 문제 제기 패션 딕셔너리
문제의식
의상학도들이 필수적으로 알아야 하는 실무 용어들을 평소 학교수업에서 잘 다루지 않음.
의상학 용어들을 빠르고 정확하게 찾을 수 있는 교육자료의 필요성 대두.
의상학 용어와 명칭에 대한 정보를 시각자료를 통해 편하게 찾을 수 있어야 함.
패션 관련 용어 앱 기획 및 개발 목표 수립

4. 01 목표 정의 패션 딕셔너리
개발 목표
개발 계획
UI/UX 개발 목표 및 범위 정의
패션학과에 입문한 학도들이 잘 알지 못하는 패션용어, MD용어, 의복 명칭이나 소재 등 다양한 정보를 제공하는 어플을 제작함.
Ⅰ . 프로젝트 구상 및 기획서(prototype) 작성
Ⅱ . 동종업계 사례조사, 1차·2차 자료 수집
Ⅲ . 수집 된 정보 카테고리화
Ⅳ . 카테고리 점검 및 세분화
Ⅴ . 앱의 주 테마 설정. 디자인(prototype)
Ⅵ . UI / UX 디자인
Ⅶ . 앱 프로그래밍
Ⅷ . 앱 마켓 등록

5. 01 목표 정의 패션 딕셔너리
3C 분석
UI/UX 개발 목표 및 범위 정의
자사
경쟁사 사용자
의상학과 재학생으로서 전공 지식을 이미 알고 있음.
전공을 듣는 데에 필요한 정보를 알고 있음.
현업인 선배, 교수님 등 실무 정보들을 접할 수 있음.
전공지식을 배우고 싶음.
전공과목에 대한 정보를 원함.
원하는 정보를 빠르게 찾기를 원함.
학교 수업과 실무 현장의 괴리감을 없애고 싶음.
어플로 제작된 패션 용어사전은 현재 존재하지 않음.
네이버 사전, 두산 백과 등 인터넷 사전이 존재하나
정보 로딩시간이 길고, 최근 정보를 많이 담지 못함.
전공 정보보단 단순 지식에 가까움.

6. 01 목표 정의 패션 딕셔너리
개발 과제(prototype)
UI/UX 개발 목표 및 범위 정의
용어와 명칭에 대한 정보를 시각자료와 함께 편하게 찾을 수 있어야 함.
정보들이 항목별로 정리가 되어 있어야 함.
검색창을 제공하여 정보 검색이 편리하게 이루어져야 함.
즐겨찾기 탭을 제공하여 자주 찾는 용어를 저장할 수 있는 기능을 제공함.

7. 02 프로젝트 계획 패션 딕셔너리
UX 전략 수립
데스크리서치
두 팀원이 의상학과에 3년간 재학하며 느꼈던 불편함에 대해 토의
1. 학과 커리큘럼 상 기초 수업을 건너 뛴 채 상위 수업을 들어야 하는 경우가 잦음
2. 학과 수업과 실무 현장과의 괴리감이 존재
3. 패턴 용어들을 미리 숙지하고 있어야 하는 경우 존재
4. 한 가지 소재가 다른 이름으로 불리는 경우 잦음
：

8. 02 프로젝트 계획 패션 딕셔너리
UX 차별화 전략 수립
언제든지 빠르고 정확하게 ‘의상학과 분야 지식’만을 찾을 수 있는 사전 앱(app)

9. 03 요구사항 정의 패션 딕셔너리
사용자 요구사항 도출 - 문제의식
문제의식
의상학도들이 필수적으로 알아야 하는 실무 용어들을 평소 학교수업에서 잘 다루지 않음.
의상학 용어들을 빠르고 정확하게 찾을 수 있는 교육자료의 필요성 대두.
의상학 용어와 명칭에 대한 정보를 시각자료를 통해 편하게 찾을 수 있어야 함.

10. 03 요구사항 정의 패션 딕셔너리

11. 03 요구사항 정의 패션 딕셔너리
UX 컨셉션 정의 - 무드보드
GUI 이미지 무드보드
ㆍCOLORS ㆍFONTS
Times New Roman
ㆍINSPIRATION SITES

12. UI 상세 설계
04 설계 및 구현 패션 딕셔너리
User Flow
Fashion
dictionary
Fashion
dictionary
로딩화면 대기화면
Fashion
dictionary
categories
항목1
항목2
항목3
항목4
…
Fashion
dictionary
categories
항목1
항목2
항목3
항목4
…
소항목1
소항목2
소항목3
소항목4
Fashion
dictionary
Key pad
키패드, 커서 생성
Fashion
dictionary
categories
항목1
항목2
항목3
항목4
소항목1
소항목2
소항목3
소항목4
…
Information
visual
materials
Swipe 제스처를 통해
이전 화면으로 이동
Information
visual
materials
Key pad
a..
a’
a’’
a’’’
visual
materials
Key pad
먼저 입력하는 철자에 대한
정보 오름차순 정렬
철자 입력
Swipe 제스처를 통해
대기 화면으로 이동

13. 04 설계 및 구현 패션 딕셔너리
Type A Type B
1차 2차 1차 2차
• 1차_YARN으로부터 시작되는 패션지식이라는 의미
• 2차_A to Z라는 의미로 레터링을 포함시킴
• 단점_트렌지하지 않은 이미지, 색상비율의 불균형
• 1차_보여지는 것의 모든 것이라는 의미를 담아 심미적
디자인에 중점을 둠
• 2차_간결하게 가운데로 위치시킴

14. 04 설계 및 구현 패션 딕셔너리
앱 아이콘(최종)
의상학과를 상징하는 바디(마네킹)의 실루엣을 단순하게 표현
북마크, 하드커버 사전의 형태로 아이콘을 디자인
좌측에 FASHION 단어를 기입
→ ‘패션 용어’를 다루는 정보 전달형 앱임을 나타냄
GUI 화면 디자인

15. 04 설계 및 구현 패션 딕셔너리
세부 화면 디자인
GUI 화면 디자인
로딩 화면 메인 화면
1
1 : 앱 아이콘
2
2 : 메뉴
탭 > 카테고리
3
3 : 검색창
검색기능 제공
4
4 : 3 을 탭할경우
나타남
5

16. 04 설계 및 구현 패션 딕셔너리
세부 화면 디자인
GUI 화면 디자인
5 5
6
6
: 검색창
검색기능 제공
: 휠 제스쳐를 사용 하여
하위 메뉴를 볼 수 있음
7
7 : 를 탭 했을 경우
빠르게 밝아짐.
5:
8
8
: Language(다국어 지원)
제작자 출력 예정

17. 04 설계 및 구현 패션 딕셔너리
세부 화면 디자인
GUI 화면 디자인
창 변환

18. 04 설계 및 구현 패션 딕셔너리
세부 화면 디자인
GUI 화면 디자인
TAP
WHEEL
9 9 : 탭 할 경우
정보를 출력

19. 05 마치며 패션 딕셔너리
현재 세부 화면 디자인까지 완성되었으며, 향후 앱을 개발하여 앱스토어에 출시할 계획.