본격적으로 홈페이지 기획을 시작할 시간이다. 세부 페이지의 설계에 앞서 ‘청사진’이 필요하다. 흔히 말하는 정보 구조(IA, Information Architecture)가 그 역할을 대신한다. 정보 구조는 쉽게 말해서 ‘메뉴’ 또는 ‘사이트맵’이라고 생각하면 된다. 나같은 경우에는, 아무래도 개발 업체와 원격으로 업무 협의를 진행하다 보니 서류 상으로 전달하고, 통화로 설명하여 진행하였기에 최대한 서류 상으로 깔끔하게 이해시키는 것에 주안을 두고 작업을 진행했다.
내가 진행했던 홈페이지 개편 프로젝트는 기존 1개의 통합 사이트를 4개의 사이트(1개의 메인 사이트와 3개의 서브도메인 사이트)로 분리하는 프로젝트였다. 어떤 페이지가 어떤 사이트에 귀속되는지, 어떤 페이지가 신규로 제작되어야 하며, 어떤 페이지가 기존 페이지와 유사하게 가져갈지 정리가 필요했다.
■ 홈페이지 컨셉 잡기 (방문객 페르소나 파악)
먼저 기존 홈페이지의 방문객에 대한 통계를 GA에서 얻고, 5년 간 홈페이지를 통해 접수된 문의 내역을 파악하여 어떤 제품군의 고객들이 어떤 질문을 하고, 어떤 정보를 원하는지 정성적으로 파악했다. 그리고 영업팀, 고객 지원팀 등 고객과 실제 접촉하는 팀과 미팅을 두 세번 진행하며 요구 사항을 수집, 정리했다.
이러한 과정을 좀 더 거창하게 말하면, ‘고객 페르소나’를 찾아가는 과정이라고 할 수 있다. 고객 페르소나란, 한 마디로 고객의 백그라운드, 성향, 요구 사항을 일반화하여 표현한 결과물이다. 즉, 우리 고객의 성향은 이러이러해서 이러이러한 것을 원하고, 이를 위해선 이러이러한 콘텐츠를 제작해야한다,는 플로우다. 그렇게 정리된 것은 아래와 같으며, 본 블로그에는 각색하여 일부만 수록했음을 밝힌다.
| 메인 사이트 | 서브도메인 1 | 서브도메인 2 | |
| 타겟 고객 | 투자자, 채용 등 일반 사용자 | 기존 대리점(국내/중국)과 신규 대리점(유럽/미주) | 소규모 연구실, 개인 랩실, 장비 딜러 등 |
| 고객 특성 | 투자처, 채용 목적 등으로 회사를 검색하여 접속한 사람으로, 회사/기술/제품에 대해 비교적 낮은 지식을 갖고 있음. | 대리점 영업 조직의 특성상 마케팅 부서가 갖춰져 있지 않은 경우가 많아 제조사측 마케팅 자료를 바로 활용하고 싶어함. | 30-40대 여성 연구원으로, 동물 실험에 대한 경험이 많지 않아 ‘장비’ 자체에 대한 이해도는 낮은 편임. |
| 구현 목표 | 1) 각 사업 분야을 일반인들도 이해할 수 있는 쉬운 언어로 작성하여 소개 2) 각 사업부 소식을 적시 전달 –> 각 서브도메인 사이트로의 유기적 이동 + 뉴스/이벤트 노출 강화 | 1) 모델명이 복잡한 제품이기에 고객이 원하는 모델에 대한 정보를 쉽게 확인하고, 관련 자료를 다운로드 가능하게 구현 2) 구매 전 테스트가 필수로 이뤄져야하는 제품으로, 문의 페이지에서 세일즈 리드 확보 필요 | 1) 제품 소개를 상세히 연구원들의 언어에 맞게 소개 필요(학계 용어 정확하게 표현하기) 2) 논문 페이지 / 애플리케이션 노트 페이지 등 관련 자료를 최대한 상세히 제공 |
| 접속 디바이스 비율 (PC:모바일) | 6:4 | 9:1 | 7:3 |
| 주요 경쟁사 | XXX, YYY | ZZZ |
■ Depth별 구조 설계
각 사이트에 대한 대략적인 컨셉이 나오면, 페이지별 상하관계(레벨, level)을 짜는 것이 필요하다. 흔히 생각하는 ‘메뉴’를 구성한다고 보면 된다. 사용자 입장에서 원하는 콘텐츠를 보기까지 너무 많은 클릭의 단계를 거치지 않도록 기획해야 한다. 나처럼 2번 일을 하지 않으려면 이 단계에서 띄어쓰기까지 꼼꼼히 보길… ㅠㅠ 나는 홈페이지 제작 후, 띄어쓰기 규칙을 통일화했는데 레벨 1 의 경우 모두 붙여쓰고, 레벨 2는 한글 맞춤법에 맞춰서 띄어썼다. (아래 샘플은 적용 전)
위와 같은 구조가 나오자 홈페이지 전체 사이트맵이 한 눈에 그려졌다. 나의 경우, Header와 Footer는 비슷하게 메뉴를 구성했기 때문에 첫 페이지에 대한 윤곽도 어느정도 나오게 되었다. 최종 결과물은 다음과 같다.
Header에는 GNB(Global Navigation Bar)를 삽입하여 각 사업분야 서브도메인 사이트로 쉽게 이동 가능하게 구성하였다. Footer에는 전체 메뉴를 펼쳐서 미니 사이트맵 역할을 하고, 대표 연락처와 소셜 미디어 아이콘을 배치했다. 그 외에 다국어 페이지로의 이동 링크, 개인정보 처리 방침, Copyright 문구를 삽입했다.
여러 사이트를 방문하며, 우리 사이트에 필요한 메뉴일까, 어떤 정보를 어디에 어떻게 배치할까 생각하는 것은 꽤나 즐거운 작업이었다. 별 거 아니지만 하나씩 차곡차곡 쌓이며 그림을 만들어내는 과정이며, 이 단계에서 잘 짜놓아야 나중에 2-3번 일하는 수고를 덜 수 있다 🙂