InterfaceDesign_7th.Lecture.InformationArchitecture_2.pdf 자료

7강
2025_ID_7th.Lecture.InformationArchitecture_2
정보 설계의 이해 2

1. KAYWON UNIVERSITY OF ART 5? DESIGN
SMART PRODUCT DESIGN LAB
INTERFACE DESIGN
인터페이스 디자인
kwonjeongeun5?naver.com
7강 정보 설계의 이해 2
/ 611

2. 과제 Critique
정보 설계의 이해 2
실습
UX Tool 레슨
/ 612

3. Critique에 앞서
/ 613
3?공지3? 직무수행능력평가 1, 11/73?금3? 진행
5L발표
5L시연 3?개인 과제 완료3?
5L기말 과제 준비

4. Critique에 앞서
/ 614
팀 과제를 제출했습니다.
가이드라인이 잘 지켜진 팀: A3?2, A3?6, B3?1
고마운 분들…
-과제 잘못 이해: 5주 차 과제 + 6주 차 과제 O
5주 차 과제 2장? X
-제출: 지각 O
-페이지 구성: 가이드라인 X
-페이지 순서: 최신 과제 순으로 정렬 X
-섹션 X, 섹션명 X
-문서 구조 보이게 정리 X

5. 과제 Critique
정보 설계의 이해 2
실습
UX Tool 레슨
/ 615

6. 서비스 정의 단계 정보 설계 단계
UX 디자인
/ 616
메뉴 트리기능 리스트주요 특징서비스 컨셉
★: 중간 과제에 포함

7. 정보 설계 단계
UX 디자인
/ 617
프로토타입와이어프레임손 스케치테스크 흐름
No color
★: 중간 과제에 포함

8. ‘정보 설계’ 라… 어디서부터 시작?
/ 618
정보 설계
IA
Information 6? Architecture
정보 + 건축 / 건축물 / 설계

9. 사용자 경험 디자인 - 정보 설계?
/ 619
정보?설계?이즈?베리?임포턴트!
/ 619

10. 사람의 입장, 정보의 덩어리.
정보, 어떻게 이해시킬 건데?
규칙, 논리 -> 이해하기 쉬운 시스템 구축하는 일 = 사용자 경험 디자인
정보 설계(IA)란?

/ 6110
사용자
경험
디자인
이해정보
리처드 사울 워먼3?Richard Saul Wurman3?

11. 정보와 인간의 뇌
출처:?유발?하라리?<사피엔스>,?알렉스?라이트?<분류의?역사> / 6111
저장 장치로 훌륭하지 않은 뇌
저장 용량: 유한성, 중요 기억 vs 확장성, 업그레이드 가능
중요한 정보만 저장하도록 되어 있다.
저장 기간: 유한성, 소멸 vs 영구성, 이관 가능
저장 기간이 100년도 되지 않는다.
어떻게 하면 정보를 체계적으로 분류할 수 있을까?
빙하 시대, 빌린 물건, 장부 정리법
고대, 수메르인 문서 보관소, 문서 분류법
중세, 수도원 도서관, 도서 분류법
사용자
경험
디자인
이해정보 뇌

12. 정보 설계(IA), 구성 요소
/ 6112 출처?:?다음?UX랩?<스토리로?이해하는?UX?디자인?프로세스>,?197p
정보 구조 -> 정보의 분류 유형
내비게이션 시스템 -> 지도
레이블링 시스템 -> 정보 그룹의 이름
콘텐츠 구성 -> 정보 노출의 방식과 순서

13. 정보 구조
계층 구조 계열 구조
그리드 구조 네트워크 구조
정보를 어떻게 분류할 것인가
/ 6113
메뉴 트리

14. / 6114
정보 구조
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?
예: 인스타그램 메뉴 트리

15. 정보를 어떻게 분류할 것인가
/ 6115
?? depth 계층 구조
정보 구조

16. 정보를 어떻게 분류할 것인가
/ 6116
?? depth 계층 구조
정보 구조

17. Iy ?:
정보를 어떻게 분류할 것인가
/ 6117
같은 정보 레벨
순차적 접근
주로 어디서?
OO 구조
정보 구조

18. 정보를 어떻게 분류할 것인가
/ 6118
OO 구조
정보 구조

19. 정보 설계(IA), 구성 요소
/ 6119 출처?:?다음?UX랩?<스토리로?이해하는?UX?디자인?프로세스>,?197p
정보 구조 -> 정보의 분류 유형
내비게이션 시스템 -> 지도
레이블링 시스템 -> 정보 그룹의 이름
콘텐츠 구성 -> 정보 노출의 방식과 순서

20. Navigation 항해, ?;?c
즉 사용자가 자신의 목적지를 향해 순항할 수 ?V???+
도와주는 항해 예??
Internet Explorer
내비게이션 시스템
정보를 어떻게 탐색할 것인가
/ 6120

21. 글로벌 내비게이션
련?
내비게이션
컨텍스츄얼
내비게이션
글로벌 Global
- 로컬 Local
- 컨텍스츄얼 Contextual
정보를 어떻게 탐색할 것인가
/ 6121
내비게이션 시스템

22. 정보 설계(IA), 구성 요소
/ 6122 출처?:?다음?UX랩?<스토리로?이해하는?UX?디자인?프로세스>,?197p
정보 구조 -> 정보의 분류 유형
내비게이션 시스템 -> 지도
레이블링 시스템 -> 정보 그룹의 이름
콘텐츠 구성 -> 정보 노출의 방식과 순서

23. / 6123
계층 구조와 레이블링 시스템의 관계
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. 정보 설계(IA), 구성 요소
출처?:?다음?UX랩?<스토리로?이해하는?UX?디자인?프로세스> / 6124
정보 구조 -> 정보의 분류 유형
내비게이션 시스템 -> 지도
레이블링 시스템 -> 정보 그룹의 이름
콘텐츠 구성 -> 정보 노출의 방식과 순서#금융 #법률 #의료
사용자의 언어로 더 쉽게
UX Writing
UX Writer

25. 정보 설계(IA), 구성 요소
/ 6125 출처?:?다음?UX랩?<스토리로?이해하는?UX?디자인?프로세스>,?197p
정보 구조 -> 정보의 분류 유형
내비게이션 시스템 -> 지도
레이블링 시스템 -> 정보 그룹의 이름
콘텐츠 구성 -> 정보 노출의 방식과 순서

26. 콘텐츠 구성
정보의 순서와 정렬을 어떻게 결정지을 것인가
최신 순 구성가나다 순 구성 주제 별 구성
/ 6126

27. 과제 Critique
정보 설계의 이해 2
실습
UX Tool 레슨
/ 6127

28. 6주 차, <실습> 주요 Task Q ~ 3가지 소개
/ 6128
주요 Task 1. 나의 게시물 작성
13?2 나의 게시물 작성 진입 13?4 나의 게시물, 글 작성 중13?33?1 나의 게시물, 이미지 작성 중 13?5 나의 게시물, 공유 완료13?1 홈

29. ìI ¯ÐèP
?=?5?
?S
ìI ¯ÐèP
ìI ¯ÐèP
?=?5?
?S
ìI ¯ÐèP
?=?5?
?S
ìI ¯ÐèP
?=?5?
?S
/ 6129
주요 Task 1. 나의 게시물 작성
13?2 나의 게시물 작성 진입 13?4 나의 게시물, 글 작성 중13?33?1 나의 게시물, 이미지 작성 중 13?5 나의 게시물, 공유 완료13?1 홈
7주 차, <실습> 주요 Task 2 ~ 3가지 Wireframe 제작
출처 : [A_0] 2_중간과제_00(개인번호)_홍길동.fig링크 걸기

30. 6주 차, <실습> 주요 Task Q ~ 3가지 소개
/ 6130
주요 Task 2. 팔로잉 대상 찾기
23?2 검색 진입 23?4 키워드 입력 중23?1 홈 23?3 키워드 입력 대기 23?5 키워드 검색 결과

31. ìI ¯ÐèP
?=?5?
?S
ìI ¯ÐèP
?=?5?
?S
ìI ¯ÐèP
?=?5?
?S
ìI ¯ÐèP
?=?5?
?S
/ 6131
주요 Task 2. 팔로잉 대상 찾기
23?2 검색 진입 23?4 키워드 입력 중23?1 홈 23?3 키워드 입력 대기 23?5 키워드 검색 결과
7주 차, <실습> 주요 Task 2 ~ 3가지 Wireframe 제작
출처 : [A_0] 2_중간과제_00(개인번호)_홍길동.fig링크 걸기

32. 6주 차, <실습> 주요 Task Q ~ 3가지 소개
/ 6132
주요 Task 3. 나의 게시물 / 나의 댓글에 43좋아요44 보기
33?23?1 나의 게시물에 43좋아요44 알림 33?23?2 나의 댓글에 44좋아요44 알림33?33?1 나의 게시물에 43좋아요44 알림 33?33?2 나의 댓글에 43좋아요44 보기33?1 홈

33. ìI ¯ÐèP
?=?5?
?S
ìI ¯ÐèP
?=?5?
?S
ìI ¯ÐèP
?=?5?
?S
ìI ¯ÐèP
?=?5?
?S
33?23?1 나의 게시물에 43좋아요44 알림 33?23?2 나의 댓글에 44좋아요44 알림33?33?1 나의 게시물에 43좋아요44 알림 33?33?2 나의 댓글에 43좋아요44 보기33?1 홈
/ 6133
주요 Task 3. 나의 게시물 / 나의 댓글에 43좋아요44 보기
7주 차, <실습> 주요 Task 2 ~ 3가지 Wireframe 제작
출처 : [A_0] 2_중간과제_00(개인번호)_홍길동.fig링크 걸기

34. 7주 차, <실습> Wireframe 참고용입니다.
/ 6134

35. / 6135
7주 차, <실습> Wireframe 참고용입니다.

36. Wireframe이란?
사용자가 사용할 서비스의 화면을 약식으로 보여주는 방법.
들어갈 콘텐츠, 콘텐츠의 배치 등 간단히 보여주는 일.
실제 화면과 동일할 필요는 없음.
5L간단한 선, 도형, 문자를 이용함.
5LGray 톤으로 제작. 디자인 요소를 가미하지 않음.
/ 6136

37. 7주 차, <실습> 주요 Task Q ~ 3가지 Wireframe 제작
/ 6137
팀 폴더 선택
1
/ 6137

38. 7주 차, <실습> 주요 Task Q ~ 3가지 Wireframe 제작
/ 6138
Design
파일 생성
2
/ 6138

39. 7주 차, <실습> 주요 Task Q ~ 3가지 Wireframe 제작
/ 6139
파일 커버를 만들어 주세요!
/ 6139

40. 7주 차, <실습> 주요 Task Q ~ 3가지 Wireframe 제작
/ 6140
3파일명: 3?A3?03? 23?중간과제3?003?개인번호3?3?홍길동
예 시 : 3?A3?23? 23?중간과제3?013?임예준
4과제 제출 구성 엄수
/ 6140

41. 7주 차, <실습> 주요 Task Q ~ 3가지 Wireframe 제작
/ 6141
팀 프로토타입3?중간 고사3? 준비 차
Wireframe은 팀원 모두가 Figma로 제작해서 제출합니다 . - 개인 과제
❺ Gray 톤의 Wireframe ONLY.
✦ No Color / ✦ No Real Image / ✦ No Real Text / ✦ No Real Data. - 중간 고사 범위 아님.
❻ 3?Design3? 모드에서 주요 Frame3?화면3? 제작 ONLY.
✦ 3?Prototype3? 모드에서 인터랙션 제작하지 말 것 - 다음 주3?8주 차3? 과제임.
❼ 메뉴 트리 기준. Frame 이름 작성 그리고 구조가 보이도록 Frame 정렬할 것.
✦ 다음 화면 참조.
❽ 3?오른쪽 패널3? Text, Color, Effect Styles3?자신만의 디자인 시스템3? 작성할 것.
✦ 최소한으로 운영이 핵심.
❾ 1개 이상의 Component, Varients 제작 그리고 Frame과 관련되게 정렬할 것.
✦ 다음 화면 참조.

42. 7주 차, <실습> 주요 Task Q ~ 3가지 Wireframe 제작
/ 6142
3
8
8
7
파일명 엄수
디자인 시스템
Frame명 : 메뉴 트리 기준. 메뉴 명으로 작성
Frame들: 구조가 보이게 정렬
1개 이상의
Component 5? Varient 제작과
관련된 정렬
4과제 제출 구성 엄수
9

43. / 6143
7주 차, <실습> 주요 Task 2 ~ 3가지 Wireframe 제작
3?첫 메뉴3? 화면 위에
말풍선 배치

44. 7주 차, <실습> 주요 Task Q ~ 3가지 Wireframe 제작
/ 6144
1 개인 파일 제출 방법 :
5LA/B반 > 3?팀 폴더3? > 개인 파일 생성
2 개인 파일 제출 기한 :
5L말풍선
5L10월 29일 수 오후 11시 59분까지
3 팀 파일 PPT 제출 방법과 제출 기한:
5L이전과 동일
5L10월 30일 목 오후 11시 59분까지

45. 7주 차 과제
-이몽룡
(팀원 순서는 가나다 순으로 정렬)
/ 6145

46. ìI ¯ÐèP
?=?5?
?S
ìI ¯ÐèP
ìI ¯ÐèP
?=?5?
?S
ìI ¯ÐèP
?=?5?
?S
ìI ¯ÐèP
?=?5?
?S
/ 6146
주요 Task 1. 나의 게시물 작성
13?2 나의 게시물 작성 진입 13?4 나의 게시물, 글 작성 중13?33?1 나의 게시물, 이미지 작성 중 13?5 나의 게시물, 공유 완료13?1 홈
7주 차, <실습> 주요 Task 2 ~ 3가지 Wireframe 제작
출처 : [A_0] 2_중간과제_00(개인번호)_ 이몽룡.fig링크 걸기

47. ìI ¯ÐèP
?=?5?
?S
ìI ¯ÐèP
?=?5?
?S
ìI ¯ÐèP
?=?5?
?S
ìI ¯ÐèP
?=?5?
?S
/ 6147
주요 Task 2. 팔로잉 대상 찾기
23?2 검색 진입 23?4 키워드 입력 중23?1 홈 23?3 키워드 입력 대기 23?5 키워드 검색 결과
7주 차, <실습> 주요 Task 2 ~ 3가지 Wireframe 제작
출처 : [A_0] 2_중간과제_00(개인번호)_ 이몽룡.fig링크 걸기

48. ìI ¯ÐèP
?=?5?
?S
ìI ¯ÐèP
?=?5?
?S
ìI ¯ÐèP
?=?5?
?S
ìI ¯ÐèP
?=?5?
?S
33?23?1 나의 게시물에 43좋아요44 알림 33?23?2 나의 댓글에 44좋아요44 알림33?33?1 나의 게시물에 43좋아요44 알림 33?33?2 나의 댓글에 43좋아요44 보기33?1 홈
/ 6148
주요 Task 3. 나의 게시물 / 나의 댓글에 43좋아요44 보기
7주 차, <실습> 주요 Task 2 ~ 3가지 Wireframe 제작
출처 : [A_0] 2_중간과제_00(개인번호)_ 이몽룡.fig링크 걸기

49. 7주 차 과제
-홍길동
/ 6149

50. ìI ¯ÐèP
?=?5?
?S
ìI ¯ÐèP
ìI ¯ÐèP
?=?5?
?S
ìI ¯ÐèP
?=?5?
?S
ìI ¯ÐèP
?=?5?
?S
/ 6150
주요 Task 1. 나의 게시물 작성
13?2 나의 게시물 작성 진입 13?4 나의 게시물, 글 작성 중13?33?1 나의 게시물, 이미지 작성 중 13?5 나의 게시물, 공유 완료13?1 홈
7주 차, <실습> 주요 Task 2 ~ 3가지 Wireframe 제작
출처 : [A_0] 2_중간과제_00(개인번호)_ 홍길동.fig링크 걸기

51. ìI ¯ÐèP
?=?5?
?S
ìI ¯ÐèP
?=?5?
?S
ìI ¯ÐèP
?=?5?
?S
ìI ¯ÐèP
?=?5?
?S
/ 6151
주요 Task 2. 팔로잉 대상 찾기
23?2 검색 진입 23?4 키워드 입력 중23?1 홈 23?3 키워드 입력 대기 23?5 키워드 검색 결과
7주 차, <실습> 주요 Task 2 ~ 3가지 Wireframe 제작
출처 : [A_0] 2_중간과제_00(개인번호)_ 홍길동.fig링크 걸기

52. ìI ¯ÐèP
?=?5?
?S
ìI ¯ÐèP
?=?5?
?S
ìI ¯ÐèP
?=?5?
?S
ìI ¯ÐèP
?=?5?
?S
33?23?1 나의 게시물에 43좋아요44 알림 33?23?2 나의 댓글에 44좋아요44 알림33?33?1 나의 게시물에 43좋아요44 알림 33?33?2 나의 댓글에 43좋아요44 보기33?1 홈
/ 6152
주요 Task 3. 나의 게시물 / 나의 댓글에 43좋아요44 보기
7주 차, <실습> 주요 Task 2 ~ 3가지 Wireframe 제작
출처 : [A_0] 2_중간과제_00(개인번호)_ 홍길동.fig링크 걸기

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

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

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

56. 매주 과제를 쌓아서 제출하겠습니다.
1 5~6주 차 과제 내용은 그대로 유지합니다.
2 지난 과제 뒤에 금주 7주 차 과제를 붙여 주세요.
예: 7주 차 과제 제출
3 중간 과제, 장수 제한이 있습니다. 재정리가 필요
합니다.
/ 6156
7주 차, <과제> 제출

57. / 6157
7주 차, <과제> 발표
매주 Critique이 있습니다.
1 발표 팀: A3?43?후르츠패밀리3?, A3?63?네이버블로그3?
B3?43?지쿠터3?, B3?53?네이버 지도3? 순서로 발표합니다 .
2 피드백 시간을 위해 지난 과제를 포함해서 간결하게 발표합니
다.
3 발표는 1인이 10분 내외로 준비합니다. 스크립트를 읽지 않습
니다.
4 반대표? 데스크탑에 발표 자료 준비를 부탁합니다.

58. 중간 과제 1. 팀 해체 서비스 발표와 시연
발. @??#?/m!@?!L"???#? "3Y
/ 6158

59. 중간 과제 2. 기말 과제 후보군 2개 준비
남은 2주 동안3?8주 차 제출3? 준비할 수 있게 미리 공지합니다.
41이런 앱을 만들겠습니다.42
중간 과제보다 더 가벼운 앱을 고민합니다.
기말까지 못 끝내요… 단, 43참신성44을 평가합니다.
-예 : 날씨 O - 기본 정보 API 5? Information 앱
-예 : IoT O - 기기 Pairing 5? Monitoring 앱
-예 : 해피포인트 X, 토스 X
과도한 사전 조사를 금지합니다.
중간 고사에서 후보군만 발표하고
다음 수업에 피드백과 함께 할 일이 있습니다.
/ 6159

60. 과제 Critique
정보 설계의 이해
실습
UX Tool 레슨
/ 6160

61. kwonjeongeun5?naver.com
/ 6161
끝.
다음 주 과제 :
-7주 차 개인 과제 제출
-7주 차 팀 과제 제출 및 발표 준비
-UX Tool 레슨 5강 복습