InterfaceDesign_5th.Lecture.Inteface&Interaction.pdf 자료

5강
2025_ID_5th.Lecture.Inteface&Interaction
인터페이스 & 인터랙션의 이해

1. KAYWON UNIVERSITY OF ART 5? DESIGN
SMART PRODUCT DESIGN LAB
INTERFACE DESIGN
인터페이스 디자인
kwonjeongeun5?naver.com
5강 인터페이스 5? 인터랙션의 이해
/ 351

2. 인터페이스 5? 인터랙션의 이해
실습
UX Tool 레슨
/ 352

3. 농업
혁명
산업
혁명
출처: 유발 하라리 <사피엔스>
인류가 걸어온 길
/ 353
현재
나
365일
최초
유인원
1일
3500만 년: 문명생활 = 365일: ??????
호모 사피엔스
슬기 ???3Z#?0 !????
오해 1 문명생활, 2시간
오해 2 멸종, 전멸, 파괴
풍요

4. 출처: 마스다 무네야키 <지적자본론>
산업 혁명
3차 산업 혁명
3?정보화 혁명3?
소비자 중심으로 본
/ 354
컴퓨터
인터넷
모바일
빅데이터
선택의 시대물건의 시대 가치의 시대
기능만 충족
물건이 넘침물건이 부족 시간, 장소 제약 없음
한 곳에서
선택의 장소 중요
기획, 제안 중요
주인공?
물건
주인공?
물건/소비자
주인공?
소비자
2nd Stage1st Stage 3rd Stage

5. 생활 방식이 크게 바뀌다
기계
/ 355
정보화 혁명, 새로운 모더니즘

6. 새로운 창문의 이름은?
/ 356
??
인터페이스

7. / 357
Inter 6? Face
Inter 6? National 6? 국가 국가 사이
Inter 6? Net 6? 네트워크 네트워크 사이
Inter 6? Face 6? Face3?면3? Face3?면3? 사이
새로운 창문의 이름은?

8. Face3?면3? Face3?면3?
만나
소통
장소/수단
Machine
Human
Machine
Machine
Auto3?Mobile
Computer
AI
Robot
System3?세계3? System3?세계3?
새로운 창문의 이름은?
/ 358

9. 2개 또는 그 이상의 시스템이 만나서
소통이 이루어지는 장소 또는 수단, 방법
/ 359
우리가 만나는 모든 것이
인터페이스
새로운 창문의 이름은?
인터페이스

10. 2개의 시스템이 만나서? 소통
/ 3510
인터랙션
??
?

11. 비슷하지만 서로 달라
/ 3511
인터랙션인터페이스
??

12. QUIZ
/ 3512
Human ComputerInteraction
HCI
?? ?

13. UX/UI 디자이너 자격요건
/ 3513
•HCI 관련 학과 전공자
•HCI학과 X, HCI 연구분야/연구실 O
•공과대학: 컴퓨터공학과, 산업공학과, …
•상경대학: 경영학과3?행동경제학3?, …
•인문대학: 심리학과3?인지심리학3?, 문화인류학과, …
•예술대학: 시각디자인과, 디지털미디어디자인과, 산
업디자인과, …
•Communication 능한 자

14. 사람과 사람의 인터랙션
/ 3514
의사소통
대화
Communication

15. QUIZ
/ 3515
…
사람 + 탈 것
VUI X
#HMI
#AVN
사람 + 공간
Smart Home
Interface
WALL PAD
사람 + 사물

16. 인터페이스의 이해
실습
UX Tool 레슨
/ 3516

17. 서비스 디자인
콘셉트 보드
서비스 시나리오
서비스 청사진
UX 디자인
정보 구조
테스크 흐름
세부 인터랙션
UI 디자인
비주얼 콘셉트 보드
화면 디자인
디지털 서비스 디자인 프로세스
/ 3517
디자인 가이드
목표
프로젝트 범위
01
가설
고객 여정 지도
문제 취약점
02
콘셉트
서비스 디자인
03
전달
서비스 개발
04

18. 메뉴 트리기능 리스트주요 특징서비스 컨셉
UX 디자인
/ 3518 ★: 중간 과제에 포함

19. 프로토타입와이어프레임손 스케치테스크 흐름
UX 디자인
/ 3519
No color
★: 중간 과제에 포함

20. / 3520
5주 차, <실습> 시작

21. 5주 차, <실습> 시작
/ 3521
앱 선정 완료한 팀은? 5주 차 실습 시작
실습 완료 -> 모든 팀, 5주 차 과제 제출3?목, 오후 11시
59분3? -> 수업, 과제 발표 -> 매주… 과제 내용이 쌓여
- 중간 고사, 정리 발표
A3?1 피카플레이 B3?1 스포티파이
A3?2 나이키 런 클럽 B3?2 밴드
A3?3 당근마켓 B3?3 캐치테이블
A3?4 후르츠패밀리 B3?4 지쿠터
A3?6 네이버 블로그 B3?6 네이버 지도

22. / 3522
5주 차, <실습> 서비스 소개
인스타그램
~ 제품/서비스 소개 한 줄 3?작성하기3?

23. / 3523
5주 차, <실습> 서비스 메뉴 트리 소개
3?새 게시물3?
인스타그램
3?릴스3? 3?나의 프로필3?
게시물/ … / 릴스 릴스/친구 나의 프로필 정보
3?프로필 편집3?
3?프로필 공유3?
나의 게시물
내가 태그됨
3?게시물 상세3?
3?만들기3?
나의 릴스
좋아할 만한 게시물 +
릴스 리스트
3?검색3?
키워드 검색
3?홈3?
스토리 리스트
게시물 리스트
좋아요 외 알림
메시지 알림
3?게시물 상세3?
3?키워드 검색 시작3?
3?릴스 상세3?3?알림 리스트3?
3?메시지 리스트3?
3?스토리 상세3? 3?게시물 작성 시작3? -
3?퀵 스냅 작성 시작3? ->
3?스토리 작성 시작3? ->
3?릴스 작성 시작3? -
3?릴스 상세3?
3?친구 릴스 상세3?
3?설정 및 활동3?
3?한 장표에 모두 보이게 작성하기3?

24. 5주 차, <실습> 서비스 메뉴 트리 소개 with 스크린샷
3?작성3?
인스타그램
3?릴스3? 3?나의 프로필3?
새 게시물/ … 릴스 탐색 나의 프로필 정
새 릴스 작성 프로필 편집
프로필 공유
나의 게시물
내가 태그됨
작성 3?23?
설정 및 활동
나의 릴스
게시물 탐색 +
3?검색3?
키워드 검색
3?홈3?
스토리 리스트
게시물 리스트
좋아요 외 알림
메시지 알림
3?계정 센터3?
3?게시물 리스
3?키워드 검색
3?릴스 상세3?3?알림 리스트3?
3?메시지 리스
3?스토리 상세3? 3?새 게시물 작
3?새 스토리 작
3?새 릴스 작성
3?새 라이브 작
3?새 릴스 작성
3?한 장표에 모두 보이게 작성하기3?
/ 3524
3?홈3?
스토리 리스트
게시물 리스트
좋아요 외 알림
메시지 알림
3?알림 리스트3?
3?메시지 리스
3?스토리 상세3?
좋아할 만한 게
3?검색3?
키워드 검색
3?게시물 상세3?
3?키워드 검색
3?릴스 상세3?
3?새 게시물3?
게시물/ … / 릴
3?게시물 작성
3?퀵 스냅 작성
3?스토리 작성
3?릴스 작성 시
3?릴스3?
릴스/친구
3?릴스 상세3?
3?친구 릴스 상
3?나의 프로필3?
나의 프로필 정
3?프로필 편집3?
3?프로필 공유3?
나의 게시물
내가 태그됨
3?게시물 상세3?
3?만들기3?
나의 릴스
3?설정 및 활동3?

25. <실습> 각 1 depth 메뉴 화면, 구성 상세 소개 with 스크린샷
2 depth 메뉴, 화면 소개
3?스토리 상세3? 3?알림 리스트3? 3?메시지 리스트3?3?홈3?
1 depth 메뉴, 화면 구성 소개
/ 3525
3?홈3?
스토리 리스트
게시물 리스트
좋아요 외 알림
메시지 알림
3?알림 리스트3?
3?메시지 리스트3?
3?스토리 상세3?
3?홈3?
스토리 리스트
게시물 리스트
좋아요 외 알림
메시지 알림
3?알림 리스트3?
3?메시지 리스트3?
3?스토리 상세3?
3?스크린샷이 잘 보이게 작성하기. 여러 장표
로 소개 가능3?

26. <실습> 각 1 depth 메뉴 화면, 구성 상세 소개 with 스크린샷
3?키워드 검색 시작3? 3?게시물 상세3? 3?릴스 상세3?3?검색3?
/ 3526
게시물 탐색 + 릴스 탐
색 3?23?
3?검색3?
키워드 검색
3?게시물 리스트3?
3?키워드 검색 시작3?
3?릴스 상세3?
1 depth 메뉴, 화면 구성 소개
좋아할 만한 게시물 +
릴스 리스트
3?검색3?
키워드 검색
3?게시물 상세3?
3?키워드 검색 시작3?
3?릴스 상세3?
2 depth 메뉴, 화면 소개

27. ?=? ?=? ?=? ?=?
<실습> 각 1 depth 메뉴 화면, 구성 상세 소개 with 스크린샷
3?003? 3?003? 3?003?
/ 3527
00
3?003?
00
3?003?
3?003?
3?003?
00
3?003?
00
3?003?
3?003?
3?003?
3?003?
1 depth 메뉴, 화면 구성 소개
3?스크린샷이 잘 보이게 작성하기.
여러 장표로 소개 가능3?
2 depth 메뉴, 화면 소개

28. <실습> Q 첫 번째 메뉴의 명칭은 무엇? 그 역할은 무엇?
첫 번째 메뉴 명?
3?3?작성하기3?3?
첫 번째 메뉴 명, 3?3?작성하
기3?3?의 역할?
작성하기
/ 3528
3?홈3?
스토리 리스트
게시물 리스트
좋아요 외 알림
메시지 알림
3?알림 리스트3?
3?메시지 리스트3?
3?스토리 상세3?
3?홈3?
스토리 리스트
게시물 리스트
좋아요 외 알림
메시지 알림
3?알림 리스트3?
3?메시지 리스트3?
3?스토리 상세3?
3?홈3?
1 depth 메뉴, 화면 구성 소개

29. <실습> Q 알게된 점?
3?작성하기3?
/ 3529

30. <실습> Q 어려웠던 점 / 헷갈렸던 점?
3?작성하기3?
/ 3530

31. <실습> Q 질문 사항?
3?작성하기3?
/ 3531

32. / 3532
매주 Critique이 있습니다.
1 발표 팀: A3?1 / B3?1 순서로 발표합니다 .
2 피드백 시간을 위해 간결하게 발표합니다.
3 발표는 1인이 10분 내외로 준비합니다. 스크립트
를 읽지 않습니다.
다음 주, <과제> 발표

33. 팀 과제 진행 시, 당부사항
/ 3533
1 실습3?과제3? 공지
2 팀 모여서, 사전 논의
3 각자 진행 하기도 함
3?중요3? 직무수행능력평가, 두 차례의 뜻?
개인이 진행할 수 있어야 합니다. 팀에 묻어갈 수 없습니다.
4 팀 모여서, 각자 진행 분 공유 및 의견 교류
5 팀 최종 버전으로 정리
6 과제 제출
7 발표 준비

34. 인터페이스의 이해
실습
UX Tool 레슨
/ 3534

35. kwonjeongeun5?naver.com
/ 3535
끝.
다음 주 과제:
-과제 제출 및 발표 준비
-UX Tool 레슨 3강 복습