메이크온 - UX/UI 리뷰 | 더블루캔버스

개요

메이크온은 뷰티 디바이스라는 카테고리 특성상 제품의 신뢰도, 과학적 근거, 사용 편의성, 그리고 피부 고민 해결과의 연계를 얼마나 명확하게 전달하는지가 전환의 핵심입니다. 본 리뷰는 첫 진입부터 구매 고려까지의 여정을 따라가며 정보 구조(IA), 내러티브 구성, 시각 계층, 마이크로카피, 상호작용 피드백, 퍼포먼스/검색 최적화, 접근성 기준 충족 여부를 세밀하게 점검합니다. 특히 ‘어떤 문제를 누구에게 어떻게 해결해 주는가’라는 제품 가치 제안(Value Proposition)을 상단에서 즉시 파악할 수 있도록 시그니처 메시지와 대표 비주얼, 핵심 증거(임상/사용 데이터) 배치를 재구성하는 전략을 제안합니다. 또한 비교/추천/가이드 같은 의사결정 보조 모듈을 강화하여 신규 방문자의 탐색 피로도를 낮추고, 재방문 사용자가 원하는 디바이스/리필/액세서리에 신속히 도달하도록 내비게이션과 검색을 간결화하는 방안을 다룹니다.

메인 화면

메인 히어로에서는 브랜드 아이덴티티와 제품 카테고리를 즉시 식별할 수 있어야 합니다. 추천 구성은 1) 한 줄 가치 제안(예: “집에서 완성하는 프로 스킨케어”), 2) 상위 베네핏 3~4개(톤·결·탄력 등), 3) 신뢰 근거(임상 수치, 인증/수상, 전문가 코멘트), 4) 1차 CTA(제품 보기/퀴즈/가이드), 5) 보조 CTA(매장 찾기/상담) 순서가 효과적입니다. 이어지는 구간에는 ‘문제→해결→증거→사용법→결과’의 내러티브를 적용해 사용 맥락을 상상하게 하고, ‘나에게 맞는 디바이스 찾기’와 같은 결정을 돕는 인터랙티브 모듈을 배치하면 탐색 효율이 올라갑니다. 재구매/소모품 접근은 헤더 단축 링크와 퀵 액션으로 단계를 줄이되, PLP(상품 목록)에서는 필터(피부고민/기능/예산/호환성)와 추천 배지를 통해 기준을 명확히 표현하는 것이 좋습니다. 리뷰/UGC는 노출 수위와 신뢰도를 통제해 사회적 증거를 강화하고, 배송/보증/AS 정책은 구매 직전 단계에서 불안을 해소하도록 요약 배치합니다.

UX/UI 분석

내비게이션은 ‘문제 중심’과 ‘제품 중심’을 혼합한 하이브리드 구조가 적합합니다. 상단 1차 메뉴는 피부 고민(톤/결/탄력/모공 등)과 제품 라인(갈바닉/LED/클렌저 등)을 나란히 제공하고, 2차 드롭다운에는 미리보기 카드(대표 이미지, 한 줄 베네핏, 가격대, 호환 액세서리)를 노출해 탐색 비용을 줄입니다. 상세 PDP는 상단 7초 구간에 가치 제안, 핵심 베네핏, 신뢰 근거, 주요 동작 UI, 가격/프로모션, 일차 CTA를 압축합니다. 스크롤 이후에는 임상 데이터 시각화(전/후 비교, 수치, 표본, 기간, 기관), 사용법(스텝별 일러스트/영상), 호환성(피부타입/라인/리필), 유지관리(세척/교체주기), 보증/AS, FAQ를 체계화합니다. 마이크로카피는 “왜 필요한가/어떻게 달라지는가/얼마나 쉬운가”를 일관 톤으로 설명하고, 선택/호버/오류/로딩 같은 상태 피드백은 모션과 색 대비 기준(AA 이상)을 만족시켜야 합니다. 모바일에서는 엄지 영역을 고려한 CTA 크기/간격, 카루셀 스와이프 힌트, 고정 결제 바 등을 적용하고, 비교 표·리뷰는 아코디언/요약 박스로 재편해 가독성을 확보합니다.

기술 SEO

검색 의도에 맞춘 템플릿 최적화가 핵심입니다. 카테고리/태그 페이지에는 정규화 링크와 설명 메타, FAQ 스키마를 포함하고, PDP에는 Product 구조화 데이터(가격, 재고, 브랜드, 리뷰 수), BreadcrumbList를 정확히 주입해 탐색 경로를 명확히 합니다. 이미지에는 의미 있는 파일 대체 텍스트와 캡션을 제공하고, LCP 후보(히어로 이미지/제품 메인)는 적절한 크기 분기, preload, 이미지 포맷(WebP 병행), lazy-loading을 적용합니다. INP/TBT 개선을 위해 불필요한 스크립트 지연/비동기 로딩, 크리티컬 CSS 인라인, 폰트 디스플레이 스와پ을 권장합니다. 국제화가 있다면 hreflang을 정합성 있게 유지하고, URL 파라미터는 Search Console 규칙 또는 서버 측 캐시 키로 통제해 중복 색인을 방지합니다. UTM 등 추적 파라미터는 canonical에서 제거되어야 하며, 필터형 목록 페이지는 조합 폭발을 피하기 위해 인덱싱 제외 또는 대표 조합만 색인하는 정책이 바람직합니다.

접근성

명료한 문서 구조(H1은 회사명 단일, 섹션별 헤딩 계층), 포커스 이동 순서, 키보드 조작 가능, 명도 대비(텍스트 4.5:1 이상, UI 구성요소 3:1 이상), 대체 텍스트, 폼 레이블/오류 안내, 모션 감도 옵션, 라이브 영역의 ARIA 적용 등을 점검해야 합니다. 특히 구매 단계의 유효성 검사는 즉시적이고 맥락적인 피드백으로 제공하고, 장애 유형별(시각·청각·운동) 보조 기술 호환성을 QA 시나리오에 포함합니다. 이미지에 의존하는 설명은 텍스트로 보완하고, 영상에는 캡션과 요약을 제공합니다. 인터랙션 밀도가 높은 컴포넌트(카루셀, 탭, 아코디언, 비교 표)는 롤과 상태를 명시하며, 모바일에서는 히트 타겟(44px 이상)과 스크린 리더 순서를 별도로 검수합니다. 접근성 준수는 단지 의무가 아니라 전환과 신뢰에 직접적인 영향을 미치므로 디자인 시스템 차원에서 토큰과 컴포넌트 가이드로 제도화하는 것이 좋습니다.

더블루캔버스

더블루캔버스(The Blue Canvas)는 브랜드 퍼포먼스를 높이는 UX 전략과 콘텐츠/IA 정비, 디자인 시스템 수립, 측정 가능한 기술 SEO 최적화를 통합적으로 제공합니다. 초기 진단 이후 빠른 가설 검증과 실사용자 피드백을 결합해 전환 개선과 재방문 확대를 동시에 달성합니다. 협업을 원하신다면 아래 링크를 통해 문의해 주세요.
https://bluecvs.com/

결론

메이크온 사이트는 ‘가치 제안의 선명도’와 ‘증거의 가독성’이 강화될수록 구매 전환과 추천 지표가 동반 상승할 잠재력이 큽니다. 히어로 구간에서 문제→해결→증거를 압축 제시하고, PDP에서는 임상/사용 데이터를 시각화로 구조화하며, 비교/추천/가이드를 통해 결정 피로도를 낮추면 신규/재방문 모두에 긍정적 영향을 줄 수 있습니다. 퍼포먼스와 색인 정합성은 기술 SEO 체크리스트를 상시 CI에 포함해 회귀를 방지하는 것이 효과적입니다. 본 리뷰의 권고안을 우선순위/공수 대비 임팩트 기준으로 로드맵화해 실행한다면, 단기간에 체감되는 UX 품질과 전환 개선을 확인할 수 있을 것입니다.