📝 한줄 요약
AI가 코드 짜는 걸 지켜보다가 "이거 완전 방치형 게임인데?" 싶어서, 내 AI 에이전트들이 바탕화면에서 캐릭터가 되어 일하는 오버레이 게임을 만들었습니다. 목표는 하나 — 일을 노는 것처럼 재밌게.
바쁘시면 이것만 읽어도 돼요:
만든 것: 내 Claude(AI) 에이전트가 바탕화면 구석에서 캐릭터로 일하는 방치형 펫 게임. 진짜로 지금 하는 작업을 캐릭터가 연기함
시작한 이유: AI가 일하는 게 늘 방치형 게임처럼 보였다. 그럼 진짜 게임으로 만들면 일도 노는 것처럼 재밌지 않을까?
가장 인상적이었던 순간: 한 모델(오푸스)로 8시간을 고쳐도 안 되던 화면 배치가, 게임 잘 만든다는 다른 모델(페이블5)로 바꾸니 접근 자체를 갈아엎어 한 번에 풀렸다
핵심 교훈: AI가 버그를 계속 못 고치면 "추측하지 말고 직접 재봐"라고 시켜라. 추측 5번보다 계측 1번
결과: 일하는데 옆에서 캐릭터가 움직이니까 확실히 덜 지루하다. 원래 목표 그대로 달성
🎯 이런 분들께 도움돼요
일이 지겨운 분 — "일을 재밌게 만드는" 발상 자체에 관심 있는 분
AI로 뭔가 만들다 버그에 계속 막혀본 분
비개발자인데 AI로 내 취향의 물건을 만들어보고 싶은 분
😫 문제 상황 (Before)
특별히 불편해서 시작한 건 아니었습니다. 그냥 오래된 생각이 하나 있었어요.
AI한테 일을 시켜놓고 옆에서 지켜보고 있으면, 이게 꼭 방치형 게임 같았습니다. 방치형 게임 아시죠? 내가 뭘 안 해도 캐릭터가 알아서 자원 캐고 성장하는 걸 구경하는 게임. AI가 코드를 척척 짜는 걸 보고 있으면 딱 그 느낌이었어요.
그러다 이런 생각이 들었습니다.
AI가 일하는 게 방치형 게임 같다면, 그걸 진짜 게임으로 만들면 어떨까? 그럼 일하는 것도 노는 것처럼 재밌게 할 수 있지 않을까?
마침 요즘 뭔가 재밌는 일을 하고 싶던 참이었고, 새로 나온 AI 모델(페이블5)이 게임을 잘 만든다는 얘기를 들어서 한번 써보고 싶기도 했습니다. 그래서 시작했어요.
🛠️ 사용한 도구
도구: Claude Code (터미널에서 대화하며 코딩하는 AI 도구)
모델: Opus 4.8, 그리고 Fable 5 (중간에 교체 — 이게 이 글의 핵심입니다)
특이사항: 저는 개발자가 아닙니다. 코드를 직접 짜지 않고, AI에게 말로 시켜서(바이브 코딩) 만들었습니다
🔧 작업 과정
먼저 정한 것 — "그냥 알림"과 뭐가 다른가
만들기 전에 AI와 컨셉부터 정리했습니다. 사실 "AI가 일하면 캐릭터가 반응한다"는 것만으로는, 이미 나와 있는 여러 알림 프로그램과 다를 게 없었거든요.
그래서 게임 요소를 넣기로 했습니다. 새 작업을 시작할 때마다 캐릭터가 태어나서 수집되고(도감), 시간마다 정해둔 구호를 외치고, 지금 무슨 작업을 하는지 혼잣말을 하는 식으로요.
[레퍼런스 게임 이미지]
1을 충실히 하되 2의 게임요소도 필요해. 1만 충실히 하면 사실 기존에 이미 나온 클로드 아이콘으로 독에서 알림해주는 거랑 별 다를게 없으니까... ai작업을 새로 시작하며 ai에이젼트가 생길때 마다 다양한 종류의 햄스터가 태어나고 그걸 수집할수 있다건가.
스위트 홈 - 스크린샷 미리보기 이미지
[이런식으로 ai에이젼트들을 수집하면 어떨까?]
화면을 가리는 문제 — 공간이 아니라 '시간'으로 나눴다
바로 현실적인 고민이 생겼습니다. 저는 VS코드(코딩 화면)를 꽉 채워놓고 일해서, 캐릭터가 여러 마리 나오면 화면 을 가려서 오히려 방해가 됐어요.
근데 고민되는 부분이 사실 난 일할때 창 가득 vs코드 창을 켜놓고 일해서 햄스터들이 너무 많이 나와서 화면을 가리면 일하는데 방해가 되. 만약 햄스터가 있다면... 한마리만 방해되지 않게 나와있거나 하는게 제일 좋지.
AI가 여기서 좋은 정리를 해줬습니다. 이 앱은 목적이 둘인데(알림은 봐야 하고, 관상은 안 봐도 되고) 서로 충돌한다는 거였어요. 그래서 공간이 아니라 시간(모드)으로 나누자는 결론이 나왔습니다. 평소엔 대표 캐릭터 한 마리만 구석에 작게(안 방해), 클릭하면 나머지가 우르르 펼쳐지는 방식으로요.
AI가 진짜 하는 일을 말하게 하기
이 게임의 핵심은 여기였습니다. 남들 데스크펫은 가짜 랜덤 대사를 말하지만, 제 건 실제 연동이니까 "진짜 지금 하는 일"을 말할 수 있었거든요. 그런데 처음엔 말풍선이 잘 안 뜨거나 내용이 빈약했습니다.
응 잘되. 근데 아까부터 보니까 음...ai가 일하는데 어떤걸 하는지 표현하는 말풍선이 안뜨거나 너무 내용이 한정적인거 같아.
이왕이면 실용적으로 만들고 싶었습니다. 그래서 물었어요.
근데 말풍선이 좀 실용적이 면 좋겠어. 어떤내용이 말풍선에 나오면 보다 실용적일까? 예를 들어 오류가 났거나, 작업이 다 끝났을때 알려주면 도움이 될거 같아. 그 외에 또 뭐가 있을까?
여기서 AI가 인상적인 판단을 했습니다. "오류 알림"을 만들려다가, 추측으로 코드를 짜는 대신 실제로 테스트를 해보고 "도구가 실패했을 때는 신호가 아예 안 온다"는 걸 발견한 거예요. 그래서 안 되는 걸 붙잡지 않고 접었습니다. 대신 완료·대기·오래걸림 세 가지 알림만 남겼어요. (안 되는 걸 우기지 않는 게 오히려 시간을 아꼈습니다.)
그리고 8시간의 벽 — 화면 배치가 계속 어긋났다
문제는 캐릭터와 소품(액자·노트)을 화면에 예쁘게 정렬하는 거였습니다. 이게 정말 안 풀렸어요.
캐릭터가 너무 크거나, 점프할 때 머리가 잘리거나, 말풍선이 엉뚱한 데 떠 있거나, 소품이 겹치거나. 고치면 다른 게 틀어지고, 또 고치면 또 틀어지고. 제 채팅 기록이 이렇게 흘러갑니다.
다 엉망 되었네..
전혀 안되 다 겹쳐 있고 이상해
계속 위치를 못마추고 있네 이걸 어떻게 해결하는게 좋을까?
오푸스(당시 쓰던 모델)로 이걸 8시간 가까이 붙잡고 있었습니다. AI가 픽셀 좌표를 하나하나 계산해서 "여기서 몇 픽셀 위, 몇 픽셀 옆"을 맞추려는 방식이었는데, 하나를 맞추면 다른 하나가 어긋나는 무한 굴레였어요.
그래서 마침 "게임 잘 만든다"던 페이블5로 모델을 바꿔봤습니다.
결과가 놀라웠어요. 페이블5는 좌표를 하나하나 맞추는 방식 자체를 버렸습니다. 대신 브라우저가 알아서 요소들을 정렬해주는 방식(flexbox)으로 구조를 통째로 갈아엎었어요. 사람이 좌표를 계산하는 게 아니라, 애초에 겹칠 수 없게 판을 짜버린 거죠. 8시간을 헤매던 게 접근을 바꾸니 단번에 풀렸습니다.
이게 이번 작업에서 제일 크게 배운 순간이었어요. 같은 문제라도 모델마다 푸는 방식이 다르다. 안 풀리면 붙잡고 있지 말고 갈아타 볼 것.
캐릭터도 더 귀엽게, 눈도 마우스를 따라오게
배치가 풀리고 나선 캐릭터를 다듬었습니다. 처음엔 제가 코드로 찍은 픽셀 도트였는데 좀 뚝뚝했어요. 예전에 써봤던 비슷한 오픈소스(clawd-on-desk)의 캐릭터가 더 귀엽고 자연스러워서, 그걸 참고했습니다.
솔직히 지금 디자인이 별로야... 이 레포의 클로드 이미지를 참고해서 해보자
눈을 깜빡이고, 마우스를 따라 눈동자가 움직이고, 완료하면 폴짝 뛰는 것까지 붙였습니다. 여기서도 방향을 하나 잡았어요. 참고한 오픈소스를 "베낄 대상"이 아니라 "부품 창고"로 보기. 캐릭터 움직임 같은 부품은 가져오되, 게임의 핵심(수집·도감)은 제가 창작하는 걸로요.
✅ 결과 (After)
다리 위에 돼지가 있는 사진
원래 목표는 하나였습니다. "일을 노는 것처럼 재밌게." 그건 이뤘어요.
여러 AI 창을 켜고 일할 때, 옆에서 캐릭터가 타자 치고 잠자고 완료하면 폴짝 뛰는 걸 보고 있으면 확실히 덜 지루합니다. 작업이 노는 것처럼 느껴져요.
Before vs After
항목
Before
After
AI가 일할 때 화면
그냥 코드 창만
구석에서 캐릭터가 실시간으로 연기
작업하는 기분
그냥 일
옆에 펫이 같이 일하는 느낌, 덜 지루함
지금 뭐 하는지
창을 봐야 앎
캐릭터 말풍선·상태로 힐끗 보임
결과물
우측 하단에 작은 캐릭터 한 마리가 떠 있다가, 클릭하면 지금 돌아가는 AI들이 여러 마리로 펼쳐집니다. 급훈 액자를 누르면 다 같이 구호를 외치고, 노트에는 오늘 작업 통계가 적혀 있어요.
💬 이 과정에서 배운 AI 활용 팁
효과적이었던 것
안 풀리면 모델을 바꿔봐라. 오푸스로 8시간을 헤맨 걸 페이블5가 접근을 바꿔 한 방에 풀었습니다. 같은 AI 도구여도 모델마다 문제 푸는 방식이 다릅니다.
AI한테 "추측하지 말고 직접 재봐"라고 시켜라. 이게 이번의 핵심 교훈입니다. 버그가 계속 안 잡힐 때, AI가 "아마 이것 때문일 거야"라고 추측으로 고치면 헛발질만 반복돼요. "짐작하지 말고 실제로 로그를 찍어서 확인해봐"라고 시키면, 진짜 원인이 엉뚱한 데 있는 경우가 많습니다. 추측 다섯 번보다 계측 한 번이 빠릅니다.
안 되는 건 우기지 말고 먼저 확인시켜라. "오류 알림"처럼 원래 불가능한 걸 AI가 붙잡으면 시간만 날립니다. "이거 원래 되는 거 맞아?"부터 테스트하게 하면 헛수고를 막아요.
이렇게 하면 안 돼요
한 모델로 무한정 붙잡고 있기. 저는 8시간을 버렸습니다. 두세 번 시도해서 안 풀리면 접근이나 모델을 바꿀 신호예요.
AI의 "아마 ~때문일 거예요"를 그냥 믿기. 추측이 맞을 때도 있지만, 안 잡히는 버그는 대개 추측이 틀린 겁니다. 확인부터 시키세요.
🌍 다른 업무에 적용한다면?
"일을 재밌게 만든다"는 발상은 게임이 아니어도 됩니다. 반복적이고 지겨운 작업에, 진행 상황이 눈에 보이는 작은 장치 하나만 붙여도 체감이 달라져요. 완료하면 소리가 나거나, 오늘 한 일이 한눈에 쌓이거나 하는 것만으로요.
그리고 "추측하지 말고 재보게 하라"는 팁은 코딩이 아닌 어떤 AI 작업에도 통합니다. AI가 자신 있게 틀린 답을 낼 때, 근거를 직접 확인하게 시키는 습관이요.
🚀 앞으로의 계획
세 가지를 다 만들 생각입니다.
도감 — 프로젝트별로 캐릭터를 수집하는 진열장. 지금은 데이터만 쌓고 있고, 며칠 뒤 데이터가 차면 UI를 붙일 예정
체크리스트 — 오늘 할일을 적고 체크하면 캐릭터가 만세하는 기능
품종 색 — 프로젝트·모델마다 캐릭터 색이 달라지는 수집 요소
📋 재사용 가능한 프롬프트
프롬프트 1: 버그가 계속 안 잡힐 때
이 버그를 지금까지 [고친 방법들]로 시도했는데 계속 안 됩니다. 추측으로 또 고치지 말고, 진짜 원인이 뭔지 실제로 확인할 수 있게 로그(진단 정보)를 먼저 심어서 재봐 주세요. 계측 결과를 보고 나서 고칩시다.
프롬프트 2: AI가 어떤 기능을 만들려 할 때 (되는지부터 확인)
[만들고 싶은 기능]을 넣고 싶은데, 이게 지금 환경에서 원래 가능한 건지부터 확인해줘. 추측하지 말고, 실제로 되는지 간단히 테스트해본 다음에 되면 만들고 안 되면 대안을 알려줘.
프롬프트 3: 한 방식으로 계속 막힐 때
지금 [현재 방식]으로 [문제]를 풀려는데 계속 막힙니다. 이 방식 말고 아예 접근을 바꾸는 다른 방법은 없을까요? [예: 좌표를 하나하나 맞추는 대신, 알아서 정렬되는 구조는 없나요?]
