개요
디에이치투랩스(Dh2 labs)는 스스로를 메디컬 스킨케어로 규정하는 D2C 뷰티 브랜드다. 홈페이지 첫 화면을 여는 것은 제품 사진이 아니라 대문짝만 한 세리프 타이포 'AOx PentaXield' — 브랜드의 항산화 기술명을 히어로의 주인공으로 세웠다. 그 아래로는 파도를 위에서 내려다본 항공 사진 한 장이 가로로 길게 깔린다. 화장품을 판다기보다 과학과 무드를 먼저 파는 편집(에디토리얼) 감각의 웹디자인이다. 이번 UX/UI 리뷰는 이 히어로에서 출발해 제품 상세, Doctor's Column, Best review로 이어지는 스크롤 서사가 실제 구매 동선과 검색 유입에서 제 몫을 하는지를 화면 단위로 뜯어본다.
브랜드 & 메시지
글로벌 네비게이션은 PRODUCT · AOx PentaXield · BRAND STORY · DOCTOR'S COLUMN 네 갈래로 압축돼 있고, 우측 상단에 LOGIN · MY PAGE · CART까지 커머스 필수 동선이 붙어 있다. 성분 기술명 AOx PentaXield를 제품 카테고리와 나란히 메뉴로 올린 선택이 인상적이다. 브랜드가 팔려는 것이 개별 제품이 아니라 '왜 이 기술인가'라는 서사임을, 메뉴 구조가 먼저 증언하는 셈이다. 두 번째 섹션의 영문 선언 'WE REDESIGN SKIN FROM THE ROOT CAUSE'와 'Dh2 labs, Medical Skincare'라는 세리프 헤드라인은 근본 원인부터 다룬다는 의학적 자신감을 톤앤매너로 번역한다. 아쉬운 지점은 CTA다. 섹션마다 반복되는 'Discover +'와 'LEARN MORE'는 무드는 좋지만 다음 행동을 지시하는 힘이 약하다. 적어도 제품 카드 위에서는 '구매하기 / 성분 보기'처럼 목적이 분명한 라벨이 전환에 유리하다.
UX/UI 관점
화면에서 확인되는 디자인 강점은 뚜렷하다. 첫째, 고대비 디스플레이 세리프를 히어로부터 하단의 'AOx PentaXield by Dh2 labs' 로크업까지 일관되게 밀어붙여 브랜드를 각인시킨다. 둘째, 배경은 오프화이트로 비우고 블루·라벤더 계열 제품 컬러만 절제해 쓰는 색 규율 덕에 크림 텍스처와 유리 용기 사진이 화면의 주인공이 된다. 셋째, 좌측 카피·우측 이미지로 분할한 비대칭 그리드가 섹션마다 리듬을 만들어 긴 스크롤이 지루하지 않다. 넷째, 물결·물방울·바다 같은 정제된 이미지 언어로 '항산화·수분'이라는 콘셉트를 말 없이 전달한다. 다섯째, 제품 카드에 30% · 109,000원처럼 할인율과 가격을 병기하고 슬라이더로 UV Defence·Dual Defence 라인업을 넘기게 해 커머스 기능을 무드 안에 자연스럽게 녹였다. 여섯째, Doctor's Column(의학적 신뢰) → Best review(사회적 증거) → Follow us(SNS)로 이어지는 하단 흐름이 구매 확신을 층층이 쌓는다.
IA·SEO 전략
에디토리얼 무드가 강한 브랜드일수록 검색엔진최적화(SEO)의 사각지대가 생기기 쉽다. 제품명이 UV Defence · Dual Defence AOx PentaXield처럼 영문 조어 중심이라, 국내 이용자가 실제로 검색하는 '선크림', '자외선 차단', '항산화 세럼' 같은 한글 질의와의 접점이 얇아진다. 제품 상세에는 Product·Offer·AggregateRating 구조화 데이터를 심어 30% 할인가와 별점이 검색 스니펫에 그대로 노출되게 하고, 각 제품 페이지의 title과 H1에 한글 카테고리어를 병기하는 편이 좋다. 브랜드 최대 자산인 AOx PentaXield 성분명은 별도의 기술 설명 페이지로 키워 브랜드 검색의 착지점으로 삼을 만하다. 이미 갖춘 Doctor's Column은 피부 고민 키워드를 겨냥한 콘텐츠 SEO 허브로 확장하면, 홈페이지 제작 이후의 유입까지 스스로 만들어내는 자산이 된다.
성능·접근성
이미지가 서사의 핵심인 사이트인 만큼 성능 관리가 곧 브랜드 인상 관리다. 가로로 넓은 히어로 항공 사진이 LCP를 좌우하므로 이 한 장은 AVIF/WebP로 최적화하고 preload로 우선 로딩하되, 나머지 텍스처 컷은 지연 로딩으로 분리한다. 다크 섹션의 YouTube 임베드는 자동 iframe 대신 썸네일을 먼저 띄우고 클릭 시 로드하는 파사드(facade) 방식으로 바꾸면 초기 스크립트 부담이 크게 준다. 브랜드를 지탱하는 고대비 세리프 웹폰트는 한글·영문 서브셋과 font-display: swap을 적용해 FOIT를 막아야 첫 화면 카피가 늦게 뜨는 문제를 피한다. 스크롤 페이드와 슬라이더가 많은 구성인 만큼 prefers-reduced-motion을 존중하고 INP를 모니터링해 상호작용 지연을 관리하길 권한다. 장식용 이미지에는 빈 alt를, 제품 이미지에는 성분·기능을 담은 의미적 대체 텍스트를 부여하는 접근성 기본기도 함께 챙겨야 한다.
디지털 파트너 더블루캔버스
디에이치투랩스처럼 무드와 전환을 동시에 잡아야 하는 뷰티·메디컬 스킨케어 브랜드몰은, 예쁜 화면과 팔리는 화면 사이의 균형이 관건이다. The Blue Canvas는 브랜드 서사를 해치지 않으면서도 상품 구조화 데이터, 제품 상세의 전환 동선, 장바구니·결제로 이어지는 커머스 설계를 홈페이지 제작 단계에서 함께 잡는다. 성분 기술을 검색 자산으로 키우는 SEO검색엔진최적화, 신제품 론칭에 맞춘 퍼포먼스 마케팅, SNS·콘텐츠 운영까지 한 팀에서 엮어 웹사이트 제작 이후의 성장 곡선을 설계한다. 브랜드몰을 새로 준비하거나 리뉴얼을 고민 중이라면 아래에서 사례와 역량을 확인해 보길 권한다. 다음 링크는 새 창으로 열린다.
마무리와 다음 스텝
디에이치투랩스의 홈페이지는 무드·타이포·색 규율에서 이미 상위권의 웹디자인 완성도를 보여준다. 남은 과제는 이 감각을 전환과 검색으로 연결하는 일이다. 우선순위는 셋이다. 첫째, 제품 카드와 상세의 CTA를 'Discover'에서 '구매하기·성분 보기'로 바꿔 다음 행동을 명확히 한다. 둘째, 제품·성분 페이지에 구조화 데이터와 한글 카테고리 키워드를 심어 막힌 검색 유입을 연다. 셋째, 히어로 이미지와 YouTube·웹폰트 로딩을 최적화해 첫인상 속도를 지킨다. 이 세 가지를 2주 스프린트로만 처리해도, 지금의 아름다운 화면이 실제 매출로 더 자주 이어질 것이다.