서울을 기반으로 스페셜티 커피를 다루는 로스터리 브랜드의 홈페이지와 온라인 쇼핑몰을 구축한 사례입니다. 원두 판매, 클래스 예약, 도매 문의, 매장 안내까지 여러 성격의 기능이 하나의 사이트 안에 함께 운영됩니다. 디자인은 고객사에서 제공했으며, 코딩과 프로그래밍 작업을 담당했습니다.
메뉴 구조와 정보 설계
5개 메뉴와 카테고리 분류
상단 내비게이션은 브랜드 소개, 쇼핑몰, 클래스, 매장 안내, 도매 문의 다섯 항목으로 구성했습니다. 브랜드 소개 아래에는 브랜드 철학, 연혁, 회사 정보 세 페이지를 두었고, 쇼핑몰은 원두, 굿즈, 식품, 구독 상품 네 카테고리로 분류했습니다. 클래스 메뉴는 수강 신청과 관련 상품 구매를 같은 메뉴 안에서 이어갈 수 있도록 구성했습니다.
모바일 전용 메뉴 구성
모바일에서는 PC 상단 내비게이션 대신 별도의 슬라이드 메뉴(Offcanvas Menu)가 열립니다. 메뉴 안에 검색창, 마이페이지, 위시리스트, 장바구니, SNS 링크를 함께 배치해 모바일 이용자가 주요 기능에 한 화면에서 바로 접근할 수 있도록 처리했습니다. PC에서는 상단 우측에 별도로 표시되는 로그인, 회원가입, 장바구니, 검색 버튼이 모바일에서는 슬라이드 메뉴 안으로 통합됩니다.
메인 화면 구성
풀스크린 슬라이더와 로스팅 현황 표시
메인 상단은 풀스크린 슬라이더(Swiper)로 구성했습니다. 슬라이더 아래에는 현재 로스팅 중임을 실시간으로 보여주는 섹션을 배치했습니다. 현재 시각이 시계 형태로 표시되어 방문자에게 실시간으로 운영 중인 로스터리라는 인상을 줍니다.
새소식 카드와 배너 섹션
메인 중단에는 새소식 게시판과 연동된 카드 3개를 배치했습니다. 클래스 일정처럼 주기적으로 갱신되는 공지가 메인에 자동으로 반영됩니다. 그 아래에는 브랜드 소개와 매장 안내 두 배너를 나란히 배치해 처음 방문한 이용자가 브랜드를 이해하고 오프라인 매장으로 연결되는 흐름을 만들었습니다.
쇼핑몰 기능과 운영 구조
상품 카테고리와 클래스 예약 통합
쇼핑몰은 원두, 굿즈, 식품, 구독 상품으로 구분됩니다. 클래스 수강 신청과 관련 상품 구매는 일반 상품과 같은 쇼핑몰 구조 안에서 처리할 수 있도록 했습니다. 클래스 예약과 관련 상품 구매가 별도 시스템 없이 하나의 쇼핑몰 안에서 이어지는 구조입니다.
기업 고객 전용 카테고리와 할인 구조
도매 거래처와 업무용 구매 고객을 위한 별도 카테고리를 쇼핑몰 안에 구성했습니다. 단품 원두부터 블렌드, 드립백, 캡슐, 티백, 액상 커피 스틱, 콜드브루까지 납품 형태에 맞는 상품을 분류했고, 일반 판매가와 별도로 기업 할인율이 적용된 가격이 표시됩니다. 소분 판매용 봉투처럼 소매 채널에서는 다루지 않는 상품도 이 카테고리 안에서만 노출됩니다.
일반 쇼핑몰 메뉴와 같은 구조 안에 있지만 카테고리 단위로 노출 범위와 가격 정책을 다르게 설정할 수 있는 것은 독립 설치형 자사몰의 장점입니다. 외부 플랫폼에 입점하는 방식과 달리, 카테고리 구성과 노출 조건을 운영자가 직접 설정하고 필요에 따라 언제든 수정할 수 있습니다.
원두 정기배송 서비스
용량별로 구분된 원두 정기배송 서비스를 쇼핑몰 안에서 함께 운영합니다. 매달 새로운 원두를 받아보는 구독 방식으로, 일반 단품 구매와 같은 결제 흐름 안에서 신청할 수 있습니다. 단품 구매, 클래스 예약, 정기배송 구독이 별도 시스템 없이 하나의 쇼핑몰 안에서 함께 운영됩니다.
정기배송 상품의 구성과 가격, 배송 주기는 관리자 페이지에서 직접 수정할 수 있습니다. 외부 구독 서비스 플랫폼을 별도로 연동하지 않아도 되고, 상품 구성이 바뀔 때마다 개발자에게 요청할 필요가 없습니다. 자사 도메인 안에서 모든 거래가 이루어지므로 고객 데이터와 주문 이력도 직접 관리할 수 있습니다.
SEO와 분석 도구 설정
구조화 데이터와 소셜 채널 연결
브랜드 정보는 구조화 데이터(Schema.org - Organization)로 처리했습니다. 인스타그램과 유튜브 채널을 sameAs 항목으로 연결해 검색 엔진이 동일한 브랜드로 인식하도록 했습니다. 네이버 서치어드바이저 인증을 완료했고, Google Analytics와 네이버 애널리틱스를 함께 연동해 유입 경로를 확인할 수 있도록 했습니다. 대표 URL(canonical)은 도메인 루트로 지정했습니다.
다지점 브랜드의 매장별 키워드 대응
여러 지점을 운영하는 브랜드인 만큼, 매장별 지역명과 장소명이 검색 키워드로 작동하도록 메타 키워드와 본문 구조에 반영했습니다. 스페셜티, 로스터리, 원두납품, 커핑처럼 업종 특화 키워드도 함께 배치했습니다. 브랜드명, 영문 표기, 매장 위치 정보가 한 흐름 안에서 읽히도록 정리했습니다.
