Product Detail Page

구매 전환을 고려한 모바일 스크롤 설계

Cut 1
CUT 01. HOOK & TRUST

첫 3초의 시선,
신뢰와 무드의 결합

도입부는 소비자의 이탈이 가장 많이 발생하는 구간입니다. 상단에는 신뢰감을 주는 네이비 컬러와 '국내 최초 GMP 획득' 카피를 배치해 전문성을 강조했고, 직후에 밝은 톤의 메인 비주얼과 캐릭터를 등장시켜 어린이 타겟에 맞는 친근한 브랜드 무드를 연출했습니다.

Cut 2
CUT 02. SOCIAL PROOF

공감대 형성과
구매 장벽 해소

제품에 흥미를 느낀 소비자가 이탈하지 않도록, 시각화된 별점(4.9)과 카카오톡 형태의 리얼 리뷰 UI를 배치하여 '소셜 프루프(Social Proof)'를 확보했습니다. 이어서 실제 아이가 사용하는 컷을 자연스럽게 연결해 타겟층의 공감대를 끌어냈습니다.

Cut 3
CUT 03. USP & INFO

지루함을 덜어내는 분할

자칫 지루해질 수 있는 라인업 소개는 과일별 직관적인 컬러 블록을 활용해 시각적 리듬감을 주었습니다. 또한, 핵심 성분과 특장점(USP)은 긴 줄글을 배제하고 네이비 텍스트 박스로 명확하게 계층화하여 모바일 환경에서의 가독성을 극대화했습니다.

Cut 4
CUT 04. Q&A & CLOSING

사용자 경험(UX)을
고려한 정보 마감

하단에는 학부모들이 가장 궁금해할 만한 정보들을 Q&A 형태로 깔끔하게 정리하여 CS 문의 요소를 사전에 방지했습니다. 필수 고시 정보는 가독성을 해치지 않는 선에서 여백과 폰트 웨이트를 조절하여 신뢰감 있게 마무리했습니다.

Design Strategy

  • 가독성 우선 : 화려함보다는 모바일 기기에서의 세로 스크롤 호흡과 텍스트 가독성을 최우선으로 둔 레이아웃 설계
  • 정보의 덩어리화 : 단순한 텍스트 나열을 피하고, 컬러 블록과 인포그래픽을 활용해 정보를 묶어서(Chunking) 전달
  • 동선 고려 : 사용자의 시선이 머무는 흐름에 맞춰 자연스럽게 내용이 이어지도록 구간별 위계 설정

Color Point

'Clean, Trust, Information Hierarchy' 키워드를 바탕으로, 정보의 가독성을 높이고 브랜드의 신뢰감을 전달하는 컬러 시스템을 구축했습니다.

#E7F7F7 / #758DE0 브랜드의 메인 블루 컬러를 중심으로 신뢰감과 전문성을 강조합니다.
Sub Colors 제품 라인별 구분이 가능하도록 톤을 다르게 적용하여 시각적 구분성을 확보합니다.

Retrospective

  • 실제 모바일 기기 화면 비율 테스트를 통해 여백과 최적화된 위치 설정에 대한 고민 필요
  • 소비자 구매 후기(Social Proof) 영역의 시각적 강조 및 UI 개선안
  • '유저의 체류 시간' 등 마케팅적 목적 달성에 대한 지속적인 개선 프로세스

Project Information

Category Graphic Design
Personal Project Layout design
Visual hierarchy planning
Duration 2026.01 - 2026.02 (2 Weeks)
Tools
Photoshop
Figma
Process Content structuring → Visual hierarchy design → Section-based layout → Detail page design
PREVIOUS Leaflet Design
NEXT Brand Logo