개요
오뚜기몰 이커머스 웹사이트를 PC·모바일 전체 리뉴얼한 프로젝트입니다. 친숙한 브랜드 자산은 유지하면서, 디자인 시스템을 정립해 페이지 간 일관성을 확보하고 핵심 동선의 정보 위계를 재정비했습니다.
- 150+: 설계 화면 (케이스 포함)
- 2: 플랫폼 · PC / Mobile
- 1: 통합 디자인 시스템
문제 정의 & 목표
세 가지 문제를 정의하고, 그에 맞는 목표를 세웠습니다.
- 브랜드 자산 유지: 오뚜기 특유의 레드·네이비와 로고 등 오래 쌓인 자산을 해치지 않으면서 현대적인 톤으로 다듬어야 했습니다.
- 일관성 부재: 페이지마다 버튼·뱃지·간격이 제각각이라 누적될수록 신뢰도와 운영 효율이 떨어지는 구조였습니다.
- 복잡한 구매 동선: 옵션·배송유형(실온/냉장·냉동)·결제 케이스가 많아, 정보 위계가 흐려지면 이탈로 이어졌습니다.
Design Goals
- 자산은 지키고, 톤은 정돈: 레드·네이비를 유지하되 채도·여백을 정리해 더 깨끗하고 신뢰감 있는 인상으로.
- 하나의 시스템으로 통일: 컬러·타이포·컴포넌트를 정의해 PC·모바일 전 화면의 일관성을 확보.
- 핵심 동선의 위계 재정립: 탐색→상세→장바구니→결제 흐름에서 무엇을 먼저 볼지 위계를 다시 설계.
디자인 시스템: 컬러
브랜드 컬러는 유지하되 채도와 쓰임을 정리하고, 배송유형 같은 도메인 의미를 색으로 약속했습니다.
- Ottogi Red
#E4002B/ Ottogi Navy#16216B/ Ink#17191D/ Gray#6C6F76/ Paper#F5F3EF - 배송유형: 실온·상온
#E4002B· 냉장·냉동#2C6FE4· 성공·완료#1F9D5B
디자인 시스템: 컴포넌트
반복되는 UI를 컴포넌트로 정의해 PC·모바일에서 동일하게 썼습니다. 모든 요소는 같은 라운드(6px)·라인·간격 규칙을 따릅니다. (바로구매/장바구니 버튼, 실온·냉장/냉동·무료배송·일시품절 뱃지, 할인율·가격 표기, 배송/선물/마일리지 탭 등)
PC: 공통 레이아웃 & GNB
모든 페이지가 공유하는 골격을 먼저 정의했습니다. 상단 유틸 · GNB · 브레드크럼 · 콘텐츠 · 우측 퀵메뉴 · 푸터의 위치와 위계를 고정해, 어떤 화면에서도 같은 방식으로 탐색하게 했습니다. 스크롤 시 GNB는 컴팩트하게 고정되어 검색·장바구니가 늘 손에 닿습니다.
PC: 상품 리스트 & 상세
상품 리스트는 그리드로 썸네일·가격·평점·뱃지를 정렬하고, 정렬·필터·표시 개수를 상단에 모아 탐색 효율을 높였습니다. 상품 상세는 좌측 갤러리 · 우측 구매 영역으로 분리해 가격 → 쿠폰 → 적립·배송 → 옵션 → CTA 순으로, 결정에 필요한 정보를 위계화했습니다.
모바일
좁은 화면에서도 같은 시스템을 그대로 가져가, 메인·로그인·회원등급까지 PC와 동일한 컬러·컴포넌트 규칙으로 설계했습니다.
마치며
오래된 브랜드의 리뉴얼에서 가장 중요한 건 "얼마나 새롭게 바꾸느냐"가 아니라 "무엇을 지키고 무엇을 정리하느냐"였습니다. 레드·네이비라는 자산은 그대로 두고, 흐트러져 있던 컴포넌트와 구매 동선을 하나의 시스템으로 묶어 친숙함과 신뢰를 함께 가져가는 것: 그게 이 프로젝트의 목표였습니다.