웹사이트 기획을 위한 레퍼런스 19가지

처음 웹사이트를 기획하는 당신을 위한 안내서

입사한 지 갓 1년, 웹사이트 리뉴얼 기획 업무를 맡게 되었다. 그때는 몰랐다. 웹사이트 기획이 이처럼 맨땅에 헤딩인 줄은.

"참고할 만한 문서가 있나요?"

"아뇨, 없어요."

"아… 그럼 PM을 맡아줄 사수나 기획 대행사는 있나요?"

"없어요."

"그럼… 레퍼런스는 어떤 걸 참고하면…"

"없어요. 그냥 없어요."

나는 웹사이트 구축 경험도, 개발에 대한 지식도 없는 주니어 마케터였다. 디자이너 한 분과 둘이서 기획 업무를 맡게 되었는데, 내 역할은 콘텐츠 기획과 고객 여정 설계 등이었다. 일단 검색창에 '웹사이트 기획 사례'를 검색했다. 마땅히 참조할 만한 콘텐츠가 없었다.

죄다 화려한 디자인 또는 영상 중심으로 구성된, 대행사를 끼지 않고서는 도저히 구현할 수 없을 만큼 복잡해보이거나 우리 브랜드와는 맞지 않는 외국 사례들만 주루룩 나오는 거였다. 내가 찾고 싶었던 건 '조금 더 현실적이며' '바로 써먹을 만한' '디테일한' 웹사이트 레퍼런스였다. 

비개발 직군에서 웹사이트의 모든 구성 요소를 기획하는 건 쉽지 않은 일이다. 개발자와 직접 커뮤니케이션하지는 않더라도, 구성적인 아이디어나 디테일 등을 챙겨야 하기 때문이다. 이 아티클의 구성은 다음과 같다.

• 다섯 가지 방향으로 유형별 웹사이트를 모아 웹사이트의 어떤 영역에 어떤 요소가 들어가야 좋은지 정리했다.
• 내 생각을 구현할 때의 난이도를 대략적으로 알 수 있으며,
• 웹사이트를 더 다채롭게 만들어줄 꿀팁도 챙겨갈 수 있다.

영상 소재를 중심으로 다루는 사례

브랜드 런칭이나 리브랜딩을 앞두고 웹사이트를 기획할 때, 브랜드에 대한 이해도를 높이기 위해 브랜드 필름이나 튜토리얼 영상을 강조하는 일이 잦다. 다음은 영상 소재를 잘 활용한 웹사이트 레퍼런스다.

1. 여러 개의 영상 소재를 활용 - 카카오뷰

카카오뷰는 웹사이트 최상단에서 자동으로 재생되는 인트로 영상과 별개로, 여러 개의 인터뷰 영상을 보여준다. 웹사이트가 다소 복잡해질 수도 있었지만 이를 효과적으로 배치했다. 

• 총 4개의 영상을 메인 화면에 노출시키면서 페이지가 너무 길어지지 않도록 하단에 재생 바를 배치하고 자동 넘김 애니메이션을 넣어 지루함을 덜었다.
• 썸네일은 영상과 어울리는 스틸컷, 아이콘, 메인 카피 등을 노출하며 눈에 잘 들어오게 구성했다.
• 영상을 보고 싶은 사람은 가운데에 있는 '영상 보기' 버튼을 이용해 별다른 앱(유튜브 등)이나 웹으로 이동하지 않고, 사이트 안의 팝업에서 영상을 볼 수 있다. 웹사이트 중간에 인터뷰 영상을 보더라도 웹사이트를 이탈하지 않도록 전략적으로 구성한 것이다.

더 많은 영상을 보기 원하는 유저가 있을 수도 있으니, 메인 페이지와 왔다갔다 할 수 있는 탭을 파서 그 안에 모든 영상들을 담았다. 추후 강조하고 싶은 주제에 맞게 메인 페이지에 있는 영상을 갈아끼우거나 순서를 조정하면 되고, 뷰 에디터 탭에는 영상을 추가하기만 하면 되니 운영하기에도 좋다. 

2. 웹사이트에 영상 삽입, 자동재생을 적용 - 네이버 클립

네이버 클립처럼 여러 짧은 영상들을 자동 재생으로 보여줌으로써 몰입도를 높이는 전략도 있다. 숏폼 크리에이터를 모집하는 웹사이트의 목적에 맞게, 짧고 임팩트 있는 여러 영상을 빠르게 보여준다. 때문에 유저는 굳이 클릭하지 않고도 영상이 말하고자 하는 바를 짧은 시간에 이해할 수 있다.