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
화 제출
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주 차, <과제> 발표
32. UX Tool 실습
/ 35
32
Q. 툴 실력 디자인 실력을 단기간 향상시킬 방법?
A. 좋은 디자인을 따라서 만들어 보는 반복 훈련
-
이번 주
:
2시간, 제출 1
-
과제
:
시간 모자를 것 같다면 약간 진행해도 좋음
-
다음 주
:
2시간, 최종 제출 2
33. UX Tool 실습
/ 35
33
볼 줄 아는 눈 중요. 디테일을 읽는 눈.
-
디자인, 가능한 비슷하게.
-
폰트 조합, 컬러 조합, 라인 처리, 그림자 처리, 흐림 처리, …
1 자료 다운로드
-
과제 시작 전, 필요한 레슨.
2 이번 주
:
와이어프레임 완료. GNB 영역 아이콘 제외.
과제
:
아이콘, Ai 작업
->
아이콘, XD 파일에 적용.
다음 주
:
이미지 적용까지 완료.