사례

3D 테트리스

프로젝트 시작9월 28일 오전 10:52바로 개발 시작

개발 내용

3D 테트리스 만들어줘

실행과정67개 작업

블록의 위치·모양·색상, 쌓인 블록, 점수와 게임 상태로 데이터를 구성하겠습니다. 먼저 브라우저에서 바로 즐길 수 있는 3D 테트리스 화면을 만들고, 키보드와 화면 버튼으로 조작할 수 있게 하겠습니다.

명령 실행

파일 수정

입체 공간에서 블록을 앞뒤·좌우로 움직이고, 바닥 한 층을 채우면 지워지는 방식으로 만들고 있습니다. 차분한 다크 화면에 블록과 착지 위치가 잘 보이도록 구성하고, 다음 블록과 조작 안내도 함께 배치하겠습니다.

파일 수정

게임 화면과 이동·회전·층 지우기 기능을 구현했습니다. 시작 전 게임판은 예시이며, 게임을 시작하면 빈 공간에서 실제 플레이가 진행됩니다. 이제 완료한 게임의 점수를 저장하고 기록실에서 확인할 수 있도록 연결하겠습니다.

명령 실행

파일 수정

명령 실행

점수 저장과 공유 기록실을 연결했습니다. 지금은 블록 충돌, 층 제거, 게임 종료 시 기록 저장을 확인하고 있으며, 작은 화면에서도 버튼으로 플레이할 수 있도록 맞추고 있습니다.

파일 수정

앱 재시작

명령 실행

파일 수정

명령 실행

충돌·회전·층 제거와 서버의 기록 검증 테스트가 통과했습니다. 마지막으로 실제 브라우저에서 시작·일시정지·모바일 조작과 화면 배치를 확인하고 있습니다.

파일 수정

명령 실행

파일 수정

명령 실행

파일 수정

명령 실행

게임 로직과 기록 API 확인은 끝났습니다. 브라우저 점검 중 외부 글꼴에 의존하는 부분을 발견해, 글자가 안정적으로 표시되도록 글꼴도 프로젝트에 포함하고 있습니다.

명령 실행

파일 수정

명령 실행

파일 수정

명령 실행

파일 수정

명령 실행

파일 수정

명령 실행

파일 수정

명령 실행

파일 수정

명령 실행

실행결과 · 20분 18초 소요

画面ではなく韓国語。

실행과정19개 작업

PC 화면과 게임 조작은 확인했습니다. 게임 종료 후 기록 저장 과정에서 오류가 발견되어, 저장 요청을 점검하고 수정하고 있습니다.

파일 수정

명령 실행

앱 재시작

파일 수정

앱 재시작

파일 수정

명령 실행

파일 수정

명령 실행

앱 재시작

명령 실행

기록 저장 오류를 수정했고, 실제 한 판을 끝낸 뒤 점수가 저장되고 기록실에 표시되는 것까지 확인했습니다. 모바일에서는 플레이 중 게임판과 조작 버튼을 한 화면에서 보기 쉽도록 간격을 마지막으로 조정하고 있습니다.

파일 수정

명령 실행

파일 수정

실행결과 · 23분 3초 소요

3D 테트리스를 완성했습니다. 블록 이동·회전, 층 제거, 시점 변경, 모바일 조작과 점수 저장까지 확인했습니다.

시작 전 블록은 예시이며, **게임 시작**을 누르면 바로 플레이할 수 있습니다.

✅ 파일 32개 수정 · 명령 50개 실행 · 앱 재시작

블록이동, 회전 등 단축키가 안먹는다.
화살표키를 누르면 블록이동이 되긴한다.
수정해줘

9월 28일 오전 11:32

실행과정5개 작업

한글 입력 상태에서도 이동·회전 단축키가 작동하도록 키 입력 처리를 확인하고 수정하겠습니다.

명령 실행

파일 수정

명령 실행

단축키가 입력된 글자를 기준으로 처리되어 한글 입력 상태에서 인식되지 않는 문제가 있었습니다. 실제 키 위치를 기준으로 바꿨고, 화면 버튼을 클릭한 뒤에도 스페이스바로 블록을 놓을 수 있도록 수정했습니다.

파일 수정

명령 실행

실행결과 · 1분 21초 소요

한글 입력 상태에서도 WASD 이동, Q/E 회전, P 일시정지가 작동하도록 수정했습니다. 버튼 클릭 후 스페이스바로 블록 놓기도 정상 작동하는지 확인했습니다.

✅ 파일 2개 수정 · 명령 3개 실행

착지위치 미리보기가 잘 안보일때가 많은데 가시성 더 개선해줘

9월 28일 오전 11:34

실행과정4개 작업

착지 미리보기가 쌓인 블록에 가려지거나 배경에 묻히지 않도록, 윤곽선과 표시 순서를 조정하겠습니다.

명령 실행

파일 수정

명령 실행

실행결과 · 1분 21초 소요

착지 미리보기에 밝고 두꺼운 윤곽선과 반투명 색상을 적용하고, 쌓인 블록에 가려져도 보이도록 개선했습니다. 모바일에서도 선명하게 표시되는 것을 확인했습니다.

✅ 파일 1개 수정 · 명령 3개 실행

블록을 y 방향으로도 회전하는 키 만드는건 어떨지 의견줘

9월 28일 오후 01:31

실행결과 · 19초 소요

좋은 아이디어예요. 블록을 세울 수 있으면 좁은 틈을 활용할 수 있어 3D 퍼즐의 재미가 더 커집니다.

다만 현재 Q/E가 이미 세로축(Y축)을 중심으로 도는 회전입니다. 말씀하신 게 **블록을 위아래로 돌려 세우는 회전**이라면, 아래 구성을 추천해요.

- **Q/E**: 기존 좌우 회전
- **R/F**: 앞으로·뒤로 기울이기
- 회전 후 벽이나 다른 블록과 겹치면 회전 제한
- 착지 미리보기도 바뀐 모양에 맞춰 표시

우선 R/F 회전만 추가하면 조작이 너무 복잡해지지 않으면서 입체감을 살릴 수 있습니다.

✅ 완료

실행해

9월 28일 오후 01:32

실행과정13개 작업

R/F로 블록을 앞뒤로 기울이는 회전을 추가하겠습니다. 벽·천장·다른 블록과의 충돌을 확인하고, 착지 미리보기와 모바일 회전 버튼도 함께 반영하겠습니다.

명령 실행

파일 수정

명령 실행

파일 수정

명령 실행

R/F 회전과 모바일 버튼을 추가했습니다. 세운 블록의 착지 위치, 벽·다른 블록과의 충돌 제한, 여러 층을 한 번에 지우는 동작까지 테스트를 통과했고, 한글 입력 상태의 단축키도 확인하고 있습니다.

명령 실행

파일 수정

명령 실행

실행결과 · 3분 13초 소요

**R/F로 블록을 앞뒤로 기울이는 회전**과 모바일 버튼을 추가했습니다. 한글 입력 상태의 단축키, 충돌 제한, 세운 블록의 착지 미리보기까지 정상 작동하는 것을 확인했습니다.

✅ 파일 6개 수정 · 명령 7개 실행

좌우는 z axis 이고 위아래는 x axis 인데 현재 화면은 직관적이지 못하다.

바닥 정사각형을 좀더 반시계방향으로 돌려서
z axis를 좀더 수평에 가깝게, x axis를 좀더 수직에 가깝게 바꿔주면 좀더 직관적이지 않을까 싶은데

동의하면 실행하고 아니면 의견줘

9월 28일 오후 01:42

실행과정12개 작업

동의합니다. Z축은 수평에 가깝게, X축은 세로로 깊어지는 방향으로 게임판을 돌리겠습니다. 이동 키와 버튼도 화면에서 보이는 방향에 맞춰 조정하겠습니다.

명령 실행

파일 수정

명령 실행

파일 수정

명령 실행

Z축은 거의 가로로, X축은 세로 방향으로 깊어지도록 각도를 바꿨습니다. 축 표시도 실제 방향에 맞췄으며, 시점을 돌려도 이동 키가 화면의 좌우·앞뒤 방향을 따르도록 조정했습니다.

파일 수정

명령 실행

실행결과 · 3분 38초 소요

Z축은 수평에 가깝게, X축은 세로 방향에 가깝게 보이도록 게임판 각도를 변경했습니다. 이동 키와 모바일 버튼도 화면 방향에 맞췄으며, 시점을 돌린 뒤에도 직관적으로 이동하는 것을 확인했습니다.

✅ 파일 6개 수정 · 명령 6개 실행

이게 보통 테트리스보다 조작할게 다양하고 많아서 떨어지는 속도를 좀더 느리게 해줘

9월 28일 오후 01:49

실행과정3개 작업

블록을 움직이고 회전할 시간을 더 확보할 수 있도록 기본 낙하 속도를 늦추고, 레벨이 올라갈 때도 속도가 완만하게 빨라지도록 조정하겠습니다.

명령 실행

파일 수정

명령 실행

실행결과 · 18초 소요

기본 낙하 간격을 **1.1초 → 1.8초**로 늘렸습니다. 레벨별 가속도 완만하게 조정하고, 최고 속도도 늦춰 조작할 시간을 확보했습니다.

✅ 파일 1개 수정 · 명령 2개 실행

난이도도 보통 테트리스보다 어려운편인데 위아래 범위를 12칸에서 더 늘려줘. 충분하다면 18칸, 가시성이 너무 떨어진다면 15칸으로

9월 28일 오후 01:51

실행과정12개 작업

18칸으로 늘린 화면을 먼저 확인하겠습니다. PC와 모바일에서 블록과 착지 위치가 충분히 구분되면 18칸을 적용하고, 너무 작아지면 15칸으로 조정하겠습니다.

명령 실행

파일 수정

명령 실행

파일 수정

명령 실행

파일 수정

명령 실행

18칸에서도 블록과 착지 위치가 구분되어 18칸으로 적용했습니다. 바닥과 블록의 가로 크기를 유지하면서 세로 간격을 조정했고, 기존 12칸을 넘어 쌓아도 플레이가 계속되는 것을 확인했습니다.

명령 실행

실행결과 · 2분 13초 소요

높이를 **12칸 → 18칸**으로 늘렸습니다. PC·모바일에서 블록과 착지 위치가 잘 보이도록 세로 간격을 조정했고, 회전·쌓기·게임 종료 조건도 확인했습니다.

✅ 파일 7개 수정 · 명령 5개 실행

- 선택 영역 삭제해줘
- 실행취소 기능 만들어줘, 

[선택한 화면 요소] 사용자가 미리보기에서 직접 지정한 요소입니다. 이 요소를 대상으로 작업해 주세요.
- CSS 선택자: #root > div > main > section:nth-of-type(1)
- 표시 텍스트: "A NEW DIMENSION OF PLAY\n쌓는 즐거움, 한 차원 더.\n\n블록을 돌리고, 공간을 채우고. 나만의 리듬을 찾아보세요.\n\n◇\n클래식 모드\n5 × 5 × 18"
- HTML:
```html
<section class="intro"><div><div class="eyebrow"><span></span> A NEW DIMENSION OF PLAY</div><h1>쌓는 즐거움, 한 차원 더.</h1><p>블록을 돌리고, 공간을 채우고. 나만의 리듬을 찾아보세요.</p></div><div class="mode-chip"><span>◇</span><span>클래식 모드</span><i></i>5 × 5 × 18</div></section>
```

9월 28일 오후 01:55

실행과정13개 작업

선택하신 상단 소개 영역을 삭제하고, 마지막으로 놓은 블록을 되돌리는 실행취소 기능을 추가하겠습니다. 버튼과 Z키로 사용할 수 있게 하고, 함께 바뀐 점수와 지워진 층도 복원하도록 하겠습니다.

명령 실행

파일 수정

명령 실행

파일 수정

명령 실행

소개 영역을 삭제했고, Z키·Ctrl+Z·화면 버튼으로 최근 20개의 블록 배치를 되돌릴 수 있게 했습니다. 되돌린 블록은 맨 위에서 다시 배치할 수 있으며, 게임이 끝나 저장된 기록에는 영향을 주지 않도록 진행 중이나 일시정지 상태에서 사용할 수 있게 했습니다.

파일 수정

명령 실행

파일 수정

명령 실행

실행결과 · 3분 48초 소요

선택하신 상단 소개 영역을 삭제했습니다. 게임 중 **실행취소 버튼·Z·Ctrl+Z**로 최근 20개의 블록 배치를 되돌릴 수 있으며, 점수·지워진 층·다음 블록도 함께 복원됩니다.

✅ 파일 7개 수정 · 명령 6개 실행

QERF 키가 안 먹힐때가 있다. 수정해줘

9월 28일 오후 02:01

실행과정12개 작업

Q/E/R/F가 반응하지 않는 상황을 확인하겠습니다. 키 입력뿐 아니라 벽이나 쌓인 블록 근처에서 회전이 막히는 처리도 함께 점검하겠습니다.

명령 실행

벽 근처에서 회전 위치를 보정하는 처리가 한쪽 방향에만 있었고, R/F에는 없어 공간이 있어도 회전이 막힐 수 있었습니다. 양쪽 벽과 쌓인 블록 주변의 보정을 추가하고, 공간이 부족하거나 회전해도 모양이 같은 경우에는 이유를 표시하겠습니다.

파일 수정

명령 실행

파일 수정

명령 실행

파일 수정

명령 실행

실행결과 · 3분 27초 소요

벽 근처에서도 여유 공간을 찾아 회전하도록 수정했고, 한글 입력 상태와 키를 길게 누르는 동작도 확인했습니다. 회전할 공간이 없거나 돌려도 같은 모양인 경우에는 화면에 이유를 표시합니다.

✅ 파일 7개 수정 · 명령 5개 실행

레벨 올라갈수록 떨어지는 속도 점점 빨라지는게 맞는지?
안 그러고 있다면 레벨 올라갈수록 점점 빨라지게 해주고
이미 그러고 있다면 그 정도를 더 높여줘

9월 28일 오후 02:25

실행과정3개 작업

현재도 레벨마다 조금씩 빨라지고 있습니다. 레벨이 올라갈 때 속도 차이를 더 뚜렷하게 느낄 수 있도록 가속 폭을 높이겠습니다.

명령 실행

파일 수정

명령 실행

실행결과 · 23초 소요

기존에도 빨라지고 있었으며, 레벨별 가속 폭을 **2배**로 높였습니다. 한 칸 낙하 간격은 **1레벨 1.8초 → 5레벨 1.16초 → 9레벨 0.52초**로 줄어들며, 최소 간격은 0.5초입니다.

✅ 파일 1개 수정 · 명령 2개 실행

블록 떨어질때, 한면 채워서 사라질때 효과음 넣어줘

9월 28일 오후 02:27

실행과정9개 작업

블록이 바닥이나 다른 블록에 놓일 때와, 한 층을 채워 지울 때 서로 다른 효과음을 넣겠습니다. 기존 소리 켜기·끄기 버튼으로 함께 조절할 수 있게 하겠습니다.

명령 실행

파일 수정

명령 실행

착지할 때는 짧고 낮은 소리, 한 층을 지울 때는 밝게 올라가는 효과음을 추가했습니다. 여러 층을 한 번에 지우면 더 긴 소리가 나며, 음소거 설정도 다음 방문에 유지되도록 했습니다.

파일 수정

명령 실행

실행결과 · 3분 4초 소요

블록 착지에는 짧은 효과음, 층을 지울 때는 밝은 멜로디를 추가했습니다. 자동 낙하·바로 놓기 모두 적용되며, 상단 소리 버튼으로 켜고 끌 수 있습니다.

✅ 파일 5개 수정 · 명령 4개 실행

레벨 올라갈수록 블록 떨어지는 속도 더 올려줘

9월 28일 오후 02:59

실행과정3개 작업

레벨이 올라갈 때 더 빠르게 가속되도록 조정하고, 높은 레벨의 최고 낙하 속도도 높이겠습니다.

명령 실행

파일 수정

명령 실행

실행결과 · 24초 소요

레벨별 가속 폭을 높였습니다. 낙하 간격이 **1레벨 1.8초 → 5레벨 0.92초 → 8레벨 0.26초**로 줄어들며, 최고 속도는 기존 0.5초에서 **0.25초**로 빨라졌습니다.

✅ 파일 1개 수정 · 명령 2개 실행

게임 끝나면 이름 적도록 해서 기록실에 이름 같이 나오도록 해줘

9월 28일 오후 03:34

실행과정15개 작업

게임이 끝나면 이름을 입력해 점수를 저장하고, 기록실에도 이름이 함께 나오도록 바꾸겠습니다. 기존 기록은 보존하고 이름이 없는 기록은 ‘이름 없음’으로 표시하겠습니다.

명령 실행

파일 수정

명령 실행

파일 수정

명령 실행

게임 종료 화면에 이름 입력창과 저장 버튼을 넣었습니다. 이름은 최대 20자까지 입력할 수 있고, 저장에 실패해도 입력한 이름을 유지해 다시 시도할 수 있습니다. 기존 기록을 보존하면서 이름 저장과 조회를 연결하고 있습니다.

파일 수정

명령 실행

⏸ 챗지피티 사용 한도가 찼습니다. 9월 29일 03:31 이후 다시 이용할 수 있어요 — glidev AI 로 전환해 계속할 수도 있습니다.

이 프로젝트는 AI 에이전트와의 대화만으로 만들어졌습니다

3d-tetris.glidev.ai

↗