UI/UX

[HOW TO UI·UX] 셔터스톡이 전하는 멋지면서도 기능적인 웹디자인 팁 10선

‘클릭’보단 ‘스크롤’을 애용해주세요

2024.09.20

UI·UX 디자인이 궁금하다고요? ? <디지털 인사이트>가 국내외 디자인 기업과 전문가들이 발행하는 자체 콘텐츠 가운데 실무 디자인에 도움이 될 좋은 글을 추려 읽기 좋게 정리했습니다. 원문을 참고하면 더 자세한 내용을 알 수 있어요.

---

디자인에 대한 전문지식을 얼마나 많이 보유하고 있든 간에 새로운 웹사이트를 만드는 일은 항상 노트의 첫 빈 페이지와 같습니다. 뭘 해야 할지 알 수 없어 고민하거나, 할 수 있는 것이 너무 많아서 시작하기조차 쉽지 않다는 점에서 말이죠.

만약 같은 생각을 하고 계신다면 본격적으로 디자인하기 전에 다음 10가지 웹디자인 팁을 읽어보세요. 전 세계에 고품질 이미지를 제공하는 셔터스톡이 웹사이트 디자이너들의 성장을 돕기 위해 다양한 아티클을 자사 블로그를 통해 공유하고 있습니다.

오늘은 셔터스톡이 이야기하는 멋지면서도 기능적인 웹사이트를 디자인하는데 유용한 10가지 팁을 정리했습니다.

1. 여백을 중요시하기

웹사이트 레이아웃은 무분별한 이미지와 복잡한 버튼의 배열, 그리고 불규칙해 보이는 구성으로 쉽게 어수선하게 보일 수 있습니다. 어수선한 레이아웃은 단순 콘텐츠 소개 페이지는 물론, 상품을 판매하는 이커머스 사이트에서도 사용자를 방해할 수 있는데요. 앞서 말한 두 예시의 경우, 사용자가 콘텐츠를 읽는데 방해를 받거나, 장바구니에 물건을 담는 과정이 힘들어질 겁니다.

때문에 많은 디자이너들은 레이아웃을 반듯하게 정리하기 위해 노력하는데요. 가장 흔한 실수가 정리에만 몰입한 결과, 페이지의 여백을 중요시하지 않는 상황입니다. 여백이 있는 웹사이트의 가장 큰 장점 중 하나는 사용자들이 시각적 피로에서 해방되고, 동시에 핵심 사항에 집중할 수 있다는 점입니다.

실제로 업계에서 괜찮은 웹디자이너와 뛰어난 웹디자이너의 차이점을 이야기할 때 자주 언급되는 것이 여백을 잘 적용하고, 활용할 수 있는 능력의 여부일 정도입니다. 그러니 항상 항상 기억해 주세요. 여백은 디자이너가 처리해야 할 골칫거리가 아닌 친구입니다.

2. 핵심 콘텐츠는 웹·모바일 상단 ‘폴드’에 배치하기

‘폴드(fold)’는 브라우저 아래의 경계 부분이자, 웹사이트가 한 화면에서 더 이상 보이지 않는 맨 아래 지점을 기준으로 윗부분을 말합니다. 폴드 아래에 위치한 모든 콘텐츠는 필연적으로 스크롤이란 과정을 거쳐야만 도달할 수 있는데요. 때문에 항상 핵심 콘텐츠와 정보는 폴드 라인 위에 배치해야 합니다.

특히 여러분께서 모바일 사이트를 디자인하고 있을 경우, 더욱 폴드 상단 디자인을 중요시할 필요가 있습니다. 모바일 기기의 태생적인 작은 화면 크기 한계로 인해 폴드 역시 짧고 작아져 사용자가 계속 스크롤 하도록 설득한 공간이 줄어들기 때문입니다.

3. 힉-하이먼 법칙을 명심하기

‘힉의 법칙’ ‘힉-하이먼 법칙’이라고도 말하는 이 인지심리학, 인터랙션 디자인 방법론은 사용자에게 주어진 선택 가능 옵션의 수에 따라 사용자가 결정하는 데에 소요되는 시간이 결정된다고 말하는 법칙입니다. 즉 쉽게 말해 고를 선택지가 많을수록 결정까지 걸리는 시간도 늘어난다는 이야기인데요.

때문에 디자이너는 사용자 경험의 각 단계 중간중간 적절한 옵션을 제공해 웹사이트를 방문한 사용자가 웹사이트를 벗어나지 않도록 해야 합니다. 이를 고려한 대표적인 웹 디자인 예시가 바로 긴 메뉴 옵션을 넣는 대신, 하나의 콜-투-액션(CTA) 버튼을 넣는 겁니다.

4. 클릭보다 스크롤을 애용하기

스크롤은 매끄러운 웹 디자인의 필수 요소입니다. 스크롤은 웹 레이아웃들을 자연스럽게 이어주며, 클릭과 비교했을 때도 장점이 확실한데요. 클릭의 경우 필연적으로 발생하는 이동 단계와 로딩 시간으로 인해 사용자 경험 면에서 몰입을 해칠 수 있습니다. 또한 모바일 장치가 보편화된 요즘 스크롤은 모바일 플랫폼 환경에서 더 직관적이라는 장점도 있죠.

무엇보다도, 여러 연구에서 클릭 방식보다 스크롤 방식을 사용했을 때 사용자가 더 여유로움을 느끼고, 사이트에 더 오래 머문다는 통계가 있습니다. 대표적으로 Crazy Egg의 최신 연구에 따르면 클릭 방식을 스크롤 방식으로 바꾼 것만으로도 전환 비율이 약 36% 증가했다고 합니다.

5. 진정성 있고 자연스러운 사진 자료 쓰기

웹사이트를 방문한 사람들이 모든 종류의 사진들을 좋아하는 건 아니라는 사실을 아시나요? 특히 과장된 포즈나 표정을 취한 모델 사진은 특정 기업 사이트에 어울릴지 몰라도, 많은 사람들이 좀 더 진정성 있고 솔직한 이미지에 더욱 친밀감을 느낍니다.

때문에 웹사이트에서 사진을 쓸 때에는 일상 속 풍경을 담거나 삶에 솔직한 자연스러운 이미지를 사용하는 것을 추천합니다. 물론 아무런 도움 없이 적절한 사진을 찾는 것은 쉽지 않은 일입니다. 하지만 사실 셔터스톡이 이미 브랜드에 맞는 스타일을 쉽게 선택할 수 있도록 웹사이트용 카테고리를 선별해 제공하고 있습니다.

6. 시각적인 단서를 활용하기

가끔은 버튼을 바라보는 사람의 이미지나 메뉴 옵션을 가리키는 화살표 이미지를 사용해 보세요. 이렇게 직접적인 이미지 또는 그래픽을 사용하는 것은 웹사이트를 방문한 사용자의 행동을 유도할 수 있는 검증된 테크닉입니다. 노골적이지만 효과는 확실하죠.

7. 스타일리시함보단 가독성 좋은 폰트 우선시하기

가독성이 떨어지는 기울어진 세리프체를 읽느라 가끔 무슨 글자인지 헷갈려 하거나, 무슨 내용인지 목이나 고개를 기울어야 하는 엄청나게 힙한 웹사이트를 방문해 보신 적이 있으신가요? 세상에 아름답게 보이는 웹사이트용 폰트는 무수히 많이 있지만, 의외로 여러분들이 생각하는 아름다운 폰트 중 대부분은 웹사이트 디자인에 적합하지 않습니다.

웹사이트에 필요한 것은 스타일리시하고 아름다우며 힙한 폰트가 아닌 가독성이 있는 폰트입니다. 읽기 쉬운 폰트는 사용자의 집중과 몰입을 방해하지 않으며, 다양한 크기와 화면비에서도 핵심 정보를 쉽게 제공할 수 있습니다. 대표적으로 보통 세리프체나 이탤릭체보단 깔끔하고 기하학적인 산세리프체나 굵은 디스플레이 형태의 폰트가 웹사이트에 가장 잘 어울리는 형태의 폰트죠.

8. 색채 심리 활용하기

색상은 웹사이트 레이아웃에 특정 분위기와 개성을 부여할 수 있는 가장 쉽고 직관적인 방법입니다. 색상을 제대로 선택하는 것 하나만으로도 사용자들이 웹사이트에서 느끼는 느낌과 사용 방법에 영향을 줄 정도죠.

여러분들은 오렌지색이 고객들에게 좋은 가치를 전달할 수 있다는 사실을 알고 있었나요? 파란색은 지능과 상상력과 어울려 디자인 에이전시에 굉장히 잘 어울리는 색상이라는 사실은요? 잘 조정한 노란색은 액체 느낌의 금 역할을 대체할 수 있다는 건 아시나요?

가능한 많은 웹사이트들을 탐색하며 전문 디자이너들, 같은 업계의 색채 심리를 숙지하고, 자신이 디자인하고자 하는 웹사이트에 맞춰 좋은 인상을 줄 수 있는 색상을 선택해 보세요.

9. 모바일용 페이지를 먼저 디자인하기

대부분의 웹 디자이너들은 자신이 디자인한 웹사이트를 모두가 넉넉한 비율의 데스크톱 PC 화면에서 볼 것이라 상상하며 디자인합니다. 하지만 현실은 상상과 다르죠.

실제 전 세계 모든 브라우징 세션의 절반가량은 이미 모바일 장치에서 이뤄집니다. 심지어 일부 분야의 웹사이트의 경우, 모바일 사용자의 비율이 이미 PC 사용자의 비율을 압도하고 있습니다.

때문에 이제 많은 전문 프로 웹디자이너들은 모바일용 페이지를 먼저 염두에 두고 사이트 레이아웃을 구성해야 합니다. 만약 불가피하게 그럴 수 없는 상황에 처한 상태라면, 최소한 다양한 기기에서 효과적으로 아름다운 사이트를 만들 수 있도록 관심을 기울일 필요가 있습니다.

10. 모두를 위한 디자인하기

세계보건기구(WHO)의 발표에 따르면 전 세계에서 적어도 22억 명의 사람들이 크고 작은 시각 장애를 가지고 있으며, 이들 중엔 아예 앞을 보지 못하는 사람들이 있다고 합니다. 이는 곧 전 세계 인구 약 28%의 사람들이 어떠한 형태로든 시각 장애를 가지고 있다는 말인데요.

때문에 이제 디자이너들이 웹사이트를 시각 장애를 가진 사용자도 잘 볼 수 있도록 고려해야 할 때가 왔습니다. 검은색의 텍스트를 흰색 배경과 함께 사용하는 등 레이아웃에서 색상 대조를 높이거나, 큰 크기의 산세리프체 폰트를 적용하는 게 가장 간단하면서도 웹사이트의 접근성과 포괄성을 높일 수 있는 대표적인 방법들입니다.

? 원문 링크: How to Design a Website: 10 Golden Rules for Beginners

• UI
• UX
• 디자인
• 셔터스톡

• 에디터김동욱 (jkkims@ditoday.com)