우물 홈페이지 싹 새로 프로젝트➋ : 설계

 

웹사이트 제작 '기획(Planning)' 단계 다음은 '설계(Architecture)' 과정입니다. 

 

 

 

지난 글에서는

우물 홈페이지 싹 새로 프로젝트

'기획'에 대한 이야기를 나눴습니다.

 

웹사이트 전체 작업 과정을 요약하면,

기획(Planning) ➡ 설계(Architecture) & 디자인 ➡ 구현(테스트)입니다. 

그 과정에서 저희 프로젝트 팀이 기획 단계에서 질문하고 고민한 내용입니다.  

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

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

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

 

컨셉은 디자인의 톤 & 매너를 설정하고,

웹-기술에 대한 정도를 논의하는 단계입니다. 

웹 & 앱 디자이너와 프론트엔드와 백엔드 개발자가

같이 고민하면 제일 좋은 과정입니다. 

이 모든 과정이 교과서처럼 정답이 있는 과정이 아닙니다.

회사마다 인력 구성이 다르니,

각자 형편에 맞게 진행하면 되겠지요. 

 

 

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

 

 

 

오늘은 기획에서 디자인으로 넘어가는 과정에서 작성하는

정보 구조도(Information Architecture) vs 화면 흐름도(Screen Flow chart)에 대해 

얘기해보겠습니다.

 

우물 홈페이지 싹 새로 프로젝트팀도 공부겸,

정보 구조도나 화면 흐름도를 만들어 보기로 했습니다. 

정보 구조도나 화면 흐름도의 핵심은,

웹사이트나 앱에서 무얼 어떻게 보여줄지를

일목요연하게 전달하기 위한 도구입니다.

 

 

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

 

 

정보 구조도(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)는 화면 기능 단위로 동선을 설계한 것이라고 보면됩니다.

관련 정보나 자료는 검색하면 쏟아지니까,

프로젝트 성격에 맞게, 팀 작업에 적합한 형태를

선택하고 결정하면 됩니다. 

 

 

 

 

 

 

우물 홈페이지 프로젝트팀이 만든

화면 흐름도(Screen Flow chart)입니다.

화면 전체 흐름과 동선,

최종 결과물에 담길 내용을 볼 수 있습니다. 

화면 구조도와 화면 흐름도 역시

각각 장,단점이 있습니다. 

프로젝트의 성격에 맞게, 작업 환경에 맞게 선택하면 됩니다. 

 

이제 설계를 마쳤으니,

디자인 과정으로 넘어갑니다.

어쩌면 가장 어렵고

반면에 신나는 과정이기도 합니다. 

 

다음 글에서는,

설계 이후 디자인 과정에 대해

얘기해보겠습니다.