개요
요리엔(yorien)은 물을 거르는 정수 저그를 파는 브랜드지만, 공식몰의 첫인상은 가전 쇼핑몰보다 요리 브랜드에 가깝다. 상단을 채우는 건 필터 스펙이 아니라 어두운 주방, 브라스 골드 펜던트 조명 아래에서 수전으로 물을 받아 반죽을 준비하는 셰프의 손이다. 헤드라인은 나 손종원, 요리할 땐 요리엔부터 준비합니다 — 제품이 아니라 사람의 습관으로 브랜드를 소개한다. 스크롤을 내리면 샤블리 정수 저그 3종(스노우 화이트·쉐도우 블랙·오트베이지, 각 135,000원)이 이어지고, 요리엔(水)을 다룬 매거진과 실사용 후기까지 D2C 브랜드몰의 전형적인 흐름이 펼쳐진다.
이번 웹사이트 제작 리뷰에서 볼 지점은 세 가지다. 첫째, 셰프 앰버서더에 기댄 히어로가 정수라는 실용 카테고리를 어떻게 감성 상품으로 번역하는가. 둘째, About·Shop 중심의 얇은 내비게이션과 STEP 01~04 브랜드 스토리가 구매 동선과 어떻게 맞물리는가. 셋째, 프리미엄한 무드를 유지하면서도 전환(구매하기) 버튼이 제 역할을 하는가. 아래 관찰은 모두 캡처된 메인 화면 한 장에 근거한다.
브랜드 & 메시지
브랜드가 가장 힘을 준 곳은 단연 히어로다. 카피를 셰프의 1인칭 문장으로 쓴 선택이 영리하다. 정수기 성능을 나열하는 대신 요리할 땐 요리엔부터라는 루틴을 보여주니, 물맛이라는 추상적 가치가 요리라는 구체적 장면으로 치환된다. 골드와 다크 브라운으로 정돈된 주방 사진은 저가 생활가전과 거리를 두려는 톤앤매너가 분명하다. 소문자 로고 yorien도 이 절제된 무드에 맞춰 조용히 얹혀 있다.
내비게이션은 About·Shop을 축으로 극도로 단출하다. 상단 우측에 검색과 장바구니, 그리고 고객센터가 분리돼 있어 쇼핑몰의 기본 동선은 확보된다. 다만 히어로의 감성과 실제 판매(구매하기) 사이를 잇는 층이 얇다. 첫 화면 CTA가 슬라이더 안에 묻혀 있고, 스크롤을 한참 내려야 샤블리 제품과 가격이 처음 등장한다. 셰프 카피로 끌어올린 관심을 곧바로 상품으로 넘겨줄 앵커가 상단에 하나 더 있으면 좋겠다는 인상이다.
UX/UI 관점
화면을 따라가며 확인한 웹디자인의 강점은 뚜렷하다.
1. 섹션마다 배경 톤을 바꾸는 리듬. 다크 무드의 히어로에서 라이트 블루의 STEP 스토리, 초록 푸드 사진 위의 Discover, 피치 톤의 제품 매대, 청록 물결의 푸터로 이어진다. 색이 챕터를 나눠 스크롤이 지루하지 않다.
2. 브랜드 스토리를 네 컷으로 압축. 간편한 정수의 시작, 요리엔 아래 STEP 01 Design · 02 Materials · 03 Craftsmanship · 04 Finish를 카드로 병렬 배치해, 제조 서사를 스캔 한 번에 읽게 만든다.
3. 취향 소구로 재구성한 제품 진열. 나의 취향으로 채우는 요리엔 섹션에서 블루·핑크·베이지 우드 핸들 저그를 나란히 세워, 정수기를 스펙이 아니라 인테리어 소품처럼 고르게 한다.
4. 정직하게 노출한 가격과 구매 버튼. 샤블리 3종이 135,000원이라는 가격과 구매하기 버튼을 카드 안에 그대로 담아, 감성 흐름 속에서도 커머스 기능을 숨기지 않는다.
5. 신뢰를 쌓는 후기와 매거진. 요리엔과 함께한 일상의 순간의 Best Review 카드와 요리엔(水)에 관한 가장 정직한 보고서 같은 매거진 글이, 구매 직전의 망설임을 콘텐츠로 받아준다.
아쉬운 축도 있다. 카드 위주 레이아웃이 반복되며 섹션 제목의 위계가 비슷해, 어디가 판매 매대이고 어디가 읽을거리인지 첫눈에 구분이 덜 된다. 제품 카드의 구매하기와 매거진 카드의 자세히 보기 버튼 스타일을 분리하면 클릭 목적이 더 또렷해진다.
IA·SEO 전략
요리엔은 단일 랜딩에 브랜드 스토리·제품·매거진·후기를 모두 눌러 담은 원페이지 성격이 강하다. 검색 유입을 넓히려면 이 층들을 각각 고유 URL을 가진 페이지로 풀어내는 정보 구조가 필요하다. 샤블리 스노우 화이트·쉐도우 블랙·오트베이지는 색상별 상세 페이지로 나눠, 샤블리 정수 저그, 요리엔 정수기 색상 같은 구매 직전 검색어를 각 페이지가 나눠 가지도록 하는 편이 좋다.
브랜드가 밀고 있는 요리엔(水)이라는 이름은 SEO 자산이다. 매거진의 요리엔(水)에 관한 보고서 글을 정수 물맛, 정수 저그 사용법 같은 검색 의도와 연결되는 아티클로 확장하면, 제품 페이지로 자연스럽게 흘려보내는 유입 경로가 된다. 각 페이지는 페이지 목적을 한 문장으로 요약한 title과 샤블리 색상·가격을 담은 개별 meta description을 갖춰야 하고, 제품에는 Product·Offer 구조화 데이터로 가격과 리뷰 별점을 검색 결과에 노출시키는 것을 권한다. 원페이지 앵커(#) 대신 크롤러가 개별 주소로 인덱싱할 수 있는 실제 경로를 열어주는 것이 이 브랜드몰 SEO의 출발점이다.
성능·접근성
이 사이트의 무게중심은 이미지다. 다크 무드 히어로, 초록 푸드 배경, 유리 질감의 제품 컷, 인스타그램 갤러리까지 고화질 사진이 페이지를 가득 채운다. 첫 화면 히어로 이미지는 지연 로딩을 걸지 말고 우선 로딩하되 WebP/AVIF로 용량을 줄여 LCP를 관리하고, 스크롤 아래의 제품·매거진·인스타 썸네일은 lazy loading과 명시적 width/height로 레이아웃 흐트러짐(CLS)을 막아야 한다.
히어로 슬라이더는 좌우 화살표와 하단 도트로 자동 전환되는 구조로 보이는데, 접근성 관점에서 정지 버튼과 키보드 조작을 함께 제공해야 한다. 색상 선택(블루·핑크·베이지)과 샤블리 옵션은 색만으로 구분하지 말고 텍스트 라벨을 붙여 색각 이상 사용자도 구분하게 한다. 청록 물결 푸터 위의 옅은 링크 색은 대비가 낮아 보이니 본문 대비 기준을 한 번 점검할 지점이다. 고객센터 전화(1544-2289)와 개인정보처리방침 링크는 푸터에서 잘 잡히므로, 여기에 명확한 포커스 링만 더하면 기본 위생은 충족된다.
디지털 파트너 더블루캔버스
요리엔처럼 앰버서더와 감성 콘텐츠로 승부하는 브랜드몰은, 무드를 지키는 웹디자인과 매출을 만드는 커머스 설계를 동시에 잡아야 한다. The Blue Canvas는 바로 그 지점을 다룬다. 셰프 히어로가 만든 관심을 상품 상세와 장바구니까지 끊기지 않게 잇는 UX/UI 설계, 색상별 상세 페이지와 요리엔(水) 매거진을 검색 유입으로 바꾸는 SEO, 그리고 유입을 구매로 완성하는 퍼포먼스 마케팅까지 하나의 흐름으로 엮는다.
정수·리빙·D2C 브랜드의 홈페이지 제작을 고민한다면, 브랜드 스토리를 담는 웹사이트 제작과 전환을 만드는 커머스 구조를 함께 설계할 파트너가 필요하다. 감성과 데이터를 분리하지 않는 것이 The Blue Canvas의 방식이다.
마무리와 다음 스텝
요리엔 공식몰은 정수라는 실용 카테고리를 셰프의 주방으로 감싸 프리미엄 브랜드로 세운, 무드가 분명한 웹사이트다. 홈페이지 제작의 관점에서 톤과 사진의 완성도는 이미 충분하다. 남은 과제는 이 감성을 구매로 연결하는 마지막 몇 걸음이다.
실행 제안은 세 가지다. 첫째, 히어로 직후에 샤블리로 바로 가는 상단 CTA를 추가해 관심을 상품으로 빠르게 넘긴다. 둘째, 색상별 상세 페이지와 요리엔(水) 매거진을 개별 URL로 풀어 SEO 유입구를 넓힌다. 셋째, 제품 카드의 구매하기와 콘텐츠 카드의 자세히 보기 버튼을 시각적으로 분리해 클릭 목적을 또렷하게 만든다. 이 세 가지만 정리해도 지금의 브랜드 완성도가 실제 전환으로 이어질 여지가 커진다.