4. 정보구조도 설계하기

▪ 만들 것

사이트에 담을 내용을 비슷한 것끼리 묶고 메뉴 이름을 붙여, 홈 아래 대메뉴와 하위 메뉴를 계층으로 그린 정보구조도 1건.

▪ 왜 하는가

콘셉트와 톤&매너로 방향을 정했다면, 다음은 사이트에 무엇을 어떻게 담을지 골대를 세우는 일이다. 정보구조는 집을 지을 때 먼저 그리는 설계도면과 같다. 내용을 아무렇게나 나열하면 사용자가 원하는 것을 찾지 못한다. 비슷한 내용을 묶고 위계를 세워 두면, 이후 화면 설계가 이 골대 위에서 진행된다.

▪ 예제 파일

• 2차시에서 만든 디자인 방향성 시트(콘셉트·핵심 키워드)
• 참고 사이트: KB손해보험 https://www.kbinsure.co.kr/main.ec

▪ 미리 알아두기

• 정보구조(IA): 사이트 정보를 위계로 정리한 기본 틀이다. 집의 설계도면에 해당한다.
• 카드소팅: 내용을 카드처럼 한 줄씩 적어, 비슷한 것끼리 묶는 방법이다. 정해진 분류가 없는 새 사이트는 열린 카드소팅을 쓴다.
• 레이블링: 메뉴·버튼·섹션에 이름을 붙이는 일이다. 원칙은 누구나 알아볼 수 있게(직관성), 같은 기준으로(일관성), 서로 겹치지 않게(상호배타성)이다.
• 내비게이션: 길 안내 시스템이다. 상단의 대메뉴는 GNB(글로벌 내비게이션), 대메뉴 아래 하위 메뉴는 LNB(로컬 내비게이션)라 부른다.
• 정보구조 유형: 계층(상하 위계)·계열(순서)·그리드·네트워크가 있다. 보통 웹사이트는 계층 구조를 쓴다.

1. 작업 준비

1. 크롬(Chrome) 브라우저를 연다.
2. 메모장을 열고 [파일] → [저장]으로 이름을 "정보구조_메모.txt"로 저장한다.
3. 2차시에서 만든 디자인 방향성 시트를 연다. 참고 사이트 KB손해보험(https://www.kbinsure.co.kr/main.ec)도 새 탭에서 연다.

2. 담을 내용 적기

1. 내 사이트에 들어갈 페이지와 정보를 메모장에 한 줄에 하나씩 적는다. 순서는 아직 신경 쓰지 않는다.
2. 참고 사이트를 둘러보며 빠뜨린 내용이 있으면 내 사이트에 맞게 고쳐 추가한다.
3. 더 이상 떠오르지 않을 때까지 적는다. 보통 15개 정도면 충분하다.

3. 카드소팅으로 묶기

1. 적은 내용을 하나씩 보며 비슷한 것끼리 같은 줄에 모은다.
2. 한 묶음이 너무 크면 둘로 나누고, 너무 작으면 비슷한 묶음과 합친다.
3. 최종 묶음이 4~6개가 되도록 조정한다. 이게 대메뉴 후보다.

4. 레이블링하기

1. 묶음마다 내용을 한번에 나타내는 메뉴 이름을 붙인다.
2. 이름이 누구나 보고 알 수 있는지(직관성), 메뉴끼리 기준이 같은지(일관성) 확인한다.
3. 두 메뉴에 같은 내용이 겹치면(상호배타성 위반) 한쪽으로 정리한다.

5. 내비게이션 정하기

1. 대메뉴(GNB)를 상단에 가로로 놓을 순서대로 적는다.
2. 각 대메뉴 아래에 들어갈 하위 메뉴(LNB)를 적는다.
3. 클릭 수가 깊어지지 않도록 하위 메뉴는 두 단계 정도로 둔다.

6. 정보구조도 그리기

1. 새 문서나 종이에 맨 위에 "홈"을 적는다.
2. 홈 아래에 대메뉴를 가로로 펼치고, 각 대메뉴 아래에 하위 메뉴를 세로로 이어 계층 트리로 그린다.
3. 선으로 이어 상하 관계가 한눈에 보이게 한다.

7. 차별화 점검

1. 1차시에서 찾은 아쉬운 점과 2차시 차별화 방향을 다시 읽는다.
2. 지금 그린 정보구조도가 그 문제를 푸는지 확인한다. 처음 방문자를 안내하는 메뉴가 앞에 있는지, 메뉴가 단순한지, 비교가 쉬운지 본다.
3. 풀리지 않은 부분이 있으면 메뉴를 합치거나 안내 메뉴를 앞으로 옮겨 고친다.

▪ 도움 프롬프트

아래 글을 웹 검색이 되는 AI(챗GPT 검색, 제미나이 등)에 입력해 활용한다. 검색 기능을 켜면 AI가 참고 사이트를 직접 찾아 확인하고 근거를 제시한다.

먼저 웹 검색으로 아래 참고 사이트를 직접 찾아 확인한 뒤 답해줘.
참고 사이트: https://www.kbinsure.co.kr/main.ec
내가 만들 사이트 주제: (주제 입력)

1) 참고 사이트의 상단 대메뉴(GNB)와 그 하위 메뉴를 확인해 목록으로 정리해줘.
2) 내 사이트 주제에 맞는 대메뉴 4~6개를 제안하고, 각 대메뉴에 들어갈 하위 메뉴를 적어줘.
3) 각 메뉴 이름이 직관적인지, 서로 겹치지 않는지(상호배타) 검토해줘.
4) 위 구조를 홈 아래 계층 트리 형태로 보여줘. 검색으로 확인할 수 없는 내용은 "확인 필요"라고 표시하고 추측하지 마. 근거가 된 페이지 주소도 적어줘.

8. 저장

1. 정보구조도 파일을 저장한다(Ctrl+S).
2. "정보구조_메모.txt"도 저장한다(Ctrl+S).