그누보드7 로스터리 쇼핑몰 템플릿 - SuperBify Roastery / DAYOFF COFFEE

이번에는 플러그인이 아니라 템플릿입니다.

G7 이커머스를 가지고 이것저것 만들어보다가 그냥 상품만 나열되는 쇼핑몰 말고, 브랜드 느낌을 조금 더 살릴 수 있는 템플릿을 한번 만들어봤습니다.

커피나 로스터리, 소규모 D2C 브랜드처럼 상품도 중요하지만 브랜드 분위기나 콘텐츠도 같이 보여줘야 하는 곳을 생각하면서 만들었습니다.

데모로 들어가 있는 브랜드는 DAYOFF COFFEE이고, 실제 운영 브랜드가 아니라 템플릿 확인용으로 만든 샘플 브랜드입니다.

로고, 컬러, 이미지, 문구를 바꾸면 다른 커피 브랜드나 소규모 자사몰에도 사용할 수 있습니다.

기본 구성

템플릿은 Gnuboard 7의 User Template으로 만들었습니다.

기본적으로 아래 구성을 포함합니다.

• 메인
• 상품 목록
• 카테고리별 상품 목록
• 상품 상세
• 장바구니
• 주문
• 주문 완료
• 비회원 주문 조회
• 마이페이지
• 브랜드 소개
• Brew Guide
• Journal
• 공지
• 이용약관
• 개인정보처리방침
• 배송 / 교환 / 반품 안내

상품, 장바구니, 주문 같은 커머스 기능은 sirsoft-ecommerce API를 그대로 사용합니다.

G7 코어나 이커머스 모듈을 따로 수정하지 않습니다.

DAYOFF COFFEE

현재 들어가 있는 DAYOFF COFFEE는 템플릿 구조와 디자인을 보여주기 위한 데모 브랜드입니다.

"Coffee for your better day."

라는 컨셉으로 만들어봤고, 일반 쇼핑몰 느낌보다는 브랜드 사이트 + 쇼핑몰 중간 정도의 분위기를 생각했습니다.

그래서 상품만 계속 보여주는 방식보다는

브랜드 소개 + 상품 + Brew Guide + Journal

같은 콘텐츠를 같이 보여주는 구조로 잡았습니다.

브랜드 변경

실제로 사용할 때는 DAYOFF COFFEE를 그대로 사용할 필요는 없습니다.

로고, 이미지, 컬러, 문구는 각각 교체할 수 있도록 분리해놨습니다.

로고:

assets/images/brand/

사진:

assets/images/photos/

컬러:

src/styles/design-tokens.css

메인 구성:

layouts/home.json

문구:

lang/ko.json lang/en.json

정도로 나눠져 있습니다.

로고와 컬러, 이미지 정도만 바꿔도 전체 분위기가 꽤 많이 달라집니다.

필요한 모듈 / 플러그인

이 템플릿은 아래 구성이 필요합니다.

• Gnuboard 7 >= 7.0.8
• PHP 8.2+
• sirsoft-ecommerce >= 1.1.2
• SuperBify Commerce Compat >= 1.0.0

sirsoft-ecommerce는 G7 관리자에서 설치해서 사용하면 되고, SuperBify Commerce Compat는 조금 전에 창작마당에도 같이 올린 플러그인입니다.

Commerce Compat는 이커머스 쪽 호환성 처리와 쇼핑몰 기본정보 API를 담당합니다.

설치 순서

설치는 아래 순서로 하면 됩니다.

1. sirsoft-ecommerce 설치 및 활성화
2. SuperBify Commerce Compat 설치 및 활성화
3. SuperBify Roastery 템플릿 설치 및 활성화

순서는 가능하면 지켜주세요.

GitHub 설치

G7 관리자에서

템플릿 관리 → 수동 설치 → GitHub

로 이동해서 아래 저장소 주소를 입력하면 됩니다.

https://github.com/20ft-bahamut/20feet-dayoffcoffee-template

설치 후 SuperBify Roastery 템플릿을 활성화하면 됩니다.

Commerce Compat 설치

필수 플러그인 저장소는 아래입니다.

https://github.com/20ft-bahamut/superbify-commerce-compat

관리자 → 플러그인 관리 → 수동 설치 → GitHub

에서 설치 후 활성화하면 됩니다.

쇼핑몰 기본정보

푸터의 회사명, 사업자등록번호, 대표자, 주소, 전화번호 같은 정보는 템플릿에 직접 박아놓지 않았습니다.

관리자 → 이커머스 → 환경설정 → 기본 정보

에 입력한 값을 사용합니다.

SuperBify Commerce Compat의 공개용 shop-info API를 통해 필요한 항목만 가져와서 표시합니다.

값이 비어 있으면 해당 항목은 그냥 출력하지 않습니다.

약관 / 개인정보처리방침

이용약관, 개인정보처리방침, 배송/교환/반품 안내는

config/business-info.json

에서 관리합니다.

현재 들어가 있는 내용은 어디까지나 템플릿 확인용 시안 문구라서 실제 사이트에 적용할 때는 운영하는 사업자 기준으로 꼭 수정해서 사용하셔야 합니다.

폰트

현재 템플릿에서는

• 제목: Gmarket Sans
• 본문/UI: Pretendard

조합을 사용하고 있습니다.

폰트는 템플릿에 직접 포함하지 않고 CDN 방식으로 불러옵니다.

내부망이나 외부 CDN을 사용할 수 없는 환경이면 self-host 방식으로 바꿔서 사용하시면 됩니다.

코어 수정 여부

없습니다.

G7의 Template 구조와 sirsoft-ecommerce API, Plugin / Hook 확장 구조 안에서만 작업했습니다.

가능하면 앞으로 만드는 SuperBify 쪽 G7 작업들도 코어를 직접 건드리지 않는 방향으로 만들 생각입니다.

개발 스택

• Gnuboard 7
• React 19
• TypeScript
• Vite
• JSON Layout
• sirsoft-ecommerce

설치용 Release에는 빌드된 dist가 포함되기 때문에 일반적으로 설치해서 사용하는 경우에는 Node.js가 필요하지 않습니다.

소스를 직접 수정해서 개발하는 경우에는 npm 환경이 필요합니다.

이런 쪽에 잘 맞습니다

개인적으로는 아래 같은 사이트에 잘 어울릴 것 같습니다.

• 로스터리
• 커피 브랜드
• 원두 판매
• 드립백
• 소규모 식품 브랜드
• 라이프스타일 D2C 브랜드

꼭 커피가 아니더라도 브랜드 스토리와 상품을 같이 보여주는 형태라면 이미지와 컬러를 바꿔서 응용할 수 있습니다.

라이선스

MIT License

개인 프로젝트나 상업 프로젝트 모두 사용 가능합니다.

GitHub

https://github.com/20ft-bahamut/20feet-dayoffcoffee-template

필수 플러그인

https://github.com/20ft-bahamut/superbify-commerce-compat

제작

20ft / SuperBify

https://20ft.co.kr