InterfaceDesign_6th.Lecture.InformationArchitecture_1.pdf 자료

6강
2025_ID_6th.Lecture.InformationArchitecture_1
정보 설계의 이해 1

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

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

3. Critique에 앞서
/ 553
팀 과제를 제출했습니다.
가이드라인이 잘 지켜진 팀: A3?2
고마운 분들…
-제출: 지각 O
-파일명: 1, 띄어쓰기
-파일 커버 X
-페이지명: 10.16 5주차 과제 O
-섹션 X, 섹션명 X
-문서 커버, 목차, 감사합니다 X
-문서 구조 보이게 정리 X
-과제 잘못 이해: 3?첫 번째3? 메뉴의 역할만 O

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

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

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

7. 2개의 시스템이 만나서? 소통
/ 557
??
?
문화용어: 의사소통 Communication
과학용어: 상호작용 Interaction
인터랙션

8. QUIZ
/ 558
Human ComputerInteraction
HCI
?? ?

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

10. 사람과 사람의 인터랙션
/ 5510
의사소통
대화
Communication

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

12. 인터페이스 디자인 에 필요한 2가지
/ 5512
사람
디지털
시스템
사용자가 접하는 공간/시간
User Experience
목표 도구행동 결정
Goal ToolActivity
InformationInteraction Interface
출처:?<안될과학>,?장진규?편
정보
설계
상호작용
설계

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

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

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

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

17. ?
인터넷 기반 지식 플랫폼 TED의 창시자
집을 짓는 건축가3?Architect3?
현재, 정보를 건축하는 크리에이터
왜, 정보 설계(IA)?
리처드 사울 워먼3?Richard Saul Wurman3?
/ 5517

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

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

19. 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?
예: 인스타그램 메뉴 트리
/ 5519

20. 정보 설계(IA), 왜 중요한가
출처:?다음?UX랩?<스토리로?이해하는?UX?디자인?프로세스> / 5520
성공한 IA
•신속하게 원하는 정보를 찾을 수 있
어서 사용자의 시간과 비용이 절약된
다.
•좋은 IA로부터 나온 사용자 경험은
브랜드 가치를 제고시킨다 .
•쇼핑몰 등 구매와 연결된 경우에는
수익 문제와 직결된다.
•목적물의 신뢰성이 하락하고 나아가
브랜드 이미지의 추락과 연결된다.
실패한 IA
•사용자는 불편함과 좌절감을 느
껴 재방문을 꺼리게 된다.
•각인된 실패 경험은 결국 경쟁 사
이트로 이탈하게 한다.
•쇼핑몰 등 구매와 연결된 경우에
는 수익 문제와 직결된다.
•목적물의 신뢰성이 하락하고 나아
가 브랜드 이미지의 추락과 연결
된다.

21. 출처: 영화 <인사이드 아웃>
정보와 인간의 뇌
/ 5521

22. 출처: 영화 <인사이드 아웃>
정보와 인간의 뇌
/ 5522

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

24. 디렉토리 서비스 예: 운동 > 수영 > 수영 관련 웹 사이트
예: 2000년대 초, 포털 서비스
/ 5524

25. 정보 구조
내비게이션 시스템
레이블링 시스템
콘텐츠 구성
정보 설계(IA), 구성 요소
출처: 다음 UX랩 <스토리로 이해하는 UX 디자인 프로세스> / 5525

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

27. 팀 서비스 소개
/ 5527
A3?1 피카플레이 B3?1 스포티파이
A3?2 나이키 런 클럽 B3?2 밴드
A3?3 당근마켓 B3?3 캐치테이블
A3?4 후르츠패밀리 B3?4 지쿠터
A3?6 네이버 블로그 B3?6 네이버 지도

28. / 5528
<실습> 서비스 소개
인스타그램
~ 제품/서비스 소개 한 줄 3?작성하기3?

29. / 5529
<실습> 메뉴 트리 소개
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?

30. <실습> 메뉴 트리 소개 with 스크린샷
3?한 장표에 모두 보이게 작성하기3?
/ 5530
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?
스토리 리스트
게시물 리스트
좋아요 외 알림
메시지 알림
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?

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

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

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

34. / 5534
<실습> Q 첫 번째 메뉴의 명칭은 무엇? 그 역할은 무엇?
첫 번째 메뉴 명?
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?
1 depth 메뉴, 화면 구성 소개

35. 같은 소셜 네트워크 서비스입니다.
Q 어떤 차이가 있나?
6주 차, <실습> 소개
/ 5535 출처: <안될과학>, 장진규 편

36. 6주 차, <실습> 소개
/ 5536
1 유사 서비스, 경쟁 서비스 리스트 조사
2 팀 서비스 포함. 2개 ~ 3개 선정
3 유사 서비스, 3?첫 번째 메뉴3? 화면 비교
4 팀 서비스, 컨셉 - 주요 특징을 알아내고
5 팀 서비스, 주요 Task 2가지 ~ 3가지 소개

37. 출처: App Store 6? 소셜 네트워킹의 인기 차트를 참고함.
서비스 명 선정과 제외 이유 선정
인스타그램 팀 선정 서비스
블라인드
틱톡
밴드
에브리타임
X
제페토
링크드인
서비스 명
6주 차, <실습> 유사 서비스, 경쟁 서비스 리스트 조사
App
Icon
App
Icon
App
Icon
App
Icon
App
Icon
App
Icon
App
Icon
App
Icon

38. 출처: App Store 6? 소셜 네트워킹의 인기 차트를 참고함.
서비스 명 선정과 제외 이유 선정
인스타그램 팀 선정 서비스
블라인드 제외. #폐쇄적 #enclosed #직장인 #커리어특화
틱톡 제외. 콘텐츠 성격이 다름 #숏폼
밴드 제외. #폐쇄적 #enclosed
에브리타임 제외. #폐쇄적 #enclosed #학생 #학업특화
X~ 유사함. ~ 경쟁 서비스임. ~ 시장이 같음. …
제페토 제외. 콘텐츠 성격이 다름 #메타버스
링크드인 제외. #커리어특화
서비스 명~ 유사함. ~ 경쟁 서비스임. ~ 시장이 같음. …
6주 차, <실습> 팀 서비스 포함. 2 ~ 3개 선정
App
Icon
App
Icon
App
Icon
App
Icon
App
Icon
App
Icon
App
Icon
App
Icon

39. 6주 차, <실습> 유사 서비스, [첫 번째 메뉴] 화면 비교
/ 5539
0
Instagram 3?Home3? facebook 3?Home3? Threads 3?Home3?

40. 6주 차, <실습> 유사 서비스, [첫 번째 메뉴] 화면 비교
/ 5540
3?표 형식으로 작성하기3?
마지막에는
각 서비스의 컨셉, 주요 특징, 주요 Task가
도출되게 작성하기

41. 6주 차, <실습> 서비스의 컨셉과 주요 특징
/ 5541
0
인스타그램
~ 제품/서비스 소개 한 줄 3?재작성하기3?
특징1
이미지
편집
특징3
좋아요
특징2
팔로잉

42. ~ 제품/서비스 소개 한 줄 3?재작성하기3?
6주 차, <실습> 서비스의 컨셉과 주요 특징
/ 5542
Task1
나의 게시물
작성
Task3
남의 게시물
반응 작성
Task2
남의 게시물
탐색 가능
세팅
특징1
이미지
편집
특징3
좋아요
특징2
팔로잉

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

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

45. 6주 차, <실습> 주요 Task Q ~ 3가지 소개
/ 5545
주요 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 홈

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

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

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

49. / 5549
매주 과제를 쌓아서 제출하겠습니다.
1 지난 과제 뒤에 금주 과제를 붙여 주세요.
예:
2 매주 과제는 20장을 넘기지 않습니다.
3 중간 과제, 장수 제한이 있습니다. 재정리가 필요
합니다.
6주 차, <과제> 제출

50. / 5550
매주 Critique이 있습니다.
1 발표 팀: A3?23?나이키 런 클럽3?, A3?33?당근마켓3?
B3?23?밴드3?, B3?33?캐치테이블3? 순서로 발표합니다 .
2 피드백 시간을 위해 지난 과제를 포함해서 간결하게 발표합니
다.
3 발표는 1인이 10분 내외로 준비합니다. 스크립트를 읽지 않습
니다.
4 반대표? 데스크탑에 발표 자료 준비를 부탁합니다.
6주 차, <과제> 발표

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

52. <실습> 개인 과제 소개
/ 5552
1 Home 화면 완성
-Tabbar
-Card/Product 까지 포함
2 5F 3?과제 23? Password Field 만들어
Login 화면에 적용 완료
3 5F 3?과제 33? Auto Layout 만들기 완성
3?중요3? 할 수 있는 만큼 해서 모두 제출하기

53. <실습> 개인 과제 제출 방법
/ 5553
-파일 위치 엄수: 해당 개인 과제 파일은 A/B반 공간 밑
Draft3?초안3?에 위치해야 함.
-파일명 엄수: Figma 실습3?202510173?시작3?홍길동
-제출 기한 엄수: 화 오후 11:59까지
-제출 방법 엄수: 말풍선 @권정은 교수님, 4강 개인 실습 과
제를 제출합니다.
-말풍선 위치 엄수: 다음 장표 참조.

54. <실습> 개인 과제 제출 방법
/ 5554
파일 위치 엄수: 해당 개인 과제 파일은 반 공간 밑 Draft3?초
안3?에 위치해야 함.
파일명 엄수: Figma 실습3?202510173?시작3?홍길동
제출 기한 엄수: 화 오후 11:59까지
제출 방법 엄수: @권정은 교수님, 4강 개인 실습 과제를 제
출합니다.
말풍선 위치 엄수: 다음 장표 참조.
Login 화면 위에
말풍선 배치

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