컨베이어에서 부품을 끌어와
나만의 장난감을 조립하고, 만들다

한눈에 보기

베어 팩토리는 두 가지 얼굴을 가진 하나의 웹앱입니다. 백엔드가 없는 정적 사이트라 설치·회원가입 없이 브라우저에서 바로 돌아갑니다.

부품을 끌어와 조립하기

시작 화면에서 장난감 카드를 고르면 조립이 시작됩니다. 위쪽 조립판에 반투명한 목표 실루엣이 보이고, 아래 2층 컨베이어로 부품이 흘러갑니다(위 벨트는 왼쪽, 아래 벨트는 오른쪽으로).

기본 조작

• 집기 — 흐르는 부품을 손가락(또는 마우스)으로 누른 채 끕니다.
• 자석 흡착 — 맞는 빈 자리 근처로 가면 부품이 초록빛으로 강조되며 착 붙습니다. 그대로 놓으면 조립 완료.
• 정답 — 콤보 점수·초록 파티클·짧은 진동. 연속으로 맞추면 콤보가 올라 점수 배수가 커집니다.
• 오답 — 엉뚱한 자리에 놓으면 부품이 흔들리고 콤보가 초기화됩니다.

모드 · 스테이지

시작 화면 상단 탭에서 🧩 자유(무한 연습), 🏭 스테이지, 🛒 상점을 오갑니다. 스테이지는 제한 시간 안에 목표 수량만큼 장난감을 완성하는 도전입니다. 클리어하면 다음 스테이지가 열리고 최고 점수가 저장됩니다.

상점 — 코인 쓰는 곳

장난감을 완성하고 스테이지를 클리어하면 코인이 쌓입니다(상단 바 🪙 = 쓸 수 있는 잔액). 상점에서 영구 업그레이드와 테마 스킨을 삽니다.

• 🧲 자석 강화 — 흡착 반경 +25%
• ⏳ 여유 시간 — 모든 스테이지 제한 시간 +15%
• 🛡️ 콤보 보호 — 장난감마다 첫 오답 1회는 콤보를 지킴
• 🎨 테마 — 캔디·민트·선셋 등 배경/강조색 변경(사면 바로 적용)

설정 · 설치

시작 화면 또는 플레이 중 ⚙️에서 효과음·진동·난이도를 바꿉니다. 모두 이 기기에 저장됩니다. 효과음은 파일 없이 실시간 합성되며, 음소거 시 상단 버튼이 🔇로 바뀝니다.

나만의 장난감 만들기

디자이너 스튜디오는 이미지로 장난감을 만들어 게임용 템플릿(JSON)으로 내보내는 PC 저작 도구입니다. 마우스가 필요한 넓은 화면용이며, /designer.html 로 엽니다.

화면 구성

화면은 세 영역입니다 — 왼쪽 파츠 목록, 가운데 작업 무대, 오른쪽 속성 패널. 가운데 무대는 상단 탭으로 ✂️ 슬라이스 · 파츠 편집 · 조합 세 모드를 오갑니다. 장난감을 만드는 길은 두 가지입니다.

방법 A — 슬라이스로 통짜 이미지 쪼개기

완성된 장난감 그림을 부품별로 잘라내는 가장 빠른 길입니다. 핵심은 배치가 공짜라는 점 — 원본 그림은 이미 조립된 상태라, 구역이 있던 자리가 그대로 조립 위치가 됩니다.

1. 통짜 이미지 불러오기

   🖼 통짜 이미지로 완성된 장난감 한 장을 엽니다. 배경이 투명한 PNG를 권장합니다.

2. 구역 지정

   ▭ 사각형은 드래그로 그리고 모서리로 크기 조절합니다. 부품이 서로 붙어 있어 사각형이 옆 부품을 같이 가져가면 ⬡ 다각형으로 바꿔, 외곽선을 따라 점을 찍어 자릅니다(닫은 뒤 점을 끌어 조정). 다각형 밖은 자동으로 투명 처리됩니다.

3. ✨ 자동 분할 (선택)

   배경이 투명하고 부품끼리 떨어져 있으면 ✨ 자동 분할이 덩어리를 알아서 찾아 사각 구역을 채웁니다.

4. 여백 자동 제거

   체크해두면 구역 안 투명 여백을 잘라 부품을 딱 맞게 만들고 배치도 그에 맞춰 보정합니다.

5. ✂️ 파츠로 만들기

   버튼을 누르면 각 구역이 부품이 되고, 조합 탭에 원본과 똑같이 조립된 모습이 나타납니다.

방법 B — 이미지 임포트 & 파츠 편집(누끼)

부품을 낱장으로 가져오려면 왼쪽 ＋ 이미지를 누르거나 파일을 왼쪽 패널에 끌어다 놓습니다 (여러 장 동시 가능). 임포트한 파츠는 파츠 편집 탭에서 배경을 지우고 다듬습니다.

밝기·대비는 비파괴 조절이라 내보낼 때 구워집니다.

조합 & 장난감 설정

조합 탭에서 부품을 끌어 배치합니다. 파츠를 고르면 오른쪽 속성 패널에서 크기·겹침 순서(z)· 좌우 반전을 바꿀 수 있고, 가운데 세로선은 대칭 가이드입니다. 오른쪽 위에서는 장난감 전체 설정을 정합니다.

• 이름 · 이모지 — 시작 화면 카드에 보이는 표시.
• 게임 ID — 템플릿 id. 파일 이름과 스테이지 참조에 쓰입니다.
• 보드 너비·높이 — 조립판 논리 크기(슬라이스하면 자동으로 맞춰집니다).
• 자석 흡착 반경 — 부품이 얼마나 멀리서 붙는지.
• 보상 점수·코인 — 완성 시 지급량.

오답 유도 파츠 자동 생성

진짜 부품과 비슷하지만 어디에도 맞지 않는 부품을 섞어 난이도를 올릴 수 있습니다. 속성 패널의 ✨ 4개 자동 생성을 누르면 만들어둔 파츠에서 색조(파랑·초록·분홍)·흑백·크기 변형본을 뽑아냅니다.

미리보기 — 진짜 게임으로 확인

상단 ▶ 미리보기는 지금 프로젝트를 실제 게임 엔진으로 돌려봅니다. 별도 구현이 아니라 게임과 똑같은 컨베이어·조립·피드백이라, 내보내기 전에 실제 손맛을 확인할 수 있습니다.

내보내기 → 게임에 추가

내보내기는 이미지가 통째로 담긴 자체 완결 ToyTemplate JSON을 만듭니다. 복사하거나 .json으로 내려받습니다.

이 게임(저장소)에 새 장난감으로 넣으려면:

1. 파일 저장

   내려받은 <id>.json 을 public/templates/ 에 넣습니다.

2. 목록에 등록

   public/templates/index.json 의 templates 배열에 { "id": "robot", "file": "robot.json" } 처럼 한 줄 추가합니다.

3. 재빌드 · 배포

   npm run deploy. 템플릿은 빌드 시 번들에 임베드되어 자체 완결 단일 파일로도 동작합니다.

프로젝트 관리 & 파츠 라이브러리

여러 장난감을 오가며 작업할 수 있습니다. 상단 📁에서 프로젝트를 만들고·열고·복제·삭제합니다. 마지막에 연 프로젝트가 다음 방문에 복원되고, 저장 공간 사용량도 보여줍니다. 작업물은 이 브라우저 (IndexedDB)에 자동 저장됩니다.

자주 쓰는 부품은 파츠 라이브러리에 모아 다른 프로젝트에서 재사용합니다. 파츠 속성의 📚 라이브러리에 저장으로 담고, 왼쪽 📚 라이브러리에서 클릭해 현재 프로젝트에 추가합니다.

빠른 참조

알아두기

• 저장은 이 브라우저에만 — 코인·해금·디자이너 작업물 모두 로컬 저장(서버·계정 없음). 기기를 옮기거나 브라우저 데이터를 지우면 사라집니다. 중요한 작업은 내보내기로 백업하세요.
• 디자이너는 데스크톱 전용 — 넓은 화면 + 마우스 기준입니다.
• 디자이너는 이미지 파츠 템플릿만 편집합니다.
• 자유 조립의 누적 점수는 세션 한정입니다(스테이지 최고 점수·코인은 저장됨).

업데이트 내역

주요 변경만 간추렸습니다. 최신순.