SlideShare a Scribd company logo
KAYWON UNIVERSITY OF ART DESIGN
SMART PRODUCT DESIGN LAB
INTERFACE DESIGN
인터페이스 디자인
kwonjeongeun naver.com
10강 기말 과제 소개

/ 35
1
기말 과제 소개
실습
UX Tool 실습
/ 35
2
기말 과제 요구사항
/ 35
3
1 간단한 앱을 만들어 봅니다.
Q 인터페이스를 만들 수 있는 팀인가?
2 팀 과제로 진행합니다.
-
개인 과제도 있습니다.
3 수행 기간은 10주 차
~
15주 차까지.
4 완료 보고는 15주 차 직무수행능력평가 2 .
/ 35
4
기말 과제 일정
10강 11/12 화
:
기말 과제 소개
11강 11/19 화
:
<
발표
>
조사
~
메뉴트리
12강 11/26 화
:
<
발표
>
손 스케치
13강 12/03 화* : 발표
>
와이어프레임 제작 디자인 컨셉
14강 12/10 화
:
<
발표
>
디자인 컨셉 및 주 화면 디자인 보완
15강 12/17 화
:
<
제출
>
앱 디자인 완료
기말 과제 들어가기 앞서… 인터페이스?
/ 35
5
사람
디지털
시스템
사용자가 접하는 공간/시간
User Experience
목표 도구
행동
Goal Tool
Activity
Information Interaction Interface
출처 : <안될과학>, 장진규 편
Q. 인터페이스, 적절하게 디자인됐는가?
/ 35
6
사람
디지털
시스템
사용자가 접하는 공간/시간
User Experience
도구
Tool
Interface
출처 : <안될과학>, 장진규 편
서비스 디자인
콘셉트 보드
서비스 시나리오
서비스 청사진
UX 디자인
정보 구조
테스크 흐름
세부 인터랙션
UI 디자인
비주얼 콘셉트 보드
화면 디자인
디지털 서비스 디자인 프로세스
/ 35
7
디자인 가이드
목표
프로젝트 범위
01
가설
고객 여정 지도
문제 취약점
02
콘셉트
서비스 디자인
03
전달
서비스 개발
04
정보 설계 단계
UX 디자인
/ 35
8
메뉴 트리
기능 리스트
주요 특징
서비스 컨셉
11/19
화 발표
서비스 정의 단계
둘
사이
할 일
둘 사이
할 일
둘 사이 할 일 : 사전 조사
/ 35
9
유사 앱/유사 테스크의 서비스 테스크 흐름 수집과 우리 앱에 활용
리서치 단계
정보 설계 단계
UX 디자인
/ 35
10
메뉴 트리
기능 리스트
주요 특징
서비스 컨셉
11/19
화 발표
서비스 정의 단계 둘 사이
할 일
정보 설계 단계
UX 디자인
/ 35
11
프로토타입
와이어프레임
손 스케치
테스크 흐름
No color
11/26
화 발표
시각 개발 단계
UI 디자인
/ 35
12
프로토타입
모든 화면 디자
주 화면 디자인
시각 컨셉
12/3
화 발표
12/10
화 발표
12/17
화 제출
기말 과제 소개
실습
UX Tool 실습
/ 35
13
/ 35
14
앱 소개
앱 이름 미정 또는 앱 이름 가칭
~
앱 정의 간단히 한 줄
작성하기
?
/ 35
15
앱 컨셉과 주요 특징 (가안)
특징 1
작성
특징 3
작성
특징 2
작성
?
~
앱 정의 간단히 한 줄 작성하기
앱 이름 미정 또는 앱 이름 가칭
/ 35
16
앱 컨셉과 주요 특징 (가안)
서비스 명 선정 이유 선정
앱 이름 미정 또는 가칭 앱 정의 간단히 한 줄 작성
블라인드
~
유사함.
~
경쟁 서비스임.
~
시장이 같음. …
틱톡
~
유사함.
~
경쟁 서비스임.
~
시장이 같음. …
밴드
~
테스크가 거의 유사해서 참고할만함.
에브리타임
~
테스크가 거의 유사해서 참고할만함.
X
~
테스크가 거의 유사해서 참고할만함.
제페토
~
테스크가 거의 유사해서 참고할만함.
링크드인
~
테스크는 다르지만
~
에 참고할 점이 있음. 예
:
~
기능.
서비스 명
~
테스크는 다르지만
~
에 참고할 점이 있음. 예
:
~
기능.
유사 앱 또는 유사 테스크의 앱 조사 소개
App
Icon
App
Icon
App
Icon
App
Icon
App
Icon
App
Icon
App
Icon
App
Icon
?
/ 35
17
출처 : 무슨 앱, 어떤 테스크 中
참고 할 Task와 Task Flow 소개 (여러 장)
/ 35
18
Task. 테스크 명칭 작성하기
1 2 나의 게시물 작성 진입 1 4 나의 게시물, 글 작성 중
1 3 1 나의 게시물, 이미지 작성 중 1 5 나의 게시물, 공유 완료
1 1 홈
• 우리 앱에 어떻게 활용…
~
에 참고할 수 있을 것 같다.
• 우리 앱에 어떻게 활용…
~
에 참고할 수 있을 것 같다.
Insight
출처 : 무슨 앱, 어떤 테스크 中
참고 할 Task와 Task Flow 소개 (여러 장)
/ 35
19
Task. 다른 테스크 명칭 작성하기
1 2 나의 게시물 작성 진입 1 4 나의 게시물, 글 작성 중
1 3 1 나의 게시물, 이미지 작성 중 1 5 나의 게시물, 공유 완료
1 1 홈
• 우리 앱에 어떻게 활용…
~
에 참고할 수 있을 것 같다.
• 우리 앱에 어떻게 활용…
~
에 참고할 수 있을 것 같다.
Insight
출처 : 무슨 앱, 어떤 테스크 中
참고 할 Task와 Task Flow 소개 (여러 장)
/ 35
20
Task. 또 다른 테스크 명칭 작성하기
1 2 나의 게시물 작성 진입 1 4 나의 게시물, 글 작성 중
1 3 1 나의 게시물, 이미지 작성 중 1 5 나의 게시물, 공유 완료
1 1 홈
• 우리 앱에 어떻게 활용…
~
에 참고할 수 있을 것 같다.
• 우리 앱에 어떻게 활용…
~
에 참고할 수 있을 것 같다.
Insight
출처 : 무슨 앱, 어떤 테스크 中
참고 할 Task와 Task Flow 소개 (여러 장)
/ 35
21
Task. 또 다른 테스크 명칭 작성하기
1 2 나의 게시물 작성 진입 1 4 나의 게시물, 글 작성 중
1 3 1 나의 게시물, 이미지 작성 중 1 5 나의 게시물, 공유 완료
1 1 홈
• 우리 앱에 어떻게 활용…
~
에 참고할 수 있을 것 같다.
• 우리 앱에 어떻게 활용…
~
에 참고할 수 있을 것 같다.
Insight
앱 기능 리스트
기능 단위 세부 기능 콘텐츠 구성 중요도
컨텐츠 구독 페이지 내비게이션 1
전체 컨텐츠 보기 1
컨텐츠 섹션 보기 1
북마크 리스트 보기 날짜 별, 색상 별 1
이전 화면으로 가기 1
책장으로 가기 시간, 구독여부 1
추천물품 보기 상품별, 가격별 2
트렌드 보기 물품별, 도시별, 연예인 2
정보 공유 위시 리스트 첨부하기 이메일, 카카오톡에 스크랩 이미지 첨부 1
구매 상품 첨부하기 이메일, 카카오톡에 스크랩 이미지 첨부 1
기사/이미지 첨부하기 이메일, 카카오톡에 스크랩 이미지 첨부 1
위시 리스트 공유하기 > SNS 페이스북, 인스타그램 1
구매 상품 공유하기 > SNS 페이스북, 인스타그램 1
기사/이미지 공유하기 > SNS 페이스북, 인스타그램 1
물품 구매 결제하기 물품 개수 1
구매내역 보기 시간, 물품별 리스트 제공 1
교환/환불하기 교환사용 종목, 작성란 1
위시 리스트 보기 시간, 물품별 리스트 제공 1
최근 본 상품 보기 오늘, 지난주, 지난달 1
/ 35
22
기능 단위 세부 기능 콘텐츠 구성 중요도
컨텐츠 구독 페이지 내비게이션 1
전체 컨텐츠 보기 1
컨텐츠 섹션 보기 1
북마크 리스트 보기 날짜 별, 색상 별 1
이전 화면으로 가기 1
책장으로 가기 시간, 구독여부 1
추천물품 보기 상품별, 가격별 2
트렌드 보기 물품별, 도시별, 연예인 2
정보 공유 위시 리스트 첨부하기 이메일, 카카오톡에 스크랩 이미지 첨부 1
구매 상품 첨부하기 이메일, 카카오톡에 스크랩 이미지 첨부 1
기사/이미지 첨부하기 이메일, 카카오톡에 스크랩 이미지 첨부 1
위시 리스트 공유하기 > SNS 페이스북, 인스타그램 1
구매 상품 공유하기 > SNS 페이스북, 인스타그램 1
기사/이미지 공유하기 > SNS 페이스북, 인스타그램 1
물품 구매 결제하기 물품 개수 1
구매내역 보기 시간, 물품별 리스트 제공 1
교환/환불하기 교환사용 종목, 작성란 1
위시 리스트 보기 시간, 물품별 리스트 제공 1
최근 본 상품 보기 오늘, 지난주, 지난달 1
장바구니 보기 1
기타 로그인 설정 ID, 비밀번호, 자동 로그인 1
어플 정보 보기 버전, 출시일자 3
사용자 정보 관리 주소, 프로필 이미지 1
이용내역 관리 3
/ 35
23
홈 환자 긴급상황 의료진 내 프로필 환경설정
낫폴나풀
환자 리스트 환자 검색 지도 의료진 검색 정보 확인 알림 설정
환자 리스트 긴급상황 히스토리 의료진 리스트 정보 수정 앱 버전/업데이트
긴급상황 환자 위치 실시간 채팅 로그인 설정 앱 도움말
환자 상세 정보 로그아웃
앱 메뉴 트리
로그인
환자 상세 정보
/ 35
24
Q. 질문 사항?
작성하기
/ 35
25
Q. 알게된 점?
작성하기
/ 35
26
Excel 파일로 작성.
1. 기능 리스트를 Excel 탬플릿에 맞춰 상세하게 작성한다.
예시 보기
2. 기능 단위를 먼저 리스트업 한 후, 각 항목의 세부 기능을 하나 하나 작성한다.
예
:
냉장고 케어 앱의 기능 단위?
냉장고 위생 상태, 청소 푸시, 청소 요청 A/S 서비스 , 수리 요청 A/S 서비스
3. 세부 기능의 상세 정보 또는 부연 설명을 그리고 콘텐츠 구성을 작성한다.
4. 기능 리스트는 중요도 1, 2 순으로 정렬한다.
중요 주요 특징
->
기능 단위 파악되어야
->
기능 리스트 도출 Excel
기능 리스트 준수사항
/ 35
27
기능 리스트 Excel 파일 내 이어서, 메뉴 트리 작성 완료.
목적
:
1. 바로 앱을 만들 수 없다. 담을 화면과 담을 콘텐츠가 필요함.
2. 앱
-
주요 특징
-
기능 리스트
-
메뉴 트리
-
콘텐츠 정보 대한 생각이 중심을 잡고 있는지
확인.
1. 기능 리스트와 메뉴 트리를
Excel 탬플릿에 맞춰 상세하게 작성한다.
2. 기능 리스트를 먼저 완료 후, 메뉴 트리를 설계한다.
중요 기능 리스트와 메뉴 트리 차이를 이해해야 작성이 편합니다.
메뉴 트리 준수사항
/ 35
28
/ 35
29
10주 차, <과제> 제대로 했는지 기준은?
Q. 다음 단계, 손 스케치로 들어갈 수 있게
준비가 됐는가?
-
팀 앱 디자인을 위한 준비 단계로
팀 앱이 구체적으로 보이기 시작하는 첫 단계가
손 스케치 단계입니다.
-
참고로 손 스케치는 개인 과제입니다.
/ 35
30
매주 Critique이 있습니다.
1 발표 팀
:
B 3, B 5 / A 1, A 2
2 피드백 시간을 위해 max 20장으로 간결하게 발
표합니다.
3 발표는 1인이 10분 내외로 준비합니다. 스크립트
를 읽지 않습니다.
10주 차, <과제> 발표
기말 과제 소개
실습
UX Tool 실습
/ 35
31
UX Tool 실습
/ 35
32
Q. 툴 실력 디자인 실력을 단기간 향상시킬 방법?
A. 좋은 디자인을 따라서 만들어 보는 반복 훈련
-
이번 주
:
2시간, 제출 1
-
과제
:
시간 모자를 것 같다면 약간 진행해도 좋음
-
다음 주
:
2시간, 최종 제출 2
UX Tool 실습
/ 35
33
볼 줄 아는 눈 중요. 디테일을 읽는 눈.
-
디자인, 가능한 비슷하게.
-
폰트 조합, 컬러 조합, 라인 처리, 그림자 처리, 흐림 처리, …
1 자료 다운로드
-
과제 시작 전, 필요한 레슨.
2 이번 주
:
와이어프레임 완료. GNB 영역 아이콘 제외.
과제
:
아이콘, Ai 작업
->
아이콘, XD 파일에 적용.
다음 주
:
이미지 적용까지 완료.
UX Tool 실습 제출
/ 35
34
제출 시점
:
오늘, 제시한 시간까지
제출 방법
:
스마트출석부
>
과제
파일명
:
lesson8.Assignment B 1
홍
길
동
20241112
제
출
.xd
lesson8.Assignment B 1
홍
길
동
20241119
제
출
.xd
kwonjeongeun naver.com
/ 35
35
끝.
다음 주 과제
:
-
과제 제출 및 발표 준비
-
UX Tool 실습
<
과제
>
진행

More Related Content

PDF
InterfaceDesign_5th.Lecture.Inteface&Interaction.pdf 자료
PDF
InterfaceDesign_6th.Lecture.InformationArchitecture_1.pdf 자료
PDF
InterfaceDesign_7th.Lecture.InformationArchitecture_2.pdf 자료
PDF
InterfaceDesign_13th.lecture.UI.Design.pdf 자료
PDF
InterfaceDesign_11th.lecture.Sketch.pdf 자료
PDF
InterfaceDesign_8th.lecture.MidTerms.Guideline.pdf 자료
PDF
InterfaceDesign_2nd.Lecture.Design.pdf 자료
PDF
InterfaceDesign_12th.lecture.Wireframe.and.Prototype.pdf 자료
InterfaceDesign_5th.Lecture.Inteface&Interaction.pdf 자료
InterfaceDesign_6th.Lecture.InformationArchitecture_1.pdf 자료
InterfaceDesign_7th.Lecture.InformationArchitecture_2.pdf 자료
InterfaceDesign_13th.lecture.UI.Design.pdf 자료
InterfaceDesign_11th.lecture.Sketch.pdf 자료
InterfaceDesign_8th.lecture.MidTerms.Guideline.pdf 자료
InterfaceDesign_2nd.Lecture.Design.pdf 자료
InterfaceDesign_12th.lecture.Wireframe.and.Prototype.pdf 자료

What's hot (20)

PDF
DesignThinking_3rd.Lecture.Context.Mix.Workshop.pdf 자료
PDF
DesignThinking_12th.Lecture.Step.2.Define.a.Problem.pdf 자료
PDF
DesignThinking_10th.Lecture.Step.1.Empathize.pdf 자료
PDF
DesignThinking_5th.Lecture.Shape.Mix.Workshop.Part.1.pdf 자료
PDF
DesignThinking_7th.Lecture.3.5.Dollar.Design.Workshop.pdf 자료
PDF
DesignThinking_13th.Lecture.Step.3.Ideate.pdf 자료
PDF
DesignThinking_9th.Lecture.Understanding.Design.Thinking.pdf 자료
PDF
DesignThinking_11th.Lecture.Step.1.Empathize.pdf 자료
PDF
DesignThinking_6th.Lecture.Shape.Mix.Workshop.Part.2.pdf 자료
PDF
5th.Lecture.Purpose.of.Project.pdf
PDF
이번 생에 디자인 시스템은 처음이라
PPTX
김동건, 갈망의 아궁이
PDF
1st.lecture.introduction
PDF
The Design of Everyday Things
PDF
12th.Lecture.Step4.Ideation.pdf
PDF
애자일의 모든것
PDF
2nd.lecture.who.i.am.as.a.designer
PDF
12th.Lecture.Design.for.Community.pdf
PDF
플랫폼 디자이너 없이 디자인 시스템을 구축하는 프로덕트 디자이너의 우당탕탕 고통 연대기
PDF
신입 개발자 생활백서 [개정판]
DesignThinking_3rd.Lecture.Context.Mix.Workshop.pdf 자료
DesignThinking_12th.Lecture.Step.2.Define.a.Problem.pdf 자료
DesignThinking_10th.Lecture.Step.1.Empathize.pdf 자료
DesignThinking_5th.Lecture.Shape.Mix.Workshop.Part.1.pdf 자료
DesignThinking_7th.Lecture.3.5.Dollar.Design.Workshop.pdf 자료
DesignThinking_13th.Lecture.Step.3.Ideate.pdf 자료
DesignThinking_9th.Lecture.Understanding.Design.Thinking.pdf 자료
DesignThinking_11th.Lecture.Step.1.Empathize.pdf 자료
DesignThinking_6th.Lecture.Shape.Mix.Workshop.Part.2.pdf 자료
5th.Lecture.Purpose.of.Project.pdf
이번 생에 디자인 시스템은 처음이라
김동건, 갈망의 아궁이
1st.lecture.introduction
The Design of Everyday Things
12th.Lecture.Step4.Ideation.pdf
애자일의 모든것
2nd.lecture.who.i.am.as.a.designer
12th.Lecture.Design.for.Community.pdf
플랫폼 디자이너 없이 디자인 시스템을 구축하는 프로덕트 디자이너의 우당탕탕 고통 연대기
신입 개발자 생활백서 [개정판]
Ad

Similar to InterfaceDesign_10th.lecture.Introduction.of.Final.Exam.pdf 자료 (20)

PDF
InterfaceDesign_14th.lecture.Final.Exam.Guideline.pdf 자료
PDF
Uxtrigger template v5.compressed_2019
PPTX
Ux 한글번역 멘플
PPTX
2012 UX 트렌드
PPTX
UX Case Study
PDF
ITCT 사용자 중심 디자인 특강 - spoqa 남유정 UX designer
PDF
iOS human interface guidelines(HIG)
PPTX
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
PDF
앱팀메이킹
PDF
앱팀메이킹
PDF
앱팀메이킹1111381
PPTX
2011년 UX 분석과 2012년 UX 통찰
PDF
UX 디자인사례와 커뮤니케이션
PDF
7th.lecture.middle.pt.guideline
PDF
Elements of user experience
PDF
2nd.Lecture.What.is.Interface.pdf
PDF
UX디자인_기획서.pdf
PPTX
개발자와 기획자, 디자이너가 함께 일하기 위한 가장 가장 간단한 도구
PDF
UX 이론 - 개발자의 관점에서
PDF
사용자경험유지하기(@UX Storming/2012)
InterfaceDesign_14th.lecture.Final.Exam.Guideline.pdf 자료
Uxtrigger template v5.compressed_2019
Ux 한글번역 멘플
2012 UX 트렌드
UX Case Study
ITCT 사용자 중심 디자인 특강 - spoqa 남유정 UX designer
iOS human interface guidelines(HIG)
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
앱팀메이킹
앱팀메이킹
앱팀메이킹1111381
2011년 UX 분석과 2012년 UX 통찰
UX 디자인사례와 커뮤니케이션
7th.lecture.middle.pt.guideline
Elements of user experience
2nd.Lecture.What.is.Interface.pdf
UX디자인_기획서.pdf
개발자와 기획자, 디자이너가 함께 일하기 위한 가장 가장 간단한 도구
UX 이론 - 개발자의 관점에서
사용자경험유지하기(@UX Storming/2012)
Ad

More from Judy Kwon (12)

PDF
DesignThinking_14th.Lecture.Final.PT.Guideline.pdf 자료
PDF
DesignThinking_4th.Lecture.Scale.Mix.Workshop.pdf 자료
PDF
DesignThinking_2nd.Lecture.Warm-Up.pdf 자료
PDF
DesignThinking_1st.Lecture.Introduction.pdf 자료
PDF
[SpecialLecture] Design.and.User.Experience.Design.pdf
PDF
InterfaceDesign_3rd.Lecture.UserExperienceDesign.pdf 자료
PDF
InterfaceDesign_1st.Lecture.Introduction.pdf 자료
PDF
DesignThinking_14th.Lecture.Final.PT.Guideline.pdf 자료
PDF
DesignThinking_13th.Lecture.Step.3.Ideate.pdf 자료
PDF
DesignThinking_12th.Lecture.Step.2.Define.a.Problem.pdf 자료
PDF
DesignThinking_11th.Lecture.Step.2.Define.a.Problem.pdf 자료
PDF
DesignThinking_10th.Lecture.Step.1.Empathize.pdf 자료
DesignThinking_14th.Lecture.Final.PT.Guideline.pdf 자료
DesignThinking_4th.Lecture.Scale.Mix.Workshop.pdf 자료
DesignThinking_2nd.Lecture.Warm-Up.pdf 자료
DesignThinking_1st.Lecture.Introduction.pdf 자료
[SpecialLecture] Design.and.User.Experience.Design.pdf
InterfaceDesign_3rd.Lecture.UserExperienceDesign.pdf 자료
InterfaceDesign_1st.Lecture.Introduction.pdf 자료
DesignThinking_14th.Lecture.Final.PT.Guideline.pdf 자료
DesignThinking_13th.Lecture.Step.3.Ideate.pdf 자료
DesignThinking_12th.Lecture.Step.2.Define.a.Problem.pdf 자료
DesignThinking_11th.Lecture.Step.2.Define.a.Problem.pdf 자료
DesignThinking_10th.Lecture.Step.1.Empathize.pdf 자료

InterfaceDesign_10th.lecture.Introduction.of.Final.Exam.pdf 자료

  • 1. KAYWON UNIVERSITY OF ART DESIGN SMART PRODUCT DESIGN LAB INTERFACE DESIGN 인터페이스 디자인 kwonjeongeun naver.com 10강 기말 과제 소개  / 35 1
  • 2. 기말 과제 소개 실습 UX Tool 실습 / 35 2
  • 3. 기말 과제 요구사항 / 35 3 1 간단한 앱을 만들어 봅니다. Q 인터페이스를 만들 수 있는 팀인가? 2 팀 과제로 진행합니다. - 개인 과제도 있습니다. 3 수행 기간은 10주 차 ~ 15주 차까지. 4 완료 보고는 15주 차 직무수행능력평가 2 .
  • 4. / 35 4 기말 과제 일정 10강 11/12 화 : 기말 과제 소개 11강 11/19 화 : < 발표 > 조사 ~ 메뉴트리 12강 11/26 화 : < 발표 > 손 스케치 13강 12/03 화* : 발표 > 와이어프레임 제작 디자인 컨셉 14강 12/10 화 : < 발표 > 디자인 컨셉 및 주 화면 디자인 보완 15강 12/17 화 : < 제출 > 앱 디자인 완료
  • 5. 기말 과제 들어가기 앞서… 인터페이스? / 35 5 사람 디지털 시스템 사용자가 접하는 공간/시간 User Experience 목표 도구 행동 Goal Tool Activity Information Interaction Interface 출처 : <안될과학>, 장진규 편
  • 6. Q. 인터페이스, 적절하게 디자인됐는가? / 35 6 사람 디지털 시스템 사용자가 접하는 공간/시간 User Experience 도구 Tool Interface 출처 : <안될과학>, 장진규 편
  • 7. 서비스 디자인 콘셉트 보드 서비스 시나리오 서비스 청사진 UX 디자인 정보 구조 테스크 흐름 세부 인터랙션 UI 디자인 비주얼 콘셉트 보드 화면 디자인 디지털 서비스 디자인 프로세스 / 35 7 디자인 가이드 목표 프로젝트 범위 01 가설 고객 여정 지도 문제 취약점 02 콘셉트 서비스 디자인 03 전달 서비스 개발 04
  • 8. 정보 설계 단계 UX 디자인 / 35 8 메뉴 트리 기능 리스트 주요 특징 서비스 컨셉 11/19 화 발표 서비스 정의 단계 둘 사이 할 일 둘 사이 할 일
  • 9. 둘 사이 할 일 : 사전 조사 / 35 9 유사 앱/유사 테스크의 서비스 테스크 흐름 수집과 우리 앱에 활용 리서치 단계
  • 10. 정보 설계 단계 UX 디자인 / 35 10 메뉴 트리 기능 리스트 주요 특징 서비스 컨셉 11/19 화 발표 서비스 정의 단계 둘 사이 할 일
  • 11. 정보 설계 단계 UX 디자인 / 35 11 프로토타입 와이어프레임 손 스케치 테스크 흐름 No color 11/26 화 발표
  • 12. 시각 개발 단계 UI 디자인 / 35 12 프로토타입 모든 화면 디자 주 화면 디자인 시각 컨셉 12/3 화 발표 12/10 화 발표 12/17 화 제출
  • 13. 기말 과제 소개 실습 UX Tool 실습 / 35 13
  • 14. / 35 14 앱 소개 앱 이름 미정 또는 앱 이름 가칭 ~ 앱 정의 간단히 한 줄 작성하기 ?
  • 15. / 35 15 앱 컨셉과 주요 특징 (가안) 특징 1 작성 특징 3 작성 특징 2 작성 ? ~ 앱 정의 간단히 한 줄 작성하기 앱 이름 미정 또는 앱 이름 가칭
  • 16. / 35 16 앱 컨셉과 주요 특징 (가안)
  • 17. 서비스 명 선정 이유 선정 앱 이름 미정 또는 가칭 앱 정의 간단히 한 줄 작성 블라인드 ~ 유사함. ~ 경쟁 서비스임. ~ 시장이 같음. … 틱톡 ~ 유사함. ~ 경쟁 서비스임. ~ 시장이 같음. … 밴드 ~ 테스크가 거의 유사해서 참고할만함. 에브리타임 ~ 테스크가 거의 유사해서 참고할만함. X ~ 테스크가 거의 유사해서 참고할만함. 제페토 ~ 테스크가 거의 유사해서 참고할만함. 링크드인 ~ 테스크는 다르지만 ~ 에 참고할 점이 있음. 예 : ~ 기능. 서비스 명 ~ 테스크는 다르지만 ~ 에 참고할 점이 있음. 예 : ~ 기능. 유사 앱 또는 유사 테스크의 앱 조사 소개 App Icon App Icon App Icon App Icon App Icon App Icon App Icon App Icon ? / 35 17
  • 18. 출처 : 무슨 앱, 어떤 테스크 中 참고 할 Task와 Task Flow 소개 (여러 장) / 35 18 Task. 테스크 명칭 작성하기 1 2 나의 게시물 작성 진입 1 4 나의 게시물, 글 작성 중 1 3 1 나의 게시물, 이미지 작성 중 1 5 나의 게시물, 공유 완료 1 1 홈 • 우리 앱에 어떻게 활용… ~ 에 참고할 수 있을 것 같다. • 우리 앱에 어떻게 활용… ~ 에 참고할 수 있을 것 같다. Insight
  • 19. 출처 : 무슨 앱, 어떤 테스크 中 참고 할 Task와 Task Flow 소개 (여러 장) / 35 19 Task. 다른 테스크 명칭 작성하기 1 2 나의 게시물 작성 진입 1 4 나의 게시물, 글 작성 중 1 3 1 나의 게시물, 이미지 작성 중 1 5 나의 게시물, 공유 완료 1 1 홈 • 우리 앱에 어떻게 활용… ~ 에 참고할 수 있을 것 같다. • 우리 앱에 어떻게 활용… ~ 에 참고할 수 있을 것 같다. Insight
  • 20. 출처 : 무슨 앱, 어떤 테스크 中 참고 할 Task와 Task Flow 소개 (여러 장) / 35 20 Task. 또 다른 테스크 명칭 작성하기 1 2 나의 게시물 작성 진입 1 4 나의 게시물, 글 작성 중 1 3 1 나의 게시물, 이미지 작성 중 1 5 나의 게시물, 공유 완료 1 1 홈 • 우리 앱에 어떻게 활용… ~ 에 참고할 수 있을 것 같다. • 우리 앱에 어떻게 활용… ~ 에 참고할 수 있을 것 같다. Insight
  • 21. 출처 : 무슨 앱, 어떤 테스크 中 참고 할 Task와 Task Flow 소개 (여러 장) / 35 21 Task. 또 다른 테스크 명칭 작성하기 1 2 나의 게시물 작성 진입 1 4 나의 게시물, 글 작성 중 1 3 1 나의 게시물, 이미지 작성 중 1 5 나의 게시물, 공유 완료 1 1 홈 • 우리 앱에 어떻게 활용… ~ 에 참고할 수 있을 것 같다. • 우리 앱에 어떻게 활용… ~ 에 참고할 수 있을 것 같다. Insight
  • 22. 앱 기능 리스트 기능 단위 세부 기능 콘텐츠 구성 중요도 컨텐츠 구독 페이지 내비게이션 1 전체 컨텐츠 보기 1 컨텐츠 섹션 보기 1 북마크 리스트 보기 날짜 별, 색상 별 1 이전 화면으로 가기 1 책장으로 가기 시간, 구독여부 1 추천물품 보기 상품별, 가격별 2 트렌드 보기 물품별, 도시별, 연예인 2 정보 공유 위시 리스트 첨부하기 이메일, 카카오톡에 스크랩 이미지 첨부 1 구매 상품 첨부하기 이메일, 카카오톡에 스크랩 이미지 첨부 1 기사/이미지 첨부하기 이메일, 카카오톡에 스크랩 이미지 첨부 1 위시 리스트 공유하기 > SNS 페이스북, 인스타그램 1 구매 상품 공유하기 > SNS 페이스북, 인스타그램 1 기사/이미지 공유하기 > SNS 페이스북, 인스타그램 1 물품 구매 결제하기 물품 개수 1 구매내역 보기 시간, 물품별 리스트 제공 1 교환/환불하기 교환사용 종목, 작성란 1 위시 리스트 보기 시간, 물품별 리스트 제공 1 최근 본 상품 보기 오늘, 지난주, 지난달 1 / 35 22
  • 23. 기능 단위 세부 기능 콘텐츠 구성 중요도 컨텐츠 구독 페이지 내비게이션 1 전체 컨텐츠 보기 1 컨텐츠 섹션 보기 1 북마크 리스트 보기 날짜 별, 색상 별 1 이전 화면으로 가기 1 책장으로 가기 시간, 구독여부 1 추천물품 보기 상품별, 가격별 2 트렌드 보기 물품별, 도시별, 연예인 2 정보 공유 위시 리스트 첨부하기 이메일, 카카오톡에 스크랩 이미지 첨부 1 구매 상품 첨부하기 이메일, 카카오톡에 스크랩 이미지 첨부 1 기사/이미지 첨부하기 이메일, 카카오톡에 스크랩 이미지 첨부 1 위시 리스트 공유하기 > SNS 페이스북, 인스타그램 1 구매 상품 공유하기 > SNS 페이스북, 인스타그램 1 기사/이미지 공유하기 > SNS 페이스북, 인스타그램 1 물품 구매 결제하기 물품 개수 1 구매내역 보기 시간, 물품별 리스트 제공 1 교환/환불하기 교환사용 종목, 작성란 1 위시 리스트 보기 시간, 물품별 리스트 제공 1 최근 본 상품 보기 오늘, 지난주, 지난달 1 장바구니 보기 1 기타 로그인 설정 ID, 비밀번호, 자동 로그인 1 어플 정보 보기 버전, 출시일자 3 사용자 정보 관리 주소, 프로필 이미지 1 이용내역 관리 3 / 35 23
  • 24. 홈 환자 긴급상황 의료진 내 프로필 환경설정 낫폴나풀 환자 리스트 환자 검색 지도 의료진 검색 정보 확인 알림 설정 환자 리스트 긴급상황 히스토리 의료진 리스트 정보 수정 앱 버전/업데이트 긴급상황 환자 위치 실시간 채팅 로그인 설정 앱 도움말 환자 상세 정보 로그아웃 앱 메뉴 트리 로그인 환자 상세 정보 / 35 24
  • 27. Excel 파일로 작성. 1. 기능 리스트를 Excel 탬플릿에 맞춰 상세하게 작성한다. 예시 보기 2. 기능 단위를 먼저 리스트업 한 후, 각 항목의 세부 기능을 하나 하나 작성한다. 예 : 냉장고 케어 앱의 기능 단위? 냉장고 위생 상태, 청소 푸시, 청소 요청 A/S 서비스 , 수리 요청 A/S 서비스 3. 세부 기능의 상세 정보 또는 부연 설명을 그리고 콘텐츠 구성을 작성한다. 4. 기능 리스트는 중요도 1, 2 순으로 정렬한다. 중요 주요 특징 -> 기능 단위 파악되어야 -> 기능 리스트 도출 Excel 기능 리스트 준수사항 / 35 27
  • 28. 기능 리스트 Excel 파일 내 이어서, 메뉴 트리 작성 완료. 목적 : 1. 바로 앱을 만들 수 없다. 담을 화면과 담을 콘텐츠가 필요함. 2. 앱 - 주요 특징 - 기능 리스트 - 메뉴 트리 - 콘텐츠 정보 대한 생각이 중심을 잡고 있는지 확인. 1. 기능 리스트와 메뉴 트리를 Excel 탬플릿에 맞춰 상세하게 작성한다. 2. 기능 리스트를 먼저 완료 후, 메뉴 트리를 설계한다. 중요 기능 리스트와 메뉴 트리 차이를 이해해야 작성이 편합니다. 메뉴 트리 준수사항 / 35 28
  • 29. / 35 29 10주 차, <과제> 제대로 했는지 기준은? Q. 다음 단계, 손 스케치로 들어갈 수 있게 준비가 됐는가? - 팀 앱 디자인을 위한 준비 단계로 팀 앱이 구체적으로 보이기 시작하는 첫 단계가 손 스케치 단계입니다. - 참고로 손 스케치는 개인 과제입니다.
  • 30. / 35 30 매주 Critique이 있습니다. 1 발표 팀 : B 3, B 5 / A 1, A 2 2 피드백 시간을 위해 max 20장으로 간결하게 발 표합니다. 3 발표는 1인이 10분 내외로 준비합니다. 스크립트 를 읽지 않습니다. 10주 차, <과제> 발표
  • 31. 기말 과제 소개 실습 UX Tool 실습 / 35 31
  • 32. UX Tool 실습 / 35 32 Q. 툴 실력 디자인 실력을 단기간 향상시킬 방법? A. 좋은 디자인을 따라서 만들어 보는 반복 훈련 - 이번 주 : 2시간, 제출 1 - 과제 : 시간 모자를 것 같다면 약간 진행해도 좋음 - 다음 주 : 2시간, 최종 제출 2
  • 33. UX Tool 실습 / 35 33 볼 줄 아는 눈 중요. 디테일을 읽는 눈. - 디자인, 가능한 비슷하게. - 폰트 조합, 컬러 조합, 라인 처리, 그림자 처리, 흐림 처리, … 1 자료 다운로드 - 과제 시작 전, 필요한 레슨. 2 이번 주 : 와이어프레임 완료. GNB 영역 아이콘 제외. 과제 : 아이콘, Ai 작업 -> 아이콘, XD 파일에 적용. 다음 주 : 이미지 적용까지 완료.
  • 34. UX Tool 실습 제출 / 35 34 제출 시점 : 오늘, 제시한 시간까지 제출 방법 : 스마트출석부 > 과제 파일명 : lesson8.Assignment B 1 홍 길 동 20241112 제 출 .xd lesson8.Assignment B 1 홍 길 동 20241119 제 출 .xd
  • 35. kwonjeongeun naver.com / 35 35 끝. 다음 주 과제 : - 과제 제출 및 발표 준비 - UX Tool 실습 < 과제 > 진행