웹사이트는 내가 서비스하고 있는 사이트에 있는 모든 화면(웹페이지)의 합이다. 이러한 관점에서 웹 사이트 구조를 설계한다는 것은 웹 사이트에 들어가는 각각의 화면들을 관련된 것들끼리 묶어서 재분류하고 재배치하는 것이다.
레고 블럭은 하나의 기능을 의미한다.
레고 완성품은 하나의 웹화면을 의미한다.
기획자는 레고블럭을 기획의도에 따라 어떤 식으로 조립하는지에 따라 전혀 다른 웹사이트를 만들수 있다.
각 화면은 화면 정의서에서 확인할 수 있는데 하나의 화면에는 여러개의 기능이 존재할 수 있기 때문에 관련된 기능들을 다시 그룹으로 묶어서 재분류한다. 즉, 기능이 모여 한 화면을 구성하고, 여러 화면이 모여 사이트가 된다. 이렇게 사이트 구조를 설계하면, 핵심기능만 뽑아서 사이트맵을 만들수 있다.
기능을 화면 단위로 바꾸기
기능을 화면 단위로 그룹핑하는 방법은 기능의 범위, 기능을 표현하는 방식, 기획자의 기획 의도에 따라 다르다. 하나의 기능을 나눠서 여러 화면에 보여줄 수도 있고, 비슷한 기능을 묶어서 하나의 화면에서 구현할 수도 있다. 그래서 기획자는 기능의 특징에 따라 사용할 화면의 수를 정하면 된다.
예를 들어 회원가입시 약관동의가 필요하며, 약관은 서비스 이용약관, 개인정보 처리방침 및 이용약관, 마케팅 정보 제공동의 약관 등이 있다. 기획자는 한 화면에서 모든 약관에 대한 동의를 받을수도 있고, 한 화면에서 약관을 동의하면 다음 화면으로 넘어가서 다른 약관의 동의를 받을 수 있게 설계할 수도 있다.
하나의 기능을 하나의 화면으로 설계하기
기능을 가장 심플하고 편하게 보여줄 수 있는 방법이다. '회사 소개' '회사 연혁' '찾아오시는 길' 처럼 단순하게 정보를 보여줄때 주로 사용한다.
하나의 기능을 여러 화면에 나눠서 보여주기
웹쇼핑몰에서 상품평 기능을 추가한다고 해보자. 상품평 기능은 상품평 작성하기, 상품평 목록조회, 상품평 수정하기, 상품평 삭제하기 등 여러가지 경우의 수가 존재한다. 즉, 상품평 작성화면, 상품평 목록조회 화면, 상품평 수정화면, 상품평 삭제화면 등으로 화면을 나눠서 보여줄 수 있다. 상품결제 기능도 마찬가지로 상품 결제전 확인화면, 상품 결제방식 선택화면, 상품 결제화면, 상품 결제후 확인화면, 배송 화면 등으로 나눠서 작업할 수 있다.
여러 기능을 한 화면에 모아서 보여주기
상품 결제화면은 사용자의 서비스 이탈을 줄이기 위하여 주문자 정보 입력, 배송지 입력, 결제방식 선택, 결제 등의 다양한 기능을 하나의 화면 안에서 구현할 수 있다. 즉, 기획자의 기획의도에 따라 화면을 설계한 것이다.
비슷한 화면을 그룹으로 묶기
비슷한 기능을 하는 화면들은 그룹으로 묶고 이름을 지어준다. 가령 사이트 소개, 회사연혁, 대표인사말, 찾아오시는길 등은 모두 회사 소개라는 상위개념으로 묶을수 있다. 기능 정의서에서 뎁스에 따라 기능을 잘 분류하면 화면을 그룹으로 묶는 것은 쉽다. 같은 쇼핑몰이라도 기획자가 보여주려는 의도에 따라 서로 다른 그룹으로 묶을수 있으므로, 사이트는 완전히 다르게 보일수 있다.
사이트 구조를 문서화하기
사이트 구조문서는 웹사이트에 필요한 모든 웹화면의 목차같은 느낌이다.
사이트 구조문서는 마지막 뎁스가 화면이지만, 기능정의서의 마지막 뎁스는 기능이다.
지금까지 기능 정의서를 참조하여 웹사이트에 보여줄 화면을 결정하였고, 관련된 화면들을 묶어서 그룹으로 나눴다. 이제부터는 협업을 위하여 해당 작업을 문서화할 필요가 있다. 사이트 구조 문서는 기능 정의서와 유사하게 화면의 상하개념에 따라 화면의 깊이를 뎁스로 구분해서 작성한다.
기능 정의서와의 중요한 차이점은 가장 하위단계의 화면이 화면 정의서에서 설계한 화면과 1:1 매칭된다는 점이다. 기능 정의서의 기능이 물론 화면정의서 화면과 1:1 매칭되기도 하지만, 한 화면에 여러개의 기능이 구현된다면 그렇지 않다. 즉, 사이트 구조문서는 기능정의서를 바탕으로 기능정의서를 단순화하고, 화면단위로 재구성한 문서이다. 화면에 필요한 자세한 기능들은 생략하고, 화면단위로 작성한다.
웹사이트 구조가 단순하면 사이트 구조문서를 먼저 작성하고, 이를 바탕으로 화면 정의서를 만들면 된다. 그러나 사이트가 복잡한 경우에는 구현할 화면이 많으므로 헷갈리지 않도록 화면 정의서에 화면을 추가하면서 사이트 구조문서와 동시에 작성해나가는 것이 좋다. 이렇게 해야 화면을 빠짐없이 기재할 수 있다.
사이트맵 만들기 - 웹 화면 구조도
사이트 맵은 앞서 작성한 사이트 구조문서의 요약본이다. 사이트 구조문서에서 세부화면(리스트, 상세, 글쓰기)은 제외하고, 사이트에 들어가야할 핵심화면만 나열하면 된다. 즉, 사이트 구조문서에 나열된 화면을 그룹으로 묶으면 사이트맵이 된다. 사이트맵은 표나 트리 구조로 표현이 가능하다.
사이트맵은 화면 정의서의 목차(차례)로 활용할 수 있고, 작업자가 자신의 작업범위를 파악하는데도 도움이 된다. 웹사이트 구조가 복잡해서 사용자가 쉽게 원하는 화면을 찾을수 있게 도와주는 가이드로써의 역할도 한다. 사이트맵은 추후 헤더의 GNB 로 사용가능하다.
연습과제
이전 수업에서 작성한 기능정의서를 바탕으로 사이트 구조문서를 완성하고, 사이트맵을 만들어보세요! (주의사항 : 해당 사이트 네비게이션바에 있는 메뉴를 그대로 작성하지 말아주세요. 사이트맵을 구성한 이유를 물어보겠습니다.)
'웹기획 > 웹 사이트 구조와 글로벌 내비게이션 설계하기' 카테고리의 다른 글
| 2. 글로벌 내비게이션(GNB) 설계하기 (0) | 2023.11.22 |
|---|