part5) 웹사이트 IA 설계하기 — GNB와 IA는 뭐가 다를까?

 

안녕하세요 찐망고입니다.

part1) 웹사이트는 왜 이렇게 만들었을까? 디자인을 위한 사이트 분석

 

이포스팅은 리뉴얼 사이트 프로젝트를 하기위한 수업과정을 파트별로 진행하는 수업노트입니다.

---

 

지난 수업에서는 기존 웹사이트의 문제점을 찾고, 경쟁사와 다른 업종의 레퍼런스를 조사한 뒤

우리 사이트에 무엇을 어떻게 적용할 것인지 리뉴얼 방향까지 정리했다.

이제 화면을 그리면 될 것 같지만 아직 아니다. ㅋㅋ

지금까지 생각한 내용을 실제 웹사이트의 구조로 만드는 IA(Information Architecture) 작업을 진행했다.

이번 수업에서는 FigJam에서 학생들이 직접 콘텐츠를 묶고 연결하면서 IA를 만들도록 했는데

작업물을 받아보니 예상했던 부분에서 역시 조금씩 헷갈렸다.

IA를 GNB 메뉴 정리 정도로 생각하는 경우가 있었서 IA와  GNB차이부터 다시 설명했다.

 

IA(Information Architecture)는 말 그대로 정보구조 설계다.

쉽게 이야기하면,

우리 사이트에 어떤 정보가 필요하고, 그 정보를 어떻게 묶고, 사용자가 어떤 순서로 찾아가게 할 것인가를 정하는 것.

지금까지 분석하고 생각했던 내용을 실제 웹사이트의 구조로 만드는 단계라고 설명했다.

여기에서 학생들이 많이 헷갈렸던 게 GNB였다.

GNB는 IA의 일부다.

IA가 사이트에 존재하는 전체 정보의 구조라면,
GNB는 그중 사용자가 주요 정보로 이동할 수 있도록 화면에 보여주는 안내판에 가깝다.

예를 들어 교촌치킨 리뉴얼 사이트에 이런 정보가 필요하다고 생각해보자.

메뉴 / 신메뉴 / 이벤트 / 매장찾기 / 브랜드 이야기 / APP 소개 / 가맹점 개설 / 회사소개 / 채용

필요한 정보라고 해서 이걸 전부 GNB에 넣으면 될까?

아니다.

바로 이때 IA를 설계하면서 질문해야 한다.

“이 페이지가 필요하긴 한데, 메인 메뉴에서까지 보여줘야 하나?”

 

IA를 처음 만들 때 흔히 하는 방법이 있다.

필요해 보이는 페이지를 전부 적어놓고

메뉴 / 브랜드 / 이벤트 / 회사소개...이런 식으로 메뉴 이름부터 정하는 것이다.

이번에는 그렇게 하지 않고 먼저 누가 이 사이트에 들어오는지 다시 가져왔다.

교촌치킨 브랜드 사이트를 예로 들면 일반 소비자는 메뉴를 보고 싶을 수 있고, 신제품이나 이벤트를 확인하고 싶을 수도 있다.

가까운 매장을 찾거나 교촌이라는 브랜드가 궁금할 수도 있고,

조금이라도 더 저렴하게 주문할 방법이나 혜택을 찾을 수도 있다.

같은 사이트에 들어오는 사람이 일반 소비자만 있는 것은 아니다.

예비 가맹점주는 창업정보가 필요하고, 구직자는 채용정보가 필요하다. 기업정보를 찾는 사람도 있다.

목적이 완전히 다른 사용자에게 필요한 정보를 한 사이트 안에 모두 보여주는 것이 좋을까?

아니면 영역을 나누는 것이 좋을까?

아예 사이트 자체를 분리하는 것이 좋을까?

이것 역시 IA에서 고민해야 할 문제다.

 

우리 사이트 사용자는 누구인가
→ 각 사용자가 필요한 정보는 무엇인가
→ 비슷한 정보끼리 어떻게 묶을 것인가
→ 목적이 다른 정보는 한 사이트에서 보여줄 것인가, 영역이나 사이트를 분리할 것인가
→ 그다음 1Depth / 2Depth / 필요하면 3Depth를 정한다

즉, 페이지 목록 → 메뉴 이름 → Depth 순서가 아니라,

사용자 → 필요한 정보 → 그룹핑 → 영역 구분 → Depth순서에 가깝다.

이 차이를 이해해야 기존 사이트의 메뉴를 이름만 조금 바꿔서 다시 만드는 것을 피할 수 있다.

 

앞선 분석에서 교촌치킨 홈페이지에는 소비자를 위한 브랜드 정보와 가맹·기업 정보가 한 구조 안에 섞여 있다는 문제를 찾았다.

그래서 레퍼런스 조사에서도 소비자 중심 브랜드 사이트와 기업·가맹 정보의 역할을 구분하는 방향을 잡았다.

 

교촌IA

 

 

첨부한 FigJam처럼 상위에서 교촌치킨 브랜드 사이트와

교촌F&B / 가맹·기업 사이트영역을 나눠보는 것이다.

브랜드 사이트에는 일반 소비자가 주로 찾는 메뉴, 이벤트, 매장찾기, 상품권, 브랜드스토리, APP 연결 등을 두고,

기업·가맹 영역에는 회사소개, 사업소개, 가맹사업, 창업안내, 채용 등을 둔다.

여기서 중요한 건 처음부터 “사이트를 두 개로 만들자”라고 결정한 게 아니라는 점이다.

앞에서 사용자 혼재라는 문제 발견 → 레퍼런스 조사 → 목적별 정보구조를 구분하자는 리뉴얼 방향까지 정했고,

IA 단계에서 그것을 실제 사이트 구조로 옮겨본 것이다.

 

IA가 어느 정도 정리되고 나면 이제 GNB를 생각할 수 있다.

예를 들어 브랜드 사이트에 필요한 정보가 모두 정리됐다고 해서

메뉴 / 신메뉴 / 이벤트 / 매장찾기 / 상품권 / 브랜드스토리 / APP 소개...

를 모두 1Depth GNB로 보여줄 필요는 없다.

신메뉴는 메뉴 안에서 강조할 수도 있고, APP 연결은 주요 CTA나 퀵메뉴로 제공할 수도 있다.

이벤트 역시 IA상으로는 진행중 이벤트와 종료 이벤트가 존재하지만, GNB에서는 단순히 이벤트 하나만 보여줄 수 있다.

IA에 존재한다고 해서 모두 GNB가 되는 것은 아니다.

반대로 GNB를 먼저 만들어놓고 그 밑에 페이지를 끼워 맞추는 것도 이번 수업에서 하려는 방식과는 조금 다르다.

먼저 정보구조를 만들고,

그중 무엇을 사용자가 항상 볼 수 있는 주요 길로 보여줄 것인지 결정하는 것이 GNB다.

이 부분은 학생 작업물을 피드백하면서 꽤 많이 수정했다.

 

설명할 때는 다들 이해한 것 같았는데 막상 학생들이 만든 IA를 받아보니

역시 조금씩 헷갈리는 부분이 있었다.

특히 사이트에 필요한 정보라고 해서 모두 1Depth로 만들어야 하는지,

비슷한 정보끼리 어느 정도까지 묶어야 하는지에서 차이가 많이 났다.

신전떡볶이 IA 수정 전 후

 

처음 만든 IA를 보면 인증서가 하나의 독립된 정보영역으로 구성되어 있고

그 아래 검사성적, 시험성적서, HACCP 인증 등의 정보가 들어가 있었다.

물론 사이트에 필요한 정보는 맞다.

그런데 이 정보를 사용자가 메뉴, 매장안내, 브랜드와 같은 수준의 주요 정보로 찾을까를 다시 생각해봤다.

인증정보는 오히려 신전떡볶이라는 브랜드의 품질과 안전성을 설명하는 근거에 가깝다고 판단해 수정했다.

여기에 신전떡볶이 수정 후 이미지

수정 후에는 인증서를 독립된 영역으로 두지 않고

브랜드 → 품질안전 → 검사성적 / HACCP 인증으로 다시 묶었다.

APP 안내도 마찬가지다.

처음에는 APP 다운로드와 인스타그램 홍보가 함께 있었지만, 수정하면서

APP 소개 → 주요 기능·혜택 → APP 다운로드

처럼 앱을 알아보고 실제 다운로드까지 이어지는 정보로 다시 정리했다.

필요한 페이지가 있다는 것과 그 페이지가 하나의 1Depth가 되어야 한다는 것은 다른 문제다.

 

귀뚜라미 IA는 처음부터 필요한 콘텐츠를 상당히 많이 찾아왔다.

제품, 고객지원, 기술·브랜드뿐 아니라 구매, 통합, 기업정보 등 다양한 정보가 들어가 있었다.

문제는 정보가 부족한 것이 아니라 어떤 정보를 같은 그룹으로 볼 것인지였다.

구매, 통합처럼 별도의 큰 영역으로 두었던 정보들을 다시 살펴보고,

사용자가 무엇을 찾기 위해 방문하는지를 기준으로 구조를 정리했다.

 

귀뚜라미 IA 수정 전 후

 

수정 후에는 크게 제품 / 고객지원 / 기술·R&D / 기업정보로 정보영역을 정리했다.

맞춤제품찾기는 제품으로, AS접수·자가진단·제품매뉴얼·서비스센터찾기·FAQ는 고객지원으로 묶었다.

이렇게 수정하다 보면 IA에서 중요한 건 페이지를 많이 찾아내는 것이 아니라

그 정보가 왜 여기에 있어야 하는지를 설명할 수 있는 구조를 만드는 것이라는 게 조금씩 보인다.

 

이번에도 AI를 사용했다.

교촌치킨 홈페이지 IA 만들어줘라고 물어보는 방식은 사용하지 않았다.

지금까지 했던 분석과 문제점, 레퍼런스 조사 결과가 IA에 이어져야 하기 때문이다.

이런 식으로 프롬프트를 작성했다.

IA 설계하기 프롬프트
나는 웹사이트 리뉴얼 프로젝트를 진행하고 있다. pdf파일 첨부가능 
지금까지
1. 기존 웹사이트 분서거
2. 문제점 도출
3. 경쟁사와 다른 업종의레퍼런스조사
4. 레퍼런스에 참고할 점을 내 사이트에 어떻게 적용할지 까지 정리했다.

이 내용을 바탕으로 리뉴얼 사이트의 IA(정보구조)를 설계하려고한다

[리뉴얼할 사이트]
사이트/브랜드:
사이트주소:
주요타깃:
웹사이트목적
[기존사이트문제점]
[레퍼런스조사후 적용하기로 한방향]
- pdf를 확인 한 후 위 내용을 바탕으로 다음순서를 도와줘

1. 이사이트에 필요한 콘텐츠를 먼저정리해줘
2. 비슷한 콘텐츠끼리 그룹으로 묶어줘
3. 각 그룹이 어떤 사용자를 위한 것인지 설명해줘
4. 서로 목적이 다른 사용자의 콘텐츠가 섞여있다면 하나의 사이트에서 구성하는것이 좋은지, 영역 또는 사이트를 분리하는것이 좋은지 검토해줘
5. 그 결과를 바탕으로 1depth/2depth 혹시 필요하면 3depth까지 IA를 제안해줘
6. 기존 사이트의 어떤 문제를 해결하기위해 이렇게 구조 변경했는지 설명해줘
7. 내가 조사한 레퍼런스의 적용 방향이 IA에 실제로 반영되었는지 확인해줘

단순히 기존사이트의 메뉴를 다시정리하지말고, 
사용자, 웹사이트목적, 기존사이트의 문제점과 레퍼런스 조사결과를 근거로 IA를 제안해줘

IA 작업을 FigJam으로 받았다.

처음 사용하는 학생들도 있어서 기능은 정말 필요한 것만 알려줬다.

확대 / 축소 / 화면 이동 / 도형 / 연결선 정도.

IA를 만드는 데 FigJam의 모든 기능을 알아야 하는 것은 아니기도 하고 템플릿이 훌륭함 

 

학생들이 제출한 IA를 하나씩 보면서

• 이건 정말 1Depth여야 하는지
• 이 페이지는 독립된 메뉴가 필요한지
• 비슷한 정보끼리 제대로 묶였는지
• 소비자 정보와 기업·가맹 정보가 다시 섞이지 않았는지
• 앞에서 찾은 문제점과 리뉴얼 방향이 실제 구조에 반영됐는지

를 중심으로 수정했다.

 

이번 프로젝트는 계속 같은 방식으로 이어지고 있다.

사이트 분석
→ 문제점 도출
→ 레퍼런스 조사
→ 리뉴얼 방향
→ IA

 

앞에서 했던 작업들이 따로 노는 것이 아니라 하나씩 다음 단계의 근거가 되는 셈이다.

왜 이 정보가 필요한지, 왜 여기 묶었는지, 왜 이 구조로 만들었는지를 설명할 수 있다면

IA 작업은 어느 정도 제대로 된 것 아닐까.

다음에는 이 구조를 바탕으로 실제 메인페이지에 어떤 콘텐츠가 필요하고,

어떤 순서로 보여줄 것인지 정리해볼 예정이다.

아직 화면 안 그림. ㅋㅋ