[내일배움캠프] Figma - IA, 플로우차트, 와이어프레임

썸넬 시바셀카.

 

오늘은 그동안 포스팅 안했던 피그마에 관련된 내용을 한 번 써보려고 한다.

 

다른 강의들 듣느라 피그마 강의를 아직 다 못 들은거라 안 쓴거 아니냐??

 

지급된 강의 3개.

 

응 이미 다 수강했어~

 

피그마 관련 포스팅을 못 한 이유는 내용이 어렵다기 보단 한 주차 한 주차 내용을 티스토리에 담으려면 너무 힘들 것 같았다(...)

 

글보단 사진의 양이 방대하고, 그냥 단어랑 내용들을 복붙하는 느낌이 들어서 내가 학습하는 게 아닌 것 같았다.

 

그래서 피그마 3~5주차 포스팅은 일단 스킵하고 TIL 과제 낼 게 없다면 그때 포스팅 하는 걸로 미뤄봤고..

 

지난 사전캠프 기간 때 이미 SQL 강의는 다 들었고, 피그마 강의 듣고 과제까지 다 제출한 다음 프로덕트 매니지먼트 개론을 들었다.

 

결국 3개 강의 다 컴플리트.

 

근데 이번 주 커리큘럼 상 저 3개 강의 듣는 거 외의 활동은 없던데..

 

근데 이제 ㄹㅇ 뭐함?

 

비상🚨. 할 게 없다 ㅋㅋ

 

그래서 오늘 아침 급하게 매니저님을 찾아가서 "저 이제 뭐해요?"  라고 여쭤보니

 

그냥 이번 주 기간 동안 내배캠 Docs의 기초자료를 톺아보는 거로 했따..

 

뭐 복습은 어차피 필수니까 내 기본토대를 더 단단히 다질 수 있는 기회로 생각했다.

 

그런데 기초자료 중에 피그마의 IA, 플로우차트, 와이어프레임을 다룬 내용이 있어서 해당 내용을 다뤄보는 게 좋겠다고 생각해서 포스팅하게 되었다!

 

IA는 예전에 프로젝트 과정을 시각 자료로 나타낼 때 썼었고, 플로우차트는 안 다뤄봤고 와이어프레임은 예전에 정보처리기사를 공부할 때 훑고 넘어갔던 기억이 난다.

 

이번에 피그마를 사용하면서 알아보자!

---

💎 IA(Information Architecture)란?

사용자가 원하는 정보를 쉽게 찾고 이해할 수 있도록 콘텐츠를 구조화하고 조직화하는 과정이다.

 

학문적인 정답은 없어 정해진 양식이 없다.

 

서비스의 기능들을 표와 플로우 차트 등을 이용해 도식화하여 서비스의 흐름을 잘 알아볼 수 있게 한다.

 

그럼 서비스 IA들의 예시를 한 번 갖고 와보겠다!

 

출처 : https://zero-base.co.kr/event/media_insight_contents_PM_IA

 

출처 : https://zero-base.co.kr/event/media_insight_contents_PM_IA

 

IA 정의할 수 있는 내용들은 천차만별로 다르다. (목표 설정, 레이블링, 유저, 컨텐츠, 컨텍스트, 분류, 정보나열 등등..)

 

그 중 분류, 서비스의 Depth, 화면번호, 화면 ID, 페이지 정의 및 요구사항, 세부사항, 진행단계는 포함해서 기술하는 것이 좋다.

 

위의 이미지와 같이 문서 혹은 차트 형식으로 IA를 표현할 수 있다. 그중 차트 형식의 IA는 플로우 차트와 비슷한데 플로우 차트는 이후 아래에서 다뤄보도록 하겠다..

 

일단 바로 문서화 작업을 하기 보단 시각적으로 표현할 수 있는 차트형식을 그리고, 그 다음 표로 정리해보자!

 

예전에 진행했던 프로젝트의 IA..

 

예전에 진행했던 뉴스 기사 타임라이너 서비스의 IA다. 그때 당시 PM을 맡았던 분이 만드셨었다.

 

기능 위주로 작성된 IA인데, 지금보니 수정할 부분이 조금 있는 것 같다.

 

피그마를 활용해서 내 거로 변경 및 수정해보겠다 ㅎㅎ

 

기능별로 분류하기 보단 나는 화면 별로 분류해보려고 한다.

 

내가 그린 IA 차트.

 

휴~ 피그마로 작성했는데 엄청 오래걸렸다..

 

주요 화면 - 기능 요소 - 하위 요소 3가지를 컴포넌트로 만들었다.

 

이후 깊이에 따라 분류하고 화면의 흐름도에 따라 화살표로 연결해줬다!

 

요놈을 뜯어보면

 

이렇게 설계되도록 했당

 

 

컴포넌트 관련 설정은 

요렇게 3개로 나눠서 프로퍼티들을 넣어줬따

 

 

표로도 IA를 작성해봤다.(Excel 활용)

 

 

카카오에서 활용한 예시를 참고하여 Depth별로 화면을 나누고, description에서 세부 기능에 대한 설명을 추가했다!

---

💎 플로우 차트(Flow Chart)란?

플로우 차트에 사용되는 도형들.

 

플로우차트는 다이어그램의 형태로, 도형을 사용하여 흐름도를 작성하게 된다.

 

약속으로 정해진 표준 도형들을 사용해야 한다는 특징이 있다.

 

5가지  도형들을 살펴보자면

 

1️⃣ 시작 / 종료 (단말) : 순서도의 시작과 끝

 

2️⃣ 처리 : 처리해야 할 작업

 

3️⃣ 입출력 : 데이터 입출력 시 사용

 

4️⃣ 판단 (의사결정) : 비교 및 판단에 의한 논리적인 분기

 

5️⃣ 흐름선 : 순서도 기호간 연결 / 작업 흐름

 

이 있다.

 

예를 들어 요리를 준비하는 과정을 플로우 차트로 그린다면?

 

심부름 다니던 예전의 나가 기억난다,,

 

와 같이 그릴 수 있다.

 

그런데 이 흐름도.. 어디서 많이 본 거 같기도 해서 대학교 때 그렸던 UML 파일들을 찾아봤다.

 

옛날 옛적에 그렸던 UseCase와 DB UML.

 

DB 스키마를 정의할 때 각 테이블 간 관계를 설정하는 것이 흐름도를 그리는 것과 비슷하다고 느꼈고,

 

UseCase 부분은 플로우의 기능들을 명시해준 부분이 흡사하다고 생각되었다!

 

또 다시 예전 프로젝트를 플로우 차트로 만들어볼까 했지만 체력이 후달려서 스킵..

---

💎 와이어프레임이란?

어떤 프로젝트를 진행할 때 기획 단계에서 작성되는 설계도이다.

 

화면에 어떤 정보가 나타나야 하는 지,  어떤 레이아웃을 가져야 하는지, 어떤 세부 모습이 나타나야 하는지, 어느 부분이 어디로 / 어떤 부분과 이어져 있는 지에 대한 정보가 포함되어야 한다.

 

UI를 어찌 어찌 만들었다고 해도, 정교한 와이어프레임을 만드려고 하면 너무 어려울 것 같다..

 

하지만 이런 우리를 위해서 '와이어프레임 키트'들이 존재한다!

 

우리가 UI를 그리면 알아서 와이어프레임을 그려준다.

 

아래와 같은 로그인 화면이 있다고 가정하자.

로그인 화면 UI.

 

이 해당 UI를 우클릭 -> Plugin -> DesignDoc 를 활용해서 생성만 해준다면?

 

 

이런 식으로 와이어 프레임을 알아서 그려준다!

 

정말 편리한 기능이어서 UI만 꼼꼼히 잘 제작만 하면 키트 딸~깍 누르면 되서 마음이 한결 놓인다.

---

 

이렇게 오늘 IA, 플로우 차트, 와이어 프레임을 피그마를 활용해서 알아보았다.

 

그동안 피그마 강의만 듣고 과제하기 급급했었는데 내 예전 프로젝트를 활용하니까 이해가 더 쉽게 되었고 기능들에 대한 활용도가 더 높아진 것 같다!

 

흠...

 

근데...

 

진짜 이제 뭐함?

 

이제 진짜 뭐하지?

 

아마... 다른 분께서 추천해주신 PM 관련된 책을 읽고 관련된 내용에 대한 글을 쓰지 않을까 싶다!!

 

내게 일감을 줘라