[제로베이스 PM스쿨 18기 학습일지 #17] IA / User Process / Flow Chart / Wireframe

 

IA(Information Architecture)

✅ASIS 분석 문제점 정리

✅개선 방향 설정

✅벤치마킹을 통해 타사들의 정보 구조 참고 

✅서비스 전략과 방향을 구조에 반영할 것

✅서비스 용어 및 운영 프로세스 구조 정의

✅ASIS IA 중 중복, 불필요한 정보 정리

✅TOBE 개선 방향을 포함시킨 IA설계할 것

 

 

 

🐱‍💻강사님 IA 예시 설명

동일 메뉴의 중복이 있다면 A의 하위에 있어야 하는지, B의 하위에 있어야 하는지
어떤 메뉴의 하위에 있는 것이 정확한가 '정확성'을 판단해야 함
A의 하위로 오는게 가장 적합하다면 IA 구조상으로는 A밑에 있어야 하고 
B밑에 또 나와야 한다면 네비게이션 개념으로 연결하는 것임

-> 실제 개발로 넘어가서 구조를 짜기 때문에 논리적으로 정리를 잘 해야하는 단계

 

 

IA예시

1Depth	2Depth	3Depth
로그인	아이디 찾기
	비밀번호 찾기
	간편 로그인

 

2, 3Depth는 1Depth를 누르지 않으면 나오지 않는 화면

간편 로그인을 다른 화면에 노출 시켜서 사용자가 바로 볼 수는 있지만 그렇다고 간편로그인이 1 Depth라는 뜻❌

간편로그인은 구조적으로 로그인의 하위 메뉴이기 때문에 2 Depth이고

사용자가 바로 볼 수 있도록 버튼형식이나 다른 형태로 노출 시킨 것은 네비게이션 개념으로 봐야함

 

🐱‍💻only 모바일 시대가 되면서 Depth의 깊이도 얕아지고 있는 추세

간단한 화면을 보면서 IA 구조를 정리하는 연습을 해야 한다 (간편 로그인 기능이 있는 작은 화면 단위부터)

 

 

 

---

User Process(이용 흐름 설계)

📌사용자가 특정한 작업 Task를 완료하기 위해 서비스 내의 동선을 정리하는 것

📌 사용자 시나리오보다 구체적이고 UI, 행동, 판단으로 표현 된다

 

✅페이지의 주요 프로세스를 이해

✅ 인터페이스의 효율적 설계

✅ 개선이 필요한 영역정의 

✅ 서비스 주요 흐름 파악

✅ 각 파트와의 커뮤니케이션 용이

 

1. 목표 설정

2. 작업 흐름 : 유저의 행위에 초점을 둔 흐름

ex.) 로그인 > 비밀번호 불일치 > 비밀번호 재설정 등 하나의 작업에 하나의 흐름도

3. 와이어 프레임 : 유저 패턴이 반영된 플로우 (🐱‍💻플로우 차트는 개발 로직을 위한 다이어그램)

4. 유저 플로우 : 유저들이 각각 다른 task를 수행하거나, 경우의 수를 고려하여 모든 이동 경로를 설정

 

 

 

 

---

 

 

Flow Chart

개발 로직을 위한 다이어그램

DB저장, API 호출을 어디서 해야 하는지 큰 흐름을 파악할 수 있다

📌로직 플로우(기능 흐름)

if 케이스에 대한 고민을 하면서 로직 짜야함 (if-else if문 생각하면서 짜면 수월)

 

 

 

 

개발할때 스토리보드 보면서 구조 정리하기 위해 만들어 본 플로우차트

 

 

 

 

---

Wireframe

 

📌UI를 어떻게 표현할지 그려 놓은 화면의 프로토타입

📌 웹페이지, 앱페이지 화면을 페이지 구조, 레이아웃, 정보구조, 유저 플로우, 기능, 동작에 대한 정의

 

와이어프레임 고려할 점

왜 WHY

목표 GOAL

무엇 WHAT

컨셉 CONCEPT

 

📌비즈니스를 하는데 있어서 웹을 도구로 하는 기획

웹 사용자 이해 / 웹 구조로 표현 / 웹 언어로 표현 

 

📌웹앱의 구조를 설계하고 화면 UI를 설계

콘텐츠 적절한 배치 / 서비스 화면 구조 / 설득 문서

 

 

---

서비스 기획자

-전체적인 요건에 대한 분석, 방향과 목표 설정을 통해 일정 계획을 수립하고 화면을 설계, 커뮤니케이션, 팀별 의견 조율을 위한 설득, 최종 산출물 정리 등 프로젝트의 시작과 끝을 담당한다(개발,디자인 빼고 다 한다고 보면 됨)

 

 What - Why - How -  If

 

 

 

---

갑자기 이것 저것 하느라 바빠진 생활

자소서 1차 제출날 벌써 코 앞인데 언제 쓰지...ㅎ