라이프힘은 상황버섯, 영지버섯, 녹용 등 국내산 한약재와 건강 기능 상품을 전문으로 판매하는 온라인 쇼핑몰입니다. 건강 상품은 '효능에 대한 신뢰'가 구매 결정의 핵심 요소인 만큼, 단순히 예쁜 디자인보다는 제품의 원산지·성분·섭취 방법을 명확하고 믿음직스럽게 전달하는 것이 가장 중요한 과제였습니다.

한약재 쇼핑몰의 특수한 요구사항

일반 쇼핑몰과 달리 건강 상품, 특히 한약재를 판매하는 사이트는 몇 가지 고려사항이 더 있습니다. 식품위생법 및 건강기능식품법에 따른 표시 기준을 지켜야 하며, 효능·효과에 대한 과장 표현도 법적으로 제한됩니다. LUMIC은 이러한 규정을 파악하고 법적 문제가 생기지 않는 선에서 제품의 장점을 효과적으로 소개하는 구성을 함께 설계했습니다.

신뢰를 만드는 상품 페이지 설계

녹용, 상황버섯, 영지버섯 등 각 한약재의 상품 상세 페이지에는 원산지 정보, 재배·채취 방식, 성분 함량을 구조화된 형태로 배치했습니다. 소비자가 가장 궁금해하는 정보를 스크롤 없이 한눈에 확인할 수 있도록 레이아웃을 구성했고, 생산자 인증서와 검사 성적서를 이미지로 첨부해 신뢰도를 높였습니다.

주 고객이 40~60대라는 사실이 설계 전체를 바꿨다 — 접근성 우선

이 프로젝트에서 가장 중요한 전제는 '누가 이 사이트를 쓰는가'였습니다. 한약재·건강 상품의 주 구매층은 40~60대입니다. 이 사실 하나가 폰트 크기, 버튼 크기, 결제 흐름까지 모든 결정을 바꿨습니다. 화면이 예뻐 보이는 것보다, 작은 글씨에 눈이 피로하지 않고 버튼을 잘못 누르지 않는 것이 훨씬 중요했습니다.

그래서 본문 폰트를 기본 17px 이상으로 키우고, 버튼은 손가락으로 누르기 쉬운 최소 크기(약 48px)를 확보했으며, 인접한 버튼 사이 간격도 넉넉히 둬 오탭을 줄였습니다. 아래는 이때 적용한 접근성 기본값의 예시입니다.

/* 주 사용자층을 위한 접근성 기본값 */
:root {
  font-size: 17px;        /* 본문 최소 크기를 키워 가독성 확보 */
}

.btn,
.add-to-cart {
  min-height: 48px;       /* 손가락으로 누르기 쉬운 터치 영역 */
  padding: 14px 20px;
  font-size: 1.05rem;
}

/* 인접 버튼 사이 간격을 넉넉히 둬 오탭을 방지 */
.actions > * + * {
  margin-top: 12px;
}

결제 흐름도 마찬가지였습니다. 복잡한 회원가입은 이 연령대에게 가장 큰 이탈 지점입니다. 그래서 회원가입 없이 바로 살 수 있는 비회원 주문을 지원하고, 카카오페이·토스 같은 간편 결제를 우선 배치해 '사고 싶은데 가입하다 지쳐 포기하는' 상황을 최대한 없앴습니다.

목적으로 찾게 한다 — 카테고리와 필터

고객은 '영지버섯'이라는 상품명보다 '요즘 너무 피곤한데 뭐가 좋지?'라는 목적으로 접근하는 경우가 많습니다. 그래서 상품명 카테고리와 별개로, 건강 목적별 필터를 함께 두어 두 방향 모두에서 상품을 찾을 수 있게 했습니다.

• 상품 분류: 버섯류(상황버섯·영지버섯·동충하초 등), 녹용·동물성 한약재, 혼합 건강 세트, 선물 패키지
• 건강 목적별 필터: 면역력, 피로회복, 혈액순환 등 — 증상·목적으로 바로 탐색
• 상세 페이지: 원산지·재배/채취 방식·성분 함량을 구조화, 생산자 인증서·검사 성적서 첨부

모바일에서는 한 화면에 다 담기게

이 연령대의 모바일 이용률도 빠르게 높아지고 있어, 모바일 화면 설계에도 공을 들였습니다. 상품 이미지, 원산지·성분 정보, 구매 버튼이 스크롤을 오래 하지 않아도 한 화면 흐름 안에 자연스럽게 담기도록 배치해, '정보를 확인하고 → 바로 구매'로 이어지는 거리를 짧게 했습니다.

성과

사이트 오픈 후 모바일 주문 비율이 전체의 65%를 넘었으며, 상품 상세 페이지 체류 시간이 이전 대비 크게 늘었습니다. 원산지·성분 정보를 투명하게 공개한 것이 고객 재구매율 향상으로 이어졌다는 피드백을 받았습니다. 한약재·건강 상품처럼 신뢰가 곧 매출인 분야에서, 정보의 정확성과 접근성이 얼마나 중요한지 다시 한번 확인한 프로젝트였습니다.