Detail Page Design
TECATINOL
AMPOULE
퍼플 컬러를 중심으로 성분 스토리를 시각화한 상세페이지
동국제약 테카티놀 앰플 & 토너 상세페이지는 제품 성분과 효능을 직접적으로 나열하기보다, 퍼플 계열 컬러를 중심으로 한 감각적인 화면 구성으로 브랜드 메시지를 전달합니다. 제품과 연관된 컬러 무드를 일관되게 적용해 피부 고민과 솔루션의 연결성을 자연스럽게 보여주며, 사용자가 페이지를 따라가며 제품의 역할을 단계적으로 이해할 수 있도록 설계했습니다.
PROJECT OVERVIEW
본 프로젝트는 테카티놀 앰플 & 토너를 개별 제품이 아닌, 피부 고민을 단계적으로 관리하는 케어 루틴으로 제안하는 데 초점을 두었습니다. 퍼플 계열의 컬러 무드를 일관되게 적용해 성분 스토리와 제품 효능을 연결하고, 사용자가 페이지 흐름을 따라가며 제품의 역할을 자연스럽게 이해하도록 구성했습니다.
DESIGN APPROACH
앰플과 토너 각각의 특징은 컬러 톤과 레이아웃으로 구분해 한눈에 인지되도록 구성했습니다. 핵심 성분과 사용 포인트는 카드형 정보 구조로 정리해 가독성을 높였으며, 복잡한 설명 없이도 기능 차이와 사용 목적이 명확하게 전달되도록 설계했습니다. 이를 통해 모바일 환경에서도 정보 피로도를 낮추고 제품 이해도를 자연스럽게 끌어올렸습니다.
Purple
Color Story
제품과 연결되는 퍼플 컬러 무드를 중심으로 성분, 효능, 피부 고민의 흐름을 감각적으로 시각화했습니다.
Ingredient
Structure
핵심 성분과 사용 포인트를 카드형 구조로 정리해 복잡한 설명 없이도 제품 특징이 명확히 전달되도록 했습니다.
Care
Routine Flow
앰플과 토너의 사용 순서와 조합을 시각적으로 연결해 하나의 홈케어 루틴으로 인식되도록 구성했습니다.
VISUAL FLOW
상세페이지는 제품별 특징, 핵심 성분, 사용 순서를 하나의 스토리보드처럼 연결합니다. 안정적인 톤앤매너 안에서 제품의 전문성과 신뢰감을 유지하고, 동국제약의 피부 과학을 일상 속 케어 경험으로 자연스럽게 확장했습니다.
Visual Archive
퍼플 컬러 시스템과 카드형 정보 구조를 통해 테카티놀 라인의 성분 스토리와 케어 루틴 메시지를 명확하게 전달했습니다.
Result
성분 중심 메시지를 감각적인 케어 루틴으로 확장한
스킨케어 상세페이지 디자인 사례입니다.