칸성비 운빨 망겜 개발기

이선엽·2026년 3월 17일

nextjs 미니게임 웹 게임

서비스 개발

목록 보기

3/6

칸성비 운빨 망겜 개발기

타르코프의 게임 매칭 대기시간이 꽤나 깁니다. (5분 ~ 10분 이상)
그래서 이 시간에 플레이 할 수 있는 간단한 게임을 개발했습니다.
게임과 유사하게 만들기 위해서 게임내의 기능을 부분적으로 구현하였습니다.

최근에 패치를 통해서 최대 3분 정도로 엄청 짧아졌다고 합니다...

🔗 미니게임 바로가기

설계

각 잡고 들어가 보겠습니다.

화면 설계

화면 설계입니다. 한 화면에서 모두 처리하고 간단하게 진행 합니다.

상단
- Reset, 랭킹 (7일, 전체), 현재 점수, 남은 시간 Progress Bar
  - 랭킹에서는 닉네임, 칸성비 최종 가치
중앙 왼쪽 칸 (인벤토리)
- 10 X 10 크기
중앙 오른쪽 칸 (아이템 Pool)
- 랜덤 아이템들 100 개
  - 사진에 금액 표시

기능 설계

드래그로 아이템 옮기기, 드래그 후 R 눌러서 아이템 회전
- 게임에서 동일하게 회전하는 기능이 있습니다.
플레이 방법 표시
제한시간 30초
- 실제 게임에서는 30초가 넘어가면 죽습니다.
인벤토리에 넣을 시 점수 자동 계산
게임 끝날 시 닉네임을 입력하여 랭킹 등록
랭킹 등록시 본인 순위 표시

인벤토리 설계

10 * 10의 크기
드래그해서 올 때 놓는 위치가 미리보여야 함
- preview 기능
드래그 한 아이템을 해당 위치에 놓을 수 있는지 없는지 표시해야 함
- 가능하면 초록색, 불가능 하면 빨간색
드래그해서 회전할 경우 회전 된 것으로 미리 보여야 함
배낭에서 오른쪽으로 드래그 할 경우 제거 되며 아이템 Pool에 다시 추가되어야 함
배낭안에서 이동이 가능해야 함
reset할 경우 초기화 되어야 함

아이템 Pool 설계

배낭보다 크게 그려져야 함
목록이 잘 분배 되어서 나와야 함
드래그 할 수 있어야 함
잡고 회전한 후 다시 놓을때는 원래대로 돌아가야 함
reset할 경우 새로운 목록으로 바껴야 함

랭킹창 설계

7일간의 기록만 사용
- 월 ~ 일 기준
시작전에는 TOP 10 랭킹을 보여줌
게암플레이 후에는, 결과 점수를 계산하여 TOP 1 ~ 3, 내 점수 위 3, 내 점수, 내 점수 아래 3 을 표시함
- 닉네임 입력 안했을 시 unknown으로 미리 보여줌
닉네임을 입력 받아서 저장

DB 설계

닉네임과 점수를 저장할 테이블 정보 입니다.

CREATE TABLE IF NOT EXISTS user_minigame_score (
  ID SERIAL PRIMARY KEY,
  NICKNAME TEXT,
  GAME_TYPE TEXT,
  SCORE BIGINT,
  CREATE_TIME timestamp with time zone default now()
);
COMMENT ON COLUMN user_minigame_score.id IS '자동 생성 아이디';
COMMENT ON COLUMN user_minigame_score.NICKNAME IS '닉네임';
COMMENT ON COLUMN user_minigame_score.GAME_TYPE IS '미니게임 타입';
COMMENT ON COLUMN user_minigame_score.SCORE IS '점수';
COMMENT ON COLUMN user_minigame_score.CREATE_TIME IS '적재 시간';

프로세스

30초가 끝나면 알림을 주며 게임 종료
랭크 산정시 닉네임 입력 받기, 그냥 종료도 가능
API로 통신
- 현재 등수 계산, TOP 1 ~ 3, 내 점수 위 3, 내 점수 아래 3 추출후 리턴
- 화면에서 내 점수를 리스트에 끼워 넣은 후 표출
- 데이터 저장
reset 시 오른쪽 랜덤 아이템을 돌릴 수 있음
- 플레이 중 reset 시 초기화 하고 아이템 돌리고 시작 대기화면으로 바로 가게 하기

대기 화면 → 시작 버튼 → 게임 진행 (30초) → 종료 알림 → 점수 확정 → 닉네임 입력 or 스킵 → 랭킹 결과 표시