'뒤로' 버튼을 클릭하게 하는 '웹 디자인 실수' 12가지

다양해진 DIY 툴과 서비스 덕분에 요즘은 누구나 어렵지 않게 웹사이트를 만들 수 있다. 물론 전문가를 고용하는 경우도 적지 않다. 직접 웹사이트를 제작하든, 전문가에게 맡기든, 기본적인 원칙은 동일하다. 고객을 잡아둘 수 있는 웹사이트 제작을 위해서 반드시 피해야 할 웹 디자인 함정을 정리했다.



1. 스플래시 페이지 삽입
“요즘과 같은 온라인 환경에서 스플래시 페이지(splash page ; 본 사이트가 표시되기 전에 내용이나 제목을 소개하는 화면)나 입장 페이지는 아무 의미 없이 정보 찾기만 어렵게 만든다. 고객의 발길을 돌리게 할 뿐이다"라고 아이파트너미디어 (iPartnerMedia)의 웹 개발 부대표 자니에르 도밍게즈가 조언했다.

그는 이어 스플래시 페이지보다는 표준적인 홈페이지가 있는 게 낫다고 권고했다. 도밍게즈는 “방문자와 커뮤니케이션을 하거나, 메시지를 전달하고자 한다면 모달 또는 팝업창을 활용하는 것도 한가지 방법이다. 표준적인 홈 페이지를 활용하는 것이 SEO에도 도움이 된다"라고 덧붙였다.

2. 일관되지 못한 스타일
“웹사이트의 컬러 구성이 조화롭지 못하거나, 커닝(kerning), 리딩(leading), 트래킹(tracking) 등 타이포그래피 측면에서 정석적인 룰을 따르고 있지 않다면, 혹은 일관되지 못하게 여러 가지 폰트 종류 및 사이즈를 사용하고 있다면 그 웹사이트는 결코 프로페셔널한 느낌을 주지 못한다. 당연히 잠재적 고객들을 사로잡아야 하는 웹사이트 본연의 기능을 제대로 하지도 못할 것”이라고 99designs의 CMO 파멜라 웨버가 말했다.

이처럼 웹사이트 구성 요소들이 서로 따로 노는 것을 방지하고, 일관되고 깔끔한 모습을 갖추기 위해서는 웹사이트 제작 전에 먼저 브랜드 스타일 가이드를 정립하고 전체 웹사이트 디자인을 구성함에 있어 이를 충실히 따라야 한다”고 그는 덧붙였다.

3. 정보를 찾기 어려운 웹사이트
웹사이트는 무엇보다 방문자들이 쉽게, 클릭 한두 번으로 자신이 원하는 정보를 찾아갈 수 있도록 구성돼야 한다. 그러기 위해서는 메뉴를 상단에 수평으로, 페이지 당 7개 이하로 배치할 필요가 있다. 각 메뉴 위에 마우스를 가져다 대면 하위 메뉴가 나타나는 식으로 구성하면 편리하다. 또한 각 페이지 우측 또는 좌측 상단에 검색 상자를 배치해 두는 것도 도움이 된다.

4. 로고를 클릭했을 때 홈 페이지로 바로 이동되지 않는 것
“코마케팅(KoMarketing)에 따르면, 웹사이트 방문자의 36%는 홈 페이지로 돌아가기 위해 웹사이트의 기업 로고를 클릭하는 것으로 나타났다”라고 온트래포트(ONTRAPORT)의 크리에이티브 디렉터 로라 카사노바는 말했. 그래서 만일 로고가 클릭 되지 않으면 이러한 방문자들은 사이트가 고장(?) 났다고 생각해 페이지를 나가 버린다는 설명이다. 그는 이어 “이를 구현하는 방법은 무척 간단하다. <a>와 </a> 태그 사이에 <img> 태그를 삽입하면 된다”라고 설명했다.

5. 무거운 이미지, 애니메이션 또는 영상을 과도하게 사용하기
“이미지, 애니메이션 또는 영상은 로딩이 길고 무겁다. 웹 페이지에 이런 것들이 너무 많으면 웹사이트 구동 속도가 현저히 느려 진다”라고 웨버는 말했다.

카사노바도 이에 동의했다. 그는 “어도비의 한 연구에 따르면 39%의 이용자들은 이미지 로딩이 너무 길 경우 접속을 포기하고 나간다. 전체의 거의 절반에 가까운 이용자를 잃고 싶지 않다면, 옵티미질라(Optimizilla)같은 무료 이미지 옵티마이징 툴을 활용해 이미지 픽셀 카운트를 줄이는 것도 하나의 방법이다. 이렇게 하면 로딩 타임을 확 줄이면서도 사용하고 싶은 이미지를 사용할 수 있다”라고 설명했다.

“또 연결 속도가 특별히 느린 페이지들의 경우 최적화/라이트 버전의 페이지로 바꾸도록 하는 것도 고려해 봄직하다”라고 웨버는 덧붙였다.

6. 텍스트에 그래픽 사용
도밍게즈는, “웹사이트에 사용된 텍스트는 되도록 검색 엔진에 잡힐 수 있는 형태여야 한다. 그런데 텍스트 대신 이미지 형태를 사용하게 되면 검색 엔진이 이를 검색할 수 없어 결국 SEO에도 악영향을 미치게 된다. 뿐만 아니라 이미지를 텍스트로 쓰게 될 경우 웹사이트 구동 속도도 느려진다. 어떤 이유에서건, 이미지 형태의 텍스트를 사용하는 것은 지양해야 한다”라고 말했다.

7. 누가 봐도 퍼온 것 같은 스톡 이미지 사용
“스톡 포토(stock photography)를 이용하면 웹사이트 디자인 요소는 훨씬 풍부해 질 수 있지만, 이용자의 입장에서 볼 때 스톡 포토는 독창적이지 못하고, 뻔한 느낌을 준다”라고 비시질리티(Visigility)의 디지털 마케팅 전문가 러셀 프레지어가 말했다.

그는 “스톡 포토 속에 헤드셋을 낀 채 웃고 있는 그 여성이 당신의 회사와 아무런 관련이 없는 사람이라는 건 모두가 다 아는 사실이다. 차라리 직접, 또는 전문 사진가를 고용해 실제 당신의 회사에서 근무하는 직원들, 회사에서 만드는 제품 사진을 찍는 편이 낫다. 고객의 입장에서는 그러한 사진이 훨씬 더 진실되게 느껴지며 신뢰감을 주기 때문에 구매로 이어질 확률이 높다”라고 덧붙였다.

8. 여백을 남기지 않는 디자인
비스타프린트 디지털(Vistapring Digital)의 마케팅 매니저 새라 마티스타는 “여백의 미를 잘 활용하면 사이트 이용자에게 엄청난 영향력을 미칠 수 있다. 가끔 페이지 전체가 텍스트와 그래픽으로 빼곡한 웹사이트들이 있다. 이러면 집중하기도 어렵고, 정말 필요한 정보는 거의 얻지 못하게 된다”라고 강조했다.

그녀는 이어 “이러한 실수는 웹사이트가 수행해야 할 기능과 정 반대의 결과를 초래하게 된다. 웹사이트에는 꼭 필요한 정보만 선정해 올리고 여백의 미를 남겨둘 필요가 있다”고 조언했다.

9. 자동 재생되는 배경음 삽입
“웹사이트에는 절대로 자동 재생 되는 배경음을 넣어서는 안 된다”고 구즈리올로지(Goozleology) 의 CEO 에드 브랜쇼가 단언했다.

그는 “방문자의 주의를 끌기 위해 자동 재생되는 동영상 정도를 첨부하는 것은 괜찮지만, 자동 재생 되는 배경음은 확실히 이용자들의 발걸음을 돌리게 만든다. 실제로 우리가 진행해 본 테스트 결과에 따르면, 자동 재생 배경음은 방문자들의 페이지 방문 시간을 눈에 띄게 현저하게 감소시켰다. 배경음 삽입은 더 이상 고민할 필요도 없이 ‘아웃’시켜야 한다”라고 말했다.

10. 지나치게 많은 틈새 광고 배치
“틈새 광고(Interstitials)란 사용자가 클릭한 페이지로 넘어가기 전, 혹은 후에 잠깐씩 등장하는 광고를 말한다. 겪어 본 사람은 알겠지만, 이 틈새 광고는 어마어마하게 짜증날 뿐 아니라 최근 구글에서도 지나친 틈새 광고 사용을 규제하겠다고 발표한 바 있다”라고 DMi 파트너스(DMi Partners)의 카피라이터 및 SEO 전문가 애덤 진저리가 말했다.

앵스이미지(AnksImage)의 창립자이자 디지털 마케팅 전략 전문가 안키타 고헤인 달미아 또한 유사한 조언을 전했다. 달미아는 “풀 스크린, 팝업, 슬라이드 인 등, 다양한 형태의 틈새 광고로 페이지를 채우게 될 경우 광고 수익은 조금 얻을 수 있을지 모르지만 웹사이트 디자인 및 UX 측면에서는 완전한 실패를 의미한다. 따라서 단순히 광고 수익을 올리기 위해 광고를 배치할 것이 아니라, 웹사이트 콘텐츠의 목적에 잘 부합하고 종사하는 틈새 광고들 만을 제한적으로 허용할 필요가 있다”라고 말했다.

진저리는 이에 더해 “가장 좋은 방법은 틈새 광고를 없애고 다른 방법으로 구독자를 얻는 것”이라고 말했다.

11. 브라우저 간 상호 호환성 간과
달미아는 “다양한 브라우저 상에서 웹 페이지가 어떻게 보이는지를 미처 확인하지 않아 이용자에게 웹 페이지가 깨져 보이거나 이상하게 보이는 경우가 있다. 웹사이트를 공개하기 전 크로스 브라우저 호환성 테스트 툴을 사용해 마지막으로 체크하는 것이 하나의 방법이 될 수 있다”라고 말했다.

12. 모바일에 친화적이지 않은 웹사이트
“이미 2015년에 모바일 사용자 수가 데스크톱의 그것을 추월했고, 구글 역시 모바일 경험에 적합한 웹사이트들에게 더 높은 우선순위를 부여하기로 정책 노선을 결정했다. 그런데도 아직까지 많은 디자이너, 개발자들은 데스크톱에만 최적화 된 웹사이트를 만들고 있다. 이제 모바일은 선택이 아니라 필수다”라고 긱스 시카고(Geeks Chicago)의 대표 마크 터크셔가 강조했다.