📑 이번 주 학습 내용

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

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

💫 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. 피그마의 기초 사용 방법을 모른다면, 아래 강의를 참고하며 피그마 사용 방법을 익혀주세요.

    피그마 입문 인프런 오리지널 2024

    (섹션 3의 38강까지만 들어도 충분해요! 어려운 툴이 아니니, 강의에 의존하기 보다는 직접 이것저것 만져보며 기능을 익히는 편이 더 좋아요.)

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

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