개요
한눈에 보기 — 아롬비(AROMVI)는 첫 화면에서 스스로를 생활 솔루션 브랜드로 소개한다. 휴대용 정수 보틀 GOPURI, 엔바라 스프링, 선반형 샤워필터, 샤워 드레인 밸브까지 물과 위생을 다루는 제품을 한 브랜드 아래 모았고, 스크롤을 내리면 R&D와 OEM·ODM을 직접 맡는 제조 기반 기업이라는 정체성이 드러난다. 검은 배경 한가운데 정수 필터 형태의 제품을 크게 세우고 <필요한 순간, 바로 쓰는 깨끗함>이라는 한 줄을 얹은 히어로가 인상적이다. 이번 리뷰에서는 이 다크 톤 도입부의 첫인상, 생활·욕실 솔루션으로 나뉜 제품 그리드, 물방울 비주얼로 이어지는 브랜드 서사, 그리고 B2B 문의로 향하는 전환 동선을 차례로 뜯어보며 아롬비 웹사이트의 UX/UI와 웹디자인을 짚는다.
브랜드 & 메시지
헤드라인 전략이 뚜렷하다. 히어로의 <필요한 순간, 바로 쓰는 깨끗함>에 이어 다음 화면은 <망설임 없이 쓱- 당신 곁에 가장 가까운 깨끗함>으로 받는다. '깨끗함'이라는 단어를 반복하며 브랜드가 팔려는 감각을 한 축으로 고정한 것이다. 서브카피는 생활 속 불편함을 그냥 지나치지 않는다며, 생활 패턴을 분석한 최적의 설계와 검증된 품질을 말한다. 제품 스펙보다 태도를 먼저 꺼내는 순서가 프리미엄한 인상을 만든다. 톤앤매너는 철저히 절제돼 있다. 검정과 짙은 네이비, 물방울의 블루 포인트, 넉넉한 여백이 무드를 잡고, 과한 장식 없이 제품 원샷만으로 화면을 채운다. 네비게이션은 AROMVI·BUSINESS·PRODUCT·STORE·CONTACTS 다섯 개의 영문 대문자 메뉴에 KOR/ENG 토글을 더해, 국내 소비자와 해외·B2B 파트너를 동시에 겨냥한다는 신호를 준다. 다만 화면 곳곳의 CTA는 <더 보기>에 머물러 있어, 다음 행동을 더 구체적으로 지시할 여지가 남는다.
UX/UI 관점
아롬비 웹디자인의 강점은 화면 곳곳에서 확인된다. 첫째, 검은 배경이 정수 필터 형태의 제품 실루엣을 또렷하게 부각해 제품을 그대로 주인공으로 세운다. 둘째, '깨끗함'을 반복하는 카피 설계로 스크롤 내내 메시지 축이 흔들리지 않는다. 셋째, 제품군을 생활 솔루션과 욕실 솔루션 두 줄로 나누고 각 행의 첫 카드를 파란 테두리로 강조해 현재 선택 상태를 분명히 보여 준다. 넷째, 어두운 화면 위 흰 카드에 제품 컷과 짧은 라벨(GOPURI 휴대용 정수 보틀 등)을 얹어 스캔 속도가 빠르다. 다섯째, 물방울과 리플 이미지, 그리고 SINCE 1996 워터마크로 '물·깨끗함'이라는 감각을 시각으로 번역한다. 여섯째, 스크롤 서사가 제품 → 브랜드 철학(오직 깨끗함 하나에만 집중) → 비즈니스 구조(R&D·OEM·ODM) → B2B CTA로 자연스럽게 흐른다. 마지막 배너에서는 B2B·해외수출, OEM·ODM, 제휴 세 갈래 문의 버튼으로 방문자 유형을 나눠 받아, 서로 다른 목적의 손님을 한 화면에서 정리한다.
IA·SEO 전략
제품과 제조를 동시에 파는 사이트인 만큼, 검색 전략도 두 갈래로 갈린다. 하나는 소비자 검색이다. GOPURI 휴대용 정수 보틀이나 선반형 샤워필터처럼 개별 제품 상세가 있다면 각 페이지에 고유한 title과 description을 부여하고, '휴대용 정수기' '샤워필터' 같은 정보성 키워드를 본문에 녹여야 한다. 제품 스펙은 Product 구조화 데이터로 마크업하면 검색 결과에서 가격·리뷰 리치 스니펫을 노려볼 수 있다. '개발중'으로 표시된 스마트 싱크 수전 같은 미출시 항목은 색인 정책을 명확히 정해, 내용이 얇은 페이지가 색인에 남아 도메인 평가를 갉아먹지 않게 관리한다. 다른 하나는 B2B 검색이다. OEM·ODM과 해외수출을 겨냥한다면 해당 랜딩을 독립 URL로 분리해 'OEM ODM 제조' 같은 질의에 대응하고, ENG 페이지에는 hreflang을 정합성 있게 걸어 해외 유입을 챙겨야 한다. STORE로 연결되는 외부 스토어와는 canonical·링크 관계를 정리해, 자체 도메인이 쌓아 올린 신뢰도가 밖으로 새어나가지 않도록 잡아 둔다.
성능·접근성
성능에서 가장 먼저 손볼 곳은 무게가 큰 비주얼이다. 다크 히어로의 대형 제품 이미지와 물방울·리플 배경은 화면을 살리는 핵심이지만, 그만큼 LCP에 곧바로 영향을 준다. 히어로 이미지는 지연 로딩을 걸지 말고 적정 해상도로 압축해 먼저 로드하고, 아래쪽 배경과 제품 썸네일에는 lazy load와 WebP/AVIF를 적용해 초기 전송량을 줄이는 편이 좋다. 스크롤에 반응하는 등장 모션이 있다면 메인 스레드를 막지 않도록 transform·opacity 기반으로 가볍게 유지한다. 접근성에서는 대비가 걸린다. 물방울 섹션의 <오직 깨끗함 하나에만 집중했습니다> 아래 회색 서브카피처럼, 어두운 배경 위 저대비 소형 텍스트는 가독성이 떨어진다. 본문 대비를 WCAG 기준까지 끌어올리고, 모든 제품 이미지에 의미 있는 대체 텍스트를, KOR/ENG 토글에는 현재 상태를 알리는 라벨을 붙이면 경험의 바닥이 한층 단단해진다.
디지털 파트너 더블루캔버스
아롬비처럼 제품과 제조(OEM·ODM)를 함께 파는 브랜드의 홈페이지는 소비자에게는 감각을, 파트너에게는 신뢰를 동시에 팔아야 한다. 두 목적이 한 화면에서 부딪히지 않도록 동선을 나누는 일이 이런 홈페이지 제작의 난도를 결정한다. The Blue Canvas는 브랜드 무드를 살린 웹사이트 제작부터 제품·OEM 랜딩의 검색 최적화(SEO), 그리고 B2B 리드와 해외 바이어를 실제 문의로 잇는 퍼포먼스 마케팅까지 한 흐름으로 설계한다. 제조 기반 브랜드의 웹디자인과 전환 구조를 함께 고민하고 있다면, 아래 링크에서 더 살펴볼 수 있다.
마무리와 다음 스텝
정리하면 아롬비 웹사이트는 '깨끗함'이라는 한 단어로 무드를 단단히 잡은, 완성도 높은 브랜드 사이트다. 남은 과제는 세 가지다. 먼저 <더 보기>에 머문 CTA를 제품 상세·문의처럼 다음 행동이 분명한 문구로 바꿔 전환을 유도한다. 다음으로 히어로·배경 이미지의 로딩 순서와 포맷을 정비하고, 저대비 서브카피의 가독성을 WCAG 기준까지 끌어올린다. 마지막으로 소비자 키워드와 OEM·ODM·해외수출 키워드를 분리한 SEO 구조를 세워 두 방문자군을 각각의 검색에서 붙잡는다. 이 세 가지만 손봐도 지금의 감도 높은 웹디자인이 실제 성과로 이어질 것이다.