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

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

메인 화면 기획 및 참여 유도형 피부 MBTI 인터랙션 랜딩

[메인 화면 기획]

'내 피부 타입을 정확히 아시나요?'라는 직관적인 질문과 감각적인 뷰티 비주얼을 첫 화면에 전면 배치하여 사용자의 자발적인 진단 참여를 유도하도록 기획했습니다.

피부 컨디션은 계절과 라이프스타일에 따라 변화한다는 점을 명시하여 3개월 주기 테스트의 필요성을 자연스럽게 설득했습니다.

중앙에 강조된 '피부 타입 테스트하기' CTA 버튼을 통해 복잡한 절차 없이 즉시 진단 단계로 진입할 수 있도록 사용자 동선을 최적화했습니다.

메인 디자인 시스템 및 뉴트럴 클린 뷰티 비주얼 아이덴티티

[메인 디자인]

피부 본연의 건강함과 맑은 에너지를 시각화하기 위해 웜 뉴트럴 베이지와 소프트 테라코타 코랄을 메인 컬러로 설정하고,

선명한 다크 타이포그래피를 조화시켜 고급스러운 무드를 완성했습니다.

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

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

콘텐츠 디자인 및 스텝 바이 스텝 피부 진단 정보 구조화

[콘텐츠 디자인]

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

유분기, 민감도, 색소침착, 탄력성 등 전문적인 바우만 피부 유형 분석 문항을 모바일과 PC 전반에서 직관적으로 클릭 가능한 라디오 카드로 시각화했습니다.

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

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

[웹사이트 UX/UI]

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

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

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