#16 서비스의 구조와 동선 설계, IA
실질 설계의 시작이 되는 Information Architecture
이제 주제도 데스크 리서치를 통해 견고해졌고, 뭘 만들어야 할지도 어피니티 다이어그램을 통해 고도화했습니다. 그리고 누굴 타겟으로 할지 그 타겟의 동선이 어떨지에 대한 전략 구성도 모두 마쳤어요. 이제부터는 설계에 들어가야죠.
IA가 필요한 이유부터 알아봅시다
Information Architecture 예시먼저 IA는 이렇게 생긴 친구입니다.
풀네임인 Information Architecture를 그대로 풀이하면 정보 건축을 말하는데, 실제로 이 IA를 통해 우리는 우리 서비스 안에 어떤 정보들이 구조화되어 있는지를 알 수 있게 합니다.
구성 원리는 단순한데, 연결되는 자잘한 팝업 같은 부분들은 생략하고 화면(Screen) 단위로 박스를 그려낸다고 생각하면 쉽습니다.
그렇게 되면 우리는 서비스의 전반적인 구조와 함께 어떤 기능들을 담고 있는지를 알게 되겠죠. 그리고 저 단계들을 연결하는 선은 사용자가 접근 가능한 루트를 의미하므로 저 선이 연결된 순서에 따라 특정 화면에 도달하기 위한 사용자의 동선도 예측 가능합니다.
그리고 IA의 중요한 효과 중에 하나는 여러 팀이 협업을 할 때 우리가 진행하려는 프로젝트의 규모를 짐작케 하기에도 큰 도움이 된다는 사실입니다. 예를 들어 우리가 개발팀과 회의를 하고 있다고 생각해 봅시다.
'개발 팀장님 우리 이번에 이런 서비스 모듈을 만들어서 출시해야 하는데 개괄적인 구조를 좀 짜 봤어요, 세부설계 들어가기 전에 한번 같이 검토 좀 해주시겠어요?'
'어? 뭐여 뭐 이렇게 커, 이거 데드라인이 언제인데? 그리고 채팅이 생겼네? 우리 사용하던 채팅 모듈 없는데? 어떻게 뭐 라이브러리 사? 아니면 쌩으로 구축할 거야?'
자, 이 대화를 통해 우리는 두 가지를 점검할 수 있게 되었습니다. 회사의 업무란 대개 로드맵에 맞는 일정을 가지고 있어요, 그리고 아무리 좋은 제품과 서비스를 만들고자 해도 우리가 가진 자원(Resource)을 초과하는 업무는 추진 불가합니다. 워라밸이 중요한 시대에 이러면 큰일 나요...
일단 사이즈를 보고 나서 개발 책임자는 개괄적인 범위를 고려하고 일정의 타당성을 맞추려 할 겁니다. 그리고 디테일한 기획에 들어가기에 앞서 일정을 협의하고 우선순위가 낮은 기능들은 배제해서 요구되는 데드라인에 맞출 수 있도록 스펙을 조정할 기회를 가질 수 있는 협의의 근거가 됩니다.
물론 개발자 중에는 나머지 설계서 안 들고 오면 검토 못해준다는 사람들도 있지만 이건 조직마다 케이스 바이 케이스니 그러려니 합시다.
아무튼 그리고 두 번째, 우리가 기존에 사용하지 않았던 기능이나 보유하지 않았던 기술에 대해서도 확인이 가능해요. 그렇다면 빠르게 다른 대체 외부 서비스를 사 와서 연동하던가(예산을 편성하던가) 직접 구축하려면 그만한 일정을 확보하던지 등의 추가 요소들도 판별하기가 쉬워집니다.
그렇기에 IA는 서비스를 이용할 고객에게는 내러티브 한 동선을 제공하기 위해서라도, 내부에는 효율적인 협업(Co-Work)을 위한 기준이 되기도 하기에 중요할 수밖에 없습니다.
IA를 그리면서 연구한 티를 내는 법
이런 중요한 역할을 하는 IA가 정말 어렵다면 가장 쉬운 방법은 다른 앱을 켜서 작성하는 연습을 해보는 게 좋습니다. 그리고 내 주제와 유사한 벤치마킹 대상이 있다면 그 앱을 그대로 이용해 보면서 IA를 따라 그려놓고 내 서비스에 맞게 튜닝하는 것도 방법이고요.
하지만 우리는 늘 그랬듯, 기본 예시와 같은 간결한 결과만을 제시할 경우 늘 평가관의 기대에는 2% 미치지 못한다는 사실을 이제 잘 알고 있을 겁니다. 그러니 IA에서도 '내가 생각할 줄 아는 놈이다! 연구를 열심히 했다!'라는 티를 내는 비법
마켓컬리의 IA의 일부전부 그리지는 못했지만 마켓컬리의 IA를 서비스를 보면서 본떠 그려봤습니다. 지금 앱을 켜서 어떤 화면의 전환을 뎁스로 나눠 그렸는지 한번 직접 확인해 보세요. 그럼 그린 원리를 더욱 쉽게 이해할 수 있을 겁니다.
저는 이 IA 구조 자체는 여러분도 조금만 노력하면 금세 그릴 수 있다고 생각하는데 여기서 평가관을 감동시키는 킥은 저 빨간 점선과 설명이라고 생각해도 좋을 거 같아요. 만약 저 빨간 선이 없다면 사용자는 만약 '제품 상세' 화면에서 장바구니로 가려거든 백(또는 업) 버튼을 눌러 최상위 화면에 나가서 그다음에 '장바구니'버튼을 눌러 화면에 진입해야 한다는 이야기가 되거든요. 이거 뭐 더러워서 결제하겠습니까?
하지만 짜잔, 저런 사용자 시나리오에 필요한 유연한 가로 동선을 여러분이 배치해놓고 이게 어떨 때 작동하는 시나리오인지를 명시해 둔다면? 여기부터는 다시 평가관은 여러분을 그저 방법론만 베끼기 급급한 친구가 아니라 진짜 사용자를 고민하는 인재로 눈여겨볼지도 몰라요.
그럼 이제 IA를 그릴 준비가 되었겠죠?
다음 글은 대체 화면을 어떻게 나눠야 할지 모르겠는 여러분을 위해 구조를 설계할 때의 나름의 팁을 알려드릴게요.
