홈페이지 개편을 기획하면서 유지보수 측면에서 간편하게 관리할 수 있어야한다는 점과 더불어 ‘디자인’은 빼놓을 수 없는 부분이었다. 나는 디자이너가 아니기에 사전 조사하는 시간을 꽤 오래 가졌다. 기획 단계에서 디자인팀의 피드백을 받기에는 ‘실체’가 없어 한계가 있었기 때문이다. 그나마 홈페이지는 쉽게 레퍼런스를 찾을 수 있어서 다행이었다랄까.
■ 레퍼런스를 찾아라! 좋은 웹사이트 검색 방법
1. 최신 트렌드 구글링
구글로 ‘website design trends 2019’, ‘best website in 2019’를 찾아보았다. 영어 검색 시에는 홈페이지보다는 웹사이트라는 단어를 쓰면 더 좋은 정보가 걸린다. 무수한 포스트와 함께 최신 트렌드를 요약해서 볼 수 있다.
2. 글로벌 스타트업 홈페이지 들어가보기
Skyscanner, Airbnb, Spotify… 페이지를 옮겨다니며, 회원 가입 플로우나 다운로드 등 좋은 웹사이트의 웹 경험을 하는 것만으로도 분명 배우는 요소가 많다.
3. Medium 디자인 관련 카테고리 구독하기
Medium에 가입하여 UX , Visual Design, Design 카테고리를 구독했다. 업무 시작 전 메일로 2~3개의 아티클을 보며 이론적인 것과 상세한 개선 방안에 대해 알 수 있어서 좋았다. 미디엄은 특히 특정 페이지(ex. 문의 페이지)나 요소(ex.헤더 배너 디자인)를 기획할 때 큰 도움을 받았다.
4. 최근에 제작된 홈페이지 보기
디비컷이라는 사이트를 보면 최근 오픈된 국내 홈페이지 목록을 볼 수 있다. 최근에 제작된 사이트를 보면서 인사이트를 쌓아보자.
그렇게 내가 뽑은 웹사이트의 핵심 가치는 다음과 같다.
주목성 (Eye-catching), 단순함(Concise) , 사용성(Easy-to-use)
그렇다면 무슨 요소를 넣어야 각 가치가 실현될까?
■ 홈페이지의 주목성을 높이는 방법
1. 배경에 영상 활용하기
단순 이미지보다 주목성이 뛰어나다. 다만 용량 최적화가 제대로 안이뤄지는 경우, 전체 사이트 속도에 큰 영향을 미치니 주의해야하며, 여러 브라우저와의 호환성을 신경써야한다.
2. 마이크로 애니메이션(Micro-animation)
어떤 액션의 결과를, 진행 상황을 비주얼적으로 세세하게 보여주는 것을 마이크로 애니메이션이라고 한다. 마이크로 인터랙션(Micro-interaction)이라고도 한다. (ex. 핀터레스트 – Micro-animation) 유저가 한 행동에 대해 피드백을 즉각적으로 제공하기 때문에 고객 경험(UX)에도 좋고 일단 몽글몽글한 디자인이 취저였기 때문에 많이 사용하고 싶었으나 결과적으로 개편한 홈페이지에 많이 구현하지 못해서 아쉬웠다…ㅜ
3. 그리드 제거(비대칭형 아웃라인)
그리드는 디자인 용어로, 화면의 레이아웃의 기반이 되는 수평선/수직선이 있는 평면을 말한다. 전형적인 홈페이지 그리드는 쉽게 떠올릴 수 있다. 예를 들어, 웹 사이트의 왼쪽 상단부터 로고와 내비게이션 메뉴가 정렬된- 이 블로그와 비슷한 형태다. 주목성이 뛰어나나 콘텐츠의 성격과 달라 사용하지 않았다.
■ 홈페이지의 단순함을 높이는 방법
1. 플랫 디자인(미니멀 디자인)
2. 키워드 중심의 간결한 텍스트
3. 여백 활용
한 마디로 욕심을 버려야 한다. 제품 홍보를 하려고 하다 보면 스물스물 올라오는 욕심, TMI 본능을 최대한 죽이고 핵심만 간결하게-!
■ 홈페이지의 사용성을 높이는 방법
1. 모바일 최적화
멀티 디바이스 환경에서 계속 강조해도 모자라지 않는 모바일 최적화. 반응형 웹사이트로 구현은 필수 선택이었다. 보통은 모바일 페이지부터 기획하라고 하지만, 우리 사업과 기존 홈페이지 방문객 통계 대다수가 PC 접속이었기 때문에 나는 PC뷰로 디자인을 기획했다.
2. 한 페이지(Deep scrolling)
예전에는 스크롤 압박이 심해지면 이탈한다는 게 정설이었지만 최근에는 선택의 문제인 것 같다. 스마트폰 사용으로 스크롤이 긴 콘텐츠를 받아들이는 게 너무 자연스러워졌고, 아무래도 이미지, 영상, 마이크로 애니메이션 등 다양한 요소로 지루하지 않게 콘텐츠를 전개할 수 있기 때문인듯.
3. 고정 메뉴바(Sticky menu)
한 페이지 구성이 많아지면서 메뉴를 고정해두는 방식이 선호된다. 좀 더 빠르게 이동가능하기 때문에 UX 측면에서 필수 항목이 된듯하다.
이 외에도 페이지간 이동이 쉬워야 하고, 명확한 CTA(call-to-action), 쉬운 검색 창 구현 등 당연하지만 중요한 요소도 빠짐없이 챙겨야 한다. 이렇게 조사를 하다보면 어느새 우리 사업에 맞는 홈페이지의 모양이 어느정도 눈에 그려질 것이다. 이제 상상 속의 홈페이지의 실체를 만들어야 할 시간이다.