코코앤코 화장품 홈페이지 제작 포트폴리오

코코앤코 화장품 홈페이지 반응형

직관적인 인터랙션과 뉴트럴 뷰티 디자인 시스템

[메인 및 컨텐츠 디자인]

피부 본연의 건강함과 깨끗함을 상징하는 웜 뉴트럴 톤과 소프트 코랄을 메인 컬러로 적용하고, 가독성 높은 다크 타이포그래피를 조화시켰습니다.

카드 형태의 직관적인 UI 요소와 부드러운 모션 효과를 부여하여 테스트 과정이 하나의 즐거운 인터랙티브 콘텐츠로 느껴지도록 연출했습니다.

군더더기 없는 미니멀한 레이아웃과 감성적인 화보를 균형 있게 배치하여 브랜드의 신뢰도와 몰입도를 극대화했습니다.

나이·성별·피부 고민 해시태그 선택부터 세부 문항 응답까지 이어지는 진단 프로세스를 한눈에 파악하기 쉬운 스텝 바이 스텝 구조로 설계했습니다.

유분기, 민감도, 색소침착, 탄력성 등 전문적인 바우만 피부 유형 분석 알고리즘을 직관적인 선택형 카드로 시각화했습니다.

진단 완료 후 도출되는 피부 MBTI 결과와 맞춤 솔루션, 추천 제품을 체계적인 리포트 형태로 구성하여 쇼핑몰 구매 전환으로 매끄럽게 연결했습니다.

원클릭 인터랙션 및 모바일 최적화 진단 UX

[웹사이트 UX/UI]

모바일 환경에서도 엄지손가락 하나로 손쉽게 문항을 선택하고 다음 단계로 이동할 수 있도록 터치 친화적 라디오 버튼과 하단 고정 액션 바를 구현했습니다.

직관적인 해시태그 토글 버튼을 통해 여러 피부 고민을 빠르게 지정할 수 있도록 폼 인터페이스를 간소화했습니다.

응답 즉시 실시간 피드백이 전달되는 가벼운 반응형 웹 구조를 확립하여 이탈률을 최소화하고 유저 인게이지먼트를 극대화했습니다.