brunch

매거진 홈페이지 제작 이야기

라이킷 14 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 비쥬얼스토리 Apr 21. 2023

[UI/UX] 21가지 홈페이지 디자인 철학

트렌디한 웹사이트 디자인을 위한 21가지 방법론

다음은 22가지 주요한 홈페이지 디자인 철학이 담긴 좋은 글을 소개합니다.

1. 픽셀 대신에 밀도(Density)를 고려하여 디자인을 해야 합니다.

밀도란 화면의 인치당 픽셀 수를 의미하며, 예를 들어 200 x 50 dp 크기의 버튼을 디자인했다면 160ppi 화면에서는 200 x 50 픽셀로 표시됩니다. 하지만 320ppi 화면에서는 400 x 100 픽셀 또는 원본 크기의 2배 크기로 표시됩니다. 따라서 디자인할 때는 밀도를 고려하여 크기를 조정해야 합니다.

iPhone XS Max의 화면 크기는 414 x 896 dp입니다. 하지만 실제 화면에 출력될 때는 픽셀이 사용됩니다. iPhone XS Max는 화면 밀도가 @3x이므로, 디자인을 할 때는 1242 x 2688 픽셀 크기로 디자인해야 합니다. 이렇게 디자인한 다음, 에셋을 @3x로 제작하여 전달합니다. 이렇게 함으로써 디자인이 더욱 선명하게 표현되며, 사용자 경험을 더욱 향상할 수 있습니다.

2. 8dp 간격으로 디자인하세요.

8dp 간격으로 디자인을 하면 화면 크기를 8로 나눌 수 있어 간단하게 정렬할 수 있습니다. 8포인트 그리드에서 8씩 증가하여 디자인하면 일관성을 유지할 수 있으며, 간격에 대한 추측이 필요 없이 우리가 정의한 간격 규칙과 일치합니다.

3. 색상 가중치를 사용하여 계층 구조 설정 하세요.

모든 색상에는 시각적인 가중치가 있어 콘텐츠 간의 계층 구조를 만드는 데 사용할 수 있습니다. 이를 활용해 한눈에 계층 구조를 파악할 수 있도록 해당 서비스(Shader)를 사용해 보세요.

참조 : https://prowe214.github.io/color-shader/

4. 속도를 늦추지 마세요.

사용자가 제품과 상호 작용할 때는 속도와 효율성이 가장 중요합니다. 애니메이션의 최적 속도는 200~500ms입니다. 이 수치는 인간 두뇌의 특성을 기반으로 하며, 100ms보다 짧은 애니메이션은 인식되지 않고 1초보다 긴 애니메이션은 지루함을 전달할 수 있습니다.

참조 : https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9

5. 친절한 알림을 통해 스팸을 차단해 주세요.

홈페이지 내에 스팸관리 기능을 추가하여, 사용자가 원치 않는 스팸 메시지를 차단하고, 필요한 메시지만 제공할 수 있도록 할 수 있습니다. 이를 위해서는 다음과 같은 기능을 제공할 수 있습니다.

· 스팸 필터링 기능: 홈페이지 내에 스팸 메시지를 자동으로 필터링하여, 사용자가 원하는 메시지만을 받을 수 있도록 합니다.

· 스팸 신고 기능: 사용자가 스팸으로 인식하는 메시지를 신고할 수 있는 기능을 제공하여, 해당 메시지를 차단할 수 있도록 합니다.

· 스팸 차단 기능: 사용자가 스팸으로 인식하는 발신자나 도메인을 차단할 수 있는 기능을 제공하여, 해당 발신자나 도메인에서 온 메시지를 차단할 수 있도록 합니다.

· 이메일 구독 관리 기능: 사용자가 구독한 이메일을 관리할 수 있는 기능을 제공하여, 필요 없는 구독을 취소하거나, 수신 주기를 조정할 수 있도록 합니다.

이러한 스팸관리 기능을 제공함으로써, 사용자는 필요한 메시지만을 제공받을 수 있으며, 홈페이지 운영자는 스팸 메시지를 최소화하여, 사용자 만족도를 높일 수 있습니다.

6. 개인정보의 활용은 투명하게 공개하세요.

사용자의 동의 없이 수집되는 개인정보는 신뢰를 떨어뜨리고, 법적 문제를 야기할 수 있습니다. 따라서 홈페이지에서 개인정보 처리 방침을 명시할 때, 모든 정보를 명확하고 쉽게 이해할 수 있는 방식으로 공개해야 합니다. 사용자가 어떤 개인정보가 수집되고 어떻게 활용되는지 이해할 수 있도록 구체적인 정보를 제공하는 것이 중요합니다. 또한, 개인정보 처리 방침에 대한 이해를 돕기 위해 가이드나 FAQ 등을 제공하여 사용자들이 쉽게 정보를 찾아볼 수 있도록 해야 합니다.

7. 모든 프로세스에는 쉽게 취소할 수 있도록 하세요.

모든 프로세스 내에는 간단하게 취소도 이루어져야 합니다. 복잡한 과정을 거치거나 다양한 지원 라인에 전화하거나 이메일을 보내거나 상담원과 채팅할 필요 없이 "취소"라고 적힌 버튼만 있으면 됩니다. 이를 통해 고객이 이용을 중단하더라도 불필요한 어려움 없이 원활하게 취소할 수 있도록 해야 합니다.

8. 카피 문구에 당신의 삶을 포함시키세요.

사용자들은 작은 세부사항에서도 즐거움을 느끼기 때문에, 로딩 메시지나 온보딩 화면 등에서도 유머와 개성을 담아 콘텐츠를 만들면 마케팅 효과가 높아집니다. 이러한 접근 방식으로 더욱 기억에 남는 광고와 콘텐츠를 제공할 수 있습니다.

Reddit의 공동 창업자인 알렉시스 오하니안은 'Tools of Titans'에서 다음과 같이 말했습니다.

약간의 시간을 투자하여 좀 더 인간적으로 만들거나 브랜드에 따라 조금 더 재미있고, 조금 더 다르거나,

조금 더 무엇이든 만들 수 있습니다.

그만한 가치가 있고 그것이 나의 도전입니다.

9. 다크 모드를 추가하세요.

사이트나 앱에서 사용자가 어두운 환경에서 쉽게 사용할 수 있도록 밝은 배경 대신 어두운 배경을 사용하는 "다크 모드"를 추가해 주세요. 이는 시력에 유리하고 에너지를 절약할 수 있는 기능으로, 많은 사용자들이 선호하는 기능 중 하나입니다.

10. 부적절한 오류 상태를 제공하지 마세요.

비록 그다지 흥미로운 이벤트가 아니더라도, 애플리케이션의 모든 이벤트를 기억에 남을 경험으로 제공할 수 있습니다. 오류 상태는 보통 부정적인 경험이지만, 개성이나 즐거움을 제공함으로써 긍정적인 경험으로 전환할 수 있습니다.

참조 : https://dribbble.com/takemeto404pls

11. 패턴과 그라디언트를 활용해 보세요.

패턴과 그라디언트는 디자인에 있어 매우 중요한 역할을 합니다. 이들을 사용하면 일반적인 콘텐츠도 더욱 매력적으로 보이고, 미학적으로 즐길 수 있습니다. 패턴은 창의적으로 또는 간단하게 만들 수 있으며, 그라디언트는 색상의 변화를 통해 흥미를 끌어냅니다. 하지만 이러한 요소들이 주요 내용을 가리거나 주의를 산만하게 해서는 안 됩니다.

12. 타겟팅 요소 크기

터치 인터페이스를 사용하는 경우, 탭할 수 있는 요소의 크기를 적절히 설정하세요.

다른 항목을 실수로 선택하는 것은 쾌적하지 않은 경험입니다. 요소 사이의 2mm 패딩은 실수를 방지하기 위한 좋은 경험 원칙입니다. Apple의 iPhone 휴먼 인터페이스 지침에서는 최소 대상 크기를 너비 44픽셀, 높이 44픽셀로 권장합니다. 마이크로소프트의 Windows Phone UI 디자인 및 상호 작용 가이드에서는 터치 대상 크기가 34px이고 최소 터치 대상 크기가 26px인 것을 제안합니다.

13. Infinite Scroll을 활용하세요.

홈페이지 내에 무한 스크롤은 소셜 미디어 앱에서 널리 사용되는 기술로, 페이지 이동 없이 스크롤로 콘텐츠를 불러오는 것입니다. 하지만 이 기술이 모든 앱에 적용되는 것은 아닙니다. 예를 들어, 메시지, 이메일, 할 일 항목, 검색 등에서는 시작, 중간 및 끝이 명확하게 구분되어야 하며, 목록에 항목이 몇 개나 있는지 파악할 수 있어야 검색, 정렬 또는 필터링을 할 수 있습니다.

14. 말하지 말고 보여주세요

홈페이지 내 복잡한 시스템이나 인터페이스를 이해하기 위해 꼭 읽어야 하는 것은 아닙니다. 사용자들은 이해하기 쉬운 시각적인 방법을 선호합니다. 비디오 데모는 복잡한 소프트웨어나 인터페이스에 이상적인 방법입니다. 비디오가 불가능한 경우, 화면에 나타나는 팁이 좋은 시작점이 될 수 있습니다.

15. 기본 네이티브 구성 요소를 활용하세요.

내장된 구성 요소를 활용하면 사용자에게 익숙한 경험을 제공할 수 있으며, 입력 오류를 피할 수 있습니다. 사용자가 새로운 구성 요소를 배워야 하는 경우 성가신 경험이 될 수 있기 때문에, 객관적으로 더 나은 디자인이라 할지라도 내장된 구성 요소를 활용하는 것이 중요합니다.

16. 옵션을 제공할 때에는 항상 기본값을 제공하세요.

드롭다운에서 자주 선택되는 옵션을 분석하고 전체 사용 패턴을 고려하여 스마트 기본값을 설정하면 사용자가 이 단계를 건너뛸 수 있습니다. 이를 통해 사용자 경험을 개선할 수 있습니다.

17. 옵션은 단순하게 제공하세요.

가능한 경우 분석을 사용하여 드롭다운의 옵션이 불필요할 수 있음을 알릴 수 있습니다.

사용자가 소수의 옵션만 선택하고 다른 옵션은 거의 선택하지 않거나 선택하지 않는 경우 해당 옵션을 제거하는 것을 고려할 수 있습니다.

간결한 드롭다운을 사용하면 방문자가 가장 관련성이 높은 옵션을 더 쉽게 선택할 수 있습니다.

18. 개별 사용자 패턴을 분석하여 기본값을 제공하세요.

개별 사용자를 분석하여 스마트한 기본 값을 제공할 수 있습니다. 예를 들어, 베트남 음식을 자주 주문하는 사용자는 해당 요리를 미리 선택하고 관련된 옵션을 제공할 수 있습니다. 입력이 더 똑똑하게 되면 사용자에게 더 나은 경험을 제공할 수 있습니다. 이 기능은 항공사나 여행 소프트웨어에서도 작동할 수 있습니다. 예를 들어, 예약 웹사이트에서 자주 이용하는 출발지와 도착지 항공편을 알게 되면 해당 옵션을 기본값으로 설정할 수 있습니다.

19. 시각적 요소를 사용하세요.