올바른 아웃소싱 Step 1
IT outsourcing solution 대표가 설명하는 아웃소싱 기초
Step 1. 아웃소싱의 기초 IA 문서 작성하기
성공적인 아웃소싱을 위해 가장 기본이 되는 것은 올바른 기획 문서를 만드는 일입니다. 그 첫 번째가 바로 IA(정보구조도)입니다. IA는 표를 기반으로 정리하기도 하며, 블록 형태(트리 구조라고도 합니다)로 정리하기도 합니다. 표를 기반으로 정리하면 좀 더 상세한 설명과 논의되었던 내용, 형태 구분 등 좀 더 디테일한 정보를 구조화할 수 있고 블록 형태로 작성하면 한눈에 사이트 구조를 파악하기 쉬워 둘 다 작업하는 것이 가장 좋습니다.
IA는 왜 중요할까?
IA는 개발자와 디자이너의 기본 도구입니다. 우리가 디자이너나 개발자들과 얘기할 때 소통이 잘 되지 않는다고 느끼거나 결과물이 내 생각과 다르다면 기본적으로 IA부터 다르게 생각했을 가능성이 큽니다. 기획자들은 사업계획서를 쓰고 웹 기획서라 하여 사이트의 기능과 내용을 설명하는 글을 쓰겠지만 이 글을 읽는 디자이너와 개발자는 서로 다른 생각을 하기 마련입니다. 이것이 글로 된 기획문서의 한계입니다. 그래서 우리는 누구나 쉽게 이해할 수 있고 명확한 규칙 속에서 구분된 IA 정보 구조도를 만들어야 합니다. IA를 통해 누구나 서비스의 전반적인 구조를 그릴 수 있어야 하는 것이죠. 서비스(사이트)의 기본 구조가 잡히고 나면 와이어프레임을 통해 기본 뼈대를 만들고 디자인한 후 프로토타입을 통해 결과물을 예상할 수 있습니다. 이렇게 되면 아웃소싱으로 개발과정을 넘겼을 때, 보다 더 정확한 결과물을 기대할 수 있습니다.
1) 액셀, 표를 기반으로 한 IA 예시
IA 정보구조도 예시IA 정보구조도에 명확히 표준화된 양식이 있는 것은 아닙니다. Depth를 구분하고 페이지 번호와 페이지별 내용, 페이지 정보 등을 표현할 수 있다면 어떤 양식으로 만들어도 상관이 없습니다. 다만 처음 만드시는 분들이 사용하시기 쉽게 IA 기본 양식을 하나 공유해드리도록 하겠습니다.
IA에 대해 설명을 드리다 보면 Depth를 작성하는 법을 헷갈려하시는 경우가 많습니다. 아래 간단히 Depth에 대한 개념을 쉽게 이해해 IA를 만드는데 조금이나마 도움이 될 수 있도록 정리해둔 내용입니다.
Depth 개념 잡기
Depth를 나눌 때 어려워하시는 경우가 많은데 간단히 생각하면 대분류와 소분류들이라고 생각하면 됩니다. 두 가지의 예시를 들어보려 합니다. 첫 번째로 강아지를 생각해볼까요? 강아지를 크게 얼굴과 몸통으로 나눌 수 있을 것입니다. 이걸 우린 1 Depth로 구분했다고 생각하면 됩니다. 그럼 얼굴엔 뭐가 있을까요? 눈, 코, 입귀 이런 게 있겠죠? 이를 2 Depth로 구분할 수 있습니다. 이후에 눈과 귀는 왼쪽 눈, 왼쪽 귀와 같이 한번 더 구분할 수 있을 텐데요. 이걸 3 Depth로 얘기할 수 있습니다.
두 번째는 메뉴 구조도를 예시로 설명할 수 있습니다. Depth를 구분하기 어렵다면 대표적인 웹사이트들의 메뉴 구조도를 떠올리면 쉽습니다. 카카오 홈페이지를 예로 들어볼까요?
카카오 홈페이지 : https://www.kakaocorp.com/page/
카카오 홈페이지에 들어가면 상단에 메뉴가 나옵니다. 이걸 1 depth라고 생각하면 됩니다.
"카카오 | 뉴스 | 기술과 서비스 | 약속과 책임" 이렇게 나와있는 부분이 1 depth가 됩니다.
카카오 홈페이지이제 2 depth를 확인해볼 텐데요. 카카오라는 메뉴에 마우스를 가져다 되면 아래 이미지처럼 "카카오 문화|공동체|히스토리"를 확인하실 수 있을 겁니다. 이게 바로 2 depth가 된다고 생각하시면 됩니다.
이렇게 depth를 구분해서 IA를 작성했다면 페이지 정의와 페이지 형식(정보)을 기입하고 페이지 세부내용을 추가로 기입해두는 게 가장 좋습니다. 페이지 세부내용은 섹션을 통해 구분할 수 있습니다. 특정 페이지는 섹션들로 나뉘어 구성되어 있는데요.
섹션 구분하기
섹션은 페이지의 세부 구성이라고 생각하면 된다. 이미지를 보면 쉽게 이해할 수 있을 거라 생각한다.
지금 제가 구분해 둔 것처럼 "오늘의 특가" , " MD 추천 클래스"는 다른 섹션이라고 생각하면 됩니다. 따라서 섹션 1에 배너가 들어가고 다음 섹션에 오늘의 특가가 들어간다면 그다음 섹션으로 MD 추천 클래스가 들어가는 것이죠. 액셀 형태의 IA를 작성 시 페이지 상세에 섹션별 내용을 구분해 놓는다면 사이트 구조와 내용을 한 번에 정리할 수 있습니다.
2) 블록을 이용한 IA (트리구조)
블록 형태로 IA를 만드는 방법은 다양하지만 구글 다이어그램 또는 PPT를 추천합니다. 구글 다이어그램을 이용하면 아래와 같이 이미 작성된 양식에서 쉽게 만들 수 있습니다. 구글 다이어그램은 구글 로그인 후 드라이브에서 이용하실 수 있으며, 아래 사이트를 참고해주세요.
https://chrome.google.com/webstore/detail/diagramsnet/onlkggianjhjenigcpigpjehhpplldkc?hl=ko
작성 방법은 위의 액셀을 이용한 IA와 유사합니다. Depth 가 깊어질수록 블록을 아래에 계속 추가하는 형태로 작성하면 됩니다. PPT 형태의 양식은 아래 링크를 통해 다운로드하시길 바랍니다.
IA를 완성했다면 이제 Step2로 넘어가야 합니다. 작성된 IA를 기반으로 와이어프레임을 짜야하는데요. 와이어프레임이 나온 후에야 디자인 레퍼런스를 찾고 디자이너에게 디자인을 의뢰할 수 있습니다. 와이어프레임을 짜는 방법도 다양하고 템플릿도 많기 때문에 디자인을 아예 해보지 않았던 기획자도 쉽고 빠르게 만들 수 있으니 꼭 와이어프레임 가이드라인도 참고하시기 바랍니다.
