닫기
OHUI

오휘 더 퍼스트 메종VR 공간에 초대합니다

오휘 더 퍼스트 메종

프로젝트명
오휘 더 퍼스트 메종 웹사이트 UI구성
제작방식
반응형, 360VR

오휘는 1997년 런칭 이래 여성의 이상적인 피부를 위해 끊임없이 발전해 온 내추럴 테크놀로지 코스메틱 브랜드 입니다. 다섯 가지 단청의 빛(輝)을 의미하며, 영원히 빛나는 아름다움을 상징하고 있습니다. 오휘가 보여주고 싶은 라이프스타일 및 무드를 VR로 만든 가상의 공간에서 흥미로운 인터렉션으로 오휘가 영감을 받았던 좋았던 모든 순간을 소비자에게 구체적으로 경험을 줄 수 있도록 공간별 접속 유도, 인터렉션 모션 등 효과적으로 사용자에게 전달하기 위해 구상하였습니다.

Concept

오휘의 더 퍼스트 메종 에디션의 홍보 페이지로써 자유로운 이동과 VR과 공간감적 모션을 통해
사용자에게 오휘의 경험을 전달하며, 더 퍼스트 메종의 컬렉션들을 가상의 공간에서 소개하고 앞으로의 컬렉션을
한번에 볼 수 있는 페이지입니다.

Intro

더 퍼스트 메종의 시작과 가상공간 연결을 위한 ui 적 아이디어&비주얼에 집중하고
사용자에게 재미요소를 주며 앞으로의 콘텐츠의 기대감을 높힙니다.

Landing

컨시어지, 뮤직 홀, 갤러리로 영역으로 마우스 호버 시 해당 일러스트 모션을 통해서 오휘가 전달하고자 하는 느낌을
간접적으로 받을 수 있으며 클릭 시 파시스가 확대되며 해당 콘텐츠 페이지로 진입합니다.

VR공간 UI

각 콘텐츠 VR 영역에서 뮤직 홀, 갤러리, 또는 메인 홀 로 진입할 수 있는 영역이 있으며
GNB, 오휘 홈페이지 진입 영역, 소리 영역이 화면 UI로 고정되어 있습니다.

GNB

이미지 위에 타이포 메뉴가 배치되고 메뉴 관련 배경 이미지가 바뀌게 구성하여 각 영역의 분위기를 느낄 수 있습니다.
또한 GNB를 통하여 각 VR 페이지를 자유롭게 이동이 가능합니다.

Concierge

더 퍼스트 메종의 여정이 시작되는 곳으로 뮤즈인 김태리의 인사말과 함께
더 퍼스트 에디션들을 모티브들로 인테리어 되어있습니다.

    김태리 배우님의 인사말 영상
    손석구 배우님의 특별 목소리 도슨트 또는 오휘에게 영감을 준
    클래식 BGM으로 눈과 귀를 즐겁게 즐길 수 있습니다.

Main Hall

컨시어지에서 메인 홀 클릭 시 확대되며 이동하는 모션으로 현장감이 느껴지게 하였고,
메인 홀에서는 뮤직 홀과 갤러리를 한눈에 보이도록 하여 연결성을 강조하였습니다.

  • 제품에 대한 설명과 영상으로 이해도를 높이고,
    엑스 버튼으로 메인화면과의 연결성을 높였습니다.

Music Hall

스페셜 에디션 테마곡에 맞춰 준비한 4가지의 연주 영상을 감상할 수 있는 공간입니다.
팝업으로 정보를 얻을 수 있도록 설계하였습니다.

  • 각 클래식 음악에 따라 콜라보한
    아티스트의 정보를 함께 기재하였습니다.

  • 각 악기들이 하나씩 시선의 이동에 따라 활성화가 되며
    해당 일러스트 클릭 시 스페셜 에디션 테마곡의 영상이 팝업으로 띄워지며,
    메인홀, 갤러리로 진입할 수 있습니다.

Gallery

더 퍼스트 제너츄어의 고급스럽고 력셔리한 이미지를 담아내어 더욱 고귀하고 특별한 아름다움을 전하기 위해
갤러리 형식으로 구성하였고 해당 액자를 클릭 시 팝업으로 각 연도의 컬렉션 히스토리 뿐 만 아니라
앞으로 선보일 오휘의 새로운 컬렉션도 전시되어는 공간입니다.

  • Debutante Collection – #The Beginning of Debutante​

  • Imperial Jewel Edition – #Ruby edition

  • Debutante Collection – #The Beginning of Debutante​​​

  • Time for Love Collection – #You have the moon​​

VOICE TOUR

배우 손석구 도슨트와 함께
갤러리를 감상하세요

ABOUT

오휘의 에디션 소개 페이지로서 편집적인 레이아웃 형식으로
제품 컬리인 골드와 함께 예술적인 느낌을 강조하였습니다.

  • 메인 홀과 대표 제품으로 썸네일을 구성하였습니다. 대표 제품을 3D 모델화하여 공간감을 주었습니다. 이번 더 퍼스트 메종의 각 콘텐츠 영역을
    대표 사진과 함께 설명글로 정리하였습니다.
    오휘의 4가지 컬렉션으로 발표된 제품들을
    클릭 시 이미지가 커지며 설명글이 나오는 모션을
    이용하였습니다.

MOBILE

웹에서의 특이하고 공간감이 느껴지는 모션을 모바일에서도 전달이 되도록 구성하였습니다.

  • 세로 스크린

  • 가로 스크린