7강 7th.Lecture.Middle.PT.Guideline 중간 발표를 준비한다.

1. KAYWON UNIVERSITY OF ART & DESIGN
INDUSTRIAL DESIGN LAB
USER EXPERIENCE
DESIGN
사용자경험디자인2
7강 중간 팀 과제 제출 및 발표 안내
/ 33
1
judy@andsystemlab.com

2. 중간 팀 과제 제출 및 발표 안내
Adobe XD 레슨
Adobe XD 카피 과제 진행 - 팀 미팅
/ 33
2

3. 1. 메뉴 트리를 완료한다.
2. 화면을 스케치한다.
[Template] UI Sketch을 프린트해서
서비스의 주요 테스크 그리고 흐름을 보여 줄 주요 화면들을 스케치한다.
주요 테스크가 하나는 아닐 것.
3. 1인 1 스케치 세트를 원칙으로 한다. - 1 세트는 한 번에 나오지 않는다. 개인 최종을 기대
예 : 팀 구성원 2명(팀장 포함)이면 2개 스케치 세트
4. 스케치 완료 후, 팀원 피드백을 받는다. - 완료 아님.
개인 스케치를 보완해서 업로드한다. - 서로 의논하고 각자 개인 스케치 보완 후, 개인 최종 스케치 제출 -> 완료
5. 저와 팀 미팅을 하면서 팀 스케치를 도출한다. -> 10/8 진행 -> 완료
6. 팀은 2번이 반영된 팀 스케치를 업로드한다. -> 다음 주(10/15) 과제. 제출 : 다음 수업 전까지 -> 완료
7. 개인 과제(XD로 와이어프레임, 프로토타입 제작)을 시작한다. -> 제출 : 10/22(중간 발표 전까지)
스케치 일정
/ 33
3

4. 와이어프레임, 프로토타입 제작 준수사항
Point 1. 팀 스케치 최종 안을 개인이 XD로 제작해서 제출합니다. (개인 과제)
Point 2. Gray tone의 Wireframe. 단, 아이콘, 이미지 적용 허용. 안 해도 무방.
✦ No color
Point 3. 왼쪽 패널 : 색상, 문자 스타일, 구성 요소를 정리할 것.
✦ 최소한으로 운영한다.
패널 내 요소 위 > 마우스 우 클릭 > ‘캔버스에서 강조 표시’ 메뉴 이용
Point 4. 메뉴 트리 기준으로 아트보드 명칭, 구조 정렬할 것.
✦ 다음 화면 참조
Point 5. 프로토타입 - 인터랙션 설정할 것.
‘프로토타입’ 탭 상태에서 Ctrl + A & [▶] 확인 예정
Point 6. 파일명 준수.
✦ 다음 화면 참조
/ 33
4

5. / 33
5
아트보드명 : 메뉴 트리 기준. 메뉴명으로 작성
/ 33
5
와이어프레임, 프로토타입 제작 준수사항
파일명 : [반_팀번호] 이름_제출날짜 [B_1] 권정은_20211022

6. 중간 팀 과제 발표 준수사항
/ 33
6
2학기 - 모바일 서비스
1학기 - 인포그라픽

7. 1. [Template] UXD_20211014.ai 파일에서 시작합니다.
중간 팀 과제 발표 준수사항
/ 33
7

8. 2. 인포그라픽, 모바일 서비스 제작 > 제출, 발표, 시연
3. 인포그라픽 :
✦1학기 리서치 내용 한 페이지로 정리 -> 없는 팀 있음. 지금부터 시작.
✦2학기 모바일 서비스 내용과 연결성이 핵심
✦팀 컨셉 중요. 시각적 밀도와 완성도를 중요하게 봅니다.
“흰 도화지 -> 정보(텍스트, 그래픽, 숫자, 그래프, …)를 담는다”
이해, 관찰, 분석, 발상 단계 :
“이런 배경에서 시작 ~ 이런 내용을 확인할 수 있었고
이런 서비스를 제안한다” -> 발표는 필요한 부분만 최소 언급
중간 팀 과제 발표 준수사항
/ 33
8

9. 4. 모바일 서비스 :
서비스 안내 : 서비스명 설명, why, what, 특징, 모바일 화면
(단, Gray Tone - Wireframes)으로 구성
✦카테고리를 순차적으로 전달하는 일이 아닙니다.
✦보는 이에게 서비스를 잘 전달하는 게 목적입니다.
-> 발표는 모바일 서비스 안내 위주로
중간 팀 과제 발표 준수사항
/ 33
9

10. 5. 제출 :
제출 포맷 : 파일 세트를 한 번에 업로드
✔︎
[B_1] 중간공유_20211022.pdf (파일명 엄수)
✔︎
[B_1] 권정은_20211022.xd (파일명 엄수) * 팀원 수
제출 기한 : 모든 팀 수업 전(09:00/13:00)까지 엄수
제출 방법 : Slack 팀 방에 업로드
6. 발표 : 3 타임 나눠서 진행
중간 팀 과제 발표 준수사항
/ 33
10

11. 모바일 서비스 안내를 잘 담으려면?
다음 개념과 흐름을 정확히 이해한 팀이 유리할 것
/ 33
11

12. 서비스 소개의 예제
/ 33
12
낫폴나풀 NotPole-napul 서비스명
‘Not’ + ‘폴대’를 합쳐 ‘폴대가 없이 나풀나풀 거리는 자유로움을 얻었다’는 뜻을 담고 있다. 서비스명 뜻
병원에서 수액을 맞을 때 수액의 긴 선 때문에 활동이 불편하거나 링거대와 같이 이동해서 활동에 제한을 받은 경
험이 있을 것이다. 낫폴나풀은 … 중략 … 서비스이다. WHY, WHAT
모바일 이미지

13. 서비스 작동 원리/사용 시나리오의 예제
/ 33
13
상황 이미지
모바일 이미지
기술/센서 2(필수)
주요 내용
기술/센서 1(필수)
주요 내용
낫폴나풀은 환자의 … 중략 … 재질로 만들었습니다. 낫폴나풀은 … 중략 … 구조로 이는 기존 링거대의 바퀴, 수
액 선으로 인한 이동과 활동의 불편함을 해결합니다. … 중략 HOW

14. 최신 스타일 정보 확인부터 쇼핑까지 한 번에 이어지는
All-in One 스타일 매거진(서비스 한 마디로 정의)
PURCHASING
구독과 상품구매까지
SHARING
쉽고 빠른 정보 공유
ANALOG
아날로그 인터랙션
서비스 주요 특징의 예제
출처 : 다음 UX랩 <스토리로 이해하는 UX 디자인 프로세스> 中 잇걸 서비스
/ 33
14

15. 1. Simple Access to Purchase : 매거진 구독과 동시에 원하는 상품으
로 바로 구매할 수 있는 원스톱 쇼핑 프로세스
2. Easy Share with Friend : 매거진 구독하면서 공유하고 싶은 정보
를 앱 이동 없이 SNS로 바로 전송. 같은 화면을 보면서 지인과 실시간 커
뮤니케이션 제공.
3. Analog Flip Interaction : 매거진 구독하면서 공유하고 싶은 정보
를 앱 이동 없이 SNS로 바로 전송. 같은 화면을 보면서 지인과 실시간 커
뮤니케이션 제공.
서비스 주요 특징의 예제
출처 : 다음 UX랩 <스토리로 이해하는 UX 디자인 프로세스> 中 잇걸 서비스
/ 33
15

16. 서비스 기능 리스트의 예제
기능 단위 세부기능 상세기능 중요도 적용시기
컨텐츠 구독 페이지 내비게이션 1 1차
전체 컨텐츠 보기 1 1차
컨텐츠 섹션 보기 1 1차
북마크 리스트 보기 날짜 별, 색상 별 1 1차
이전 화면으로 가기 1 1차
책장으로 가기 시간, 구독여부 1 1차
추천물품 보기 상품별, 가격별 2 2차
트렌드 보기 물품별, 도시별, 연예인 2 2차
정보 공유 위시 리스트 첨부하기 이메일, 카카오톡에 스크랩 이미지 첨부 1 1차
구매 상품 첨부하기 이메일, 카카오톡에 스크랩 이미지 첨부 1 1차
기사/이미지 첨부하기 이메일, 카카오톡에 스크랩 이미지 첨부 1 1차
위시 리스트 공유하기 > SNS 페이스북, 인스타그램 1 2차
구매 상품 공유하기 > SNS 페이스북, 인스타그램 1 2차
기사/이미지 공유하기 > SNS 페이스북, 인스타그램 1 2차
물품 구매 결제하기 물품 개수 1 1차
구매내역 보기 시간, 물품별 리스트 제공 1 1차
교환/환불하기 교환사용 종목, 작성란 1 1차
위시 리스트 보기 시간, 물품별 리스트 제공 1 1차
최근 본 상품 보기 오늘, 지난주, 지난달 1 1차
/ 33
16

17. 홈 환자 긴급상황 의료진 내 프로필 환경설정
낫폴나풀
환자 리스트 환자 검색 지도 의료진 검색 정보 확인 알림 설정
환자 리스트 긴급상황 히스토리 의료진 리스트 정보 수정 앱 버전/업데이트
긴급상황 환자 위치 실시간 채팅 로그인 설정 앱 도움말
환자 상세 정보 로그아웃
서비스 메뉴 트리의 예제
로그인
환자 상세 정보
/ 33
17

18. / 33
18
홈 화면 Wireframe의 예제
✔︎
유사 화면도 많지만 이 화면으로 디자인한 이유
= 이 화면에서 목표로 한 포인트
✔︎
이 화면에서 목표로 한 포인트 N
✔︎
1 > 2가지 충분

19. / 33
19
주요 화면 1 Wireframe의 예제
✔︎
유사 화면도 많지만 이 화면으로 디자인한 이유
이 화면에서 목표로 한 포인트 찝어주기
✔︎
이 화면에서 목표로 한 포인트 찝어주기 N

20. / 33
20
주요 화면 2 Wireframe의 예제
✔︎
유사 화면도 많지만 이 화면으로 디자인한 이유
이 화면에서 목표로 한 포인트 찝어주기
✔︎
이 화면에서 목표로 한 포인트 찝어주기 N

21. / 33
21
서비스 시연
개인 제작 XD 파일 중 1개 파일 [▶]
✔︎
주요 Task 1. 소개 그리고 흐름
✔︎
주요 Task 2. 소개 그리고 흐름
✔︎
주요 Task N. 소개 그리고 흐름

22. 모바일 서비스 안내를 잘 담으려면?
/ 36
22
예시 - 신비, 백신, 금정, 마인드뷰
질문) 양예지 : 이상 PPT 제작이 필요한 것은 아님.
질문) 이기연 : 도록에 들어갈 XD 화면과 시연 XD 선정?
3개 파일 -> 팀 1개 파일 선정 - 화면과 시연
참고로 9주 차 -> 제가 팀 XD 파일 선정 예정
질문) 문서진 : 8주 차에는 팀원 의논으로 1개 파일 선정
질문) 이유진 : 화면별 포인트는 무엇인지 - 예시 4개 참고

23. 발표 시간 8 ~ 10분
크리틱 5 ~ 10분
1. 발표자는 팀장을 제외한 팀원으로 선정합니다.
2. 다음 팀을 배려해서 10분을 넘기면 바로 크리틱을 시작합니다.
3. 크리틱은 함께 이야기합니다(‘개인 참여도’에 매우 반영).
중간 팀 과제 발표 준수사항
/ 33
23

24. 09:00 : 8, 7, 6
10:10 : 5, 4, 3
11:10 : 2, 1, 0
이후 : 팀원 크로스 평가
1. 정시에 출석 체크 후, 팀 발표를 바로 시작합니다.
2. 모든 세션 종료 후, 팀원 크로스 평가를 진행해서 바로 제출합니다.
P.S. 모든 팀은 모든 세션에 입장합니다.
중간 팀 과제 발표 준수사항
/ 33
24

25. 13:00 : 8, 7, 6
14:10 : 5, 4, 3
15:10 : 2, 1, 0
팀원 크로스평가
1. 정시에 출석 체크 후, 팀 발표를 바로 시작합니다.
2. 모든 세션 종료 후, 팀원 크로스 평가를 진행해서 바로 제출합니다.
P.S. 모든 팀은 모든 세션에 입장합니다.
중간 팀 과제 발표 준수사항
/ 33
25

26. 중간 팀 과제 제출 및 발표 안내
Adobe XD 레슨
Adobe XD 카피 과제 진행 - 팀 미팅
/ 33
26

27. Adobe XD 레슨 6강
레슨 6강 > 카피 과제 진행 > 공유 > 제출
/ 33
27

28. Why, XD? Sharing
화면 이미지 보내기
파일 > 모든 아트보드… or 특정 아트보드 선택 후, 파일 > 선택됨…
모바일 앱에서 확인
1. 파일을 클라우드에 저장
2. 모바일 앱에서 파일 확인 가능
웹으로 공유
1. 상단 : ‘공유’ 탭 선택
2. 오른쪽 패널 : 링크 설정
보기 설정 : ‘디자인’ or ‘개발’ & 다운로드 가능한 에셋 ‘체크’
링크 액세스 : 초대된 사용자만
3. [링크 만들기] 버튼 선택
4.링크 선택 후, 웹에서 확인
/ 33
28

29. Adobe 블로그 글 확인
Adobe 공식 블로그(미국) : XD 업데이트 글
- 최신 새로운 기능 추가 글 예 : New Styling Tool
페이스북 Following
Adobe 공식 계정(미국) : XD 업데이트 글
- 위 블로그 업데이트 소식 FB에 포스팅
Adobe XD User Group(한국)
- 과감하게 질문하기
Adobe XD UI/UX(외국)
- XD로 만든 UI/UI 디자인 구경하기
XD 업데이트 소식 받기
/ 36
29

30. 중간 팀 과제 제출 및 발표 안내
Adobe XD 레슨
Adobe XD 카피 과제 진행 - 팀 미팅
/ 33
30

31. Adobe XD 카피 과제
1. 자료 다운로드
2.만들 내용 확인
3.볼 줄 아는 눈 중요. 디테일을 읽는 눈. 디자인 최대한 유사하게.
폰트 조합, 컬러 조합, 라인 처리, 그림자 처리, 흐림 처리, …
4. 시작 전 필요한 Tip
- 폰트 : 최대한 유사한 폰트 찾기. 애플의 경우, SF 계열. 다운로드
- 아트보드 > 레이어 확인 기능
- 컬러 스포이드 기능
5. 지난 주 수업 목표 : 2개 카드까지. 메뉴 영역은 아이콘 제외 -> 완료
과제 : 아이콘 ai 따기 -> 아이콘 XD 파일에 적용하기 -> 완료
오늘 수업 목표 : 카드 숫자 + 4(6) ~ 디테일 디자인, 이미지 적용까지 완료
/ 33
31

32. Adobe XD 카피 과제 제출
제출 시점 : 수업 종료 후 바로
제출 방법 : kwonjeongeun@naver.com
제출 포맷 :
[B_1] 권정은_XD카피_20211015.xd(파일명 준수)
/ 33
32

33. 끝.
/ 33
33
judy@andsystemlab.com
다음 주 과제 : 개인 과제 & 중간 팀 과제 제출.
XD 레슨 6강 복습