안녕하세요, 뱅카우 프로덕트 디자이너 최가영입니다.
많은 사랑을 주셨던 뱅카우의 농가 캐릭터 제작기에 이어 이번에는 디자인 파트의 IA 작업기를 소개하려고 합니다.
여러 차례의 스프린트를 진행하며 추가된 도메인과 화면 코드 공통화하고 정리하는 작업이 필요해
IA(Information Architecture)를 최종적으로 정리하는 작업을 진행하게 됐습니다.
이번 글에서는 뱅카우 디자인 파트가 어떤 과정을 통해 이 작업을 진행하게 되었고
IA 작업이 디자인에 어떻게 활용되는지를 소개하려고 합니다.
뱅카우의 농가 캐릭터 제작기가 궁금하다면
[뱅카우] 농가별 송아지 캐릭터의 의미가 궁금하셨나요?
안녕하세요, 뱅카우 프로덕트 디자이너 최가영입니다. 뱅카우 3.0 업데이트를 진행하면 볼 수 있는다양한 농가 캐릭터에 대해 많은 분들이 궁금해하실 거 같아오늘은 농가별 캐릭터 스토리를
bancow-design.tistory.com
#00 | IA를 사용해야하는 이유
IA(Information Architecture, 정보구조도)는 프로덕트 화면과 메뉴의 정보 구조를 설계 및 정의하는 문서입니다. IA는 주로 서비스 초기 설계 작업에서 진행됩니다. 그러나 서비스 초기 기획과 달리 여러 차례 스프린트를 진행하며 서비스 구조가 많이 변경되었기 때문에 3.0 출시와 함께 IA의 재정리가 필요했습니다.
특히 스프린트 검수 과정에서 IA 작업의 필요성을 크게 느꼈습니다. 검수 진행시 어떤 화면의 수정이 필요한지 개발팀과 빠르고 명확한 커뮤니케이션하기 위해 화면 코드와 화면명을 정리하는 것이 중요했습니다.
IA 작업을 진행하면 프로덕트 유지∙보수시 해당 정보 구조를 토대로 구조화된 설계를 진행할 수 있고, (잘 설계된 정보 구조는 고객들이 원하는 정보를 빠르고 쉽게 찾을 수 있도록 하며, 정보를 해석하는 데 혼란을 겪지 않도록 도와줍니다. 또한, 신규 서비스 개발시에는 도메인을 기준으로 개발 스펙의 우선순위를 부여하고 해당 우선순위에 따라 개발을 진행할 수 있습니다.
IA작업에는 다음 4가지 구체 활동이 필요합니다.
- Organizing·Categorizing (정보를 공통된 특징이나 기준에 따라 범주로 나누고 배열하는 것)
- Searching (사용자들이 방대한 정보 속에서 필요한 정보를 빠르게 찾을 수 있도록 돕는 것)
- Navigating (사용자의 탐색 경로, 즉 이동 방식을 설계하는 것)
- Labeling (보나 콘텐츠를 설명하거나 식별하기 위해 사용하는 용어, 문구, 또는 태그를 정의하는 것)
그리고 위와 같은 작업은 팀에게는 다음과 같은 이점을 제공합니다.
1. 구조별 화면의 연관성과 정보성, 깊이를 시각적으로 파악
2. 프로덕트의 전체 정보 구조를 파악하고 설계
3. 프로덕트 유지・보수시 기존 정보 구조와 흐름을 토대로 사용자가 정보를 빠르게 학습할 수 있도록 설계
4. 개발 검수 진행시 빠르고 정확하게 커뮤니케이션
5. 신규 서비스 개발시 개발의 우선순위 구분
#01 | 구조화하기(Organizating·Categorizing )
먼저 디자인파트는 프론트 파트에 폴더 구조를 요청해 프론트 파트에서 도메인을 어떻게 정의하고 있는지 확인했습니다. 또한 동일한 도메인일 경우 화면 코드와 용어를 어떻게 사용하고 있는지를 확인했습니다. 예를 들어 회원을 프론트파트는 'User' 디자인파트는 'Member'로 사용한다면 커뮤니케이션에 불편한 혼동이 생기게 될테니까요. 최대한 프론트 파트의 폴더 구조와 동일하게 진행하돼 디자인파트는 화면의 플로우와 정보 성격에 좀더 집중해서 도메인을 구분했습니다.
먼저, 디자인 파트는 프론트 파트에 폴더 구조를 요청하여 프론트 파트에서 도메인을 어떻게 정의하고 있는지 확인했습니다. 또한, 동일한 도메인일 경우 화면 코드와 용어를 어떻게 사용하고 있는지 확인이 필요했습니다. 예를 들어, 회원의 경우 같은 회원 정보지만 프론트 파트는 'User', 디자인 파트는 'Member'로 사용한다면 커뮤니케이션에 불편한 혼동이 생길 수 있으니까요. 최대한 프론트 파트의 폴더 구조와 동일하게 진행하되, 디자인 파트는 화면의 플로우와 정보 성격에 좀 더 집중해서 도메인을 구분했습니다.
첫번째로 정보를 최대한 쪼개 분류했고 이 정보들을 성격에 따라 연결해 도메인을 구분했습니다. 현재까진 최종 12개의 도메인이 도출되었어요. 해당 도메인을 기준으로 화면 분류작업을 진행했습니다.
그리고 프론트파트와 리뷰를 진행해 디자인파트에서 도메인을 어떻게 구분하고 화면을 정리했는지 공유하고 논의했어요. 해당 리뷰를 통해 더 통일할 수 있는 부분은 통일하고 프론트 파트와 함께 추가할 하는 부분은 추가했습니다.
#02 | 이동(Flow)를 기준으로 Depth 부여하기
디자인파트는 각 도메인마다 시작하는 숫자코드를 다르게 부여했습니다.. 예를 들어 홈은 1.0.0 '1'로 시작하고 송아지는 4.0.0 '4'로 시작하게 됩니다. 또한 이동(Flow)를 기준으로 Depth를 나누고 해당 플로우에 따라 순서대로 화면코드를 부여했습니다. 기본적으로 3 Depth 구조로 이루어졌으며 일부 4 Depth 화면은 4자리로 화면 코드를 부여했습니다. 현재는 최대 4depth까지만 구성되어 있습니다.
화면코드의 숫자를 알면 사용자가 해당 화면까지 진입하기까지 몇 개의 뎁스를 지나야하는지 파악할 수 있습니다. 일반적으로 6개의 Depth가 넘어가지 않는 것이 좋은 UX라고 봅니다. 정보를 찾기까지 너무 많은 화면을 거쳐야한다면 사용자의 피로도가 높아지고 정보를 찾기 어려워집니다.
#03 | 화면 형태 구분하기
IA에서 각 화면의 형태를 구분하기 위해 총 8개의 분류를 만들었습니다. 이를 통해 IA만 보고도 화면의 형태를 쉽게 파악할 수 있게 되었습니다.
구체적으로 로딩 스피너, 프로그레스바, 스켈레톤과 같이 화면 로딩을 위해 사용되는 화면은 Suspense로 통일했고 생체인증과 같이 기기의 기본 시스템을 활용해 진행되는 플로우(화면)은 System으로 구분했어요. 이외에도 화면, 토스트, 모달, 바텀시트, 랜딩 페이지 등 기본적으로 UI 컴포넌트를 기준으로 진행했습니다.
#04 | 라벨링(Labeling) 붙이기
마지막으로 화면 코드와 함께 화면명을 부여합니다. 화면명은 몇가지 규칙을 세워 이후에도 일관성과 규칙성을 갖춘 화면명을 부여하도록 합니다. 그리고 한번 사용한 화면 코드는 다른 화면에서 재활용하지 않습니다.
1. 영문 코드는 대문자 3자리로 통일하기
- COM, MEM, HOM…
2. 숫자 코드는 뎁스와 플로우를 반영하기
- 공통 화면은 숫자 코드 없음, 대신 컴포넌트로 구분하기
- 기본 화면을 0으로 시작하기
- X : 1 depth
- Y : 2 depth
- Z : 3 depth
3. 화면명은 한글로만 표기하기
4. 컴포넌트와 케이스의 변화는 반영하지 않기
5. 콘텐츠에 따라 다양하게 디자인 되는 바텀시트는 COM 공통으로 보지 않음
6. 한번 쓴 숫자 코드는 재활용 하지 않기
#05 | IA 작업 회고
해당 작업은 총 일주일 정도 소요되었는데요. 아무래도 메인 업무 진행 후에 IA 작업을 진행하다 보니 작업 완료까지 생각보다 시간이 좀더 소요되었어요. 또한 해당 작업을 진행하며 피그마의 레이어명 전체 수정도 함께 진행해야겠다는 욕심이 생겨서 더 오래걸린 것 같네요. 피그마 전체 레이어명도 통일해 수정 진행했으며 IA의 화면명과 피그마 Link 연결해 정리를 진행했습니다. IA에서 해당 화면 UI를 확인하고 싶을 경우 바로 피그마로 이동해 해당 화면 / 섹션을 명확히 확인할 수 있도록 작업했습니다.
IA를 통해 도메인을 기반으로 분류하니 스프린트 진행시 스펙 조정이 용이해졌으며 검수 / 수정 진행시 개발 파트와의 커뮤니케이션이 훨씬 수월해졌습니다. 해당 작업을 시작할때는 검수 시트에 화면 코드를 연결해서 검수를 진행하길 기대했는데요. 최근 진행한 스프린트에서는 해당 작업을 진행할 정도로 화면이 많지 않아 아직 진행해본적은 없습니다. 하지만 앞으로의 스프린트에서 해당 작업 문화가 정착되면 개발파트에서 화면을 더 명확하게 파악할 수 있을 것 같네요.
#06 | 다음편 예고
다음편에는 뱅카우의 일러스트 디자인 시스템 제작기로 찾아오겠습니다.
앞으로 출시될 상품의 투자팁을 더 쉽게 이해할 수 있도록 다양한 일러스트를 제작했는데요.
해당 일러스트를 제작한 디자인파트 현우님의 일러스트 디자인 시스템 구축기를 소개할 예정이니 많은 기대 부탁드려요!
'뱅카우' 카테고리의 다른 글
| 투자 신청율 9배 증가시킨 투자 신청 UX/UI 개선기 (5) | 2024.09.20 |
|---|---|
| [뱅카우] 전환율 400% 이상 달성시킨 2D 그래픽 디자인 시스템 제작기 (42) | 2024.07.23 |
| [뱅카우] 농가별 송아지 캐릭터의 의미가 궁금하셨나요? (52) | 2024.04.24 |
| [뱅카우] 리브랜딩 : 사랑으로 성장하는 송아지 (4) | 2024.03.21 |
| [뱅카우] 한 눈에 사랑받는 뱅카우 캐릭터 제작기 (1) | 2024.02.02 |