디지털 아쿠아가든 앱 만들기 회고 (하네스 + Eval + 3번 갈아엎기)

디지털 수족관 벤치마크

요즘 새로운 AI 모델이 나오면 저는 꼭 한 가지를 시켜봅니다.

"HTML로만 동작하는 디지털 아쿠아스케이프를 만들어주세요."

거창한 이유가 있어서는 아닙니다. 그냥 언젠가, 브라우저로 열어두고 가만히 바라볼 수 있는 감상용 수족관 웹사이트가 하나 갖고 싶었습니다. 물고기가 헤엄치고, 수초가 흔들리고, 물빛이 천천히 움직이는 작은 장면. 일하다 잠깐 시선을 뗐을 때 멍하니 보기 좋은 화면이요. 기능이 많을 필요는 없었고 감상용으로 쓸 수 있으면 족했습니다.

그런데 만들다 보니, 이게 생각보다 AI 실력을 가늠할 수 있는 꽤 좋은 잣대라는 걸 깨달았습니다.

'디지털 아쿠아가든'은 겉보기엔 "물고기 몇 마리와 배경"이지만, 실제론 여러 감각이 동시에 맞아떨어져야 합니다. 물고기는 그냥 떠다니면 안 되고 방향·속도·꼬리 흔들림·무리 간격이 자연스러워야 하고, 수초는 장식처럼 붙어 있으면 안 되고 물속에 뿌리내린 것처럼 보여야 합니다. 유목과 바위는 바닥에 닿은 느낌이 있어야 하고, 조명 하나가 화면 전체 분위기를 좌우합니다. 색감이 조금만 어긋나도 곧장 "촌스럽다"는 느낌이 들고요. 무엇보다, 이 모든 게 합쳐져서 "보고 싶어지는 장면"이 돼야 합니다. 생각보다 제대로 만들기가 쉽지 않고 꽤나 공을 많이 들여야 볼만 했습니다.

흔한 앱이나 텍스트 처리로는 잘 안 드러나는 시각적 감각과 미적 판단을 한꺼번에 보기에 딱 좋은 과제였던 셈입니다. 그래서 새 모델이 나올 때마다 똑같은 프롬프트를 던져보고는 했습니다.

브라우저만으로 실행 가능한 3D 디지털 수족관을 만들어줘.

[배경]
- 수초와 유목, 바위들로 이루어져 있다.
- 첨부한 이미지를 참고하여 3D로 디자인한다.
- 수초는 자연스럽게 흔들린다.
- 공기 기포가 자연스럽게 올라온다.

[물고기]
- 물고기들은 3종류 이상
- 물고기들은 자유롭게 유영하며 수족관을 돌아다닌다
- 물고기들은 지느러미와 꼬리가 자연스럽게 움직인다

[기능]
- 사용자는 조명을 조절할 수 있다.
- 오브젝트들을 클릭하면 각 오브제와 관련된 명언이 나온다.

제 깃허브(github.com/outliner-coach)엔 그 흔적들이 줄줄이 남아 있습니다. aquascape, carps, aquagarden… 모델이 바뀔 때마다 한 번씩 뽑아본 결과물들입니다. 그리고 신기하게도, 볼 때마다 조금씩 더 나아지고 있었습니다. 저는 그걸 일종의 "디지털 수족관 벤치마크"처럼 쓰고 있었던 셈입니다.

나중엔 아예 작정하고 도구별로 비교도 해봤습니다. 똑같은 프롬프트 하나(와 레퍼런스 이미지 한 장)를 Claude Code, Codex, Antigravity에 그대로 던져놓고 누가 제일 잘 만드나 보는 식이었죠.

결과는 그때그때 달랐지만, 대체로 Claude Code가 시간은 오래 걸려도 완성도가 가장 높았습니다. 이러면서 저는 두 가지를 배웠습니다. 하나는 프롬프트를 두루뭉술하게 던지지 않고 [배경]·[물고기]·[기능]처럼 또박또박 적어주는 게 결과를 크게 가른다는 것, 다른 하나는 AI한테 곧장 만들게 하지 말고 "계획부터 세워봐" 하고 한 박자 늦추는 게 의외로 크다는 것이었습니다. (이 두 가지는 나중에 또 뼈저리게 다시 배웁니다.)

원프롬프트 10분짜리에 마음을 빼앗기다

그러다 최근 Gemini 3.5 Flash가 나오고 늘 하던 대로 수족관 벤치마크를 돌려봤는데, 결과가 꽤 인상적이었습니다. 직전의 SOTA 모델들과 비교해서 어나더레벨 수준의 어플리케이션을 단 한 번의 프롬프트로 10분 남짓 만에 완성해버렸습니다.

데모는 여기서 볼 수 있습니다 → outliner-coach.github.io/aquagarden_gemini_flash_3.5

그 결과물을 보다가 문득 이런 생각이 들었습니다.

"이 정도면, 이번엔 장난으로 한 번 뽑고 마는 게 아니라 제대로 한번 만들어볼 수 있지 않을까?"

그러면서 목표도 슬그머니 커졌습니다. 그전까지의 수족관들은 다 브라우저에서 열어보는 웹 데모였는데, 이제는 진짜로 업무 중에 화면 위에 띄워둘 수 있는 데스크톱 위젯을 만들고 싶어졌습니다. 화면 위에 늘 떠 있고, 바탕화면이 은은히 비치는 투명한 배경에, 평소엔 마우스 클릭을 그냥 통과시키다가 필요할 때만 만질 수 있는 — 그런 위젯!! 게다가 나 혼자 보고 마는 게 아니라, 남도 설치할 수 있게 배포까지 하고 싶어졌습니다.

여기서부터가 시작이었습니다. 그리고 솔직히 고백하자면, 저는 이걸 좀 쉽게 봤습니다. 이미 웹 수족관은 여러 번 만들어봤고 Gemini가 원프롬프트로도 이 정도를 뽑아내니, 하네스만 잘 붙이면 "조금 더 정교하게 다듬는 일" 정도겠거니 싶었거든요. 그런데 막상 해보니, 브라우저 데모 하나 뽑는 것과 투명한 데스크톱 위젯을 배포 가능한 수준까지 끌고 가는 것 사이엔 생각보다 큰 간격이 있었습니다. 원프롬프트 데모는 "가능성"을 보여줄 뿐, 계속 켜두고 쓸 수 있는 "제품"은 또 다른 이야기였습니다.

결국 같은 수족관을 세 번이나 갈아엎고 나서야 제 마음에 드는 게 나왔습니다. 이 글은 그 세 번의 삽질에서 제가 배운 것들에 대한 이야기입니다.

첫 번째 — 기능은 다 넣었는데, 마음에 안 들었다

처음엔 그 Gemini 버전을 토대로 본격적으로 키웠습니다. 이때 저는 "하네스"라는 걸 처음 써봤습니다. 쉽게 말하면, 할 일을 잘게 쪼개놓으면 AI가 알아서 하나씩 구현하고, 고치고, 저장까지 해주는 작업 틀입니다. 사람이 일일이 지시하지 않아도 단계별로 굴러가는 컨베이어 벨트 같은 거라고 보시면 됩니다.

참고한 하네스 프레임워크는 실밸개발자님의 github.com/jha0313/harness_framework입니다.

이걸로 만든 첫 버전엔, 솔직히 하고 싶은 걸 몽땅 욱여넣으려 했습니다. 물고기에 밥을 주고, 놀래키면 도망가고, 새우랑 달팽이도 넣고… (새우랑 달팽이는 계획만 거창하게 세웠지 거기까진 가보지도 못했습니다.) 그런데도 저는 만족하지 못했습니다. 가장 큰 이유는 단순했습니다.

이 콘셉트로는 도무지 예쁘게 나오질 않았습니다. 기능을 이것저것 더 붙일수록 화면은 오히려 더 산만하고 촌스러워졌거든요. 그래서 차라리 기능을 덜어내고 순수하게 보는 수족관으로 콘셉트 자체를 바꾸고 싶어졌습니다.

그래서 좋은 점만 챙겨서 다시 시작하기로 했습니다. (이게 첫 번째 갈아엎기였습니다.)

두 번째 — 결과물이 자꾸 "별로"였다

두 번째는 Codex라는 도구에 하네스를 맡겨 만들었습니다. 이번엔 새로 써본 게 하나 있었는데, "grill-me"라는 스킬이었습니다. 이름 그대로 제 기획을 집요하게 캐묻는 도구입니다. 서른 개쯤 되는 질문을 던지며 "이건 어떻게 할 거냐, 저건 어쩔 거냐"를 꼬치꼬치 따져 물었고, 답을 하다 보니 머릿속에서 막연하던 기획이 점점 뾰족해졌습니다. 솔직히 기대감도 꽤 부풀었고요. (오, 이번엔 진짜 제대로 되겠는데?)

참고: grill-me 스킬

그런데 여기에 함정이 있었습니다. 질문 중에는 제가 잘 아는 것도 있었지만, 제가 전혀 모르는 영역 — 그러니까 3D 애플리케이션을 대체 어떻게 만드느냐에 관한 것들 — 도 섞여 있었습니다. 평면 그림을 겹쳐서 입체인 척할지 아니면 진짜 3D로 갈지, 앱의 뼈대로 Tauri라는 걸 쓸지 Electron이라는 걸 쓸지 같은, 갈림길에서 한쪽을 반드시 골라야 하는 기술적 선택들이었죠. 저는 잘 모르니 제대로 알아보지도 않고, 대체로 AI가 추천하는 쪽으로 척척 답해버렸습니다. 가령 "완전한 3D는 비용도 위험도 크니, 평면 그림을 여러 장 겹쳐 입체인 척하는 방식으로 가시죠" 하면, "그래, 그게 합리적이네" 하고 받아들이는 식이었습니다.

돌아보면 바로 이 갈림길들이 문제였습니다. 제가 모르는 채로 골라버린 선택지들이, 결국 마음에 안 드는 결과의 씨앗이 됐거든요.

아니나 다를까, 화면을 켤 때마다 저는 계속 실망했습니다. 그때 제가 AI한테 남긴 불평들을 늘어놓으면 이렇습니다.

"물고기가 거꾸로 헤엄치는데요?"

"클릭이 안 돼요. 메뉴도 다 안 보이고요."

"바위가 복사해서 붙여넣은 것처럼 보여요. 유목들은 그냥 떠 있는 것 같고요."

"오브제 그래픽이 너무 촌스럽습니다. 이대로는 그냥 풍경화 수준이에요."

몇 가지는 고쳐졌습니다. 거꾸로 헤엄치던 물고기도 바로잡았고요. 그런데 정작 제일 중요한 "촌스럽다"는 문제는 끝내 넘지 못했습니다. 제가 스크린샷을 보고 퇴짜를 놓으면, AI가 보정 단계를 새로 만들어 쫓아오고, 또 퇴짜를 놓으면 또 만들고… 그런데도 좀처럼 좋아지지 않았습니다.

여기서 제일 뼈아팠던 깨달음이 있습니다. 하네스는 마법이 아니었습니다.

저는 처음에 "도구만 좋은 거 붙이면 알아서 다 만들어주겠지" 하고 기대했습니다. 그런데 정작 제가 "어떻게 만들어야 예쁜 건지"를 모르는 상태에서는, 아무리 자동화 도구가 좋아도 원하는 결과가 안 나오더군요. 결국 저는 그냥 AI를 평소보다 더 많이 굴렸을 뿐이었습니다.

가장 부끄러운 비교가 있습니다. 앞서 Gemini가 원프롬프트로 10분 만에 뽑은 결과물이, 며칠을 공들여 하네스로 돌린 이 두 번째 버전보다 오히려 더 예뻤습니다. 기능은 훨씬 많은데, 보기엔 더 못났던 거죠. (그럼 대체 나는 뭘 한 걸까… 싶었습니다.)

그래서 두 번째도 갈아엎었습니다.

세 번째 — 점수를 매겨서 합격할 때까지 무한번 다시 시키기

세 번째는 Claude Code로, 이번엔 도망치지 않고 진짜 3D로 다시 만들었습니다. 두 번 실패하고 나니 비로소 몇 가지가 분명해졌습니다.

먼저 욕심을 덜어냈습니다. 지난번엔 수초·유목·바위를 잔뜩 깔려다 전부 촌스러워졌으니, 이번엔 아예 요구사항에 못을 박았습니다. "수초나 유목은 최소화하고, 주인공인 물고기 움직임에 시선이 집중되게." 다 채우려다 망치느니, 덜어내는 쪽을 택했습니다.

그리고 가장 결정적인 변화가 있었습니다. 바로 eval(평가) 장치를 만든 것입니다.

하네스가 모든 작업을 "완료"했다고 끝냈고, AI가 으레 거치는 검사들(빌드, 테스트 같은 것)도 전부 통과해서 초록불이 떴습니다. 그런데 막상 앱을 켜보니 화면은 텅 빈 크림색, 물고기가 한 마리도 없었습니다. 알고 보니 코드 한 줄이 빠져서 화면 렌더링 전체가 무너진 거였는데, 검사는 그걸 못 잡았던 겁니다. 코드에 문제가 없는지 검사를 통과하는 것과 보기에 예쁜 것은 전부 다른 문제였습니다.

그래서 AI한테 이렇게 부탁했습니다. "이런 일이 또 생기면, 목표한 수준으로 제대로 보일 때까지 알아서 반복해서 다시 시도하게 만들어주세요." 그렇게 만든 게 일종의 자동 채점 장치, eval입니다. 작동 방식은 이렇습니다.

1. 화면을 실제로 띄워서 픽셀을 들여다봅니다. 단색으로 깨졌는지, 물고기가 살아있는지를 기계가 객관적으로 판정합니다.
2. 멀티모달 AI가 그 스크린샷을 참고 이미지와 비교해서 항목별로 점수를 매깁니다.
3. 그 점수가 합격선을 넘을 때까지 하네스가 자동으로 고치고 다시 시도합니다.

제가 일일이 눈으로 보고 퇴짜 놓던 일을, 이제 시스템이 점수로 대신해준 셈입니다. 효과는 기대 이상이었습니다. 비전 점수가 이렇게 올라갔습니다.

12점 → 22 → 38 → 48 → 52 → 60 → 70(합격)

12점(화면 깨짐)에서 시작해 버그를 잡고, 물고기를 살리고, 분위기를 보강하면서 한 칸씩 올라가 결국 합격선을 넘겼습니다. 두 번째 시도가 실패한 진짜 이유는 촌스러워서가 아니라, 촌스러움을 잴 자(척도)가 없어서 개선이 한 방향으로 모이질 못했던 거였습니다. 잴 수 있게 되니 비로소 좋아지기 시작했습니다.

여기서 한 가지 더. 물고기를 자연스럽게 헤엄치게 만드는 건 점수만으로는 안 됐습니다. 정지된 스크린샷으로는 "움직임이 자연스러운지"를 평가할 수가 없거든요. 그래서 이건 평가로 메우는 대신 구현으로 정면 돌파했습니다. 마침 세상에는 누군가 이미 잘 만들어둔 무료 3D 물고기 모델(CC0 GLB 에셋)들이 있었습니다. 입체 형태도, 색도, 헤엄치는 동작까지 통째로 딸려 있는. 제가 직접 못 만드는 건 가져다 쓰는 게 답이었습니다. (물론 클로드가 추천해줌)

그러고 보면 앞에서 수초와 유목을 과감히 덜어내기로 한 것도 같은 맥락이었습니다. 사실 아쿠아스케이프에서 분위기를 좌우하는 진짜 핵심은 물고기보다도 수초와 유목입니다. 그런데 도메인 지식이 없는 제가 AI와 함께 이걸 구조적으로 그럴듯하게 세우는 게 영 안 됐습니다. "이 그림처럼 해줘"로는 끝내 제가 원하는 입체감이 나오질 않았습니다. 게다가 수초·유목을 멋지게 채우면 채울수록 화면을 너무 많이 차지했고, 늘 떠 있어야 하는 위젯이다 보니 크기를 줄이고 늘리기도 난감했습니다. 그래서 이번엔 과감히 덜어냈습니다.

끝까지 가보기 — QA부터 릴리즈까지

드디어 볼만한 수준이 되고 나서는 추가하고 싶은 기능들을 넣어봤습니다. 수족관을 실제로 만지는 기능(물고기 클릭하면 말풍선, 먹이 주기, 놀래키기)과 자잘한 버그들이요. 하지만 하네스도 돌리고, Eval도 통과했는데… 제가 직접 만져보니 오류들이 꽤 있었습니다.

• 종료 버튼이 없어서 앱을 끌 방법이 없었습니다.
• 밝기 슬라이더를 올리면 뒷배경에서 이상한 선들이 나타났습니다.
• 분명 잘 눌리던 버튼이, 창을 다른 곳으로 옮기고 나면 안 눌렸습니다.
• 숨김 처리를 했는데 배경 레이어는 남아있었습니다.

버그를 발견하면 저는 "여기 이런 문제가 있으니 확인해보세요", "이건 안 되네요" 하고 알려주었고, 실제 수정은 AI가 했습니다. 웬만한 건 "알아서 문제 없게 해달라"고 맡겼고, 마지막엔 아예 "QA 테스트를 한번 돌려봐 달라"고도 했습니다.

문제는, 앞에서 공들여 만든 eval이나 하네스의 검증 게이트가 있었는데도 여전히 못 잡는 구멍이 보였다는 겁니다. 특히 여러 요인이 복잡하게 얽힌 버그는 하네스가 끝내 못 걸러냈습니다. 위의 "창을 옮기면 버튼이 안 눌린다" 같은 게 딱 그런 경우였습니다. 결국 그렇게 꼬인 버그들은 제가 직접 찾아내서 알려줘야 했습니다.

그렇게 써보고 제보하기를 반복하는, 말 그대로 QA를 했습니다. 물론 끝까지 못 잡은 것도 있었습니다. (밝기를 끝까지 올리면 화면에 옅은 선이 하나 남았는데, 세 번을 추적해도 100%는 못 지웠습니다…)

그리고 마지막으로, 이 위젯을 다른 사람의 맥에도 깔 수 있게 만들었습니다. 태그 하나만 올리면 macOS용·Windows용 설치 파일이 자동으로 만들어지게 해두고, 실제로 공개 릴리스를 냈습니다. (aquagarden-for-builder라는 레포입니다.) 학습용으로 시작한 수족관이, 드디어 제 화면을 벗어나 다른 사람 화면에서도 헤엄치게 되었습니다.

세 번 만들고 남은 것들

정리하면, 처음엔 그저 예쁜 수족관 하나 갖고 싶었을 뿐인데 어쩌다 보니 하네스도 써보고, eval도 만들어보고, 무료 3D 에셋도 가져다 쓰고, QA에 릴리스까지 한 바퀴를 다 돌아봤습니다. 그 과정에서 제가 배운 걸 추려보면 이렇습니다.

1. AI의 합리적인 제안도 내 목표엔 안 맞을 수 있습니다. "평면으로 입체인 척하자"는 제안은 분명 합리적이었지만, 제가 원한 진짜 입체감과는 끝내 화해하지 못했습니다. 어떤 길로 가느냐가 결과의 천장을 정해버리더군요.
2. "초록불"을 다 믿으면 안 됩니다. 검사를 다 통과해도 화면은 깨져 있을 수 있습니다. 코드가 도는 것과 보기에 예쁜 것은 완전히 다른 문제였습니다.
3. 잴 수 없으면 좋아지지 않습니다. 두 번째가 실패한 건 촌스러워서가 아니라 촌스러움을 측정할 방법이 없어서였습니다. 세 번째는 점수로 재고 그 점수를 자동으로 좇게 만들었더니 12점이 70점이 됐습니다.
4. 자동화 도구는 마법이 아닙니다. 내가 어떻게 만들어야 하는지를 모르면, 좋은 도구는 그저 "AI를 더 많이 굴리는 일"이 될 뿐이었습니다. 도구를 쓰는 감은, 결국 두 번 실패하고 나서야 조금씩 왔습니다.
5. 아는 만큼 보이고, 알기 위해선 빠르게 실패해야 합니다. 머릿속엔 "예쁘게"가 있는데 그걸 AI가 알아들을 말로 풀어내는 게 제일 어려웠습니다. 늘 다 만들어진 다음에야 "아, 이게 아닌데"를 알았으니까요. 그래서 미리 완벽하게 적으려 애쓰는 대신, 보고-점수내고-다시 하는 고리를 빠르게 돌리는 것이 현실적인 답이었습니다.

같은 걸 세 번이나 만드는 일은 비효율처럼 보입니다. 그런데 돌아보면 매번 다른 걸 남겼습니다. 첫 번째에선 "내가 진짜 좋아하는 감상 경험이 뭔지"를 알았고, 두 번째에선 "평면으로 입체인 척하는 방식의 한계"를 확인했고, 세 번째에 와서야 "하네스와 eval을 어떻게 붙여야 진짜 품질로 이어지는지" 조금 감이 왔습니다. 저에게 이건, 두 번의 실패로 "무엇이 진짜 문제였는지"를 알아내고 세 번째에 그걸 실제로 출시까지 밀어붙인 과정이었습니다. 쉽게 봤다가 호되게 당했지만, 그래서 배운 게 더 많았던 것 같습니다.

AI가 원프롬프트로 뽑은 데모를 정말 일상적으로 쓰고 싶은 수준으로 올리려면 무엇이 필요한지, 자동화가 어디까지 도와주고 어디서부터는 사람이 기준을 세워야 하는지, "보기 좋은 것"을 만들려면 어떤 검증의 고리가 필요한지 — 그걸 몸소 체득한 과정 자체가 가장 큰 성과가 아닐까 합니다.

---

세 번째로 만든 수족관은 여기에 공개해 두었습니다 → github.com/outliner-coach/aquagarden-for-builder

(Releases에서 macOS·Windows 설치 파일을 받을 수 있습니다.)

---

이 글은 LinkedIn에 처음 공개한 글입니다.