닫기
VOGUE

Daily DigitalMedia MagazineVOGUE

보그 코리아

프로젝트명
보그 코리아 웹사이트 UX/UI
제작방식
워드프레스, 반응형 구축

보그 코리아는 패션전문 데일리 미디어 매체로써 대한민국 대표 패션 잡지 중 하나입니다. 사용자에게 최신 트렌드를 전달하는 매체로서의 역할을 강조하고 다양한 기사를 명확히 전달하는 미션을 UI/UX에 기반한 웹사이트로 제작했습니다. 다소 답답했던 기존 사이트와는 달리 여백과 시원하고 깔끔한 레이아웃을 사용하여 콘텐츠 경험을 개선하고 사용자의 충성도를 높이도록 했습니다.

OVERVIEW

웹사이트를 분석하고 개편되는 웹사이트에 미디어 매체의 역할과 사용자의 편의성을 적용하기 위해 디지털 매거진 매체에 최적화를 하였으며
불편함, 낮은 가독성, 답답함 같이 직관적이지 못한 요소들은 레이아웃을 변경한 UI로 웹사이트 개선에 사용했습니다.

Mission

데일리
디지털 미디어

고품질의 패션/뷰티
정보 데일리 디지털 미디어
표현 필요

정보전달

직관적이지 못한 요소들로
인한 정보전달의 답답함

모바일 퍼스트

모바일 사용자의 증가로
인한 반응형 페이지 필요

Goal

신뢰성 있는 매체

단정한 블랙&화이트의 컬러와 사용자
의 편의성을 위한 구성을 사용하여
정보 미디어 매체의 필수요소인 신뢰
성을 표현했습니다.

시원한 레이아웃

1600px의 넓은 바디영역으로 다양한
콘텐츠가 답답하지 않도록 했습니다.
홈페이지에 다양한 섬네일으로 각 카
테고리가 분류되어 페이지가 시원해
보이도록 했습니다.

모바일 최적화

모바일 페이지를 별도로 제작하여 PC
와 모바일 모두 최적의 레이아웃을 가
질 수 있습니다.

# 새로운 인사이트의 디지털 매거진

섬네일의 형태

스크롤이 긴 페이지에서 사용자는 스크롤을 빠르게 합니다. 이러한 상황에서 섬네일의 모양이 같을 경우 섹션의 구분이 어렵습니다.
따라서 섹션별로 섬네일에 차별성을 두어 사용자가 섹션의 구분을 인지 할 수 있도록 했습니다.

기사의 다양한 형태와 엘리먼트

한 가지 형태가 아닌 기사의 스타일에 맞는 UI로 기사의 색깔이 명확하게 드러나도록 했습니다.
각 페이지에 엘리먼트를 사용하여 에디터가 편집에 들어가는 시간이 적어지게끔 폰트의 사이즈, 간격, 형태를 맞추었습니다.
기사 작성 시 번거로운 편집을 거치지 않아도 되게끔 편리함을 주었습니다.

SIMPLE

일반 이미지

SIMPLE

일반 텍스트

POCUASED

스페셜

연관 기사 엘리먼트

인용구 엘리먼트

구매 엘리먼트

이미지 슬라이드 엘리먼트

FEELING THE FLOW

화보

03

높은 가독성

800px로 본문 바디값을 잡아 사용자의 가독성을 높였습니다. 빈 여백에 기사의 정보, 관련기사, 배너를 적절히 사용하여 다른 페이지로 유도를 하였으며 친절한 웹사이트가 되도록 했습니다.

800px 바디값

여백 활용

#보그 아이덴티티의 UXUI 확장

GNB의 집중도 분리

보그 글로벌 버튼과 구독버튼을 상단배치해 보그의 주요 기능을 유도했습니다.
비중이 적은 페이지는 전체메뉴에 넣어 GNB는 필요한 정보만 보일 수 있도록 했습니다.
글로벌 가이드라인을 지키며 콘텐츠의 배치로 차별성을 주었습니다.

메인헤더

서브헤더

전체메뉴

정리된 타이포그라피

정보의 전달이 중요한 매거진 사이트에서 타이포를 이용하여 가독성을 상승시켰습니다.
심플하고 깔끔한 웹사이트를 위해 폰트와 폰트 사이의 간격을 충분히 가지도록 했으며 색상과 크기의 차이로 강약을 주었습니다.

시선의 흐름

사용자의 시선이 자연스럽게 옮겨져 정보를 쉽게 볼 수 있도록 했습니다.
이러한 플로우를 이용하여 다양한 콘텐츠가 있는 메인화면에서 각 카테고리의 명확성을 높였습니다.

현재 위치를 파악하는 스크롤

스크롤을 상단에 배치해 자연스럽게 스크롤을 인지할 수 있도록 했습니다.
현재의 위치를 파악하기 쉬워 긴 기사글에서도 이탈률을 줄일 수 있습니다.

Font&Color

보그의 아이덴티티에 모던하고 세련된 이미지를 주기 위해
심플한 폰트와 무채색의 색상을 사용했습니다.
영문에서는 Vogue Avant Garde 폰트를 사용하여 보그의
브랜드 인식을 높이고 브랜드 가치를 강화시켰습니다.

Pretendard

BoldㆍSemiboldㆍMediumㆍRegular

보그코리아

Pretendard

BoldㆍSemiboldㆍMediumㆍRegular

VOGUE

03

GREY

#F5F5F5

02

BLACK

#000000

01

WHITE

#FFFFFF

#보그 아이덴티티의 UXUI 확장

최적화를 위한 그리드

그리드를 이용하여 반응형에도 대응할 수 있도록 했습니다.

모바일에서의 최적화

늘어나는 모바일 사용자를 위한 모바일 페이지 입니다.