구축의 기본 절차 (3) 정보 구조와 화면 설계

정보 구조도

- 정보 구조도를 작성할 때는 페이지마다 고유한 화면 아이디를 부여하여, 그 아이디를 기준으로 디자인, 퍼블리싱, 개발이 진행될 수 있도록 한다.

- 정보 설계를 통해 사이트의 정보 구조를 명확히 하고, 이를 기반으로 화면 설계가 진행된다.

 

이건 페이지 단위로 정의한다.

# 물론 정보 구조의 단위가 항목도 있고 영역도 있고 페이지도 있고 메뉴도 있긴 하다.

 

 

방법

정보 구조도는 페이지마다 고유 아이디(화면 ID)를 부여하여, 각 페이지가 명확히 구분되도록 한다.

• 기존에 나와있던 구조를 해체하되, 버리진 않고 범위 내에서 기획자의 재해석으로 더 나은 구조를 만들어주는 것.

메뉴 코드와 화면 아이디를 연계 하여, 직관적으로 알 수 있도록 하는 것이 중요하다.

메뉴명의 앞 두자리를 이용해서 코드를 만든다. 이를 통해 정보 구조를 명확히 한다.

 

요구 사항을 정보 구조도에 매핑하여 요구 사항이 누락되지 않도록 한다. 에이전시 측에서는 요구 사항을 누락하지 않기 위해 정보 구조도와 화면 설계서에서 요구 사항을 추적하는 작업을 함께 진행한다.

 

---

화면 설계

이렇게 만들어진 정보 구조도가 확정되면, 각 페이지에 대한 설계를 진행하게 된다. 이를 '화면 설계'라고 부른다.

자기가 얼마나 할 수 있는지 체크가 중요하다.
정확한 분량을 잡는 것도 사실 어렵다.

 

 

화면 설계가 어려운 이유

• 그림을 그리고 설명을 다는 게 어려울 수도 있겠지만 보다 근본적인 원인은 예측이 안 되는 것. 내가 이걸 언제까지 끝낼 수 있을지 스스로 예측이 안 되는 것이다.

 

샘플 확인

- 화면 설계의 샘플을 보면, 각 페이지의 레이아웃과 UI 특성을 정의하고, 설명을 추가하여 설계가 진행된다.

- 화면 설계는 모바일과 PC에 따라 다르게 구성되며, 실제 사례를 바탕으로 상세하게 설계된다.

 

 

예시 : 마켓컬리

• 메뉴라고 하는 게 있고 페이지라고 하는 게 있는데 마켓컬리는 신상품/베스트/알뜰쇼핑/특가/혜택은 메뉴
• 베스트 목록 페이지, 신상품 목록 페이지 이렇게 부름
• 즉, 페이지만 100개 있으면 이용할 수가 없을 것이다.
  • 혼란스러워서 그렇다.
  • 그렇기 때문에 메뉴라는 추상적 폴더를 만들어서, 페이지라는 파일을 집어넣는다. 이렇게 생각하면 된다.

 

=> 그래서 정보구조에서는 메뉴와 페이지를 하나의 세트로 해서 만들어지는 것이다.

 

 

화면설계서 구성

화면 아이디를 만들 때 메뉴 코드라고 하는 걸 미리 생성

• 메뉴 코드 : 메뉴명에 영문 두 자리를 따서 생성

- 정보 구조에는 요구사항 아이디를 매핑시킨다.

- 하나 이상의 페이지의 요구사항을 매칭시키는 작업을 통해서 요구사항을 추적한다.

 

이건 에이전시 사이드에서 주로 하는 방법인데, 여기서는 하나하나가 전부 돈이라고 생각하기 때문에 더 하는 것

-> 추적을 통해서 이제 누락되지 않도록 하는 그런 과정을 녹여놓는 것

 

- 모바일과 pc는 약간 다르다. pc는 한 페이지에 하나, 모바일은 옆에 붙인다.

최근에는 화면에 실사례를 붙이는 경우들(목데이터)이 점점 생기고 있다.
길이감 등을 한 번에 체감하기 위함이다

 

하나 더 중요한 사항은 화면 아이디.

이 화면 아이디는 아까 우리가 봤던 정보 구조에서 부여했던 그 화면이 여기에 나와 있는 것.

매칭이 돼서 정보 구조와 화면 설계서가 1대 1로 대응이 될 수 있게끔 화면 설계서가 작성이 돼야 한다.

 

 

정리하자면,

• 설계의 시작은 요구 사항 확정이지만,
• 설계의 끝은 화면 설계서의 확정이다.

화면 설계서가 확정되면, 본격적으로 구현 단계로 넘어가게 된다.