랜딩 페이지 디자인을 개선하는 13가지 꿀팁

본문은 위시켓과 번역가 전리오가 함께 만든 해외 콘텐츠 기반 번역문입니다. 사용자 경험(UX)과 관련된 다양한 정보를 다루는 UX Planet 블로그에서 발행한 글입니다. 작가는 파스칼 배리(Pascal Barry)로 디지털 제품, 브랜드, 웹 사이트를 다루는 디자이너입니다. 그는 파리의 테크 스타트업인 akord.com의 공동 창립자이기도 합니다. 본문은 랜딩 페이지(Landing page)[1] 디자인을 개선하는 팁에 대한 내용으로 마음에 드는 방법이 있다면, 냉큼 적용해보셔도 좋겠습니다.

1. 이미지에 텍스트를 넣어야 한다면, 컬러 오버레이를 사용한다

가끔은 형편없는 이미지로 작업해야 할 때도 있습니다. 그럴 때는 브랜드의 컬러를 반투명으로 설정한 다음 그것을 이미지 위에 오버레이(overlay, 레이어를 겹쳐 놓는 것) 해서, 그 이미지에 시선이 쏠리기보다는 배경 텍스처처럼 보이게 만들면 좋습니다. 이렇게 하면 배경 이미지와 텍스트 사이에 적절한 대비 효과가 만들어지면서, 텍스트를 좀 더 쉽게 읽을 수 있습니다. 아래의 예시에서 저는 이러한 대비 효과를 더욱 두드러져 보이게 만들기 위해서 그림자 효과(drop shadow)를 적용했습니다.

2. 네거티브 스페이스를 지나치게 많이 사용하지 않는다

디자이너들은 네거티브 스페이스(negative space, 다른 컴포넌트들이 차지하지 않고 비어 있는 공간)를 사랑합니다. 그래서 웹 디자인을 할 때 가능하면 많이 사용해야 한다는 말을 듣곤 합니다. 하지만 서로 연관성이 있는 구성요소들 사이에서도 과도한 네거티브 스페이스를 사용한다면, 우리의 시선은 해당 요소들 간의 관련성을 찾아내지 못하고 그저 공허한 여백 속으로 빠져버리게 됩니다.

3. 아무 말 대잔치를 좋아하는 사람은 없다

웹사이트의 이용에 대한 연구 내용들을 보면, 사람들의 주목을 끌기 위해서 사용할 수 있는 시간은 많지 않습니다. 따라서 핵심만 간략하게 말해야 합니다.

4. 텍스트로만 구성된 레이아웃이라 하더라도 충분히 매력적일 수 있다

텍스트로만 구성된 랜딩 페이지 섹션을 만든다는 건 쉽지 않습니다. 특히, 일러스트나 아이콘, 사진 등을 사용할 수 있는 기회나 리소스가 없는 경우라면 더욱 그렇습니다. 브랜드의 컬러와 특징적인 타이포그래피를 적절히 활용한다면, 랜딩 페이지의 매력을 충분히 살릴 수 있습니다.

5. 아이콘은 작게, 일러스트는 크게

아이콘은 물론 좋은 아이템이지만, 적절하게 사용해야 합니다. 아이콘이라는 건 본질적으로 단순하기 때문에, 조연의 역할을 하는 걸 좋아합니다. 그런 아이콘을 크게 키워버리면, 형편없는 일러스트처럼 보일 뿐입니다. 아이콘과 제목을 함께 사용한다면, 제목이 먼저 눈에 띄어야 합니다.

6. 글자 사이의 간격을 줄인다

글자 사이의 간격을 활용해서 타이포그래피를 은근하게 개선할 수 있는 방법들은 여러 가지가 있습니다. 하지만 타이포그래피 분야에서 경험이 많은 사람이 아니라면, 대문자로만 쓰인 제목에서도 글자 간격을 많이 사용하지 않는 것이 좋습니다. 그리고 본문 텍스트에서 글자 간격이 커지면, 가독성이 떨어지는 문제가 발생할 수 있고, 폰트 디자인 자체의 자연스러운 리듬도 모두 무너져 버립니다.

7. FAQ에서는 텍스트의 폭이 너무 길지 않도록 주의한다

텍스트의 길이가 긴 것으로 치자면, 아마도 FAQ 페이지가 단연코 1등을 차지할 것입니다. 한 줄에서 사용하기에 가장 알맞은 글자 수는 공백과 문장부호를 포함해서 알파벳 45자에서 75자 사이입니다.

8. 수치를 적절하게 강조해서 보여준다

아래의 예제를 보면, 가장 중요한 가치 제안(value proposition)[2]내용이 거의 보이지도 않는 작은 텍스트 안에 감춰져 있습니다. 여기에 실제 사용자의 얼굴 사진을 추가하면, 사회적 증거(social proof)[3]에 덧붙여서 진정성까지 더해지게 됩니다.

9. 작은 글씨를 좋아하는 사람은 없다

아래의 예제를 보면 다양한 크기의 글자가 쓰인 것을 볼 수 있는데, 본문 텍스트에서는 11픽셀이, 내비게이션의 링크에는 9픽셀 크기의 텍스트가 사용되었습니다. 이걸 오른쪽 예제와 같이 스크린 전용으로 디자인된 모던한 폰트를 사용하고, 본문의 텍스트 크기는 18-20픽셀 정도로 키우는 게 좋습니다.

10. 홀수의 법칙을 적용한다

레이아웃에서 구성 요소들을 홀수로 배치하면 훨씬 더 강력한 효과를 낼 수 있습니다. 만약에 4가지 항목을 보여주려고 생각했다면, 그중에 2개를 하나로 묶어서 전부 3가지로 압축해서 메시지를 전달해 보십시오. 만약 2개를 하나로 묶는 게 힘들다면, 우선순위를 매긴 다음에 중요도가 가장 떨어지는 것을 버리십시오. 아래와 같은 레이아웃에서 5가지의 항목을 보여준다면 인지 과부하처럼 느껴질 수도 있으므로 주의해야 합니다.

11. 인지 과부하가 일어나지 않게 조심한다

가능하면 여러 요소들은 합치고 항목을 줄이는 것이 좋습니다. 제목과 본문 텍스트의 크기를 다르게 사용하면 시각적인 하이어라키(hierarchy, 중요도의 순서 및 위계질서)가 만들어집니다. 그리고 전해야 할 메시지가 많을 경우에는, 네거티브 스페이스를 적절하게 활용하면 좀 더 차분한 분위기를 만들 수 있습니다.

12. 밝은 색상은 강조할 때만 사용한다

밝은 색상을 넓은 영역에서 사용하면 색조의 대비 측면에서 문제가 발생하기 때문에, 텍스트를 전달해야 하는 기본적인 목적을 달성하기가 어렵습니다. 그리고 버튼처럼 사이즈가 작은 요소들에서는 흰색 텍스트를 피하는 게 좋습니다.

13. 회색 텍스트는 언제나 콘트라스트를 점검한다

텍스트가 많은 레이아웃에서 하이어라키를 만들기 위해서 자주 쓰이는 기법은 회색의 텍스트를 사용하는 것입니다. 그러나 이런 경우에는 충분한 콘트라스트(contrast, 주변 색조와의 대비)를 주지 않으면, 가독성 측면에서 심각한 문제가 발생할 수 있습니다. 온라인 도구를 활용해서 콘트라스트를 점검하십시오. 그리고 시각적으로 보다 분명한 하이어라키를 만들어야 한다면, 폰트 사이즈를 조정해서 콘트라스트를 키우는 것도 좋습니다.

[1] Landing page, 외부 링크를 경유하여 접속한 웹사이트에서 처음으로 보게 되는 페이지

[2] 제품이나 서비스가 소비자에게 제공해줄 수 있는 가치를 표현하는 것

[3] 다른 사람들의 행동이 자신의 선택에 영향을 미치는 것

> 이 글은 '13 Tips For Improving Landing Page Design'을 각색하여 작성되었습니다.