썸머 나이츠 - 3D 고닷 게임
썸머 나이츠 - 3D
고닷 게임
Korean (South Korea)
타임라인
2개월+
역할
디자인 엔지니어
팀
2x 디자이너
도메인
게이미피케이션
타임라인
2개월+
역할
디자인 엔지니어
팀
2x 디자이너
도메인
게이미피케이션
툴
피그마
GitHub
Antigravity
여기에 문서화된 모든 프로젝트 데이터와 결정은 제가 직접 작성한 것입니다. AI 지원은 구조와 명확성을 위해만 사용되었습니다.
여기에 문서화된 모든 프로젝트 데이터와 결정은 제가 직접 작성한 것입니다. AI 지원은 구조와 명확성을 위해만 사용되었습니다.
01비즈니스 맥락 및 경쟁 환경
이 프로젝트는 런던에서 활동하는 UI/UX 디자이너 요디(Yodi)님이 운영하는 카카오톡 디자인 클럽의 7월 주제에서 출발했습니다. 단순히 '여름'을 주제로 한 주말 프로젝트로 시작했지만, 곧 인디 게임 개발 환경에 존재하는 분명한 문제점을 발견하게 되었습니다. 감성에만 의존하거나 단발성으로 끝나는(Vibe-coded) 게임 데모들은 실제 플레이 단계에서 실패하는 경우가 많습니다. 근본적인 UX가 부족하고, 저품질 생성형 AI 아트에 의존하며, 인터페이스 구조가 엉성하기 때문입니다. 썸머 나이츠의 목표는 단순한 화제성이 아닌 '완성된 프로덕트'를 만드는 것이었습니다. 엄격한 디자인 시스템을 구축하고, 생성형 AI 아트를 일절 사용하지 않았으며, 깊이 있는 인터랙티브 시스템을 통해 프로덕트 디자인 방법론이 게임 엔진에도 완벽히 적용될 수 있음을 증명한 프로젝트입니다.01비즈니스 맥락 및 경쟁 환경
이 프로젝트는 런던에서 활동하는 UI/UX 디자이너 요디(Yodi)님이 운영하는 카카오톡 디자인 클럽의 7월 주제에서 출발했습니다. 단순히 '여름'을 주제로 한 주말 프로젝트로 시작했지만, 곧 인디 게임 개발 환경에 존재하는 분명한 문제점을 발견하게 되었습니다. 감성에만 의존하거나 단발성으로 끝나는(Vibe-coded) 게임 데모들은 실제 플레이 단계에서 실패하는 경우가 많습니다. 근본적인 UX가 부족하고, 저품질 생성형 AI 아트에 의존하며, 인터페이스 구조가 엉성하기 때문입니다. 썸머 나이츠의 목표는 단순한 화제성이 아닌 '완성된 프로덕트'를 만드는 것이었습니다. 엄격한 디자인 시스템을 구축하고, 생성형 AI 아트를 일절 사용하지 않았으며, 깊이 있는 인터랙티브 시스템을 통해 프로덕트 디자인 방법론이 게임 엔진에도 완벽히 적용될 수 있음을 증명한 프로젝트입니다.02문제
피그마(Figma)에서 인터페이스를 그리는 것은 쉽지만, 이를 실시간 3D 엔진에서 확장 가능하고 타격감 있게(Tactile) 구현하는 것은 매우 어렵습니다.02문제
피그마(Figma)에서 인터페이스를 그리는 것은 쉽지만, 이를 실시간 3D 엔진에서 확장 가능하고 타격감 있게(Tactile) 구현하는 것은 매우 어렵습니다.비즈니스 문제
인디 게임 시장은 스크린샷만 그럴듯하고 실제 플레이는 실망스러운 데모들로 포화 상태입니다. 탄탄한 UX 없이 저품질 생성형 AI에만 의존하여 유저 리텐션을 확보하지 못하고 있습니다. 사용자 문제
플레이어는 직관적인 인터페이스와 즉각적인 피드백을 기대하지만, 대부분의 인디 게임은 UI를 부차적인 요소로 취급하여 유저의 인지 부하를 높이고 이탈률을 증가시킵니다.비즈니스 문제
인디 게임 시장은 스크린샷만 그럴듯하고 실제 플레이는 실망스러운 데모들로 포화 상태입니다. 탄탄한 UX 없이 저품질 생성형 AI에만 의존하여 유저 리텐션을 확보하지 못하고 있습니다. 사용자 문제
플레이어는 직관적인 인터페이스와 즉각적인 피드백을 기대하지만, 대부분의 인디 게임은 UI를 부차적인 요소로 취급하여 유저의 인지 부하를 높이고 이탈률을 증가시킵니다.03나의 역할
저는 디렉터, 게임 디자이너, PM(프로덕트 매니저) 및 테크니컬 UI 개발자로서 기획부터 구현까지 전 과정을 주도했습니다. 레이아웃 계산과 셰이더 작업에는 AI 코딩 어시스턴트(Google Antigravity)와 협업했으며, 커스텀 브랜딩과 벡터 아트는 UI 아티스트 Ivy님과 함께 작업했습니다.01풀스택 UX/UI 디자인 및 엔지니어링: 피그마로 콘셉트를 기획하고, Godot 4의 GDScript를 활용해 직접 코드 구현.
02디자인 시스템 아키텍처 구축: 타이포그래피, 색상, 컴포넌트를 위한 확장 가능한 토큰 시스템 설계.
03이중 언어 현지화: 개발 1일 차부터 영어와 한국어 1:1 대응 아키텍처 구축.
04문서 기반의 개발 (Source of Truth): 4개의 핵심 문서를 실시간으로 동기화하여 모든 구조적 의사결정의 기준으로 활용.
03나의 역할
저는 디렉터, 게임 디자이너, PM(프로덕트 매니저) 및 테크니컬 UI 개발자로서 기획부터 구현까지 전 과정을 주도했습니다. 레이아웃 계산과 셰이더 작업에는 AI 코딩 어시스턴트(Google Antigravity)와 협업했으며, 커스텀 브랜딩과 벡터 아트는 UI 아티스트 Ivy님과 함께 작업했습니다.01풀스택 UX/UI 디자인 및 엔지니어링: 피그마로 콘셉트를 기획하고, Godot 4의 GDScript를 활용해 직접 코드 구현.
02디자인 시스템 아키텍처 구축: 타이포그래피, 색상, 컴포넌트를 위한 확장 가능한 토큰 시스템 설계.
03이중 언어 현지화: 개발 1일 차부터 영어와 한국어 1:1 대응 아키텍처 구축.
04문서 기반의 개발 (Source of Truth): 4개의 핵심 문서를 실시간으로 동기화하여 모든 구조적 의사결정의 기준으로 활용.
04 방향성
게임 UI를 하드코딩하던 기존 방식을 버리고, 체계적인 프로덕트 개발 접근 방식을 도입했습니다. '생성형 AI 아트 절대 사용 금지(Zero Generative AI)' 원칙을 세우고, Godot의 StyleBoxFlat 벡터, 수학적 기하학, 커스텀 GLSL 셰이더, 그리고 UI 아티스트 Ivy의 작업물에만 전적으로 의존했습니다. 또한, 모든 업데이트는 이중 언어로 진행되었습니다. HUD 레이블, 메뉴, 릴리스 노트 등은 매 배포마다 영어와 한국어로 동시에 업데이트됩니다.04 방향성
게임 UI를 하드코딩하던 기존 방식을 버리고, 체계적인 프로덕트 개발 접근 방식을 도입했습니다. '생성형 AI 아트 절대 사용 금지(Zero Generative AI)' 원칙을 세우고, Godot의 StyleBoxFlat 벡터, 수학적 기하학, 커스텀 GLSL 셰이더, 그리고 UI 아티스트 Ivy의 작업물에만 전적으로 의존했습니다. 또한, 모든 업데이트는 이중 언어로 진행되었습니다. HUD 레이블, 메뉴, 릴리스 노트 등은 매 배포마다 영어와 한국어로 동시에 업데이트됩니다.05임팩트
썸머 나이츠는 엄격한 프로덕트 디자인 방법론이 인터랙티브 엔진에도 성공적으로 적용될 수 있음을 증명했습니다.05임팩트
썸머 나이츠는 엄격한 프로덕트 디자인 방법론이 인터랙티브 엔진에도 성공적으로 적용될 수 있음을 증명했습니다.퍼블릭 릴리스정식 출시듀얼 모터 햅틱 진동과 로그라이트(Rogue-lite) 퍽(Perk) 시스템이 포함된 완성형 빌드 배포.
2,770+디시인사이드 조회수인디게임 갤러리 '개념글'에 선정되며 50개 이상의 오가닉 커뮤니티 댓글 확보.
100%코드 기반 UI정적인 오버레이 이미지 제로. 앵커(Anchor) 기반 레이아웃부터 체력 바까지 모든 것을 코드로 구현해 완벽한 확장성 확보.
퍼블릭 릴리스정식 출시듀얼 모터 햅틱 진동과 로그라이트(Rogue-lite) 퍽(Perk) 시스템이 포함된 완성형 빌드 배포.
2,770+디시인사이드 조회수인디게임 갤러리 '개념글'에 선정되며 50개 이상의 오가닉 커뮤니티 댓글 확보.
100%코드 기반 UI정적인 오버레이 이미지 제로. 앵커(Anchor) 기반 레이아웃부터 체력 바까지 모든 것을 코드로 구현해 완벽한 확장성 확보.
06접근 방식 및 근거
빠른 업데이트 속도 속에서도 시각적 일관성(Visual drift)을 잃지 않기 위해 엄격한 디자인 규칙을 적용했습니다. 사이버 골드(#F5D76E)와 다크 배경(#0D051A) 같은 핵심 색상과 6px, 8px의 코너 라운드를 마스터 시스템으로 중앙화하여 디자인 시스템을 구축했습니다. 고해상도(High-DPI) 화면에서 픽셀 렌더링이 깨지지 않도록 짝수 단위 폰트 사이즈(12px, 14px, 16px, 18px) 규칙을 강제했습니다. 또한, 텔레메트리와 커뮤니티 피드백을 직접 반영하는 유저 피드백 루프를 유지하며, 유저들이 베이퍼웨이브(Vaporwave) 트랙, 레트로 시작 화면, 컨트롤러 진동을 요청했을 때 이를 직접 엔지니어링하여 배포했습니다.06접근 방식 및 근거
빠른 업데이트 속도 속에서도 시각적 일관성(Visual drift)을 잃지 않기 위해 엄격한 디자인 규칙을 적용했습니다. 사이버 골드(#F5D76E)와 다크 배경(#0D051A) 같은 핵심 색상과 6px, 8px의 코너 라운드를 마스터 시스템으로 중앙화하여 디자인 시스템을 구축했습니다. 고해상도(High-DPI) 화면에서 픽셀 렌더링이 깨지지 않도록 짝수 단위 폰트 사이즈(12px, 14px, 16px, 18px) 규칙을 강제했습니다. 또한, 텔레메트리와 커뮤니티 피드백을 직접 반영하는 유저 피드백 루프를 유지하며, 유저들이 베이퍼웨이브(Vaporwave) 트랙, 레트로 시작 화면, 컨트롤러 진동을 요청했을 때 이를 직접 엔지니어링하여 배포했습니다.07최종 솔루션
최종 개발 루프는 기존의 느린 프로토타이핑 방식을 탈피했습니다. *'아이디어 ➔ AI 지원 아키텍처 설계 ➔ 헤드리스(Headless) 엔진 테스트 ➔ 라이브 플레이테스트 ➔ 문서 동기화'*의 매끄러운 워크플로우를 완성했습니다. 덕분에 코어 루프 프로토타입부터 전투 고도화, 릴리스 엔지니어링, 로그라이트 퍽 시스템, 그리고 커스텀 레트로 셰이더 적용까지 총 5단계에 걸쳐 게임을 빠르게 발전시킬 수 있었습니다.07최종 솔루션
최종 개발 루프는 기존의 느린 프로토타이핑 방식을 탈피했습니다. *'아이디어 ➔ AI 지원 아키텍처 설계 ➔ 헤드리스(Headless) 엔진 테스트 ➔ 라이브 플레이테스트 ➔ 문서 동기화'*의 매끄러운 워크플로우를 완성했습니다. 덕분에 코어 루프 프로토타입부터 전투 고도화, 릴리스 엔지니어링, 로그라이트 퍽 시스템, 그리고 커스텀 레트로 셰이더 적용까지 총 5단계에 걸쳐 게임을 빠르게 발전시킬 수 있었습니다.
08 — 결과: 잘 된 것들
효과가 있었던 포인터 목록.01제약이 만드는 창의성: 로우폴리(Low-poly) 모델, 플랫 벡터 패널, 제한된 컬러 팔레트를 고수한 덕분에 게임의 일관성을 완벽히 유지했습니다.
02개발 2일 차에 도입한 이중 언어 디자인: 초기부터 UI 패널이 한국어/영어 텍스트 길이 변화와 폰트 교체를 처리하도록 설계한 결과, 나중에 발생할 수 있는 대규모 수정 리소스를 크게 절약했습니다.
03문서화보다 빠른 실행과 반복: 기획과 UI 요소를 몇 분 안에 Godot 엔진에서 직접 테스트하며, 60일이 넘는 기간 동안 빠르고 집중도 높은 개발을 이어갔습니다.
한계 및 부차적 효과들
저의가 깨달은 것들의 목록.01엔진 러닝 커브: 피그마의 오토 레이아웃(Auto-Layout) 개념을 Godot의 컨트롤 노드 앵커(Control Node anchors) 시스템으로 번역하는 과정에서 상당한 기술적 학습이 필요했습니다.
02스코프 제한 (Scope Discipline): 1인 개발자로서 개발 속도를 유지하기 위해, 지나치게 복잡한 기능은 과감히 단순화해야 했습니다.
08 — 결과: 잘 된 것들
효과가 있었던 포인터 목록.01제약이 만드는 창의성: 로우폴리(Low-poly) 모델, 플랫 벡터 패널, 제한된 컬러 팔레트를 고수한 덕분에 게임의 일관성을 완벽히 유지했습니다.
02개발 2일 차에 도입한 이중 언어 디자인: 초기부터 UI 패널이 한국어/영어 텍스트 길이 변화와 폰트 교체를 처리하도록 설계한 결과, 나중에 발생할 수 있는 대규모 수정 리소스를 크게 절약했습니다.
03문서화보다 빠른 실행과 반복: 기획과 UI 요소를 몇 분 안에 Godot 엔진에서 직접 테스트하며, 60일이 넘는 기간 동안 빠르고 집중도 높은 개발을 이어갔습니다.
한계 및 부차적 효과들
저의가 깨달은 것들의 목록.01엔진 러닝 커브: 피그마의 오토 레이아웃(Auto-Layout) 개념을 Godot의 컨트롤 노드 앵커(Control Node anchors) 시스템으로 번역하는 과정에서 상당한 기술적 학습이 필요했습니다.
02스코프 제한 (Scope Discipline): 1인 개발자로서 개발 속도를 유지하기 위해, 지나치게 복잡한 기능은 과감히 단순화해야 했습니다.
09 — 회고: 다시 한다면
코드 우선 토큰 설계 (Code-First Tokens): 개발 중반에 디자인 시스템을 구축하다 보니 기존 코드를 수정하는 데 적잖은 비용이 들었습니다. 교훈은 명확합니다. 단 하나의 화면을 그리기 전에, 1일 차부터 코드 아키텍처에 디자인 토큰(폰트, 색상, 여백)을 확립해야 한다는 것입니다. 초기에 더 엄격한 시스템을 잡았다면 하드코딩된 값들을 리팩터링하는 시간을 절약할 수 있었을 것입니다.배운 것들
일단 배포하고 배우기 (Ship and Learn): 1인 디자이너 겸 개발자로 일한다는 것은, 일단 올바른 방향으로 빠르게 배포(Ship)한 후 다듬어 나가는 법을 배우는 과정이었습니다. 썸머 나이츠를 통해 얻은 가장 큰 깨달음은 피그마에서 화면을 그리는 것과 유저의 손끝에서 '타격감 있게(Feel good)' 작동하도록 만드는 것 사이에는 엄청난 간극이 있다는 점입니다. 코드를 직접 파고들고, 상태를 제어하며, 엔진의 한계와 부딪혀본 경험이야말로 정적인 목업(Mockup)을 '살아 숨 쉬는 프로덕트'로 진화시키는 핵심이었습니다.09 — 회고: 다시 한다면
코드 우선 토큰 설계 (Code-First Tokens): 개발 중반에 디자인 시스템을 구축하다 보니 기존 코드를 수정하는 데 적잖은 비용이 들었습니다. 교훈은 명확합니다. 단 하나의 화면을 그리기 전에, 1일 차부터 코드 아키텍처에 디자인 토큰(폰트, 색상, 여백)을 확립해야 한다는 것입니다. 초기에 더 엄격한 시스템을 잡았다면 하드코딩된 값들을 리팩터링하는 시간을 절약할 수 있었을 것입니다.배운 것들
일단 배포하고 배우기 (Ship and Learn): 1인 디자이너 겸 개발자로 일한다는 것은, 일단 올바른 방향으로 빠르게 배포(Ship)한 후 다듬어 나가는 법을 배우는 과정이었습니다. 썸머 나이츠를 통해 얻은 가장 큰 깨달음은 피그마에서 화면을 그리는 것과 유저의 손끝에서 '타격감 있게(Feel good)' 작동하도록 만드는 것 사이에는 엄청난 간극이 있다는 점입니다. 코드를 직접 파고들고, 상태를 제어하며, 엔진의 한계와 부딪혀본 경험이야말로 정적인 목업(Mockup)을 '살아 숨 쉬는 프로덕트'로 진화시키는 핵심이었습니다.