정보구조 설계, 화면 설계 실습 주안점

로디 서비스 아카데미의 서비스기획트레이닝과 Udemy의 온라인 강의 내용을 종합하여 정리한 내용입니다.

화면 설계는 기반 요소 위에서 시작된다

화면 설계는 단순히 UI를 그리는 작업이 아니다. 화면은 독립적으로 존재하는 산출물이 아니라, 여러 기반 요소가 먼저 정리된 이후에야 비로소 설계가 가능해진다. 그 기반 요소에는 서비스 정책, 요구사항, 사용성, 정보 설계, 그리고 IT 인프라가 포함된다.

서비스 정책은 시스템이 어떤 원칙과 기준으로 운영되는지를 정의한다. 예외 처리, 승인 기준, 노출 조건과 같은 운영 규칙이 여기에 포함된다. 요구사항은 반드시 구현되어야 할 핵심 기능을 의미하며, 기능의 범위와 우선순위를 결정한다. 사용성은 사용자가 화면을 얼마나 쉽고 직관적으로 사용할 수 있는지를 판단하는 기준이다. 정보 설계는 화면에 어떤 정보가 어떤 흐름으로 배치되는지를 구조적으로 정리하는 과정이다. IT 인프라는 서비스가 실제로 동작하는 기술적 환경을 뜻한다.

이 다섯 요소 중 하나라도 정리되지 않으면 설계는 흔들린다. 화면 설계서는 겉으로는 시각 자료처럼 보이지만, 그 기초는 정책과 구조 위에 놓여 있다. 기반이 모호하면 화면은 예쁘게 보일 수는 있어도 일관성은 유지되지 않는다.

실습은 일부 요소를 단순화하되 구조 이해는 선행되어야 한다

실습 환경에서는 인프라를 ‘앱으로 만든다’는 전제로 단순화한다. 정책은 기존 시스템에서 큰 변화가 없는 한 유지한다고 가정한다. 요구사항은 ‘미니 앱을 만드는 것 자체’로 설정하고, 사용성은 학습자가 직접 레이아웃과 내비게이션을 설계하는 방식으로 반영한다.

이처럼 일부 요소를 단순화하는 이유는 학습의 효율성과 집중도를 높이기 위함이다. 그러나 단순화했다고 해서 기반 요소의 이해가 생략되는 것은 아니다. 오히려 구조를 명확히 이해한 상태에서 단순화해야 한다. 기반을 이해하지 못하면 설계는 형태만 남고, 논리는 사라진다.

정보 설계는 화면 설계 이전에 반드시 수행되어야 한다

정보 설계는 화면을 그리기 전에 서비스의 전체 틀을 먼저 정리하는 작업이다. 전체 서비스가 몇 개의 화면으로 구성되는지 구조화해야 페이지 수와 업무량을 가늠할 수 있다. 화면 수가 정리되지 않으면 일정도 잡을 수 없고, 역할 분담도 명확해지지 않는다.

정보 구조를 먼저 잡으면 일정 관리가 가능해지고, 담당자 배치와 작업 우선순위도 자연스럽게 정리된다. 반대로 구조 없이 화면부터 그리면 중간에 빠진 화면이 발견되고, 수정과 추가가 반복된다. 이 과정에서 공수는 증가하고 일정은 흔들린다. 정보 설계가 익숙하지 않다면 기존 자료를 반복해서 보며 구조를 따라가는 과정이 필요하다. 구조 이해 없이 설계에 들어가는 것은 설계가 아니라 시행착오에 가깝다.

정보 구조는 다섯 개의 기본 그룹으로 정리한다

서비스 구조는 다섯 개의 정보 그룹을 기준으로 정리한다. 이 틀은 대부분의 서비스에 적용 가능한 기본 구조다.

메인(Main)은 서비스의 첫 화면이며, 사용자가 가장 먼저 접하는 진입점이다. 프로덕트(Product)는 상품이나 콘텐츠처럼 서비스의 핵심 기능이 위치하는 영역이다. 서치(Search)는 주문, 예약, 결제처럼 사용자의 행동이 발생하는 흐름을 포함한다. 유틸리티(Utility)는 로그인, 회원가입, 마이페이지, 고객센터 등 기본 기능을 담당한다. 컴퍼니(Company)는 회사 소개, 이용약관, 개인정보처리방침과 같은 정보성 페이지를 포함한다. 이 다섯 그룹으로 전체 구조를 나누면 화면 범위가 명확해진다. 어떤 화면이 어디에 속하는지 판단 기준이 생기고, 설계 범위가 정리된다.

 

Main 영역은 서비스의 첫 인상을 결정한다

메인 페이지는 서비스의 핵심 진입점이다. 앱 실행 시 가장 먼저 노출되는 화면이므로 정보 배치와 구조가 중요하다.

• 메인 팝업은 로그인 유도, 이벤트 안내, 공지사항 전달과 같은 역할을 한다. 항상 노출되지 않더라도 구조상 포함되는 요소다.
• 스플래시 페이지는 앱 최초 실행 시 등장하는 브랜드 로딩 화면이다. 브랜드 정체성을 전달하고 사용자에게 안정감을 제공한다.
• 권한 설정 화면은 위치 정보, 카메라, 마이크와 같은 디바이스 접근 권한을 요청하는 화면이다. 필수 권한과 선택 권한을 구분하여 안내해야 한다.
• 코치 마크는 최초 설치 이후 기능을 안내하는 인트로 가이드다. 특정 버튼이나 영역을 설명하며 사용자 온보딩을 돕는다.

이 모든 요소는 메인 흐름의 일부이며, 초기 사용자 경험을 결정하는 핵심 구성이다.

Product 영역은 상품 구조를 기준으로 설계한다

Product 영역은 상품 카테고리, 목록, 상세, 기획전, 이벤트, 할인 판매, 타임딜 등으로 구성된다. 들여쓰기는 구조상의 뎁스를 의미한다.

• 상품 카테고리 메뉴는 네비게이션 역할이므로 실제 페이지가 아니다. 따라서 0으로 표기한다.
• 상품 목록과 상품 상세는 실질 설계 대상이므로 1로 카운팅한다.
• 상세 내부의 기본정보, 이용후기, 배송안내, 취소환불 탭은 디자인 단위에 따라 페이지 분리 여부를 판단한다.
• 기획전과 이벤트는 목록과 상세로 나누어 구성한다. 할인 판매에서 기존 카테고리 페이지를 재사용하는 경우에는 중복으로 보고 0으로 처리한다.
• 타임딜은 일반 목록과 달리 시간 정보가 포함되므로 별도 설계가 필요하다. 타임딜 상세 역시 일반 상품 상세와 구조가 다르면 새로 정의해야 한다.

핵심은 단순하다. 메뉴는 0, 새로 설계해야 하는 화면은 1이다. 재사용은 중복 0으로 처리한다. 이 기준이 전체 분량 산정의 기본 원칙이다.

Search 영역은 결과 유형에 따라 분리한다

검색 메뉴는 단순 진입용이므로 페이지로 보지 않는다. 따라서 0이다.

• 검색창 페이지는 사용자 입력 UI가 존재하므로 별도 설계 대상이며 1로 계산한다.
• 검색 결과는 그리드형, 썸네일형, 결과 없음 화면으로 나뉜다. 디자인이 다르면 각각 별도 설계로 본다. 상품 목록과 구조가 유사하더라도 디자인이 다르면 분리한다.

결과 유형을 미리 정의해두면 디자인 공수가 안정된다.

 

Utility 영역은 사용자 계정 흐름을 포함한다

• 로그인 메뉴는 네비게이션 항목이므로 0이다.
• 실제 로그인 입력 화면은 1이다.
• 아이디 찾기와 패스워드 찾기는 별도 화면이므로 각각 1로 본다.
• 외부 인증 모듈은 직접 제작하지 않으므로 외부 0으로 처리한다.
• 회원가입은 독립 진입 메뉴다.
• 회원가입 메인, 기본 정보 입력, 추가 정보 입력, 배송지 입력, 가입 완료 화면은 각각 1로 카운팅한다.
• 추천인 아이디 찾기 팝업과 결과 화면도 별도 설계 대상이다.
• 마이페이지는 상위 메뉴이므로 0이다.
• 마이홈, 구매이력 목록과 상세, 취소환불 목록과 상세, 마일리지 내역은 실제 화면이므로 1이다.

주문 흐름은 장바구니 이후 단계로 정리한다

• 장바구니 목록은 1이다.
• 주문서 페이지와 주문 완료 페이지도 각각 1이다.
• 결제 팝업은 외부 시스템과 연결되더라도 설계 대상이면 1이다.
• 무통장 결제 팝업 역시 별도 화면이므로 1이다.
• 배송지 관리 메뉴는 네비게이션이므로 0이다.
• 배송지 목록, 상세, 등록 페이지는 각각 1이다.

Company 영역은 법적 필수 페이지를 포함한다

회사 소개, 이용약관, 개인정보처리방침은 법적으로 반드시 존재해야 하는 페이지다. 따라서 구조상 반드시 포함되어야 한다.

 

설계 분량은 구조 기준으로 산정한다

메뉴는 0이다. 기존 페이지 재사용은 중복 0이다. 새로 설계해야 하는 화면만 1로 계산한다. 이 기준을 일관되게 적용하면 전체 페이지 수가 명확해진다. 페이지 수가 명확해지면 일정과 역할 분담이 가능해진다.

결국 화면 설계는 구조를 먼저 세우고, 그 위에서 분량을 계산한 뒤, 마지막에 화면을 그리는 작업이다. 구조 없이 시작한 설계는 반복 수정으로 이어진다. 구조가 명확하면 설계는 체계적으로 완성된다.