벤치마킹 : 홈페이지 기획에 어떻게 활용해야 할까요?

벤치마킹은 잘 만든 다른 사이트를 살펴보고, 내 기획에 맞는 부분만 골라 참고하는 방법입니다. 홈페이지 기획에서는 같은 업종 사이트와 기능이 좋은 사이트를 나눠 고르고, 사이트맵과 화면설계서의 영역마다 참고 주소와 가져올 부분을 함께 적습니다. 저는 광고대행사 T사 콘텐츠팀에서 일할 때 회사 홈페이지 리뉴얼 기획안을 2022년 9월판과 2023년 7월판으로 두 번 만들었고, 이벤트 페이지 1차 기획안도 썼습니다. 화면과 명세를 다룰 때 확인할 것들은 AI 활용 체크리스트에 따로 모아 두었습니다.

벤치마킹 사이트는 어떻게 고르나요?

벤치마킹 사이트는 같은 업종의 경쟁사 사이트와, 구현하고 싶은 기능이 잘 만들어진 사이트로 나눠 고릅니다. 벤치마킹은 잘 만든 다른 사례를 살펴보고 내 기획에 맞는 부분을 골라 참고하는 방법입니다. 같은 업종 사이트에서는 무엇을 보여 주는지를 보고, 기능이 좋은 사이트에서는 화면이 어떻게 움직이는지를 봅니다.

T사 홈페이지 리뉴얼 기획안에서 저는 벤치마킹한 사이트 네 곳을 메인페이지 설명 앞쪽에 모아 적었습니다. 네 곳을 모두 같은 이유로 고른 것은 아니었습니다. 한 곳은 메인페이지 전체의 흐름과 움직임을 보려고, 한 곳은 로고 색을 포인트로 쓰는 방식을 보려고, 또 한 곳은 숫자가 올라가는 효과를 보려고 골랐습니다.

이벤트 페이지 1차 기획안에서는 고르는 단위가 더 작아졌습니다. 메뉴바와 메인 화면에 두 곳, 광고 성과 영역에 세 곳, 포트폴리오 영역에 세 곳, 솔루션 지원 첫 영역에 세 곳을 따로 골랐습니다. 두 기획안을 나란히 놓고 보면, 벤치마킹 사이트는 몇 곳을 고르느냐보다 그 사이트에서 무엇을 볼지를 먼저 정해야 쓸모가 생긴다는 것을 알 수 있습니다.

벤치마킹은 사이트를 통째로 따라 하나요?

벤치마킹은 사이트를 통째로 따라 하는 것이 아니라 영역마다 모션, 숫자 효과, 아이콘 형태처럼 참고할 부분만 골라 가져오는 일입니다. 다른 회사의 사이트를 그대로 가져오면 우리 회사가 보여 줄 내용과 메뉴가 맞지 않습니다. 그래서 보통은 화면을 영역으로 나누고, 영역마다 어느 사이트의 어느 부분을 볼지 따로 정합니다.

리뉴얼 기획안의 메인 비주얼 영역에는 광고취급액, 함께한 광고주 수, 임직원 수, 업력 네 가지 숫자가 들어갑니다. 이 영역에서 벤치마킹 사례로 가져온 것은 글자가 차례로 나타나는 움직임과 숫자가 올라가는 카운트 효과 두 가지뿐이었습니다. 숫자와 문구는 회사 기준에 맞춰 직접 채웠습니다.

이벤트 페이지 기획안에서도 같은 방식으로 적었습니다. 솔루션 지원 영역에는 한 사이트에서 서비스 아이콘 형태만, 다른 사이트에서 솔루션 소개 부분만 참고한다고 괄호로 밝혔습니다. 포트폴리오 영역도 한 사이트에서 핵심 포인트와 성과로 넘어가는 부분만 가져왔습니다. 주소만 적어 두면 보는 사람이 사이트 전체를 따라 하라는 뜻으로 읽을 수 있어서, 괄호 한 줄로 어디까지 볼지를 정해 두었습니다.

사이트맵은 어떻게 그리나요?

사이트맵은 메인 페이지에서 대메뉴, 하위 메뉴, 완료 페이지까지 페이지 사이의 관계를 한 장의 나무 모양 지도로 그린 것입니다. 사이트맵은 페이지끼리의 관계를 정하고, 화면설계서는 한 화면 안의 영역과 기능을 정합니다. 그래서 사이트맵을 먼저 그려야 화면설계서에 몇 장의 화면을 그릴지 정해집니다.

2022년 9월판 리뉴얼 기획안의 사이트맵은 메인페이지 아래에 포트폴리오, 마케팅, 서비스, 광고문의 네 대메뉴를 두었습니다. 메뉴마다 괄호에 페이지 수를 적었는데, 마케팅은 검색광고부터 라이브커머스까지 하위 메뉴별로 여섯 페이지를 만들고 서비스는 한 페이지 안에 네 섹션을 두는 구성이었습니다. 광고문의는 문의를 마치면 완료 페이지로 이어지게 했고, 관리자페이지와 화면을 따라다니는 고정 아이콘도 같은 장에 함께 그렸습니다.

홈페이지 리뉴얼 때 사이트맵은 기존 구조를 두고 새로 생길 메뉴와 빠질 기능, 바뀐 숫자를 표시해 고칩니다. 2023년 7월판에서는 같은 틀을 그대로 두고 게시판 형식의 AD인사이트 메뉴를 새로 넣었습니다. 고정 아이콘에서는 메신저 문의 두 개가 빠지고 빠른문의와 맨 위로 가는 버튼만 남았습니다. 메인 화면의 숫자도 2023년 6월 기준으로 바꿨고, 메인페이지 영역은 아홉 개에서 열 개로 늘었습니다.

벤치마킹 사례는 화면설계서에 어떻게 적나요?

벤치마킹 사례는 화면설계서의 영역마다 참고한 사이트 주소와 그 사이트에서 가져올 부분을 함께 적습니다. 화면설계서에는 화면을 나눈 영역 번호와 영역별 내용, 클릭했을 때의 동작, 디자인과 개발에 넘길 전달사항을 넣습니다. 화면설계서는 기획자가 쓰고 디자이너와 개발자가 보며, 화면을 만들 때 기준으로 삼는 문서입니다. 그래서 참고 사이트도 그 사람들이 바로 열어 볼 수 있게 주소로 남깁니다.

리뉴얼 기획안에서 저는 메인페이지를 아홉 개 영역으로 나누고 번호를 붙인 뒤, 번호마다 자세한 설명이 있는 쪽수를 적었습니다. 상단 메뉴에는 대메뉴에 마우스를 올리면 세부 메뉴가 열리고, 서비스의 하위 항목을 누르면 서비스 페이지의 해당 섹션으로 이동한다는 동작을 적었습니다. 그 앞 장에는 디자인과 개발에 넘길 전달사항으로 로고 색인 파란색을 포인트로 써 달라는 요청과 참고 사이트 주소를 두었습니다. 화면 움직임은 한 사이트를 전체적으로 벤치마킹했다고 밝히고, 좌우인지 위아래인지 같은 방향은 영역마다 따로 적었습니다.

이벤트 페이지 기획안에서는 영역 설명 바로 아래에 참고 사이트 이름과 바로가기 링크를 한 줄씩 달았습니다. 고민 버튼 여섯 개를 눌렀을 때 각각 어느 영역으로 스크롤이 내려가는지도 같은 장에 적었습니다. 참고 사례와 동작 설명이 한 장에 같이 있어야 보는 사람이 영역 하나를 만들 때 다른 장을 뒤지지 않아도 됩니다.

벤치마킹으로 시안을 여러 개 만들어도 되나요?

같은 영역에 서로 다른 벤치마킹 사례를 적용한 시안을 두 개 이상 만들어 비교하고 고르는 방식도 쓸 수 있습니다. 시안은 디자인을 확정하기 전에 보여 주는 초안입니다. 두 방식을 말로 설명하기보다 같은 내용을 두 모양으로 그려 두면 고르는 사람이 비교하기 쉽습니다.

이벤트 페이지 1차 기획안의 광고 성과 영역이 그랬습니다. 현황 분석, 전략 수집, 마케팅 운영 및 최적화, 분석 및 고도화의 네 단계를 1안과 2안 두 가지로 그렸습니다. 1안은 한 사이트의 방식을, 2안은 다른 사이트의 방식을 따랐고, 2안에는 단계를 클릭하거나 마우스를 올리면 확대되는 예시를 붙였습니다.

1안의 일부 칸에는 시안이 채택되면 정보를 넣겠다는 표시만 남겨 두었습니다. 고르기 전에 모든 칸을 채우지 않고, 고른 안에만 내용을 채우려는 것이었습니다. 다만 이 자료는 1차안이라 두 안 가운데 어느 쪽이 최종으로 골라졌는지는 남아 있지 않습니다.

벤치마킹은 홈페이지 기획에 어떻게 활용해야 하나요?

벤치마킹은 사이트를 모으는 데서 끝나지 않고, 사이트맵과 화면설계서의 영역마다 무엇을 어디서 가져왔는지 남길 때 홈페이지 기획에 쓰입니다. 먼저 같은 업종 사이트와 기능이 좋은 사이트를 나눠 고르고, 사이트맵으로 페이지 구조를 정합니다. 그다음 화면설계서의 영역마다 참고 주소와 가져올 부분을 적고, 고르기 어려운 영역은 시안을 두 개로 그려 비교합니다.

제가 만든 홈페이지 기획안은 회사 홈페이지라는 한 가지 경우였지만, 요구를 페이지와 영역으로 나눠 다른 사람이 만들 수 있게 적는 일은 다른 기획에서도 같습니다. 이런 일이 AI PM 채용공고에서 어떤 역량으로 불리는지는 AI PM 채용공고에서 가장 많이 요구하는 역량 7가지에서, 회사에서 한 기획 경험을 포트폴리오에 담는 방법은 포트폴리오 사이트 글에서 확인할 수 있습니다.