그누보드7 D2C 쇼핑몰 템플릿 - SuperBify Commerce Minimal / Still Form

이번에는 Still Form이라는 커머스 템플릿입니다.

G7 이커머스를 가지고 템플릿을 계속 만들어보다가, 이번에는 특정 업종보다는 조금 더 범용적으로 사용할 수 있는 미니멀한 D2C 쇼핑몰을 만들어보고 싶어서 시작했습니다.

홈 & 라이프스타일 브랜드를 기본으로 잡았지만 화장품, 의류, 잡화, 소형 브랜드 자사몰 쪽에도 이미지와 컬러를 바꿔서 사용할 수 있게 구성했습니다.

이번 작업은 AI를 적극적으로 사용했습니다

이 부분은 그냥 솔직하게 적는 게 좋을 것 같아서 적습니다.

Still Form은 기획부터 UI 구성, 컴포넌트 작업, 반복적인 코드 작성과 테스트 코드 정리까지 AI Coding을 꽤 적극적으로 활용해서 만들었습니다.

요즘 AI로 어디까지 실제 제품을 만들 수 있을지 저도 계속 테스트해보고 있는 중입니다.

그렇다고 프롬프트 한 번 넣고 나온 결과물을 그대로 올린 건 아니고, G7 Template 구조에 맞추고 실제 API를 연결하고 장바구니, 주문, 마이페이지 같은 흐름을 계속 확인하면서 필요한 부분은 직접 수정하고 다시 테스트했습니다.

개인적으로는 AI를 개발자를 대신하는 도구라기보다는 개발 속도를 많이 올려주는 도구로 사용하는 쪽에 가깝습니다.

앞으로 SuperBify 쪽 작업에서도 쓸 수 있는 부분은 AI를 적극적으로 사용할 생각입니다.

Still Form

Still Form은 템플릿을 보여주기 위해 만든 데모 브랜드입니다.

실제 운영 중인 브랜드는 아니고 템플릿의 디자인과 구조를 확인하기 위한 시안 데이터입니다.

브랜드 정보나 이미지, 상품 데이터 등을 교체하면 실제 쇼핑몰에 맞게 사용할 수 있습니다.

기본 구성

현재 템플릿에는 아래 페이지들이 포함되어 있습니다.

• 메인
• 상품 목록
• 카테고리별 상품 목록
• 상품 상세
• 장바구니
• 주문서
• 주문 완료
• 비회원 주문 조회
• 비회원 주문 상세
• 공지
• 브랜드 스토리
• 이용약관
• 개인정보처리방침
• 배송 / 교환 / 반품 안내
• 로그인
• 회원가입
• 비밀번호 찾기
• 마이페이지
• 주문 내역
• 배송지 관리
• 프로필 수정
• 비밀번호 변경
• 찜
• 쿠폰
• 마일리지
• 상품 문의
• 403 / 404 / 500 에러 페이지

상품이나 주문 데이터를 템플릿에서 별도로 만드는 방식은 아니고, G7의 sirsoft-ecommerce API를 그대로 사용합니다.

공지 쪽은 sirsoft-board를 사용합니다.

쇼핑몰 구조

대략적인 흐름은 아래 정도까지 연결되어 있습니다.

상품 목록 → 상품 상세 → 장바구니 → 주문 → 주문 완료

비회원의 경우

주문 → 주문 완료 → 비회원 주문 조회 → 주문 상세

까지 사용할 수 있도록 구성했습니다.

마이페이지에서도 주문내역, 배송지, 찜, 쿠폰, 마일리지, 상품 문의 등을 확인할 수 있습니다.

설치 요구사항

• Gnuboard 7 >= 7.0.0
• PHP 8.2+
• sirsoft-ecommerce >= 1.1.0
• sirsoft-daum_postcode >= 1.0.0

sirsoft-ecommerce는 반드시 설치 후 활성화되어 있어야 합니다.

설치 방법

G7 관리자에서

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

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

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

설치가 완료되면 SuperBify Commerce Minimal 템플릿을 활성화하면 됩니다.

템플릿을 활성화하면 기존에 활성화되어 있던 User Template은 비활성화됩니다.

ZIP 설치

GitHub Release에 있는 ZIP 파일을 받아서 G7 관리자 → 템플릿 관리 → 수동 설치 → 파일 업로드

방식으로도 설치할 수 있습니다.

Release에는 빌드된 dist가 포함되어 있기 때문에 그냥 설치해서 사용하는 경우 Node.js는 필요하지 않습니다.

데모 데이터

화면을 바로 확인할 수 있도록 데모 상품과 카테고리, 공지 데이터도 같이 준비해두었습니다.

현재 기준으로

• 데모 상품 8개
• 카테고리 7개
• 공지 게시물 14개

정도가 들어 있습니다.

이 데이터는 어디까지나 템플릿 확인용이고, 실제 운영할 때는 관리자에서 자신의 상품과 콘텐츠로 교체해서 사용하면 됩니다.

사업자 정보 / 약관

사업자 정보와 정책 관련 내용은

config/business-info.json

에서 관리할 수 있습니다.

상호, 대표자, 사업자등록번호, 통신판매업신고번호, 주소, 고객센터 등의 정보를 한 곳에서 관리하도록 해놨습니다.

이용약관, 개인정보처리방침, 배송 / 교환 / 반품 안내도 같은 파일에서 관리합니다.

현재 포함되어 있는 약관 내용은 시안 문구이기 때문에 실제 운영에 사용할 경우에는 사업자 상황에 맞게 꼭 수정해서 사용하셔야 합니다.

코어 수정 여부

없습니다.

가능하면 G7 코어를 직접 수정하지 않고 Template / Module / Plugin 같은 공식 확장 구조 안에서 작업하려고 하고 있습니다.

Still Form도 같은 방식으로 만들었습니다.

기술 스택

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

테스트

AI를 많이 사용한 만큼 결과물이 실제로 돌아가는지는 오히려 더 많이 확인하려고 했습니다.

현재 버전 기준으로

• Vitest 228개 테스트 통과
• Template install / activate / update lifecycle 확인
• 1440 / 768 / 430 / 390 / 360 해상도 화면 확인
• 모바일 가로 overflow 확인
• 로딩 스켈레톤 확인
• 상품 담기
• 장바구니 수량 변경
• 장바구니 삭제
• 주문서
• 주문 생성
• 비회원 주문 조회
• 주문 완료

까지 테스트했습니다.

AI가 코드를 많이 만들어주는 건 좋은데 결국 마지막에 중요한 건 실제로 돌아가느냐라서 이 부분은 계속 테스트를 추가해보려고 합니다.

이런 쪽에 잘 맞을 것 같습니다

기본 디자인은 Home & Lifestyle 쪽으로 만들었지만

• 라이프스타일 브랜드
• 화장품
• 의류
• 잡화
• 인테리어 소품
• 소규모 D2C 브랜드

정도에는 비교적 쉽게 응용할 수 있을 것 같습니다.

아직 계속 만드는 중입니다

SuperBify 쪽은 완제품 하나 만들고 끝내기보다는 G7을 실제로 써보면서 필요한 템플릿이나 플러그인을 계속 만들어보려고 하고 있습니다.

저도 G7은 계속 만져보는 중이라 사용하시다가 이상한 부분이나 개선할 만한 게 있으면 GitHub Issue에 남겨주시면 확인해보겠습니다.

라이선스

MIT License

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

GitHub

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

제작

20ft / SuperBify

https://20ft.co.kr