구축의 기본 절차 (3) 정보구조와 화면 설계
정보 구조도의 의미
정보 구조도는 단순히 메뉴를 나열하는 문서가 아니라, 사이트 전체를 구성하는 논리적 뼈대를 정의하는 설계 산출물입니다. 특히 워터폴 기반 SI 실무에서는 이 문서가 이후 디자인, 퍼블리싱, 개발 전 과정의 기준점이 되기 때문에, 작성 단계에서부터 구조적 일관성과 추적 가능성을 확보하는 것이 중요합니다. 정보 구조도란 사이트의 정보 체계를 페이지 단위로 정리하고, 각 페이지에 고유한 화면 아이디를 부여하여 전체 구조를 체계화한 문서입니다. 정보 구조의 단위는 항목, 영역, 페이지, 메뉴 등 다양할 수 있으나, 실무에서는 최종적으로 ‘페이지 단위’로 정의하여 관리하는 경우가 많습니다. 이는 실제 구현과 산출물이 결국 화면 단위로 생산되기 때문입니다.
이러한 구조를 페이지 단위로 정의하는 이유는 설계 이후 단계와의 연결성에 있습니다. 정보 설계를 통해 사이트의 전체 구조를 명확히 하고, 그 구조를 기준으로 화면 설계가 진행됩니다. 이때 각 페이지에 부여된 화면 아이디는 디자인, 퍼블리싱, 개발이 동일한 기준을 공유하도록 하는 핵심 식별자 역할을 합니다. 다시 말해, 정보 구조에서 정의된 화면이 이후 모든 산출물에서 동일한 아이디로 관리되어야만, 프로젝트 전반의 정합성이 유지됩니다.
정보구조도는 어떻게 작성하는가?
정보 구조도를 작성하는 방법은 비교적 명확합니다. 우선 각 페이지마다 고유한 화면 아이디를 부여하여 페이지 간 경계를 분명히 합니다. 기존에 존재하던 구조가 있다면 이를 무조건 폐기하는 것이 아니라, 범위 안에서 해체하고 재해석하여 더 나은 구조로 재정립하는 과정이 필요합니다. 기획자의 역할은 기존 체계를 버리는 것이 아니라, 그 안에서 논리를 재구성하는 데 있습니다.
이때 메뉴 코드와 화면 아이디의 연계가 중요한 기준이 됩니다. 메뉴명 앞 두 글자를 활용해 영문 코드로 메뉴 코드를 생성하고, 이를 화면 아이디와 연결함으로써 직관적으로 구조를 파악할 수 있도록 합니다. 예를 들어 메뉴 코드가 화면 아이디의 일부로 반영되면, 해당 화면이 어느 메뉴 체계에 속하는지 한눈에 인지할 수 있습니다. 이는 단순한 표기 규칙을 넘어서, 정보 구조를 명확하게 유지하기 위한 장치라고 보셔야 합니다.
또 하나 중요한 부분은 요구 사항의 매핑입니다. 정보 구조도에는 요구 사항 아이디를 함께 매핑하여, 각 요구 사항이 어느 페이지에 반영되는지 추적할 수 있도록 구성합니다. 하나의 요구 사항이 여러 페이지에 걸쳐 적용될 수도 있기 때문에, 이를 페이지 단위로 연결해 두어야 누락을 방지할 수 있습니다. 특히 에이전시 측에서는 요구 사항 하나하나가 비용과 직결되기 때문에, 정보 구조도와 화면 설계서를 통해 요구 사항을 추적하는 작업을 병행합니다. 이는 단순 관리 차원을 넘어, 범위 통제와 누락 방지를 위한 장치로 이해하시면 됩니다.
다음 단계: 화면 설계
이처럼 정보 구조도가 확정되면, 그 다음 단계가 화면 설계입니다. 화면 설계란 정보 구조에서 정의된 각 페이지를 실제 화면 단위로 구체화하는 작업을 의미합니다. 설계의 출발은 요구 사항 확정이지만, 실질적인 설계의 완성은 화면 설계서 확정에 있습니다. 화면 설계서가 확정되어야만 구현 단계로 넘어갈 수 있기 때문입니다.
화면 설계가 어려운 이유는 단순히 도식화하거나 설명을 작성하는 작업 자체의 난이도 때문만은 아닙니다. 보다 근본적인 어려움은 작업량과 소요 시간을 스스로 예측하기 어렵다는 점에 있습니다. 내가 이 설계를 언제까지 마무리할 수 있을지 판단이 서지 않는 상태가 가장 큰 부담이 됩니다. 따라서 자신의 작업 범위를 점검하고, 분량을 가늠하는 과정이 중요합니다. 그러나 실제로는 그 분량을 정확히 산정하는 것 자체가 쉽지 않습니다.
화면 설계서의 구성
화면 설계서의 구성은 정보 구조와 긴밀히 연결됩니다. 먼저 정보 구조 단계에서 생성한 메뉴 코드와 화면 아이디가 그대로 화면 설계서에 반영되어야 합니다. 정보 구조에서 부여했던 화면 아이디가 화면 설계서 상단에 동일하게 표기되어야 하며, 두 문서는 1대1로 대응되어야 합니다. 그래야만 정보 구조와 화면 설계가 일관되게 관리됩니다.
화면 설계서는 각 페이지의 레이아웃과 UI 특성을 정의하고, 필요한 설명을 덧붙여 구체화하는 방식으로 작성됩니다. 모바일과 PC는 구성 방식이 다소 다르며, PC의 경우 한 페이지에 하나의 설계를 배치하는 경우가 많고, 모바일은 좌우로 이어 붙이는 방식으로 구성하기도 합니다. 최근에는 실제와 유사한 목데이터를 함께 삽입하여, 화면의 길이감이나 콘텐츠 밀도를 한 번에 체감할 수 있도록 설계하는 사례도 증가하고 있습니다.
여기서 메뉴와 페이지의 관계를 이해하는 것이 중요합니다. 예를 들어 마켓컬리를 보면, 신상품, 베스트, 알뜰쇼핑, 특가, 혜택과 같은 항목은 메뉴에 해당합니다. 그 아래에 베스트 목록 페이지, 신상품 목록 페이지와 같은 실제 화면이 존재합니다. 만약 메뉴라는 추상적 분류 없이 페이지가 100개 나열되어 있다면, 사용자는 구조를 이해하기 어렵고 혼란을 겪게 될 것입니다. 따라서 메뉴를 일종의 추상적 폴더로 두고, 그 안에 페이지라는 파일을 배치하는 방식으로 생각하시면 이해가 쉽습니다.
메뉴와 페이지를 명확히 구분하는 게, 결국 핵심이다
결국 정보 구조에서는 메뉴와 페이지를 하나의 세트로 구성하여 관리합니다. 메뉴는 상위 개념이고, 페이지는 그 안에서 실제 구현되는 단위입니다. 이 둘을 분리해서 보지 않고, 연결된 구조로 정의하는 것이 정보 설계의 핵심입니다.
정리해 보면, 설계의 시작은 요구 사항의 확정에서 출발하지만, 설계의 완성은 화면 설계서의 확정에 있습니다. 정보 구조를 통해 페이지 체계를 정의하고, 화면 설계를 통해 이를 구체화하며, 요구 사항을 각 페이지에 매핑하여 누락을 방지합니다. 그리고 화면 설계서가 확정되는 시점에 비로소 프로젝트는 구현 단계로 넘어가게 됩니다. 이 흐름이 워터폴 SI 실무에서 설계 단계가 가지는 기본적인 구조라고 할 수 있겠습니다.