회사 홈페이지 갈아 엎기(2)

기획을 마쳤으면 이제는 설계 단계로...

지난 글에서는 회사 홈페이지 갈아 엎기 '기획(Planning)'에 대한 이야기를 나눴습니다. 웹사이트 작업 전체 과정을 간단히 요약하면, 기획(Planning) ➡ 설계(Architecture) & 디자인 ➡ 구현(테스트)입니다. 그 사이 필요한 과정을 넣고 빼면 됩니다. 세부적으로 만들면 단계가 늘어날테고 간단히 말하면 이 정도입니다. 홈페이지 갈아 엎기 위해 프로젝트 팀이 기획 단계에서 질문하고 고민한 내용은 이렇습니다.

1) 타겟 설정 : To Whom? - "누구에게 보여줄껀데?"

2) 콘텐츠 정리 : What? - "뭘 보여줄껀데?"

3) 컨셉 설정 : How? - "어떻게 보여줄껀데?"

컨셉 설정은 디자인 톤 & 매너를 정하고, 웹-기술 난이도 정도를 논의하는 단계입니다. 웹 & 앱 디자이너와 프론트엔드와 백엔드 개발자가 함께 고민하면 제일 좋습니다. 이 모든 과정이 교과서처럼 정답이 있는 과정이 아니고, 회사마다 인력 구성이 다르니, 각자 형편에 맞게 진행하면 되겠지요. '케바케'라는 말이 있지요. 그야말로 케이스 바이 케이스(때와 상황에 따라 다르다)입니다.

프로젝트 성격에 맞게 팀 구성 인력에 맞게 기획하고 진행하면 됩니다. Photo by Octavian Dan

오늘은 기획에서 설계로 넘어가는 과정에서 작성하는 정보 구조도(Information Architecture) vs 화면 흐름도(Screen Flow chart)에 대해 얘기해보겠습니다. 자세하고 전문적인 내용은 책을 찾거나 검색을 하면 자료가 쏟아 집니다. 참고하시면 되구요. 여기서는 프로젝트팀이 고민한 내용만 간략하게 소개합니다. 회사 홈페이지 갈아 엎기 프로젝트팀은 올해 초 새로 들어온 막내를 위해 공부겸, 정보 구조도나 화면 흐름도를 만들어 보기로 했습니다. 정보 구조도나 화면 흐름도의 핵심은, 웹사이트나 앱에서 무얼 어떻게 보여줄지를 일목요연하게 전달하기 위한 도구입니다.

정보 구조도(Information Architecture)는 한마디로 웹사이트 뼈대를 만드는 작업입니다. 웹이나 앱의 전체 규모를 파악할 수 있고, 짜임새 있는 구축을 위한 설계도라고 생각하면 됩니다. 어떻게 하면 웹이나 앱이 담고 있는 콘텐츠를 직관적으로 접근할 수 있는지를 고민하고, 정보 처리가 쉽도록, 정보 공간을 설계하는 것이지요. 정보 구조도 역시 구성하고 작성하는 방법은 다양합니다.

정보 구조도를 만드는 여러가지 방법이 있습니다. By Daniela at https://flarehub.io/information-architecture/

정보구조도를 만들 때, 웹사이트 관련 이해 관계자들이 갖게 될 필요(needs)와 역학 관계를 잘 파악하는 것이 중요합니다. 기획 단계에서 고민한 내용을 설계 단계에 잘 반영하고, 설계하면서 기획 단계에서 설정한 것들이 구체적으로 구현 가능한 지를 살펴야 합니다. 특별히 사용자(user) 경험과 담을 내용(contents) 사이의 긴장을 잘 유지하면서, 전체 시나리오에 잘 담아내는 게 중요하니까요. 기획자뿐 아니라 디자이너와 개발자가 함께 논의하는 게 중요합니다. 당연히 기획과 설계 단계에서 소통을 잘 해두면, 디자인과 개발 단계에서의 시행 착오를 줄일 수 있습니다. 당연하지만 막상 작업하면 엉기는 경우가 종종 있습니다.

충돌하는 이해 관계자들의 필요를 잘 파악해서 정보 구조도 설계에 반영합니다. by jlight

정보 구조도를 만들면서 서비스 목차를 정리하는 방법은 세 단계 정도를 거칩니다.

1) 모든 정보(콘텐츠)를 나열하고 성격이 흡사한 것끼리 모읍니다. (grouping & labeling the content ➡ card sorting & label your content)

2) 주요 메뉴를 정리합니다.(manu in detail)

3) 정보 체계를 정의하고 사이트 맵핑 한 후 도표로 정리합니다. (define navigation & create site map, present the diagram)

역시 정답은 없습니다.

특별히 주요 메뉴는,

1) 사용자 중심으로(user-friendly)

2) 논리적 연관성 있게(logical)

3) 찾기 쉽도록(easy to navigate), 보기 좋도록(good to see)

정리하면 제일 좋습니다.

기획자와 작업자가 편하게 활용할 수 있도록 만들면 됩니다. by 웹어벤져스

정보 구조도(Information Architecture)와
화면 흐름도(Screen Flow chart) 작성에 정답은 없습니다.

정보 구조도 역시 정답은 없습니다. 정보 구조도는 개발자와 디자이너를 위한 도구일 뿐입니다. 기본적인 내용을 담고 난 후, 개발 일정이나 프로젝트 관련 자료를 일목요연하게 정리하면 됩니다. 특별히 디자이너와 개발자가 함께 이해할 수 있는 방식으로 작업하면 제일 좋습니다. 이후 작업은 정보 구조도를 놓고 소통을 진행하게 될테니까요. 작성 방법은 마인드맵 형식으로 만들어도 되고 엑셀로 정리해도 됩니다.

액셀로 정리해도 되고 마인드맵 형식으로 만들어도 됩니다. by Jlight

회사 홈페이지 갈아 엎기팀은, 정보 구조도가 아니라, 화면 흐름도(Screen Flow chart)를 만들었습니다. 고난도 개발 기술이 들어가는 프로젝트가 아니고, 작업 흐름만 공유하면 되는데다, 시간을 벌기 위해서 그렇게 택했습니다. 간단하게 말해, 정보 구조도는 좀 더 복잡하고 심층적인 설계고, 화면 흐름도(Screen Flow chart)는 화면 기능 단위로 동선을 설계한 것이라고 보면됩니다. 역시 관련 정보나 자료는 검색하면 쏟아지니까, 프로젝트 성격에 맞게, 팀 작업에 적합한 형태를고민해 선택하고 활용하면 됩니다.

정보 구조도와 화면 흐름도 역시 프로젝트 규모와 팀 구성 인력에 맞게 선택하면 됩니다. ©Oomool Network

회사 홈페이지 갈아 엎기 프로젝트팀이 만든 화면 흐름도(Screen Flow chart)입니다. 화면 전체 흐름과 동선, 최종 결과물에 담길 내용을 볼 수 있습니다. 화면 구조도와 화면 흐름도는 각각 장,단점이 있습니다. 프로젝트의 성격에 맞게, 작업 환경에 맞게 선택하면 됩니다. 회사 홈페이지니 더 공을 들여야 겠다 싶기도 하고, 견적을 받아 작업하는 프로젝트와 다르게 긴장감이 떨어지는 것도 사실입니다. 몇몇 과정은 치열하게 물고 늘어지기 보다 생략 혹은 이심전심으로 깔고 가기도 하니까요. 이제 설계를 마쳤으니, 디자인 과정으로 넘어갑니다. 어쩌면 가장 어렵고 반면에 신나는 과정이기도 합니다.

다음 글에서는, 설계 이후 디자인 과정에 대해 얘기해보겠습니다.