📑 이번 주 학습 내용

이번 주는 기획을 실제 서비스로 만들기 위한 뼈대를 만드는 일을 배워볼게요.

과제가 조금 많을 수도 있지만, 프로젝트를 위해 반드시 익히고 넘어가야 하니 잘 따라와 주세요! 💪

💫 Keyword: IA, Flow Chart

IA가 무엇인가요?

IA는 Information Architecture의 약자로, 서비스의 정보 구조도를 의미해요.

IA를 잘 설계하면 디자이너와 개발자가 서비스의 기능이 어떻게 묶여 있는지, 어떤 경로를 통해 접근할 수 있는 지 등을 쉽게 파악할 수 있어요!

웹, 모바일을 위한 I.A 👉 IA를 전반적으로 쉽게 설명한 글이에요.

IA를 그리는 두 가지 방법

  1. 앞서 살펴본 바와 같이, 메뉴 트리 형식으로 IA를 작성할 수 있어요. 메뉴 트리 형식 IA는 정보의 구조를 매우 간단하게 표현할 수 있고 Depth를 줄일 수 있다는 장점이 있지만, 복잡한 내용까지 정리하는 데에는 한계가 있어요.

  2. 아래 이미지처럼, 엑셀 형식으로도 IA를 작성할 수 있어요.

엑셀 형식 IA는 정보의 상하위 구조를 한 눈에 확인하기는 다소 어려움이 있지만, 각 페이지의 기능과 정책, 요구 사항 등을 더욱 상세하게 정리할 수 있다는 장점이 있어요!

IA는 어떻게 쓰는 것이 맞을까 👉 엑셀 형식 IA의 장점을 설명한 글이에요.

‘어떤 것이 맞는 형태인지’에 대한 답은 없어요. 다만, 디자이너와 개발자가 이해하기 편한 형태로 작성하는 것이 중요하겠죠? 😉

신입디자이너를 위한 IA 알아보기 👉 IA를 작성하는 방법을 간단하게 설명한 글이에요.

처음 IA를 설계하는 건 막막하고, 어려울 수도 있어요. 그러니, 기존 서비스의 IA를 먼저 그려본 후에 새로운 서비스의 IA를 그려보기를 추천해요!

Flow Chart가 무엇인가요?

Flow Chart는 ‘순서도’, ‘흐름도’라고도 말해요.

서비스의 전체 프로세스가 어떻게 작동하는지 파악할 수 있는 다이어그램이죠!

특히, 상세한 기획을 하기 전에 서비스의 여러 가지 케이스를 누락 없이 챙길 수 있다는 점에서 매우 중요한 작업이에요 👍

서비스 기획자라면 꼭 알아야 하는 서비스 IA 활용 방법! 👉 IA와 플로우 차트를 비교하여 설명한 글이에요.

코드당의 ‘로그인’ 기능을 예시로 플로우 차트를 더 자세히 알아볼까요? 😊

사용자가 ID와 비밀번호를 입력하고, 로그인 버튼을 누르면 로그인이 되는, 비교적 간단한 프로세스예요.

플로우 차트를 처음 그려보면, 이렇게 그릴 수 있을 거예요. 물론 이것도 좋은 플로우 차트예요! 전체 프로세스를 한 눈에 파악하는 데에 용이해 보여요.

하지만 플로우 차트를 조금 더 고도화하기 위해 다음과 같은 질문을 던지면 좋아요.

  • ID, 비밀번호를 잘못 입력하면 어떻게 해야 하지?
  • 로그인 성공 시에는 어떤 페이지로 이동해야 하지?

위와 같은 질문을 하고 나면, 아래와 같은 플로우 차트를 그릴 수 있어요.

이처럼 플로우 차트를 그릴 때는 전체적인 흐름을 보는 것도 중요하지만, 서비스의 데이터 처리 과정과 사용자의 흐름을 고려하여 다양한 분기를 표현하고 로직을 세분화하는 작업도 반드시 필요해요 😁

Flow Chart를 그릴 때 지켜야 하는 약속

아래 이미지는 플로우 차트를 그릴 때 가장 기본적으로 사용되는 도형들이에요!

더 많은 기호 규칙이 있을 수 있지만, 조직 및 기획자에 따라서 규칙이 종종 달라지기도 하기 때문에 공통적인 5가지 도형만 알고 있어도 좋아요 😀

(도형이 아니라 색을 구분하여 플로우 차트의 규칙을 정의하기도 한답니다!)

단, 플로우 차트를 보는 다른 팀원도 플로우 차트에 사용된 도형/색/기호가 어떤 것을 의미하는지 알 수 있도록 규칙을 명시해 두는 게 좋겠죠? 😉

플로우 차트(Flow Chart) 그리기 👉 더 많은 기호 규칙을 알고 싶다면 참고해 보세요!

피그마에서 ‘FigJam board’를 만들면 기본적인 도형 툴을 쉽게 꺼내서 사용할 수 있어요!

빠르게 플로우 차트를 그리고 싶다면, 피그잼을 활용해 보는 것도 좋아요 😄

(Miro 등에서도 플로우 차트의 도형들을 제공하고 있지만, 현재 스꾸딩에서 사용하고 있는 협업 툴이 아니어서 제외했어요. 되도록 피그마와 많이 친해져 주세요!)

✏️ 과제 안내

6주차부터 Figma를 사용해서 과제를 진행해야 해요.

  1. 피그마의 기초 사용 방법을 모른다면, 아래 강의를 참고하며 피그마 사용 방법을 익혀주세요.

    피그마 기초부터 마스터까지 - 피그마 강좌

    (어려운 툴이 아니니, 강의에 의존하기 보다는 직접 이것저것 만져보며 기능을 익히는 편이 더 좋아요. 피그마 유료 요금제 결제할 필요도 없습니다!)

  2. 피그마 혹은 피그잼을 활용해서, 4주차에 구상했던 코드당 개선 아이디어를 구체화하여, IA와 플로우 차트로 그려보세요.

    • TIP 1) 기존 코드당의 IA 구조를 그려보는 것부터 시작해 보세요! 😊
    • TIP 2) 플로우 차트는 사용자가 메인 화면부터 해당 페이지 혹은 기능까지 도달하는 과정을 그려보세요. 이때, 예외 케이스를 생각하는 것을 잊지 마세요!