01 — ART DIRECTION온결 V2는 어떤 분위기로 설계했나요?
온결 V2는 따뜻한 코랄과 짙은 코코아 색상, 흰 여백을 중심으로 만든 뷰티 브랜드 홈페이지입니다. 그린 계열이 중심이었던 V1에서 방향을 확장해, 피부에 닿는 바디케어의 부드러운 질감을 영상과 유리 물방울로 표현했습니다.
제품의 용기와 배경에는 코랄(#D08C81)을, 로고와 주요 문구에는 코코아(#331B0F)를 사용했습니다. 로고의 세리프 서체와 간결한 본문 서체를 함께 쓰고, 제품 목록과 브랜드 메시지 사이에 충분한 여백을 두었습니다.
02 — MOTION & CAMPAIGN물방울에서 브랜드의 첫 장면으로
흩어진 물방울이 중앙으로 모여 하나의 구체가 됩니다. 온결 로고가 나타난 뒤 구체가 다시 분리되면서 메인 화면으로 전환됩니다. 브라우저에서 실시간으로 그리는 약 12초의 인트로이며, 건너뛰기와 다시보기, 기기의 동작 줄이기 설정에 대응하도록 구성했습니다.
메인 화면에서는 AI로 제작한 모델 세 명의 캠페인 영상이 이어집니다. 제품을 들거나 사용하는 장면을 짧게 연결해 브랜드의 분위기를 보여줍니다. 아래 영상은 웹사이트에 사용한 약 9초 분량의 무음 캠페인입니다.
03 — COLLECTION & STORY제품을 비교하고, 브랜드를 이해하는 흐름
제품 컬렉션은 바디워시, 바디로션, 핸드크림, 세트의 네 가지로 구성했습니다. 제품 이미지 아래 이름·용량·가격을 같은 위치에 배치해 상품을 옮겨 보며 비교할 수 있습니다. 이미지 위의 불필요한 장식을 줄이고 용기와 색상이 먼저 보이도록 했습니다.
제품 목록 다음에는 유리 구체와 큰 문구로 브랜드 철학을 소개합니다. 이어지는 모델 에디토리얼은 제품만으로 설명하기 어려운 사용 분위기를 전달합니다. 상품을 빠르게 찾는 방문자와 브랜드를 처음 접하는 방문자가 각자 필요한 정보를 볼 수 있는 순서입니다.
04 — DAILY RITUAL네 가지 제품을 하나의 일상으로 연결
사용 순서는 큰 숫자 01–04와 원형 제품 이미지로 구분했습니다. 씻기, 보습, 손 관리, 루틴 완성의 흐름으로 제품을 소개하고 각 단계에서 관련 상품으로 이동할 수 있게 했습니다. 긴 페이지에서도 다음 단계가 분명하게 보이도록 설명의 길이와 위치를 맞췄습니다.
05 — PRODUCT EXPERIENCE상품 상세부터 장바구니까지 직접 확인
제품을 선택하면 이미지와 설명, 수량 선택, 담기 버튼이 있는 상세 창을 엽니다. 장바구니에서는 담은 상품의 수량을 바꾸거나 삭제하고 합계를 확인할 수 있습니다. 페이지의 색상과 글자 크기를 유지해 브랜드 탐색에서 상품 선택으로 자연스럽게 이어지도록 했습니다.
장바구니 정보는 현재 브라우저에 저장되는 데모입니다. 실제 판매용 쇼핑몰로 확장하려면 결제, 주문 접수, 재고·배송 관리와 운영자 기능을 별도로 연결해야 합니다.
06 — RESPONSIVE DESIGN모바일에서도 제품과 버튼을 읽기 쉽게
390픽셀 폭의 모바일 화면에서는 메인 영상, 제품 목록과 상세 정보를 화면 너비에 맞춰 재배치했습니다. 데스크톱 화면을 그대로 축소하지 않고, 한 번에 읽어야 할 정보와 터치할 버튼의 위치를 기준으로 정리했습니다.
07 — PROJECT SCOPE이 포트폴리오의 제작 범위
이번 콘셉트에서 구현한 것
- 브랜드 화면 기획과 웹 UI 디자인
- AI 제품·모델 이미지와 캠페인 영상
- 물방울 인트로와 화면 전환
- 제품 목록·상세·장바구니 데모
- 데스크톱·모바일 반응형 화면
실제 판매를 위해 추가할 것
- 실제 상품 정보와 판매용 이미지 확정
- 결제와 주문 접수 연동
- 재고·배송·취소·환불 관리
- 회원과 운영자 관리 기능
- 운영 환경에 맞춘 검수
비슷한 뷰티 브랜드 홈페이지를 준비한다면 로고와 브랜드 색상, 제품 수와 옵션, 보유 사진, 참고 사이트를 먼저 정리하면 좋습니다. 영상과 인트로의 필요 여부, 브랜드 소개에 집중할지 판매 기능까지 연결할지도 함께 정하면 제작 범위가 구체적이 됩니다.
홈페이지 제작 서비스와 진행 절차, 홈페이지 기획서 예시, 홈페이지 제작 비용 안내에서 준비할 항목을 확인할 수 있습니다.
자주 묻는 질문
- 온결 V2는 실제 고객사의 쇼핑몰인가요?
- 가상 바디케어 브랜드로 제작한 자체 콘셉트 작업입니다. 실제 고객사 성과나 운영 매출을 제시하는 사례가 아니며, 제품 선택과 장바구니까지의 화면을 시연합니다.
- 영상이 있는 뷰티 홈페이지를 모바일에서도 사용할 수 있나요?
- 모바일 화면에 맞는 배치와 영상 대체 이미지를 함께 설계할 수 있습니다. 온결 V2는 영상 재생·정지 제어와 동작 줄이기 설정에 대응하며, 실제 운영 시에는 대상 기기와 네트워크 환경에서 추가 검수합니다.
- 제품 촬영 없이도 홈페이지 시안을 만들 수 있나요?
- AI 이미지를 이용해 분위기와 화면 구성을 먼저 검토할 수 있습니다. 판매용으로 완성할 때는 실제 제품의 색상, 용기와 표시사항이 정확히 반영된 자료를 사용해야 합니다.
- V1과 V2는 무엇이 다른가요?
- V1은 그린 계열의 제품·모델 배치와 상품 탐색을 중심으로 구성했습니다. V2는 코랄·코코아 색상, 물방울 인트로, 캠페인 영상과 큰 여백을 중심으로 브랜드 표현을 확장했습니다. 온결 V1 화면과 비교하기
디자인 참고: Beauty in STEM의 색상과 여백, 섹션 구성과 모션 흐름을 참고했습니다. 온결의 브랜드 콘텐츠, 제품·모델 이미지와 웹 화면은 콘셉트 프로젝트에 맞춰 제작했습니다. 이미지·영상에는 AI 생성 자료가 포함되며 실제 제품이나 인물의 광고·추천을 의미하지 않습니다.