지금 당장 써먹는 웹사이트 구성 레퍼런스
웹사이트 기획이 처음이라면? 웹사이트를 다채롭게 해주는 사례들
회사에서 PM급의 첫 프로젝트를 맡고 진짜진짜진짜 힘들었던 건, 기획서 쓰는 것도 아니고 미디어믹스를 짜는 것도 아니었다. 그것은 바로.. 처음 해보는 웹사이트 기획 업무.
사실 웹사이트 기획 자체가 어려운 일은 아니다(해봐서 이런 말 하는 걸지도). 그러나 어려운 점은 '어떤 옵션이 있는지' '잘 만든 웹사이트는 어떤 구성을 취하는지' '디자인과 기획이 잘 어우러지려면 어떤 사례들이 있는지' 등에 대해 꾸준히 살펴보지 않으면 감이 오지 않는다는 거다.
그래서 모아봤다. 지금 당장 써먹기 좋은 국내 웹사이트 기획 사례들.
지금 당장 써먹기 좋은 웹사이트 레퍼런스
01 원티드콘 하이파이브
와이드한 화면을 굉장히 잘 구성했다. 일단 들어가자마자 gif가 무한 롤링되면서 시선을 사로잡는다. 모바일 화면에서 역시 와이드하고 볼드한 감도를 유지한다. 무엇보다 '하이파이브'라는 컨셉과 얼라인 된 키비주얼이 굉장히 잘 보여서 참 좋다. 우리 브랜드가 어떤 말을 하고 싶은지, 어떻게 깔끔하게 보여질지 연출을 잘했다.
영상 역시 자동재생으로 넣어서, 와이드한 화면 구성을 통일성 있게 구성했다. (처음에는 이 영역이 영상이 아닌 웹사이트 안에 박혀있는 gif인줄 알았다.) 영상을 기획할 때 웹사이트와 한 몸으로 보이도록 고민한 게 인상깊다.
원 페이지로 제작했을 경우, 페이지가 너무 길어보여서 집중도가 떨어질 수도 있는데 원티드 하이파이브 웹사이트는 요런 것도 똑똑하게 구성했다. 중간에 버튼을 파고, 버튼에 따라서 아래에 떨어지는 결과값을 다르게 설정했다. 위에는 버튼, 내부에는 슬라이딩 (혹은 클릭)을 통해 카드가 뿌려지듯 보여진다.
(이런 섹션을 일컫는 정확한 워딩 아는 분들 있다면.. 제보해주세요..)
아래에는 흘러가는 효과 영역을 뒀는데, 다른 웹사이트에서 볼 수 있는 것보다 좀 빠르게 흘러간다. 아마도 해당 페이지 안에서 완전 메인 영역이 아니라 서브 영역이기 때문에 속도감을 조절한 것 같다.
02 배민다움 today
굉장히 심플하고 무난해보이지만, 심플 이즈 베스트일 때가 있다. 배민다움 today 웹사이트는 화려한 비주얼 요소나 효과를 주기보다는 브랜드가 전달하고자 하는 메시지에 집중한다. 웹사이트 역시 이와 잘 어울리도록 '카피 중심적'으로 구성되어 있다.
게다가 자세히 보면 버튼명도 디테일하다. '바로가기'나 '보러가기' 등 흔한 버튼명은 물론 '어떻게?' 등 구어체를 사용해서 더 몰입감을 준다.
웹사이트 내 아티클을 다 읽고 나면, 다른 아티클을 추천해주는 방법 역시 유쾌하다.
상단에는 '하나만 더 볼까?'라는 레이블을, 하단에는 '몇 개만 더 볼까?'라는 레이블을 넣어서 자연스럽게 다른 아티클을 읽도록 유도한다. 카피의 힘을 물씬 느끼는 배민다움 웹사이트!
03 서울, 가보자고
네이버는 요즘 모바일 적응형 웹사이트에 빠진 것 같다. 네이버 지도가 앱 말고도 웹사이트가 있음에도 불구하고 모바일 환경에서 보기 좋은 웹사이트를 만들었다. (유저 데이터를 분석해보니 모바일 환경에서의 지도 검색/즐겨찾기가 더 활성화 되어 있지 않았을까..?)
묘하게 상단 GNB 영역 사이에 흰 선이 신경쓰이지만.. 이건 넘어가자이 웹사이트는 모바일 환경에 최적화되어 있어서인가, 스와이핑 동작을 잘 구현해둔 곳이 많다. '당연히 이 시점에서 유저가 좌우로 스와이핑하겠거니' 생각하는 게 아니라 현재 카드 뒤에 있는 다른 카드 후보군(?)들을 자연스럽게 노출하면서 스와이핑을 유도한다.
스와이핑을 할 때 사소하게 놓칠 수 있는 포인트 중 하나인데, 스와이핑 영역 아래에 내비게이션 툴을 삽입하는 것이다. 단순히 보여지는 이미지 카드들을 뿌려두는 게 아니라 지금 대충 몇 번째 카드가 노출되고 있는지, 끝까지 모든 카드를 보려면 얼마나 더 스와이핑 해야하는지 보여준다.
이런 사소한 포인트들에서 유저(나)는 친절한 웹사이트임을 느낀다.
웹사이트를 기획하다 보면, 가끔 '버튼명'을 어떻게 써야 완벽히 핏한지 고민이 될 때가 많은데... 이 웹사이트는 특이하게도 버튼명을 롤링되는 gif 형식으로 만들어서 다양한 메시지를 담았다.
단순히 '공유하기'가 아니라 '나에게 공유하기' '친구방에 공유하기' '동기방에 공유하기' '가족방에 공유하기' 등 다양한 액션 유도를 하나의 버튼 안에 녹였다.
04 네이버 10주년 <2022 밴드해>
첫 화면부터 와이드하게 화면 안에 꽉 차는 영상을 자동재생 시켜서 몰입감을 준 밴드의 10주년 웹사이트. 별도의 페이지를 열어야 하거나 새 창으로 이동하는 페이지가 아니고 원페이지인데도 불구하고 깔끔해서 지루한 감이 없다.
처음에는 상단에 GNB 영역이 노출되지 않다가, 영상을 다 보고 나서 아래 섹션으로 넘어가면 자연스럽게 GNB가 상위에 고정된다. (다시 올라가면 다시 사라지고!) 유저 입장에서는 초반에 시야를 가리는 GNB가 없어서 더 편하게 영상을 감상할 수 있다.
모바일 환경에서는 특히나 GNB 영역이 길어질수록 아래에 담을 수 있는 내용이 짧아지고 페이지 자체가 쾌적하지 않다는 느낌을 받을 수 있는데, 이걸 이런 방식으로 해소한 듯 하다.
'원페이지면 이동은 어떻게 해..?'라는 생각이 들 수도 있는데, 앵커를 굉장히 잘 사용했다. 상단의 GNA 각 섹션을 누르면 원하는 페이지로 바로 이동할 수 있다. 위아래 스크롤만으로 왔다갔다 할 때의 유저 피로도를 줄인 셈이다.
웹사이트이긴 하지만 전체적으로 모바일 환경에서 최적화 된 느낌이다. '밀어서 축하하기'는 모바일에서는 쉽게 작동되나, pc 환경에서는 클릭해야 작동하기 때문에 다소 혼란스러울 수 있다.
05 카카오 뷰
(절대 내가 만든 웹사이트라서 하나 끼워넣은 건 아니고..)
앞의 밴드 사례처럼 카카오 뷰 역시 최상단에 와이드하게 화면을 꽉 채우는 영상을 재생시켜서 몰입감을 준다. 스크롤을 해서 영상이 위로 올라가면, 단순히 영상이 뚝 하고 올라가는 게 아니라 페이지 전체적인 톤에 맞게 그라데이션을 줘서 페이지들이 쭉 이어진 느낌을 준다.
각 뷰 에디터들이 등장해 한 마디씩 얹는 장면에서는 충분히 메시지에 대해 숙지하고 넘어갈 수 있는 시간을 주는데, 메시지 아래에 타임라인 네비게이션을 달아줘서, 대충 몇 초 정도 이 장면에서 머무르는지 유저에게 이해도를 제공한다. 일시정지 버튼과 숫자 버튼을 통해 다른 사람의 인터뷰를 보거나 자동재생을 멈출 수도 있다.
사소하지만 이처럼 유저에게 다양한 선택지를 주는 게 디테일 아닐까 싶다.
흘러가는 듯한 콘텐츠 영역도 있는데 모바일 환경에서는 클릭으로, pc 화면에서는 커서의 위치만으로도 이 움직임을 멈췄다 재생할 수 있다. 궁금한 콘텐츠를 클릭하려고 하는데 화면이 계속 흐르면 타이밍을 놓칠 수도 있기에 이런 사소한 포인트를 줬다.
06 천명, 바잇미
웹사이트이지만 앱이나 모바일 환경에 더 핏했으면 좋겠고, 웹 환경에서도 모바일 환경에서 보이는 비율을 유지하고 싶다면? 위 사례처럼 와이드한 'pc웹'을 대응하지 않는 사례도 있다.
대부분 왼쪽에는 앱에 대한 설명, 오른쪽에는 실제 앱화면이 구동되도록 만들어둔다. 모바일웹/앱 환경의 비율을 따로 웹에 맞게 조절할 필요가 없다는 점에서 효율적인 방식이다.
요즘에는 이런 식으로 대응하는 앱들이 꽤 많은 듯! 리소스나 예산이 부족하거나, 굳이 웹사이트에서 우리 서비스를 보여줄 필요가 없다면 이 방법을 사용해보자.
