화면 설계를 위한 기반 요소와 정보구조도 실습 예시

화면 설계를 위한 기반 요소와 실습 적용 방식

 

 

화면 설계는 단순히 UI를 꾸미는 작업이 아니라, 여러 가지 기반 요소들이 먼저 정리된 상태에서 비로소 제대로 수행될 수 있다. 이러한 기반 요소에는 서비스 정책, 요구사항, 사용성, 정보 설계, 그리고 IT 인프라(HW, SW)가 포함된다. 이들 요소는 화면 설계의 토대가 되며, 어느 하나라도 누락되거나 정리되지 않으면 완성도 높은 화면 설계서를 만들기 어렵다.

• 서비스 정책은 시스템이 어떤 방식으로 운영되는지를 정의하고,
• 요구사항은 반드시 구현되어야 할 핵심 기능들을 의미하며,
• 사용성은 사용자가 화면을 얼마나 쉽고 직관적으로 사용할 수 있는지를 판단하는 기준이 된다.
• 정보 설계는 화면에 어떤 정보가 어떤 흐름으로 배치될지를 구조적으로 설계하는 과정이며,
• IT 인프라는 서비스가 운영될 기술적 환경을 의미한다.

 

실습의 전제

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

결론적으로, 실습의 효율성과 집중도를 위해 일부 요소는 단순화되지만, 화면 설계를 구성하는 기반 요소들에 대한 이해는 반드시 선행되어야 하며, 그 위에서 진정한 화면 설계 작업이 가능하다고 할 수 있다.

 

정보 설계가 중요한 이유

- 정보 설계는 본격적인 화면 설계 전에 서비스의 전체 틀을 잡는 과정이다.

- 전체 서비스가 얼마나 되는지, 어떤 화면이 필요한지 구조화해야 페이지 수와 업무량이 가늠된다.

- 이를 통해 일정 관리, 역할 분담, 작업 우선순위 정리가 가능하다.

- 이 작업이 익숙하지 않다면, 수업 녹화본을 다시 보며 차근차근 따라가는 것이 좋다.

 

정보 구조 그룹 – 5가지 기본 틀

정보 구조도는 어떤 서비스든 다음의 5가지 정보 그룹을 기반으로 만든다.

이건 거의 공식처럼 외워두면 된다.

 

1. 메인(Main)

- 서비스의 첫 화면, 홈 화면에 해당

 

2. 프로덕트 그룹(Product)

- 상품, 콘텐츠 등 실제 주요 기능과 연결된 영역

 

3. Search 그룹(Process)

- 주문, 예약, 결제 등 사용자 행동이 발생하는 플로우

 

4. 유틸리티 그룹(Utility)

- 로그인, 회원가입, 마이페이지, 고객센터 등 기본 기능

 

5. 컴퍼니 그룹(Company)

- 회사 소개, 이용약관, 개인정보처리방침 등 정보성 페이지

 

 

마켓컬리 사례로 보는 정보구조

Main 영역

1. 메인 페이지

- 서비스의 핵심 진입점

- 앱 실행 시 가장 먼저 보이는 홈 화면

 

2. 메인 팝업

- 로그인 유도, 이벤트, 공지사항 등 사용자에게 전달할 핵심 정보 노출

- 당장 보이지 않더라도 기본적으로 포함되는 요소

 

3. 스플래시 페이지 (Splash Page)

- 앱 최초 실행 시 등장하는 브랜드 로딩 화면

- 서비스 정체성과 신뢰를 전달하는 역할

- 유사 서비스와 구분되는 시각적 기준이 되며, 사용자에게 안정감을 줌

 

4. 권한 설정 화면

- 앱 설치 또는 최초 실행 시 등장

- 위치 정보, 페이스 아이디, 카메라/마이크 등 디바이스 하드웨어 사용 권한 요청

- 필수/선택 권한을 구분해 사용자에게 명확히 안내할 수 있어야 함

 

5. 코치 마크 (Coach Mark)

앱 최초 설치 후 유저에게 기능을 안내하는 인트로 가이드

특정 버튼이나 영역에 화살표, 말풍선 등으로 설명 제공

“이 버튼을 누르면 장바구니로 이동해요”처럼 직관적 안내 가능

사용자 온보딩(User Onboarding)에 유용한 기능

 

Product 영역

1. 상품 카테고리

• 상품 카테고리 메뉴 (0)
  • 상품 목록 페이지 (1)
    • 상품 상세 페이지 (1)
      • 기본정보 탭
      • 이용후기 탭
        • 후기 등록 (1)
        • 후기 상세 (1)
      • 배송안내 탭
      • 취소환불 탭

 

2. 기획전

• 기획전 메뉴 (0)
  • 기획전 목록 페이지 (1)
    • 기획전 상세 페이지 (1)
      • (상품 상세로 연결되는 구조지만 별도 페이지는 아님)

 

3. 이벤트

• 이벤트 메뉴 (0)
  • 이벤트 목록 페이지 (1)
    • 이벤트 상세 페이지 (1)
      • 할인쿠폰 다운로드 팝업 (1)

 

4. 할인 판매

• 할인 판매 메뉴 (0)
  • 상품 카테고리 메뉴 (중복) (0) → 기존에 있는 상품 카테고리 페이지 재사용

 

5. 타임딜 흐름

• 타임딜 메뉴 (0)
  • 타임딜 목록 페이지 (1)
  • → 일반 목록과 다르게 시간 정보 포함, 별도 구성 필요
  • 타임딜 상세 페이지 (1)
  • → 일반 상품 상세와 구성이 달라 새로 구성해야 함

 

포인트

• 메뉴는 실제 페이지가 아닌 탭/폴더 역할이기 때문에 0으로 표기
• 기존에 사용하는 페이지를 재활용하는 경우 중복 0으로 체크
• 실질적으로 별도 설계가 필요한 화면은 1로 카운팅하여 전체 분량을 계산

 

Search 영역

1. 검색 메뉴 (0)

- 단순 진입용 메뉴

- 실제 페이지는 아님 → 0으로 카운팅

 

2. 검색창 페이지 (1)

- 사용자가 검색어를 입력하는 UI가 있는 화면

- 별도 디자인 및 기능 구현 필요 → 1로 카운팅

 

3. 검색 결과 페이지 유형

검색 결과는 총 3가지 유형으로 나뉨. 각각 별도 설계가 필요하므로 모두 1로 카운팅.

 

[결과 구분]

구분	설명	카운팅
그리드형	기본 검색 결과 출력 방식 (카드형 등)	1
썸네일형	이미지 중심으로 큼직하게 출력되는 방식	1
결과 없음	결과가 없을 때 나오는 화면 (추천 상품 포함 가능)	1
총합		4(검색창, 그리드, 썸네일, 결과 없음)

 

검색 결과는 상품 목록과 구조가 유사하므로 재사용 여부 검토 필요하지만,
디자인이 다르다면 반드시 분리 설계해야 한다.

 

 

Utility 영역

1. 로그인 흐름

로그인 메뉴 (0)

• 로그인 페이지 (1)
  • 아이디 찾기 (1)
    • 본인 인증 (외부, 0)
    • → 통신사 인증 또는 PASS 인증 등의 외부 인증 모듈 페이지 (제공된 모듈 사용, 직접 설계 X)
    • 아이디 찾기 결과 (1)
    • → 인증 완료 후 ID 확인 결과를 보여주는 페이지
  • → ‘아이디를 잊으셨나요?’ 클릭 시 이동하는 별도 화면
  • 패스워드 찾기 (1)
    • 본인 인증 (외부, 0)
    • → 아이디 찾기와 동일한 외부 인증 화면 사용
    • 패스워드 찾기 결과 (1)
    • → 임시 비밀번호 안내 또는 재설정 완료 화면
  • → 비밀번호 재설정 프로세스를 시작하는 화면
  • 회원가입 링크
  • → 로그인 화면에서 진입 가능하지만, 메뉴에서 중복으로 연결되므로 카운트 X
• → 사용자 ID/PW 입력 UI가 있는 실제 로그인 화면

• → 상단이나 사이드 메뉴에 위치하는 네비게이션 항목. 페이지는 아님

 

2. 회원가입 흐름

회원가입 메뉴 (0)
→ 독립적인 진입 메뉴 (로그인 외에서도 접근 가능)

• 회원가입 메인 (1)
  → 약관 동의 및 시작 화면 (전체 가입 절차의 첫 화면)
  
  • 기본 정보 입력 (1)
    → 이름, 생년월일, 연락처 등 필수 항목 입력
  • 추가 정보 입력 (1)
    → 성별, 관심 카테고리, 추천인 코드 등 선택 항목 입력
    
    • 추천인 아이디 찾기 팝업 (1)
      → 추천인 아이디를 검색할 수 있는 별도 팝업
      • 추천인 확인 결과 (1)
        → 추천인 정보 일치 여부 및 결과 메시지 제공
  • 배송지 정보 입력 (1)
  • → 기본 배송 주소 등록 화면
  • 회원가입 완료 (1)
  • → 가입 성공 메시지 및 시작 안내 화면

 

마이페이지 메뉴 (0)

※ 내비게이션 상에 존재하는 상위 메뉴 (필요 시 메뉴 구성)

※ 메뉴와 페이지는 구분 필요 (메뉴는 네비게이션, 페이지는 실제 화면)

 

1. 마이페이지 메뉴

마이페이지 메뉴 (0)

→ 내비게이션 상에 존재하는 상위 메뉴

• 마이 홈 메뉴 (0)
  → 유저 요약 정보 확인 진입 메뉴
  
  • 마이 홈 페이지 (1)
    → 내 정보, 활동 정보 등을 제공하는 실제 화면
  • 구매이력 메뉴 (0)
    → 주문 이력을 확인하는 진입 메뉴
    • 구매이력 목록 페이지 (1)
      → 주문 리스트 확인 화면 (주문번호, 상품명 등)
      
      • 구매이력 상세 페이지 (1)
        → 개별 주문 상세 정보 확인 화면
  • 취소환불 메뉴 (0)
    → 취소 및 환불 이력을 확인하는 진입 메뉴
    
    • 취소환불 목록 페이지 (1)
      → 취소 및 환불 요청 내역 리스트 화면
      • 취소환불 상세 페이지 (1)
        → 각 요청 건에 대한 처리 현황 상세 확인
  • 마일리지 메뉴 (0)
    → 마일리지 적립 및 사용 내역 확인 메뉴
    
    • 마일리지 내역 페이지 (1)
      → 포인트 상세 내역 리스트 화면

 

2. 장바구니 및 주문 흐름

장바구니 목록 (1)

→ 담은 상품들을 확인하고 주문을 시작하는 화면

• 주문서 페이지 (1)
  → 상품 정보, 수량, 결제 방식 등을 입력하는 화면

• 주문완료 페이지 (1)
  → 주문번호 및 결제 완료 메시지 안내

• 결제팝업 (외부 포함) (1)
  → 외부 결제 시스템(카드사 등)으로 연결되는 팝업
• 무통장 결제팝업 (1)
  → 입금 계좌 안내 및 입금자명 입력 등

배송지 관리 메뉴 (0)

→ 내 배송지 정보를 관리하는 메뉴

• 배송지 목록 페이지 (1)
  → 등록된 배송지들을 리스트로 보여주는 화면

• 배송지 상세 페이지 (1)
  → 선택된 배송지의 상세 정보 확인 화면

• 배송지 등록 페이지 (1)
  → 새로운 배송지 주소를 입력하는 화면

 

Company 그룹

회사 소개나 이용 약관 개정 취급 방침은 법적으로 있어야 된다.