팔도유람첩
조선 팔도 도장 여행 미니게임
- 형태HTML5 미니게임
- 지원 화면모바일 · PC
- 로고 · 글 · 사진을 고객사 내용으로 바꿔 제작
- PC · 모바일 반응형, 개발 주소에서 확인 후 오픈
- 계약 · 결제 · 진행 상황은 서비스관리에서 확인
제작 방식 고르기
기본형
게임은 그대로, 그림과 문구는 우리 브랜드로
- 캐릭터 · 배경 · 로고 · 색 · 문구를 브랜드에 맞게 교체
- 스테이지 · 난이도 수치 조정
- 앱 설치 없이 휴대폰 · PC 웹에서 바로 실행
이벤트형
참여 기록까지 남는 프로모션 이벤트
- 기본형 내용 모두 포함
- 참여 기록 · 순위 · 응모 등 이벤트 기능 연동
- 이벤트 기간 · 참여 방법은 상담 후 맞춤 설계
이런 게임이에요
조선 후기 젊은 선비 화원이 유람첩 한 권을 들고 팔도 스물네 고을을 걸으며 도장을 찍어 모으는 여행 · 수집 HTML5 게임 시안입니다. 대략의 위경도로 직접 그린 대동여지도풍 지도(해안선 · 섬 · 백두대간 · 큰 강 · 큰길 십리 눈금) 위를 선비가 실제 걷기 8프레임으로 걸어가고, 고개는 느린 걸음 · 나루는 나룻배로 건넙니다. 고을에 닿으면 인주 묻히기 → 자리 맞추기 → 꾹 누르기 3단계로 도장을 찍고, 결과에 따라 완벽 · 좋음 · 번짐 · 흐림 모양이 코드로 생성되어 유람첩에 그대로 남습니다. 고을 문답(금박 칸), 길 위 사건(주막 · 소나기 · 장터), 세트 업적 낙관, 60일 유람 · 자유 유람, 이어하기 저장, 국악풍 합성음을 갖췄습니다.
화면 흐름
- 로딩
- 타이틀
- 새 유람
- 지도
- 걷기
- 도착 카드
- 고을 문답
- 도장 3단계
- 유람첩에 붙이기
- 업적 낙관
- 결과 ⇄ 일시정지
주요 기능
- 로딩 · 타이틀(키 아트 · 붓글씨 SVG 로고) · 지도 · 도착 카드 · 도장 장면 · 유람첩 · 결과까지 한 페이지 상태 전환, 첫 판 손가락 안내
- 대략의 위경도로 직접 그린 한반도 지도: 해안선 · 주요 섬 · 백두대간 톱니 산줄기 · 큰 강 겹선 · 큰길 십리 눈금 · 계절 빛깔
- 스물네 고을 · 스물여덟 길(고개 6 · 나루와 뱃길 5), 이동 일수 · 60일 제한 · 계절과 날씨
- 도장 3단계 손맛: 인주 게이지 · 8자로 흔들리는 자리 맞추기 · 힘 띠 유지(히트 스톱 · 흔들림 · 종이 눌림 · 인주 튐)
- 고을마다 코드로 그린 낙관(7가지 모양 · 백문/주문 · 한자 지명 · 명소 문양 24종)과 완벽 · 좋음 · 번짐 · 흐림 찍힌 모양 생성
- 유람첩 책장 넘김(3D) · 도별 쪽 · 금박 칸 · 빈칸 실루엣 · 업적 낙관 8종 · 칭호 · 최고 기록
- 걷기 8프레임(이동 거리 기준 · 발 미끄러짐 보정) · 가변 서브스텝 루프 · 백버퍼 상한 · 적응형 화질 · DOM 없는 엔진과 Node 판정 시험
게임 화면
제작 정보
| 형태 | HTML5 여행 · 수집 게임 · 모바일 세로형 |
|---|---|
| 플랫폼 | 웹(PC), 모바일 웹 |
| 사용 기술 | HTML5/CSS3, JavaScript(ES6), Canvas 2D(지도 굽기 · 절차적 도장 생성 · 스프라이트), CSS 3D(책장 넘김), Pointer Events, WebAudio, localStorage, Node.js(판정 시험 · 봇) |
| 결제 · 확률형 아이템 | 없음 |
내 브랜드로 바뀌는 부분
바꿔 드리는 것
그대로 가져가는 것
제작에 포함되는 것
기획
- 업종 · 목표 · 고객층 상담으로 필요한 메뉴와 페이지 정리
- 사이트맵(메뉴 구조)과 페이지별로 들어갈 내용 확정
- 필요한 기능(문의 · 예약 · 게시판 · 결제 등) 범위 확정
디자인
- 고르신 템플릿 디자인에 로고 · 브랜드 색 적용
- 문구와 사진을 고객사 내용으로 교체 (시안 사진은 AI 예시 이미지라 교체가 원칙)
- 시안 확인 후 수정 2회 반영 (그 뒤 수정 · 화면 추가는 별도 견적)
제작 · 퍼블리싱
- PC · 태블릿 · 모바일 반응형
- 주요 브라우저(크롬 · 엣지 · 사파리 · 삼성 인터넷)에서 화면 확인
- 템플릿에 들어 있는 문의 · 신청 폼 등 기능 연결 (관리형, 기본형은 화면만 제공)
관리 (관리형 선택 시)
- 그누보드5 관리자 화면에서 글 · 게시판 · 신청 내역 직접 관리
- 관리자 계정 전달과 사용 방법 안내
오픈
- 개발 주소에서 먼저 확인한 뒤 실제 도메인에 반영
- 도메인 연결 · 보안 인증서(https) 설정 지원
- 오픈 후 1개월 동안 하자는 무상으로 고치고, 이후 수정은 작업 건마다 금액을 먼저 안내드린 뒤 진행합니다
별도 협의
- 템플릿에 없는 페이지 · 기능 추가, 다국어
- 도메인 · 호스팅(서버) 비용, 유료 글꼴 · 사진 구입비
- 검색엔진 등록 · 광고 등 마케팅
진행 절차
- 상담원하시는 템플릿과 필요한 내용을 알려 주세요. 범위 · 일정 · 금액을 안내드립니다.
- 계약서비스관리에서 계약서를 확인하고 동의하시면 시작합니다.
- 자료 전달로고 · 문구 · 사진 등 사이트에 들어갈 자료를 보내 주세요.
- 제작템플릿을 바탕으로 디자인 적용 · 내용 교체(관리형은 기능 연결까지)를 진행합니다.
- 확인 · 수정개발 주소에서 직접 보시고 고칠 부분을 알려 주시면 반영합니다.
- 오픈잔금 결제 후 실제 도메인에 반영하고 관리 방법을 안내드립니다.
자주 묻는 질문
우리 업종 템플릿이 없어도 되나요?
됩니다. 화면 구조가 비슷한 템플릿을 고르시면 메뉴와 내용을 업종에 맞게 바꿔 드립니다. 어떤 템플릿이 맞을지 모르겠다면 상담 때 추천해 드립니다.
기본형과 관리형은 무엇이 다른가요?
기본형은 시안 화면을 그대로 만들어 드리는 방식이라, 오픈 후 글이나 사진을 바꾸실 때는 저희에게 요청해 주시면 됩니다. 관리형은 관리자 화면이 있어서 공지 · 후기 · 신청 내역 등을 직접 고치고 관리하실 수 있습니다. 금액은 두 방식 모두 화면 수로 정하고, 예약 · 계산기 · 결제 같은 기능은 필요하실 때 기능별 금액으로 추가합니다.
사진은 어떻게 하나요?
템플릿의 사진은 AI로 만든 예시라 그대로 쓰지 않고 고객사 사진으로 바꿉니다. 준비된 사진이 부족하면 상담 때 대신 쓸 방법을 함께 정합니다.
도메인과 호스팅(서버)은 어떻게 하나요?
도메인과 호스팅은 고객님 명의로 준비하시고, 연결과 설정은 저희가 도와드립니다. 무엇을 준비하면 되는지는 상담 때 안내드립니다.
기간은 얼마나 걸리나요?
페이지 수와 기능, 자료 준비 상황에 따라 달라집니다. 상담 때 범위를 정하면서 일정을 함께 안내드립니다.
결제는 어떻게 하나요?
계약 후 서비스관리에서 카드 또는 계좌이체로 결제하실 수 있습니다. 계약 때 정한 일정에 따라 나누어 결제할 수 있습니다.
진행 상황은 어디서 보나요?
계약하시면 서비스관리에서 계약서, 진행 단계, 결제 내역을 한곳에서 확인하실 수 있습니다. 오픈 전에는 개발 주소에서 먼저 보시고 고칠 부분을 알려 주시면 됩니다.
오픈 후에 수정이 필요하면요?
오픈 후 1개월 동안 하자는 무상으로 고쳐 드립니다. 그 뒤 수정 · 업데이트는 작업 건마다 금액을 먼저 안내드린 뒤 진행합니다.
꼭 알아두세요
- 템플릿에 나오는 회사명 · 인물 · 수치 · 후기는 모두 가상이며, 사진은 AI로 만든 예시 이미지입니다. 제작할 때 고객사 내용과 사진으로 바꿉니다.
- 화면 미리보기는 디자인과 구성을 보여 드리기 위한 것으로, 문의 · 예약 · 결제는 실제로 동작하지 않습니다.
- '관리형 준비됨' 표시가 있는 템플릿은 관리자 기능까지 만들어져 있습니다. 표시가 없는 템플릿도 관리형으로 만들 수 있으며, 관리자를 새로 연결해 기간이 더 필요합니다. 예약 · 결제 등 기능은 필요하실 때 추가합니다.
- 금액과 일정은 상담 후 필요한 범위에 맞춰 안내드립니다.
같은 업종의 다른 템플릿
