소식

상품 이미지만으로도 충분한 템플릿, Lullaby


[Shopping Template]

안녕하세요. 아임웹 UX팀 디자이너 김지영입니다.
인위적인 꾸밈 없이 상품 이미지만으로도 충분하게 사이트를 구성할 수 있는 템플릿 Lullaby를 소개합니다.

핵심 콘텐츠를 명확하게 전달하는

최근 웹사이트 비주얼 영역의 트렌드는 인위적인 이미지나 장식을 없애고, 사용자(고객)에게 단순하고 명확한 메시지를 전달하는 것에 중심을 두고 있습니다. 오랫동안 웹사이트 비주얼은 범용적인 이미지나 합성 이미지를 활용하는 것이 규칙처럼 여겨져 왔습니다. 시각적으로 강렬한 인상을 주면서도 은유적이고, 호기심을 자극하는 효과도 뛰어났기 때문입니다. 하지만 합성의 부자연스러움이나 브랜드의 핵심으로 연결되지 않는 모호한 이미지가 많아지면서 '비주얼 차별성'을 보여주는 것은 점점 더 어려운 일이 되고 있습니다.

이러한 이유로 기존의 '배경 이미지+타이틀 텍스트'조합을 대신하는 새로운 비주얼 표현이 늘어나고 있습니다. 타이틀 텍스트만을 강조하거나 브랜드의 개성이 담긴 컬러와 그래픽을 강조하는 방식, 모호한 이미지 대신 직관적인 상품(서비스)을 바로 보여주는 등 시선의 분산을 막으면서도 핵심 콘텐츠의 접근성을 높여주는 다양한 방법이 시도되고 있습니다.

Lullaby도 이러한 흐름을 반영하여 아래의 규칙을 지켜서 템플릿을 제작했습니다.

  • 상품 이미지만으로 충분히 아름다운 비주얼 영역 구성
  • 쇼핑몰 본질에 충실한 명확한 메시지 전달

상품 이미지를 더욱 감각적이게

Lullaby의 비주얼 영역은 흔한 상업적 이미지 대신 직관적인 콘텐츠를 전달하는 것을 목표로 하고 있습니다. 한정된 범위 내에서 최대한 많은 수의 정보를 보여줄 수 있는 대표적인 방식은 리스트 형태입니다. 하지만 리스트와 같은 단순 상품 나열은 정보 전달에 지나치게 집중되어 있어서 브랜드 아이덴티티를 표현하기에는 어려움이 있습니다.

Lullaby는 이러한 문제를 Masonry 갤러리를 활용하여 해결했습니다. 유동적인 높이 값을 허용하는 Masonry 갤러리 타입은 스크롤에 따른 지루함, 단조로움을 줄여주고 동시에 상품 이미지가 가진 느낌을 풍부하게 보여줄 수 있습니다. 또한 각 이미지에 적용된 상품 상세페이지 링크를 통해 구매로 가는 여정도 단축시킬 수 있습니다.

모바일에서 더 나은 경험을

Lullaby의 모바일 메인 화면은 PC에서 작업한 모든 섹션을 숨기고 모바일 전용 섹션으로 새롭게 디자인 되었습니다. 아임웹은 반응형웹 기반의 솔루션으로 PC에서 한 번 작업하면 모든 기기에서 레이아웃, 콘텐츠 등이 최적의 형태로 제공됩니다. 다만 모바일에서 추가적인 디자인을 원할 경우에는 필요에 따라 모바일 전용 섹션을 활용할 수 있습니다. Lullaby의 경우 PC에서 추가한 Masonry 갤러리 스타일을 모바일에서 그대로 유지하게 되면 모바일 스크롤 동작의 특성 상 사용자가 의도하지 않은 터치(클릭)로 인해 메인 페이지를 다 보기도 전에 원하지 않게 상품으로 강제 이동되는 느낌을 줄 수 있다고 판단했습니다. 이런 이유로 모바일에서는 상품 이미지를 카드형 슬라이드 갤러리를 사용하여 재구성하고, 롤오버 동작이 불가한 모바일 특성을 고려하여 Online Shop과 Help Center 바로가기 이미지 역시 좀 더 직관적으로 확인할 수 있도록 수정 되었습니다.

[참고] 모바일 편집하기 가이드
[참고] 모바일 전용 섹션 활용하기 가이드

gif-img gif-img

컬러

Lullaby 템플릿의 전체적인 분위기를 정의하는 것은 상품 이미지들의 어울림입니다. 이미지의 색감을 방해하지 않기 위해 최대한 컬러 사용을 지양하였습니다. 활성화 메뉴 표시, 이미지 롤오버 시 나타나는 텍스트와 같이 반드시 강조가 필요한 부분에서만 올리브(#A4A237), 밝은 올리브(#DEDA29) 색상을 적절하게 혼용하였습니다.

gif-imggif-imggif-img

폰트

  • (영문) 제목, 본문 폰트: 독특한 셰리프를 가진 Cormorant Garamond를 사용하여 온화하면서도 개성이 살아있습니다.
  • (한글) 제목, 본문 폰트: 한글 역시 본명조를 사용하여 영문 폰트의 느낌을 유지했습니다.
gif-img gif-img

그 외 주의사항

  • 기본 하단은 숨기고 하단고정을 사용
  • 그 외 일부 여백 위젯을 모바일 편집에서 숨김

마치며

Lullaby 템플릿은 비주얼 영역 구성이 막막하고 부담 되셨던 분들께 직관적으로 브랜드 아이덴티티를 녹여낼 수 있는 방법을 제안합니다. 메뉴의 구성도 사용자에게 꼭 필요한 메뉴만으로 구성되어 쉽고 빠르게 나만의 웹사이트를 완성할 수 있습니다. 비주얼 영역에 대한 고민이 많으셨나요? 내 상품에 자신 있고, 잘 찍은 제품 이미지를 갖고 계시다면 Lullaby로 충분히 세련되고 아름다운 웹사이트를 만드실 수 있습니다.

Lullaby 템플릿 살펴보기

gif-img
gif-img
목록으로