개요
뉴오리진은 유한건강생활(YUHANCARE)이 운영하는 건강기능식품 공식몰이다. 혈당과 장 건강을 동시에 겨냥한 당당 유산균을 간판으로 세우고, a2 단백질·이너플로라·유한백수오·헤파겐까지 자매 브랜드를 한 지붕 아래 모았다. 첫 화면에서는 혈당 유산균 슬라이드와 쿠폰 10,000원 리뉴얼 배너가 번갈아 돌며 신규 고객과 재구매 고객을 한꺼번에 붙잡으려 한다. 이번 리뷰는 이 멀티브랜드 쇼핑몰이 방문자를 상품 상세와 장바구니까지 어떻게 끌고 가는지를 본다. 히어로 카피와 인기상품 랭킹, NewOriginMOMENT 영상 커머스, 브랜드 탭 구조를 UX/UI와 웹디자인 관점에서 하나씩 짚는다.
브랜드 & 메시지
헤드라인이 감정을 먼저 건드린다. 혈당건강 걱정된다면? 유산균 하나면 바쁜데 제로! 라는 첫 슬라이드는 문제와 해결을 한 줄에 압축했고, a2 슬라이드의 전 세계 부모들이 신뢰하는 자연에서 온 a2단백질은 타깃(부모)과 신뢰의 근거를 동시에 던진다. 로고 NewOrigin은 필기체에 가까운 세리프로 자연스럽고 정통적인 인상을 주고, 그 아래 Born from nature, Proven by science 태그라인이 이 톤을 받쳐 준다. 상단 유틸리티 바에는 뉴오리진·a2·이너플로라·유한백수오 브랜드 탭이 나란히 놓여, 한 몰 안에서 브랜드를 갈아탈 수 있게 설계했다. 글로벌 내비게이션은 리뉴얼 특가·특가·베스트·이벤트·멤버십으로 짧게 끊어 탐색 부담을 덜었다. 다만 눈에 띄는 문구가 리뉴얼 특가와 더보기처럼 혜택 쪽에 몰려 있어, 성분과 효능을 약속하는 카피는 상대적으로 옅게 들린다.
UX/UI 관점
정보 밀도가 높은 쇼핑몰인데도 화면이 산만하지 않다. 웹디자인이 색과 리듬으로 섹션을 갈라 놓은 덕이다. 실제 화면에서 확인한 강점을 꼽으면 다음과 같다.
1. 판단에 필요한 정보를 카드 한 장에 응축했다. 인기상품 카드는 할인율(32%·68%·50%·69%), 정가 취소선, 판매가, 별점과 리뷰 수까지 한 카드에 담아 구매 결정을 빠르게 만든다.
2. 한 섹션 안에서 카테고리를 갈아끼운다. 가장 사랑받는 인기상품 블록에 건강식품·푸드·화장품 서브탭을 달아, 페이지 이동 없이 노출 상품을 바꾼다.
3. 개인화 진입점을 만들었다. 연령대 별 맞춤상품은 영유아·여성·남성·전 연령을 좌측 필터로 제공해, 방문자가 자기 맥락을 스스로 고르게 한다.
4. 멀티브랜드 규모를 자연스럽게 노출한다. 지금 주목해야할 브랜드 탭이 뉴오리진·a2·이너플로라·헤파겐을 수평으로 전환시켜, 몰이 품은 브랜드 폭을 광고 없이 보여 준다.
5. 상품을 콘텐츠로 감쌌다. NewOriginMOMENT의 세로형 영상 카드는 라이브·숏폼 커머스 흐름을 반영해, 인물이 등장하는 후기형 콘텐츠 안에 가격과 상품을 얹었다.
6. 리텐션 장치를 상단에 모았다. 첫구매 혜택·출석체크·쿠폰존·Mom&Baby 같은 퀵 아이콘 열두 개가 첫 스크롤 안에서 재방문 동기를 건넨다.
IA·SEO 전략
건강기능식품은 성분과 효능으로 검색되는 카테고리다. 그래서 상품 상세의 title과 description에 혈당 유산균, 식물성 알티지 오메가3, 루테인지아잔틴처럼 성분에 제형·용량을 붙인 롱테일을 넣어야 유입 폭이 넓어진다. 브랜드 탭(a2·이너플로라)이 자바스크립트로만 전환되는 구조라면, 각 브랜드관을 크롤러가 읽을 수 있는 고유 URL로 분리해 주는 편이 검색에 유리하다. 상품 카드에 이미 별점과 리뷰 수가 노출되므로, Product·AggregateRating 구조화 데이터를 붙이면 검색 결과에 별점 리치 스니펫을 노려볼 수 있다. 하단 배너의 공식몰 리뉴얼 프로모션 오픈이 시사하듯 최근 개편이 있었다면, 바뀐 상품 URL에 대한 301 리디렉션과 사이트맵 재제출로 기존 검색 자산을 잃지 않는 것이 급선무다.
성능·접근성
첫 화면에 히어로 캐러셀, MOMENT 영상 카드, 수십 개의 상품 썸네일이 한꺼번에 몰린다. 그만큼 LCP와 초기 데이터 부담이 크다. 히어로는 첫 슬라이드만 우선 로드하고 나머지 슬라이드와 하단 상품 이미지는 지연 로딩으로 돌리면 체감 속도가 눈에 띄게 붙는다. 상품 이미지는 WebP·AVIF로 병행 제공하고 명시적 width/height를 지정해, 스크롤 중 레이아웃이 밀리는 CLS를 막는 것이 좋다. 배너의 카피가 이미지에 구워진 형태라면 검색과 스크린리더 모두 읽지 못하므로, 최소한 의미 있는 alt와 실제 텍스트를 함께 제공해야 한다. NewOriginMOMENT 영상은 자동재생 대신 포스터 이미지 + 클릭 재생으로 두면, 모바일 데이터와 메인 스레드를 함께 아낄 수 있다.
디지털 파트너 더블루캔버스
건강기능식품처럼 신뢰가 곧 매출인 업종에서는, 성분의 근거와 리뷰라는 사회적 증거를 눈에 보이게 배치하는 홈페이지 제작이 성패를 가른다. The Blue Canvas는 브랜드몰·자사몰 웹사이트 제작부터 상품 상세 전환 설계, 성분과 효능 키워드를 겨냥한 SEO, 신규와 재구매를 나눠 겨냥하는 퍼포먼스 마케팅까지 하나의 흐름으로 잇는다. 뉴오리진처럼 여러 브랜드를 품은 몰은 특히, 검색과 광고가 함께 먹히도록 정보 구조를 다듬고 영상 커머스와 랜딩을 데이터로 반복 개선하는 작업이 중요하다. 건기식·뷰티·제조 브랜드의 웹사이트 제작과 홈페이지 제작을 고민한다면, 아래에서 사례와 역량을 직접 확인해 보길 권한다.
마무리와 다음 스텝
뉴오리진 공식몰은 멀티브랜드 큐레이션과 혜택 설계, 영상 커머스까지 갖춘 완성도 높은 쇼핑몰이다. 지금의 구조를 더 크게 일하게 하려면 세 가지를 먼저 실행하자. 첫째, 히어로와 MOMENT 영상의 로딩 순서를 손봐 첫 화면의 체감 속도를 끌어올린다. 둘째, 브랜드 탭과 상품 상세에 고유 URL과 구조화 데이터를 붙여 검색 노출을 넓힌다. 셋째, 혜택 일변도의 CTA에 효능·성분을 약속하는 카피를 섞어 전환 설득력을 채운다. 이 세 가지만 정리해도, 잘 만든 웹디자인이 매출까지 이어지는 경로가 한층 매끄러워진다.