카트러시
쇼핑몰 빅세일 카트 러너 게임
- 형태HTML5 미니게임
- 지원 화면모바일 · PC
- 로고 · 글 · 사진을 고객사 내용으로 바꿔 제작
- PC · 모바일 반응형, 개발 주소에서 확인 후 오픈
- 계약 · 결제 · 진행 상황은 서비스관리에서 확인
제작 방식 고르기
기본형
게임은 그대로, 그림과 문구는 우리 브랜드로
- 캐릭터 · 배경 · 로고 · 색 · 문구를 브랜드에 맞게 교체
- 스테이지 · 난이도 수치 조정
- 앱 설치 없이 휴대폰 · PC 웹에서 바로 실행
이벤트형
참여 기록까지 남는 프로모션 이벤트
- 기본형 내용 모두 포함
- 참여 기록 · 순위 · 응모 등 이벤트 기능 연동
- 이벤트 기간 · 참여 방법은 상담 후 맞춤 설계
이런 게임이에요
생활 종합 쇼핑몰 '한바구니' 빅세일 위크 홍보용 HTML5 카트 러너 게임 시안입니다. OutRun식 세그먼트 원근으로 커브와 오르막 · 내리막이 있는 거대한 쇼핑몰 통로를 그리고, 신선식품 · 생활용품 · 가전 · 패션 코너 진열대가 원근 텍스처 벽으로 이어집니다. 마스코트 담이가 카트를 밀며 3레인을 달려 세일 상품을 담으면 카트 위에 실제로 쌓여 흔들리고, 높이 쌓을수록 계산대 보너스가 커지지만 흔들림이 커져 쏟아질 수 있습니다. 타임세일 · 쿠폰 ×2 · 무료배송 · 1+1 파워업, 날짜 시드로 같은 코스를 주는 '오늘의 도전'과 출석 도장, 점수 등급 쿠폰 자리, 공유용 결과 카드, CTA 자리를 갖췄고 상품 · 쿠폰 · 문구 · 색을 brand.js 한 곳에서 바꿉니다.
화면 흐름
- 로딩
- 시작 탭
- 타이틀
- 첫 판 튜토리얼
- 플레이 ⇄ 일시정지
- 결과
- 타이틀
주요 기능
- 로딩(BGM 합성 진행률) · 타이틀(키 아트 · SVG 로고 · 오늘의 도전 카드) · 첫 판 튜토리얼(멈춤 안내 · 손가락 힌트) · 플레이 · 일시정지 · 결과까지 한 페이지 상태 전환
- OutRun식 원근 통로: 커브 · 언덕 투영, 코너별 진열대 벽을 세로 줄 단위 원근 텍스처(1/z 보간 · 이방성 밉)로, 현수막 · 가랜드 · 계산대 게이트 · 진열 피라미드, 먼 것부터 그리기
- 3레인 러너 조작: 스와이프 · 키보드 · 게임패드 · 터치 버튼, 입력 버퍼 0.2초, 점프 · 슬라이드 · 공중 빠른 낙하, 장애물 7종(표지판 · 박스 · 박스 탑 · 굴러오는 카트 · 시식 코너 · 지게차 · 낮은 현수막)
- 카트 쌓기 리스크 · 보상: 담은 상품이 카트 위에 실제로 쌓여 사슬 스프링으로 흔들리고, 높이만큼 계산대 보너스(최대 ×3.1) · 흔들림이 커져 와르르 쏟아짐, 탑 뒤 장애물 비침 표시
- 파워업 5종(타임세일 자석 · 쿠폰 ×2 · 무료배송 무적 질주 · 1+1 묶음할인 · 시간 추가), 히트 스톱 · 화면 흔들림 · 속도선 · 숫자 팝업 · 콤보 · 코너 전환 연출 · 영수증 정산
- 홍보형 구조: 날짜 시드 '오늘의 도전'(같은 날 같은 코스 · 7일 출석 도장), 점수 등급 쿠폰 자리(추첨 없음), 1080×1350 공유용 결과 카드, 쇼핑몰 CTA 자리, 데모 랭킹, brand.js 로 상품 이미지 · 쿠폰 · 문구 교체
- 담이 뒷모습 달리기 8프레임(이동 거리 기준 재생) · 동작 컷, WebAudio 쇼핑 BGM 코드 작곡 · 효과음 합성 · 구호 TTS, 가변 서브스텝 · 적응형 화질 · 풀링, DOM 없는 판정 엔진과 Node 검산 · 봇
게임 화면
제작 정보
| 형태 | HTML5 3레인 러너 · 원근 쇼핑몰 통로 · 모바일 세로형 |
|---|---|
| 플랫폼 | 웹(PC), 모바일 웹 |
| 사용 기술 | HTML5/CSS3, JavaScript(ES6), Canvas 2D(세그먼트 원근 투영 · 원근 텍스처 · 스프라이트 · 파티클), WebAudio(OfflineAudioContext BGM 렌더 · 효과음 합성), Pointer Events(스와이프), Gamepad API, localStorage, Node.js(판정 검산 · 봇) |
| 결제 · 확률형 아이템 | 없음 |
내 브랜드로 바뀌는 부분
바꿔 드리는 것
그대로 가져가는 것
제작에 포함되는 것
기획
- 업종 · 목표 · 고객층 상담으로 필요한 메뉴와 페이지 정리
- 사이트맵(메뉴 구조)과 페이지별로 들어갈 내용 확정
- 필요한 기능(문의 · 예약 · 게시판 · 결제 등) 범위 확정
디자인
- 고르신 템플릿 디자인에 로고 · 브랜드 색 적용
- 문구와 사진을 고객사 내용으로 교체 (시안 사진은 AI 예시 이미지라 교체가 원칙)
- 시안 확인 후 수정 2회 반영 (그 뒤 수정 · 화면 추가는 별도 견적)
제작 · 퍼블리싱
- PC · 태블릿 · 모바일 반응형
- 주요 브라우저(크롬 · 엣지 · 사파리 · 삼성 인터넷)에서 화면 확인
- 템플릿에 들어 있는 문의 · 신청 폼 등 기능 연결
관리 (관리형 선택 시)
- 그누보드5 관리자 화면에서 글 · 게시판 · 신청 내역 직접 관리
- 관리자 계정 전달과 사용 방법 안내
오픈
- 개발 주소에서 먼저 확인한 뒤 실제 도메인에 반영
- 도메인 연결 · 보안 인증서(https) 설정 지원
- 오픈 후 1개월 동안 하자는 무상으로 고치고, 이후 수정은 작업 건마다 금액을 먼저 안내드린 뒤 진행합니다
별도 협의
- 템플릿에 없는 페이지 · 기능 추가, 다국어
- 도메인 · 호스팅(서버) 비용, 유료 글꼴 · 사진 구입비
- 검색엔진 등록 · 광고 등 마케팅
진행 절차
- 상담원하시는 템플릿과 필요한 내용을 알려 주세요. 범위 · 일정 · 금액을 안내드립니다.
- 계약서비스관리에서 계약서를 확인하고 동의하시면 시작합니다.
- 자료 전달로고 · 문구 · 사진 등 사이트에 들어갈 자료를 보내 주세요.
- 제작템플릿을 바탕으로 디자인 적용 · 내용 교체 · 기능 연결을 진행합니다.
- 확인 · 수정개발 주소에서 직접 보시고 고칠 부분을 알려 주시면 반영합니다.
- 오픈잔금 결제 후 실제 도메인에 반영하고 관리 방법을 안내드립니다.
자주 묻는 질문
우리 업종 템플릿이 없어도 되나요?
됩니다. 화면 구조가 비슷한 템플릿을 고르시면 메뉴와 내용을 업종에 맞게 바꿔 드립니다. 어떤 템플릿이 맞을지 모르겠다면 상담 때 추천해 드립니다.
기본형과 관리형은 무엇이 다른가요?
기본형은 시안 화면을 그대로 만들어 드리는 방식이라, 오픈 후 글이나 사진을 바꾸실 때는 저희에게 요청해 주시면 됩니다. 관리형은 관리자 화면이 있어서 공지 · 후기 · 신청 내역 등을 직접 고치고 관리하실 수 있습니다. 금액은 두 방식 모두 화면 수로 정하고, 예약 · 계산기 · 결제 같은 기능은 필요하실 때 기능별 금액으로 추가합니다.
사진은 어떻게 하나요?
템플릿의 사진은 AI로 만든 예시라 그대로 쓰지 않고 고객사 사진으로 바꿉니다. 준비된 사진이 부족하면 상담 때 대신 쓸 방법을 함께 정합니다.
도메인과 호스팅(서버)은 어떻게 하나요?
도메인과 호스팅은 고객님 명의로 준비하시고, 연결과 설정은 저희가 도와드립니다. 무엇을 준비하면 되는지는 상담 때 안내드립니다.
기간은 얼마나 걸리나요?
페이지 수와 기능, 자료 준비 상황에 따라 달라집니다. 상담 때 범위를 정하면서 일정을 함께 안내드립니다.
결제는 어떻게 하나요?
계약 후 서비스관리에서 카드 또는 계좌이체로 결제하실 수 있습니다. 계약 때 정한 일정에 따라 나누어 결제할 수 있습니다.
진행 상황은 어디서 보나요?
계약하시면 서비스관리에서 계약서, 진행 단계, 결제 내역을 한곳에서 확인하실 수 있습니다. 오픈 전에는 개발 주소에서 먼저 보시고 고칠 부분을 알려 주시면 됩니다.
오픈 후에 수정이 필요하면요?
오픈 후 1개월 동안 하자는 무상으로 고쳐 드립니다. 그 뒤 수정 · 업데이트는 작업 건마다 금액을 먼저 안내드린 뒤 진행합니다.
꼭 알아두세요
- 템플릿에 나오는 회사명 · 인물 · 수치 · 후기는 모두 가상이며, 사진은 AI로 만든 예시 이미지입니다. 제작할 때 고객사 내용과 사진으로 바꿉니다.
- 화면 미리보기는 디자인과 구성을 보여 드리기 위한 것으로, 문의 · 예약 · 결제는 실제로 동작하지 않습니다.
- '관리형 준비됨' 표시가 있는 템플릿은 관리자 기능까지 만들어져 있습니다. 표시가 없는 템플릿도 관리형으로 만들 수 있으며, 관리자를 새로 연결해 기간이 더 필요합니다. 예약 · 결제 등 기능은 필요하실 때 추가합니다.
- 금액과 일정은 상담 후 필요한 범위에 맞춰 안내드립니다.
같은 업종의 다른 템플릿
