사용자 경험에 긍정적인 영향을 미치는 웹사이트의 개별 요소를 고려한다면 로고는 브랜드를 형성하는 요소이므로 그 자체로 고려할 가치가 있습니다. 이 글에서는 웹사이트 로고를 사용할 때 웹사이트 사용자에게 높은 사용자 경험을 보장할 수 있는 방법에 대한 에이전시 실무에서 얻은 몇 가지 팁을 알려드리고자 합니다.
웹사이트 로고가 홈페이지 메뉴 항목을 대체하는 경우
로고는 탐색 모음에 배치되는 경우가 많으며 항상 홈페이지로 연결되어야 합니다. 오늘날 사용자들은 로고를 클릭하면 홈페이지로 돌아갈 것으로 기대합니다. 따라서 로고는 오늘날 웹사이트에 여전히 홈페이지로 연결되는 '홈' 메뉴 링크를 대체하기도 합니다. 탐색에서 별도의 메뉴 항목으로 홈 링크를 표시할 필요가 없습니다. 또한 귀중한 공간을 절약할 수 있습니다.
저희 회사가 위치한 독일 북부의 바렌(뮈리츠) 마을에서는 사용자가 홈페이지와 상호 작용할 수 있도록 집 아이콘을 사용하기로 결정했습니다. 여기에서는 두 가지 이유로 집 아이콘을 사용했는데, 하나는 로고 옆에 다른 로고를 배치하여 로고 클릭 횟수를 줄일 수 있다는 점입니다. 다른 한편으로는 이 웹사이트의 사용자가 인터넷에 익숙하지 않다고 가정했을 수도 있습니다. 솔직히 말해서 이 웹 사이트는 정보 아키텍처, 사용자 인터페이스 및 접근성(특히 링크 및 텍스트 읽기의 대비) 측면에서 눈에 띄는 단점이 많기 때문에 이 집 아이콘은 사용자 경험을 제한적으로 향상시킬 뿐입니다. 따라서 바렌(뮈리츠) 마을의 웹사이트는 부정적인 사례로 남아 있습니다.
반응형 로고: 디바이스 해상도에 따라 로고가 조정됩니다.
데스크톱 보기에서는 많은 공간을 사용할 수 있으므로 로고에 회사명이나 클레임을 포함할 수 있지만, 모바일 보기에서는 공간과 주목도를 고려하여 로고를 축소된 형태로 배치해야 합니다.
웹사이트와 마찬가지로 로고를 크기, 매체 및 환경에 맞게 조정하는 추세는 수년 동안 확립되어 왔습니다. 이를 반응형 로고라고도 하는데, 이는 로고가 환경을 고려하고 작은 미디어에서도 완벽하게 표시되므로 어떤 면에서는 다르게 표시되어야 할 수도 있음을 의미합니다. 모든 디바이스와 화면 크기에서 동일하게 보이는 고정형 로고와 달리 반응형 로고는 각각의 요구 사항에 맞게 조정되므로 다양한 최종 디바이스에서 일관되고 최적화된 사용자 경험을 제공합니다. 로고의 형태만 줄어들 뿐 브랜드 메시지는 그대로 유지됩니다.
스위스 기업 Victorinox는 긍정적인 사례를 제공합니다. 큰 아이콘이 사용자에게 첫 번째 보기로 표시됩니다. 유일한 단점은 로고가 SVG가 아닌 PNG 파일로 통합되어 있다는 것입니다.
이미지 요소만 스크롤로 표시됩니다. 배경에는 스위스 출신임을 강조하는 산이 보입니다. 따라서 첫 번째 뷰포트에서는 브랜딩이 중요합니다. 사용자가 이해해야 합니다. 빅토리녹스는 당신에게 적합한 곳입니다. 사용자가 아래로 스크롤하면 콘텐츠가 중요해집니다. 로고의 크기가 줄어들고 주요 콘텐츠에 더 많은 공간을 제공합니다. 탐색은 상단에 유지되며, 이는 사용성 측면에서도 많은 의미가 있습니다.
기네스 웹사이트는 또 다른 접근 방식을 취하고 있습니다: 로고는 회사 이름과 함께 배치됩니다. 스크롤할 때 로고는 약간 작아지고 내비게이션은 계속 표시됩니다. 사용자가 스크롤을 위로 올리기 시작하면 사용자가 다른 페이지를 방문하고 싶어할 것으로 예상되어 로고와 내비게이션이 다시 커집니다.
Commerzbank의 웹사이트는 최상의 솔루션이 아닙니다. 로고가 회사 이름과 함께 표시되고 SVG로 배치된 것은 좋은 솔루션입니다. 그러나 인접한 탐색 포인트와 매우 강하게 경쟁합니다. 스크롤할 때 내비게이션이 완전히 사라지고 사용자는 내비게이션을 보려면 다시 위로 스크롤해야 합니다. 더 나은 해결책은 zeit.de처럼 사용자가 스크롤을 위로 올리자마자 내비게이션을 표시하는 것입니다.
전환 최적화의 관점에서 볼 때 두 사람의 시선이 담긴 Commerzbank의 큰 이미지는 매우 좋은 솔루션입니다. 두 사람이 버튼 방향을 바라보고 있기 때문에 방문자의 시선이 자동으로 버튼으로 향하게 됩니다. 이러한 방식으로 방문자의 시선을 콜투액션으로 유도하는 것은 매우 효과적입니다. 잘했어, Commerzbank!
모바일 버전의 예를 살펴보면 흥미로워집니다.
모바일 버전에서는 사용자를 위한 상호 작용 옵션을 더 잘 구성하기 위해 빅토리녹스 로고가 더 작게 중앙에 표시됩니다. Guiness는 로고 아래가 아닌 로고 오른쪽에 텍스트를 배치했습니다. 이렇게 하면 하프에 더 많은 공간이 확보되고 상단 탐색 표시줄이 너무 크지 않습니다. 반면에 Commerzbank는 스마트폰 해상도에서 텍스트를 단순히 Blender로 숨겼습니다.
사용자 경험에서 반응형 로고의 역할은 사용자가 웹사이트에 액세스하는 방식에 관계없이 시각적 일관성과 브랜드 정체성을 유지하는 데 도움이 되므로 중요합니다.
로고가 해상도 변경에 전혀 반응하지 않으면 사용자의 시선을 너무 많이 끌 수 있습니다. 하이포베인스뱅크의 다음 예시에서는 매우 눈에 잘 띄는 로고가 특히 스마트폰 보기에서 오른쪽에 배치된 콜투액션과 너무 강하게 경쟁하고 있습니다. 가운데 회색의 탐색 포인트는 데스크톱 보기에서 쉽게 간과할 수 있습니다. 일반적으로 이 웹사이트에는 몇 가지 다른 UX 오류도 있습니다.
따라서 디자이너는 반응형 로고를 보장하기 위해 여러 가지 로고 변형본을 제공해야 합니다. 또한 로고는 다양한 배경과 다양한 크기에서도 잘 작동해야 합니다. 해상도가 작을수록 로고의 디테일이 떨어집니다. 하지만 브랜드 본질을 잃지 않 아야 합니다. 이것이 반응형 로고를 사용하는 훌륭한 예술입니다. 따라서 브랜드 재런칭을 의뢰하는 경우 곧 출시될 로고를 사용할 때 이 요구 사항을 고려하세요.
웹사이트 로고의 파일 형식
반응형 로고를 사용하는 것은 해상도에 따라 올바른 크기가 로드되기 때문에 의미가 있습니다. 예를 들어 스마트폰과 같이 해상도가 작은 경우 더 작은 그래픽만 로드됩니다. 이렇게 하면 로딩 시간이 절약됩니다. 그러나 로딩 시간을 가장 크게 단축하려면 다음과 같이 하면 됩니다:
- 로고를 올바른 해상도 (높이 및 너비 사양도 포함)로 임베드합니다. 로고는 너무 높은 해상도로 임베드된 후 보기에 적합하도록 축소되는 경우가 많습니다.
- 로고를 PNG 또는 JPG 대신 SVG 벡터 형식으로 임베드합니다.
웹사이트 로고를 파비콘으로 사용
로고를 축소하여 파비콘으로 사용하세요. 파비콘의 작은 해상도에서는 인식할 수 없는 텍스트나 기타 작은 요소를 사용하지 마세요.
위 예시의 기네스 웹사이트는 웹사이트에 반응형 로고를 매우 잘 사용하고 있지만 파비콘으로 사용하기에는 적합하지 않습니다. 작은 흰색 기네스 텍스트는 알아볼 수 없으며 파비콘의 전체적인 인상을 떨어뜨립니다. 대비가 낮습니다. 텍스트를 없애고 로고의 하프 부분만 강조하면 훨씬 더 좋은 인상을 줄 수 있습니다. 이 글의 다른 예시들은 모두 기네스보다 이 문제를 더 잘 해결했습니다.
반응형 로고를 전문으로 하는 대행사를 찾고 있다면 저희에게 문의하세요. 4eck Media는 사용자 경험을 위한 전문가입니다.
전문적인 포지셔닝이 중요하다면 다음 아이콘 패키지와 기업 디자인 템플릿에도 관심을 가질 수 있습니다:
반응형 동작으로 웹사이트 로고에 대한 높은 사용자 경험 제공
