홈페이지 만들기 어떻게 하지? 홈피 디자인 기본 원칙 어렵지 않아요

기업은 물론이고, 개인 차원에서도 주변에서 많이 물어본다.

나 홈페이지 만들려면 어떻게 해야 해?

인터넷을 뒤져보면 홈페이지 만드는 법은 널려 있지만 이쯤에서 한번 정리해 볼 때가 된 것 같다.

눈길이 가게 하는, 나도 모르게 즐겨찾기 하고 싶어지는 홈페이지 만드는 5가지 기본 원칙!

 

원칙 1. 홈페이지에 쉽게 접근할 수 있도록 보장하기

 

- 모든 페이지에 홈페이지로 가는 암묵적(implicit) 링크, 명시적(explicit) 링크가 포함되어 있는지 확인할 것.

여기서 암묵적 링크는 회사나 브랜드 로고 이미지를 통해서 제공하며 명시적 링크는 '홈'이라는 라벨이 붙은 링크를 통해 제공해야 한다.
이러한 링크가 없는 경우, 사람들은 길을  잃고 정보를 탐색하기도 전에 해당 공간을 이탈하고 싶은 충동을 느끼기 쉽다.

<Bad> 콘텐츠에 너무 집중한 나머지 홈페이지 링크를 빠트린 사례. 이런 경우 다시 홈으로 돌아갈 수 없어 당황할 수밖에.

 

- 사이트에 간단하고 예측 가능한 URL을 사용할 것.

회사 홈페이지의 URL은 회사 이름에서 쉽게 유추할 수 있는 도메인으로 적용한다.
홈페이지의 목적에 따라 회사명 혹은 브랜드명에서 쉽게 유추할 수 있는 URL을 사용하면 사용자는 검색 엔진에 의존하지 않고도 사이트로 쉽게 진입할 수 있다.  

- 홈페이지는 다른 페이지와 시각적으로 구별되도록 표시할 것.

홈페이지 디자인은 사이트의 전반적인 스타일과 일치해야 하지만 홈페이지의 인덱스 페이지는 다른 페이지와 명확히 구별할 필요가 있다.
사용자가 처음 사이트에 도착했든, 다른 곳에서 탐색을 진행하는 과정에 놓여있든, 첫 시작 지점을 시각적으로 쉽게 인식할 수 있도록 하면 사용자는 홈페이지를 인식하고 기억하는데 도움을 받는다.

원칙 2.  내가/회사가 누구이고, 무엇을 하는지 전달하는데 집중하기

첫인상이 중요하다. 잠재 고객이 홈페이지에 들어와 사이트의 목적을 한눈에 파악하지 못하면 사이트 탐색을 포기하기 쉽다. 사용자가 이곳에서 무엇을 달성할 수 있는지 빠르고 명확하게 전달해야 한다.

- 홈페이지 좌측 상단에 회사명과 로고를 눈에 띄게 배치할 것.

회사 로고를 홈페이지 왼쪽 상단 모서리에 배치하는 것은 두말하면 잔소리일 정도로 전 세계적인 표준이 되었다.
사람들이 가장 먼저 시선을 두는 곳이 바로 왼쪽 상단이다. 가운데 정렬된 로고는 신선해보일 수 있으나 익숙하지 않아 불편하다.
로고가 홈페이지의 다른 요소와 뚜렷하게 구별되는지도 필수로 확인.  

<Bad> 중간에 위치한 Chevron 로고. 익숙하지 않은 위치인데다가 작은 사이즈, 구분이 어려운 배경 이미지까지. 눈에 들어오지 않는다.

 

- 개인 브랜드 혹은 회사가 무엇을 하는지 명확하게 전달하는 태그라인을 포함할 것.

태그라인(Tagline)은 '브랜드의 머리 또는 꼬리' 로, 함축적 단어나 짧은 문구로 구성되며 기업, 기관, 브랜드의 정체성(Identity)을 나타낸다. 재미를 수반한 펀치라인(Punchline)을 뜻하기도 한다.
홈페이지 방문자가 우리의 브랜드를 안다고 가정하지 말자. 회사 이름이 본질적인 정체성을 한눈에 전달하지 않는 이상, 간결한 태그라인을 포함하여 내가 누구이고 무엇을 하는지 전달해야 한다.

사람들은 온라인에서 거의 읽지 않으며, 대신 전체를 쓱 - 스캔할 가능성이 크다. 무의미한 웰컴 메시지는 넣어두고, 간단하고 스캔하기 쉽고 요점이 잘 잡힌 의미 있는 태그라인을 제공하도록 한다.

<Good> 태그라인을 활용하여 민감하고 복잡한 세금 처리에 대한 강점을 한 눈에 강조

 

- 사용자에게 제공하는 고유한 가치와 경쟁사와의 차별화 요소를 강조할 것.

홈페이지는 일반적으로 간결한 태그라인과 매력적인 콘텐츠를 통해 고유한 가치 제안(Value Proposition)을 명확하게 전달한다.
잘 정의된 가치 제안은 '왜 다른 사이트/회사가 아닌, 이 사이트/회사를 선택해야 하나요?'에 대한 명쾌한 답을 준다.
이를 위해 홈페이지의 모든 요소(이미지부터 텍스트까지)는 첫번째 상호작용에서부터 설득력 있는 메시지를 전달하기 위해 서로 조화롭게 동작해야 한다.
사람들에게 공감을 불러일으키는 단어를 사용하고, 전문 용어, 비즈니스 용어, 기능 중심 언어는 피하자. 사용자의 언어로 사용자를 대하라.

- 중요한 이미지가 브랜드를 정확하게 반영하는지 확인할 것.

홈페이지에서 이미지는 사용자를 참여시키고 브랜드 정체성을 표현한다. 순전히 장식적이거나 도움이 되지 않는 그래픽은 피하도록 한다.
홈페이지는 가장 가치있는 온라인 공간이므로 모든 이미지는 목적을 달성하고 가치를 더하는 역할을 수행해야 함을 기억하자.

<Bad> 오일 가스 회사인 Par Pacific 홈페이지 가장 핵심 영역에 놓인 물 이미지. 이걸 보고 오일 회사의 강점을 떠올릴 수 있을까?

원칙 3. 예시를 통해 내용을 공개할 것.

- 가장 중요한 콘텐츠는 가장 위쪽에 배치, 더 많은 콘텐츠가 있다면 다음 페이지로 이동을 유도할 것.

페이지 폴드 개념은 홈페이지에서 중요하다. 스크롤하지 않고도 보이는 페이지 영역인 폴드 위의 콘텐츠는 게이트키퍼 역할을 하여 사용자가 사이트에 더 많이 참여할지 여부를 결정한다.

폴드 디자인 시에는 두가지를 고려한다.
첫째, 사용자의 기기 크기에 상관없이 가장 중요한 콘텐츠를 페이지의 최대한 높은 곳에 배치
둘째, 사용자가 페이지를 아래로 스크롤하도록 안내하는 레이아웃을 적용

 

레이아웃을 디자인하기 전에 콘텐츠를 중요도에 따라 신중하게 순위를 매기고, 우선순위에 따라 레이아웃을 구성하는 게 선행되어야 함을 잊지 말자. 

<Bad> 폴드 위 영역에 프로모션 배너만 높은 비중으로 노출하여 브랜드나 제품에 대한 정보 확인이 불가능

 

- 사이트 콘텐츠에 대한 구체적인 사례를 제공할 것.

홈페이지에서 신중하게 큐레이팅 된 콘텐츠 에시는 광범위하고 포괄적인 용어보다 가치를 전달하는데 더 효과적이다.
예를 들어, 카테고리 페이지로 연결되는 'Product Spotlight'라는 단순한 링크는 큐레이팅된 추천 상품을 보여주는 것과 비교하면 형편없다.

<Bad> 중요하게 전달하고 싶은 카테고리를 이미지로만 표시하지 않고 실제 콘텐츠를 표시했다면 훨씬 효과적이지 않을까?

 

원칙 4. 즉각적인 행동 촉구 및 내비게이션 방식을 제공할 것.

- 사용자에게 공감을 불러일으키는 명확하고 설명 가능한 링크 라벨을 포함할 것.

링크는 구체적으로 사용자의 행동을 유도하는 라벨을 부여해야 한다. 여기를 클릭하세요, 탐색, 자세히 알아보기와 같은 일반적 언어는 사용자가 무엇을 얻을 수 있는지 알려주지 않으며, 페이지를 검색할 때 이러한 링크를 서로 구별하기 어렵게 한다.
사용자 조사와 페르소나를 참조하고, 링크와 버튼 라벨을 그들의 언어로, 그들의 필요에 맞게 설명하는 것이 효과적이다.

<Good> 버튼명과 버튼의 계열을 직관적으로 표시하여 사용자의 행동을 적극 유도

 

 

- 명확한 시각적 계층을 통해 우선순위가 높은 작업을 강조할 것.

가장 중요한 작업은 시각적으로 두드러지게 표시되어야 한다. 계층 구조와 시각적 가중치를 사용하여 우선순위가 높은 작업이 주의를 끌 수 있도록 한다.
홈페이지 내 요소 간의 시각적 경쟁을 피하자. 모든 것이 강조되면 아무것도 눈에 띄지 않는다.

<Bad> 모든 정보와 이미지가 동일하게 강조, 어디를 우선적으로 봐야하는지 혼란스러움

 

- 주요 네비게이션 기능을 매우 눈에 잘 띄게 배치할 것.

홈페이지의 탐색 UI는 쉽게 접근 가능하고 직관적이어야 한다. 사용자는 내비게이션을 쉽게 찾을 수 있어야 하고, 잠깐 훑어보면 사이트 제공 사항과 사이트 내 위치를 즉시 이해할 수 있도록 하자.

원칙 5. 홈페이지를 단순하게 유지할 것.

- 간단하고 표준적인 홈페이지 디자인을 선택할 것.

간단하고 예측 가능한 디자인은 사용자의 기대에 부합하고 멘탈 모델을 보존함으로써 결과적으로 사용자 경험을 향상시킨다.
창의적인 레아이웃을 실험하는 것이 유혹적일 수 있지만, 특히나 충성도 높은 고객을 보유한 잘 정립된 브랜드의 경우 사용자에게 익숙한 디자인을 고수하는 것이 안전하다.
사용자의 인지적 부담을 줄임으로써 사용자는 웹사이트의 기능을 배우는 것보다 브랜드를 알아가는 데 집중할 수 있다.

- 동작과 애니메이션을 최소화 할 것.

주의를 끌기 위한 목적으로 애니메이션이나 모션을 사용하지 말자. 과도한 모션과 애니메이션은 접근성 문제를 일으키고 광고로 간주될 우려가 있다.
홈페이지는 사용자의 상호작용 및 콘텐츠 소비에 대한 선호도를 존중해야 한다. 상호작용으로 인해 모션 애니메이션이 트리거 되는 경우, 효과를 줄이거나 비활성화하는 방법을 쉽고 눈에 띄게 제공하도록 한다.

<Good> 홈페이지에 스크롤잭 효과를 줌과 동시에, 사용자가 모션 효과를 비활성화 시킬 수 있도록 옵션을 제공

 

- 콘텐츠를 시간 지연 없이 즉각 제공할 것.

30년 전이나 지금이나 속도는 웹의 사용자 경험에서 중요한 요소이다. 구글 조사에 따르면 페이지 로드 시간이 1초에서 3초로 늘어나면 사용자가 페이지에서 이탈할 가능성이 32% 증가한다.
콘텐츠는 사용자가 보는 즉시 제공되어야 한다. 로고, 태그라인 또는 메인 헤드라인 같은 중요한 페이지 요소에 애니메이션을 적용하지 않는 게 좋다.
풍부한 콘텐츠 제공과 빠른 로딩 시간 보장 사이에서 균형을 맞추는 게 중요하다.

- 법적으로 요구되지 않는 한, 팝업창은 사용하지 말 것.

팝업 모달은 웹에서 가장 싫어하는 디자인 요소 중 하나이다. 이는 사용자를 방해하고 콘텐츠에 접근하지 못하게 한다.
팝업은 일반적으로 즉시 무시되며, 특히 사용자가 홈페이지에서 가치를 얻기 전에는 최대한 피해야 한다.
페이지 콘텐츠가 로드되기 전에 팝업이나 시작 화면을 표시하는 것이 허용되는 유일한 사례는, 사이트가 쿠키 사용에 대한 동의를 요청하거나 연령을 확인해야 하는 법적 의무가 있는 경우이다.


본 내용은 사용자 경험(UX) 분야의 리딩 기업인 Nielsen Norman Group에서 Jakob Nielsen이 제시한 내용을  바탕으로 공개한 자료를 참고하여 재구성하였다.  더 상세한 자료는 여기에서 확인 가능. 

홈페이지에 대한 사용성 원칙과 지침은 근본적인 인간 행동 분석에 뿌리를 두고 있어, 오랜 시간이 흘렀음에도 불구하고 초창기 인터넷 시절과 큰 차이가 없이 발전되어 왔다는 게 재미있는 측면 중 하나.

역시 사람은 그리 쉽게 변하지 않는다. 

우리나라와 해외 홈페이지는 구성 면에서 문화적 차이를 보이기도 하니, 다음 글에는 이에 대한 추가적인 분석을 시도하는 것도 재미있을 듯. 

 

관련한 이웃님들의 의견은 언제나 대환영입니다!