명품 브랜드의 웹사이트는 보통 어느 나라에서든 원활한 접근이 가능하도록 호환성을 높이고 누구나 편하게 볼 수 있도록 직관적인 UI를 사용하고 있기에 장식적 디자인 요소가 많은 편은 아닙니다. 폰트는 영문 위주이며 국가에 따라 기본이 되는 산세리프, 세리프 폰트를 사용하고 있습니다.
그럼에도 브랜드마다의 UI적 특성이 조금씩 다르고 또 보통의 브랜드 사이트들과 대표적 차이가 있는 부분들이 있어 몇 가지 명품 브랜드 웹사이트를 탐색해봤습니다.
1. 보테가 베네타
#기본레이아웃 #심플
보테가 베네타의 메인 이미지는 심플하게 대표 아이템의 아트워크 이미지 배너 1개로 구성 되어있습니다. 모바일 사이즈와 동일한 이미지를 PC에 사용하였고 PC버전 사이트 wrap 가로 사이즈는 1440px을 사용하고 있습니다.
글로벌 웹사이트인 명품 브랜드들의 대표적인 특징은 mega menu를 사용하고 있다는 점입니다. 메가메뉴는 카테고리가 많고 어디서나 볼 수 있는 gnb에 그래픽 배너를 넣을 수 있는 장점이 있습니다. gnb 메뉴는 웹사이트의 구성 중 가장 중요하고 접근 가능성이 높은 곳이라고 할 수 있습니다.
보테가 베네타에서도 이러한 메가 메뉴를 사용하여 큰 분류인 여성/남성/선물로 구분한 뒤 각 카테고리의 전체 사이트맵과 같이 펼친 상태로 메뉴를 한번에 접근할 수 있도록 구현하고 있습니다.
보테가 베네타 글로벌 웹사이트의 스토어 페이지 내 상품리스트는 4열로 배치되어있고, 세로 길이가 그리 길지 않은 직사각형의 형태입니다. 썸네일은 심플한 그레이톤으로 구성되어 마우스 오버 시 제품의 옆모습, 의류 제품의 경우 뒷모습을 보여주는 형태로 구현되어 있습니다.
마우스 오버 시 해당 상품의 컬러 블록도 바로 확인 가능하여 쇼핑몰 이용에 편리함을 주고 있습니다.
상품 상세페이지는 모바일 버전에서 특징적인 부분이 있었는데 상품의 더보기 이미지를 양쪽 스와이프로 구현하면서도 양쪽에 더 이미지가 있다는 것을 직관적으로 확인할 수 있도록 양쪽 이미지의 일부를 보여주는 형태로 구현한 점입니다.
또한 검색 버튼은 우측에서 나타나는 레이어 팝업으로 추천 검색어가 보여지고, 배경은 dim 처리 되어 검색에 집중할 수 있도록 구현되어 있습니다.
전 세계를 대상으로 하는 글로벌 브랜드이기에 국가/지역 선택의 기능도 눈여겨 보았는데요,
대륙별로 언어가 지원되는 국가별 리스트가 나타는 탭 형태의 레이어 팝업으로 구현했습니다.
전반적으로 보테가베네타의 글로벌 웹사이트는 화이트 배경 + 블랙 텍스트로 제품 이미지와 메인 로고의 브랜드 컬러를 강조한 군더더기 없이 깔끔하고 기본적인 형태를 유지하고 있었습니다.
2. 샤넬
샤넬의 글로벌 사이트입니다.
상단에 샤넬 패키지에서 볼 수 있는 블랙라인을 넣어 브랜드 아이덴티티 요소로 사용하고 있습니다. 풀 와이드 사이즈를 지원하여 메인페이지 하단으로는 컬렉션 런웨이 영상, 캠페인 콘텐츠 등이 풀화면 슬라이드처럼 구성되어 있습니다.
풀화면 슬라이드 시 배경 이미지 영역에 패럴랙스 효과가 적용되어 시간차로 약간의 재미를 주고 있습니다.
다만 콘텐츠 영역만 풀화면으로 상단 gnb의 유틸메뉴 영역은 1342px을 유지하고 있습니다.
샤넬도 역시 메가메뉴를 사용하고 있었는데요, 상단 메뉴 영역은 스크롤 시 자동으로 사라지며, 위로 스크롤 할 때만 나타나고 아래로 스크롤 시에는 로고만 나타나도록 하여 콘텐츠를 탐색하는 동안 깔끔하게 로고만 보여지는 형태로 집중 영역에만 집중할 수 있도록 불필요한 요소를 줄인 것을 확인할 수 있었습니다.
전체 메가메뉴는 왼쪽에 해당 카테고리의 메인 역할을 하는 홈 화면으로 갈 수 있도록 이미지 배너를 사용하고 있습니다.
샤넬의 메가메뉴에서 사용된 홈 바로가기 이미지 배너는 모바일 버전에서도 이렇게 동일하게 구현되어 일관성을 유지하고 있습니다. 반응형에 최적화되어 가로로 나열된 디자인을 세로로 나열 형식만 변경한 것을 볼 수 있습니다.
샤넬의 글로벌 웹사이트의 가장 큰 특징은 상단의 블랙 라인이 샤넬의 아이덴티티를 대변한다는 점입니다. 가장 심플한 표현으로 가장 샤넬다운 디자인을 구현하고 있다는 것이 인상적입니다.
3. 구찌
구찌의 글로벌 웹사이트는 완전한 풀 와이드 사이즈로 구현되어 있습니다.
우측으로 자동 슬라이드 되는 메인 배너와 텍스트 + 버튼 조합의 일반적인 갤러리 슬라이드를 메인에 적용하고 있고, 스크롤 하여 대표 제품을 소개하고 각 룩북 이미지를 매거진 레이아웃으로 배치하여 재미를 주고 있습니다.
구찌 사이트에서 특징적인 부분은 상단 gnb 영역의 배경 컬러를 그라디언트로 표현하여 고급스러운 느낌을 만들어냈다는 점입니다. 그라디언트 상단 메뉴는 실제로 종종 사용되기는 하지만 그리 많은 사이트에서 본 디자인은 아니라 유니크한 느낌도 줍니다.
웹사이트 첫 접속 시 마주하는 가장 중요한 슬라이드 이미지에서 동영상 또는 이미지 콘텐츠에 주목할 수 있도록 레이아웃을 구분하지 않고 자연스럽게 표현하기 위해 이미지와 잘 어우러지는 그라디언트를 채택한 듯 합니다.
스크롤 시 상단 메뉴의 컬러는 블랙으로 채워져 메뉴로의 접근이 더욱 원활하도록 변경되는 인터랙션으로 구현되었습니다.
상품 리스트의 인터랙션도 재미 있었는데요, 상품 썸네일은 그레이톤 누끼 배경으로 제품에 집중할 수 있도록 하면서도 마우스 오버 시 백그라운드가 화이트 컬러로 변경되며 탐색하고 있는 제품에 하이라이트 효과를 주고 있습니다.
또한 제품의 상세 페이지에 접근하지 않아도 좌우로 스크롤하여 제품의 다른 이미지를 탐색할 수 있도록 하였습니다.
레이아웃 상에서 또 한가지 독특한 점은 제품의 이미지 영역과 텍스트 영역이 마우스 오버시 분리되어 표현된다는 점입니다. 위 캡처 이미지에서 흰색 라인 또는 여백으로 상품에 그리드가 생성이 되는데, 마우스 오버하여 나타나는 상품명과 금액 등 텍스트 영역이 이 그리드를 벗어나게 표현이 되고 있습니다.
지정된 그리드에서 벗어난 영역이지만 그 영역들끼리의 규칙이 있어 재미를 주는 인터랙션이 되고 있습니다.
구찌 역시 메가메뉴를 사용하고 있습니다.
구찌 사이트의 메가메뉴는 중간에 작은 이미지 슬라이드배너까지 사용함으로서, 분류 보기 자체에서도 접근성을 최대화한 것을 볼 수 있습니다.
4. 에르메스
에르메스의 글로벌 웹사이트는 고급스러운 베이지톤이 전반적으로 깔려 있어 차분한 느낌을 주고 있습니다.
gnb 영역에서 좌우 메뉴들과 로고의 배치 역시, 로고 그래픽이 주는 느낌 때문인지 여백이 많고 텍스트가 작고, 메뉴 영역을 풀사이즈가 아닌 모바일의 햄버거 메뉴 형태를 PC버전에서도 사용함으로써 심플한 느낌입니다.
전체 가로 사이즈는 1667px, 콘텐츠 영역은 1303px의 사이즈를 사용하고 있습니다.
햄버거 메뉴 클릭 시 우측에서 모바일 메뉴와 같은 가로 사이즈의 스크롤 가능한 팝업 메뉴가 나타납니다.
에르메스 사이트 역시 메뉴 팝업에서 이미지 배너를 함께 사용하고 있어 콘텐츠를 강조한 점을 확인할 수 있습니다.
메인페이지는 콘텐츠 영역을 유지하며 다소 널찍한 여백을 활용하고 있습니다. 에르메스의 국내 버전 사이트에서는 상품 하단의 텍스트나 중간에 보이는 middle 사이즈의 텍스트들이 사이즈가 약간 어색한 것을 볼 수 있는데요, 에르메스의 사이트 전반에서 사용하는 대표 폰트 디자인의 특성상 차이로 보입니다.
에르메스 사이트의 상품 상세보기 페이지 내 이미지 확대보기 레이어에서 보여주는 최대 이미지의 화질이 정말 좋아 조금 놀랐는데요, 웹용 webp 이미지를 사용하지 않았을까 확인해보았으나, 1700px 짜리 jpg 파일을 사용하고 있었습니다.
브랜드의 명품 가치를 웹상에서도 고급스러운 이미지를 통해 표현하고 있는 듯 합니다.
5. 지방시
지방시의 글로벌 웹사이트에서도 브랜드의 아이덴티티를 표현하고자 한 특징적인 부분이 있었습니다.
gnb 영역에서 로고와 좌우 메뉴가 middle 정렬이 기본이라면, 지방시 웹사이트에서는 로고를 정가운데 배치하면서도 상하 여백을 좌우의 메뉴의 여백과 차이를 두어 정중앙에 위치한 로고에 위엄있는 중압감을 주는 듯한 느낌입니다.
이 로고는 메인페이지에서 스크롤 시에도 동일한 위치에 고정되어 콘텐츠와 로고의 고급스러운 조합을 계속 탐색할 수 있도록 합니다.
또한 콘텐츠의 분위기를 만들어내는 메인 컬러를 잡아 세로로 스크롤되는 풀 스크린 슬라이드에 따라 배경 과 로고색을 변경해줌에 따라 한 페이지에 구성된 콘텐츠임에도, 스크롤 시마다 각 콘텐츠에 독립적으로 집중할 수 있는 환경을 제공하고 있습니다.
배경, 메뉴 등 텍스트, 로고 의 컬러를 슬라이드에 따라 변경되는 컬러로 동일하게 변경해주고 있어 하나의 사이트에서 다양한 UX를 제공하고 있습니다. 컬러의 조합들이 고급스럽고, 로고가 가운데에 위엄있게 배치됨에 따라 브랜드의 이미지를 경험적으로 느낄 수 있어 디자인적으로 즐거운 경험이라 생각됩니다.
상품 리스트는 제품 이미지를 정면/측면/착용컷 등으로 제품 특성을 잘 살려내는 썸네일 이미지를 다양하게 사용하고 있습니다.
지방시 사이트의 상품 상세페이지는 제품의 큰 이미지를 좌우 50%로 배치하여 이미지 위주로 제품을 탐색하기에 최적화되어있다고 볼 수 있을 것 같습니다. 이외 상품에 대한 세부 정보는 모두 클릭하여 레이어 팝업으로 추가 확인이 가능하도록 우측 정보 영역의 요소는 최소화한 것을 확인할 수 있습니다.
지방시 사이트의 모바일버전에서도 역시 중심에 로고가 배치되어 gnb영역에 국한된 것이 아닌 콘텐츠와 어우러지는 디자인을 연출하고 있습니다.
위 5가지 브랜드 사례에서 확인한 글로벌 브랜드 사이트의 공통적 특징을 정리해보았습니다.
1. 영어 외의 언어는 각 언어의 대표적인 serif / san-serif를 사용
2. 메가 메뉴 + 이미지 배너 사용
3. 완전한 반응형
4. 컬렉션 / 캠페인 이미지를 강조하는 디자인
5. 쇼핑 친화적 & 콘텐츠 탐색 친화적 2가지 성격으로 나뉨
명품 소비 시장은 여전히 오프라인이 강세이긴 하지만, 온라인으로도 점차 확대 됨에 따라 브랜드 공식 웹사이트에서도 온라인 스토어를 오픈하고 직접 구매가 가능하도록 기능을 추가하고 있는 추세입니다.
이에 따라 편리한 UI/UX를 구현하면서도 뻔하지 않고 고급스러운 이미지와 명품으로서의 가치를 드러낼 수 있는 요소들을 브랜드의 특성별로 서로 다른 부분들에서 구현하고 있는 것을 확인하였습니다.
(고화질 제품 이미지, 다양한 콘텐츠의 제공, 동영상 활용 등)
정통 브랜드들의 IT 화에도 유심히 관심을 가지고 지켜보며 업계 종사자분들의 트렌드를 읽는 시야가 더 넓어지기를 바랍니다.
'Design Trend' 카테고리의 다른 글
| [디자인트렌드] 프로페셔널해 보이는 웹디자인을 위한 부가적 요소 4가지 (0) | 2022.02.23 |
|---|---|
| [디자인트렌드] behance 국가별 최신 디자인 트렌드 확인하는 방법 (0) | 2022.02.17 |
| 웹디자인 포트폴리오 제작에 유용한 웹화면 녹화 gif 만들기 - 윈도우 화면 녹화 (2) | 2022.01.28 |
| [UI/UX] 깃허브의 신박한 회원가입 플로우 UX분석 (1) | 2021.09.24 |
| [디자인트렌드] 트렌디한 세리프 무료폰트 (2) | 2021.09.23 |
