그림 그리기 기반 개발을 시작하다!

계기

저는 언어화하는 것이 서툴러서, 앱 같은 것을 AI로 만들 때 '어떻게 표현해야 할까' 하는 경우가 자주 있습니다.

단순히 어휘력이 부족할 뿐입니다.

앱의 움직임이나 화면 배치, 캐릭터의 포즈 같은 것들이 말로는 AI에게 잘 전달되지 않습니다.

이것을 손으로 그린 그림으로 전하고 싶다고 생각하지만, 매번 페인트 소프트웨어를 켜는 것이 번거롭고, 일일이 PNG로 내보내서 파일을 지정하는 것은 수고가 따릅니다.

그래서 ShortNote이라는 간편한 페인트 메모 앱을 만들어 보았습니다.

간단하게 그리고, 이미지 경로를 AI에게 빠르게 전달할 수 있습니다.

이것을 사용해 보니 또 한 가지 생각이 들었습니다. 매번 사양 내용을 글로 짜내기보다는, **'대략적인 그림(러프 스케치)을 던져주고, 그것을 바탕으로 AI가 사양서(Markdown)를 작성하게 하는 것'**이 더 효율적이지 않을까? 하고 말입니다.

예전에 tldraw 같은 캔버스형 도구가 화제가 되었을 때 저도 시도해 봤는데, 그때는 브라우저상의 도구와 평소 개발 환경을 오가는 동선이나 프롬프트의 조율 때문에 저에게는 잘 정착되지 않았습니다. 하지만 최근에는 CLI 에이전트에게 로컬 이미지 경로를 그냥 던져주는 것만으로도 상당히 정확하게 의도를 파악해 줍니다.

그래서 이 메모 앱을 사용해서 '손그림 메모로 사양서를 만들고, 그대로 3D 게임 한 편을 만드는' 실험을 해보았습니다.

이 글은 그 실험 기록입니다.

실험 진행 과정 및 개발 환경

이번에는 Antigravity CLI (Gemini 4 Argon)를 사용해서 진행했습니다.

핵심 포인트는 갑자기 그림에서 코드를 짜게 하는 것이 아니라, 먼저 사양서(SPEC.md)를 확정하는 단계를 거쳤다는 것입니다.

처음에 텍스트로 전달한 게임의 골격은 이 정도였습니다 (약 150자).

• 주인공 아저씨가 채소(시금치)를 키우는 게임
• 기간은 1개월(30일)이며, 그 사이에 수확하지 못하면 게임 오버
• 액션은 '밭 갈기・파종・물 주기・추비・잡초 제거・솎아내기・수확・휴가'의 8가지
• 체력이 떨어지면 3일간 누워있는 페널티가 있음
• 수확하면 품평회에 나가서 1등을 목표로 함
• 그래픽은 초대 PS1 같은 로우폴리 3D로 하고 싶음

여기서부터의 '어떤 화면 배치인지', '어떤 연출인지', '캐릭터의 외모는 어떻게 할지'와 같은 시각적인 사양은, 설명문을 전혀 쓰지 않고, shortnote에서 그린 손그림 메모 이미지 경로만 하나씩 AI에게 던져가며 추가시켰습니다.

실제 작업 화면은 이런 느낌입니다.

開発中の様子（ShortNoteで描いてパスをCLIに投げ、SPEC.mdを更新させていく流れ）

중앙의 ShortNote에서 간단히 그림을 그리고 '경로 복사'를 누른 뒤, 왼쪽 터미널(Antigravity CLI)에 /tmp/shortnote/note-xxxx.png라고만 붙여넣고 엔터를 칩니다. 그러면 AI가 이미지를 읽어 오른쪽의 SPEC.md에 사양을 계속 추가하고 체크리스트를 채워줍니다.

참고로, 구현 기술 스택은 TypeScript + Three.js + Vite(호스팅은 AWS Lambda Web Functions)로 단순하게 구성했으며, 3D 모델이나 효과음 같은 외부 에셋은 사용하지 않고 모두 코드 생성으로 처리했습니다.

SPEC.md의 비교

전달한 손그림 메모와 AI가 생성한 사양서(실제로 shortnote에서 간단히 그린 것이며, 설명문 없이(이미지만) AI에게 전달했던 10장의 손그림 메모와 거기서 AI가 작성해낸 SPEC.md의 발췌본을 나란히 놓고 비교해 보겠습니다.

1. 주인공(아저씨) 캐릭터 디자인

主人公のキャラデザ

실제로 생성된 SPEC.md의 발췌:

체형: 통통하고 둥근 데포르메 체형 (2~3등신의 로우폴리 모델)
머리: 리본(띠)이 달린 챙 넓은 밀짚모자를 착용 / 얼굴 중앙에 특징적인 콧수염(口髭)
의상: 반팔 셔츠 위에, 배에 반원형 주머니가 달린 오버롤(멜빵바지)을 착용 / 발밑은 긴 장화(고무장화)를 신음
소지품(도구): 키만큼 긴 괭이를 오른손에 들고 있음

한 장당 30초 정도 걸려 그린 그림이지만, 이것만으로 '배의 반원형 주머니', '콧수염', '키만큼 긴 괭이'까지 알아서 언어화하여 사양서에 구조화해 주었습니다. 이것을 글로 처음부터 작성했다면 분명 귀찮았을 거라고 생각합니다.

2. 필드 구성과 태양의 움직임

フィールド構成と太陽

실제로 생성된 SPEC.md의 발췌:

화면 오른쪽: 주인공의 집(삼각 지붕, 격자창이 있는 오두막 모델)을 배치한다. 화면 왼쪽~앞쪽: 시금치를 키우는 밭(이랑이 있는 흙 필드)을 배치한다. 낮 시간(활동 시간): 배경 하늘을 이동하는 **태양의 위치(떠오름/지기)**에 따라 시각적으로 표현된다.

아침: 화면 오른쪽(집 지붕 안쪽 부근)에서 태양이 떠오른다. 낮: 화면 상단 중앙(천정 근처)으로 태양이 이동한다. 저녁: 화면 왼쪽(밭 안쪽의 지평선)을 향해 태양이 진다.

'가로지 모양 창문이 있는 집', '오른쪽에서 왼쪽으로 호를 그리며 이동하는 태양' 등, 공간적 배치와 움직임의 화살표가 한 번에 사양(스펙)이 되었다.

3. 아침의 '오늘의 작업' 메뉴

作業メニュー

실제로 생성된 SPEC.md

발췌:

• 아침이 시작될 때, 3D 필드 화면(오른쪽에 주인공이 서 있는 상태)의
  화면 중앙에 세로로 긴 검은 배경 창을 오버레이 표시한다. - 창 상단 중앙에 흰 글씨로 제목 **'오늘의 작업'**을 표시하고, 그 아래에 선택 가능한 커맨드를 세로로 나열하여 보여준다.

4. 작업 중인 장면

作業シーン

메뉴에서 작업을 선택하면 창이 닫히고, 아저씨가 밭 앞으로 나와서 작업하고, 그 사이에 태양이 움직이는 이미지.

5. 비 오는 날 연출

雨の日

실제로 생성된 SPEC.md

발췌:

비 시각 효과: 하늘 상단에 여러 구름이 떠 있고, 구름에서 밭을 향해 빗방울(세로선 이펙트)이 쏟아진다. 게임 플레이에 미치는 영향: 비 오는 날은 '물 주기'를 하지 않아도 자연스럽게 밭에 수분이 보충된다 (휴가나 다른 작업에 쓸 기회가 된다).

'가끔 비 오는 날'이라고 적힌 그림만 건네줬을 뿐인데, 시각적인 요소뿐 아니라 '비 오는 날에는 물 주기를 안 해도 수분이 회복된다'는 게임 규칙까지 자연스럽게 사양으로 정리해 줬다.

6. 밤의 성장 장면과 달의 차고 기우기

夜の演出と成長

실제로 생성된 SPEC.md

발췌:

달의 차고 기우기(월령 표현): 1개월(약 30일)의 재배 기간에 맞춰, 매일 밤 달의 차고 기우기가 변화하여 시각적으로 1개월의 경과(남은 일수)를 느낄 수 있도록 한다. 야간 식물 성장 장면: 밭의 이랑에서 새싹이 나오고, 시금치가 자라가는 모습이 시각적으로 표현된다.

7. 체력 게이지 배치

体力ゲージ

말로 설명할 때는 '화면 왼쪽 상단에 세로로 긴 바를 놓고, 위에서 줄어드는 식으로...'라고 적어야 하는데, 왼쪽 상단에 사각형을 그리고 '체력 게이지'라고 쓰면서 화살표만 그리는 것으로 끝났다.

8. 잡초가 자라나는 표현

雑草

날짜가 지남에 따라 이랑 주변에 잡초가 자라나서, 수치를 보지 않아도 '아, 잡초 제거해야겠다'라고 필드의 모습으로 알 수 있게 하고 싶었던 메모.

9. 품평회 (합격/클리어 시)

品評会クリア

10. 품평회 (불합격 시)

品評会不合格

실제로 생성된 SPEC.md

발췌(9, 10번째 이미지부터 생성):

점수 표시: 화면 상단 중앙에, 키운 시금치의 평가 점수(예: '80점', '10점')를 크게 표시한다. 합격 시: 화면 중앙 하단에 트로피대가 표시되고, 주인공이 그 정상(1등 자리)에 선다. 양팔을 높이 들고, 오른손에는 '쿠와', **왼손에는 '트로피'**를 든 승리 포즈를 취한다. 불합격 시: 트로피대나 트로피는 표시되지 않는다. 주인공이 땅바닥에 무릎과 손을 대고 등을 구부정하게 숙이는 포즈(orz 스타일의 주저앉은 자세)를 취한다. 주인공의 앞쪽(땅)에는, 놓아둔 '쿠와'가 옆으로 굴러다니고 있다.

특히 10번째 이미지의 '졌을 때의 포즈와, 앞에 굴러다니는 쿠와' 같은 뉘앙스는 그림으로 건네주는 것이 압도적으로 빨랐다.

완성된 결과물

10장의 메모를 다 넘겨준 시점까지, 내부 파라미터나 채점 로직까지 포함한 약 180줄의 사양서(SPEC.md)가 완성되었고, '이 사양서대로 게임을 만들어 달라'고 부탁해서 완성된 화면이 여기다.

完成したゲームの画面（朝の作業選択シーン）

손으로 그린 메모 그대로, 오른쪽에 집과 주인공, 왼쪽에 밭, 뒤에서 떠오르는 태양, 왼쪽 상단의 세로형 체력 게이지, 중앙의 '오늘의 작업' 메뉴까지, 구도 그대로의 로우폴리 3D 게임이 작동했다.

GitHub 리포지토리: https://github.com/takemo101/shoot -
데모 URL (※기간 한정으로 살짝 올려둡니다. 마음이 생기면 지울게요):

2번째 필드의 그림에서, 저는 배경의 지평선을 표현하려고 검은 가로선 한 줄을 그었습니다. 또한, 페인트 메모였기 때문에 당연히 모든 것을 흑백 선으로 그렸습니다.

그러자 첫 번째 빌드에서 AI가 스케치를 너무 충실하게 재현하면서, 3D 초원 중앙에 '검은 극굵의 라인'을 오브젝트로 생성하고, 심지어 집이나 체력 게이지까지 흑백 모노톤으로 칠해버렸습니다.

사람 눈에는 '그냥 스케치의 보조선(지평선)'이거나 '흑백인 건 밑그림이라서'라고 알 수 있지만, AI는 '검은 라인을 그리는 사양이구나'라고 진지하게 해석해 버립니다. 이럴 때에 '필드의 검은 라인은 지평선의 이미지니까 지워줘', '컬러는 자연스러운 색으로 해줘'와 같이 텍스트로 한 번 보충해주니 금방 수정되었습니다.

2. '로우폴 느낌'의 곡률 틀어짐을, 추가 손글씨 메모로 수정하다

또 하나, 첫 번째 3D 구현에서는 비구름이나 캐릭터의 손이 둥근 구체(SphereGeometry)를 기반으로 만들어져서, 제가 상상했던 '초기 플레이스테이션 같은 각진 느낌'보다 조금 더 둥글었습니다.

이것도 말로 '오각형과 직육면체를 사선으로 조합해서...'라고 설명하는 것보다 그린 편이 빠르다고 생각하여, 추가로 다음 메모를 한 장 그려서 전달했습니다.

追加で渡したローポリ感の修正メモ

이것을 주자마자 구름은 다면체의 조합이 되었고, 아저씨의 손도 소매에서 살짝 떨어진 네모난 큐브 형태로 바뀌었습니다. '3D 형태 수정' 역시 그림으로 지시하는 것이 상당히 효과적이었습니다.

문장만으로 작성했을 경우와의 비교 및 요약

마지막으로, 이번 '손글씨 메모 → AI로 사양서화'에 걸린 수고를 모두 글로 작성했을 경우와 비교해 보겠습니다.

이번에 시도해보니 알게 된 포인트를 요약하면 다음과 같습니다.

• 공간 배치나 포즈를 언어화하는 스트레스가 제로가 된다 - '오른쪽에 집, 왼쪽에 밭, 태양이 오른쪽에서 왼쪽으로...'와 같은 시각 정보를 문장으로 변환하는 작업 자체가 완전히 불필요해집니다.

• '그림 → 사양서 (Markdown) → 구현'의 2단계가 강력하다 - 처음부터 그림을 코드로 작성하게 하기보다, 한 장씩 SPEC.md에 언어화시켜 나가면 'AI가 내 그림을 어떻게 해석했는지'를 그 자리에서 텍스트로 확인할 수 있어 인식 차이가 생기기 어렵습니다.

• 처음부터 그림을 코드로 작성하게 하기보다, 한 장씩

• '스케치상의 생략・보조선'만은 한마디 보충해 주기 - 흑백으로 그린 그림이나 지평선의 보조선 등 '그림의 편의인지, 그런 디자인 사양인지'는 AI가 너무 진지하게 가져가는 경우가 있으므로, 그 부분만 주의하면 됩니다.

어휘력이 부족해서 AI에게 지시하는 데 막히는 사람이나, UI・게임 화면 이미지가 머릿속에 있는 사람은 '손글씨 메모 → AI로 사양서화 → 구현' 방식이 상당히 추천할 만하다고 생각합니다.

맺음말

여기까지 '그림 그리기 구동 개발(お絵描き駆動開発)'이라는 이름을 붙여 써왔지만, 솔직히 말해서 '이 개발 기법 자체가 대단하다'라기보다는, **'AI 모델이 진화하면서 우리가 아무렇게나 여러 형태로 정보를 전달해도 똑똑하게 문맥을 파악하고 판단해 주는 것이 가능해졌다'**는 것이 본질이 아닐까 생각합니다.

조금 전까지는 'AI에게 제대로 전달되도록 인간 측에서 노력해서 예쁜 프롬프트나 구조화된 문장을 써야 한다' 같은 분위기도 있었던 것 같습니다.

하지만 지금은 모델 측의 이해력이 올라간 덕분에, 글쓰기에 능숙한 사람은 글로 쓰면 되고, 저처럼 언어화가 서툰 사람이라면 러프한 손글씨 그림을 툭 던져도 좋고, 사양을 표현하는 수단의 자유도가 엄청나게 넓어졌다고 느낍니다.

'말로 잘 할 수 없어서 만들지 못한다'는 것이 사라지는 것은 순수하게 즐겁고 좋은 시대가 되었다고 생각합니다.