시리즈 소개: Flutter, Supabase, Gemini LLM을 활용해 1인 개발로 'AI 오피스 시뮬레이션'을 구축한 과정을 총 4회에 걸쳐 공유합니다. 지난 2회차에선 API 비용 폭탄을 맞고, 아키텍처를 통째로 갈아엎었던 눈물겨운 사투를 다뤘는데요. 이번 편에서는 그 딱딱한 텍스트 데이터들에 숨을 불어넣어, 눈에 보이는 2D 픽셀 세계로 옮겨 담았던 과정을 풀어보려 합니다.

2회차에서 API 비용 문제를 간신히 수습하고 나니, 곧바로 다른 벽에 부딪혔습니다. 야심 차게 만든 텍스트 로그 화면을 본 지인들의 반응이 생각보다 차가웠거든요.

"음... 그래서 이게 끝이야? 그냥 채팅창 보는 느낌인데?"

정곡을 찔렸습니다. 제 눈에는 에이전트들의 심오한 상호작용이 보였지만, 처음 보는 사람에겐 그저 '글자가 올라오는 까만 화면'일 뿐이었죠. 에이전트들이 출근하고, 커피를 마시러 이동하고, 동료와 마주치는 '진짜 공간'이 필요해진 시점이었습니다. 그 순간부터 2D 픽셀 오피스 개발이 시작되었습니다.

미리 요점만 콕 집어보기

Bonfire 엔진으로 일군 2D 월드: 1인 개발의 구세주, Bonfire 플러그인 덕분에 타일맵부터 길 찾기 로직까지 꽤 그럴싸한 사무실 공간을 만들 수 있었습니다.
데이터를 '픽셀'로 번역하기: 텍스트로만 돌던 에이전트들의 감정을 이모티콘과 조명으로 시각화하니, 비로소 시뮬레이션에 몰입감이 생기더라고요.
관전자를 넘어선 '신의 손': 지켜보기만 하면 심심하죠. 사용자가 에이전트에게 직접 커피를 건네며 대화 흐름을 비트는 인터랙션 요소를 넣어봤습니다.

데모 사이트

(*해당 서비스 특성상 PC 환경에서 확인 부탁드립니다. 모바일에서는 기능이 제한되어 있습니다.)

오피스에 공간을 만들다: Bonfire와 타일맵 설계

Flutter로 2D 게임을 만든다고 하면 대부분 Flame 엔진을 먼저 떠올립니다. 맞습니다, Flame이 기반입니다. 그런데 Flame 단독으로는 타일맵 기반 오피스를 구현하기가 생각보다 번거롭습니다. 타일맵을 로드하고, 장애물 레이어를 분리하고, 캐릭터가 장애물을 피해 목적지까지 이동하는 패스파인딩(Pathfinding)까지 직접 구현하려면 1인 개발 기준으로는 너무 많은 코드를 써야 합니다.

그래서 선택한 것이 Bonfire입니다. Bonfire는 Flame 위에서 동작하는 RPG 특화 플러그인으로, 타일맵(Tilemap) 로딩·레이어 분리 기반 패스파인딩·충돌 감지를 모두 내장하고 있습니다. 덕분에 저는 "어떻게 길을 찾을 것인가"를 고민하는 대신, "직원(에이전트)이 어디로 이동해야 하는가"에만 집중할 수 있었습니다.

오피스 맵은 단순한 이미지가 아닙니다. 내부적으로 두 개의 레이어로 구성됩니다.

타일드(Tiled) 맵 에디터로 오피스 레이아웃을 그리고, 각 타일에 walkable 또는 obstacle 속성을 지정합니다. Bonfire는 이 데이터를 읽어 A* 알고리즘을 실행합니다. 배치 파이프라인에서 "민준이가 회의실로 이동한다"는 이벤트가 오면, Bonfire가 현재 좌표에서 회의실 의자 좌표까지 최단 경로를 계산하고, 캐릭터는 장애물을 피해 뽈뽈거리며 걷기 시작합니다.

참고로 A* 알고리즘은 게임 개발에서 가장 흔하게 쓰이는 길 찾기 알고리즘입니다. 목적지에 도착하면 다음 동작으로 자연스럽게 전환됩니다. 캐릭터가 벽에 끼는 예외 상황에는 텔레포트(Teleport) 폴백(Fallback) 로직이 동작해서 시뮬레이션이 멈추지 않게 안전망을 마련했습니다.

픽셀 좌표로 오피스 공간 설계하기

오피스 안의 모든 위치는 픽셀 좌표로 관리됩니다. 타일 하나의 크기는 16×16픽셀이고, 각 시설물(책상, 정수기, 휴게실 소파, 출구 등)은 고유한 좌표 값을 가집니다.

이벤트가 발생하면 캐릭터는 지정된 좌표로 뽈뽈거리며 움직입니다. 가령 '이서연이 팀장에게 말을 건다'는 이벤트가 오면, 서연이 캐릭터가 먼저 팀장님 책상 앞으로 이동하는 식이죠. 좌표 기반으로 움직이니 캐릭터끼리 겹치는 일도 없고, "팀장님이 왜 책상 위로 걸어 다니지?" 같은 버그들도 레이어 설정만 잘해주면 금방 잡히더라고요. 2D 화면은 그 자체로 훌륭한 디버깅 툴이 되어줬습니다.

여기까지 보시고 "아니, 이 사람 게임 개발 전문가 아냐?"라고 오해하실지도 모르겠습니다. 하지만 전 게임 개발의 'ㄱ' 자도 모르는 평범한 비개발자입니다. 앞에서 아는 척하며 설명했던 A* 알고리즘이니, Bonfire 플러그인이니 하는 것들도 사실 AI(Claude)와 씨름하며 그때그때 배운 것들입니다.

이게 바로 AI와 작업하며 느끼는 묘미 아닐까 싶습니다. 전혀 모르는 미지의 영역이라도 AI에게 맥락만 잘 설명해 주면, 함께 문제를 풀어나가면서 저절로 공부가 되더라고요. "난 개발을 모르니까 못 해"라는 장벽이 AI라는 파트너 덕분에 슥 허물어지는 경험, 이건 정말 직접 해보지 않으면 모를 희열입니다.

혹시 저처럼 게임 개발 경험은 없지만 나만의 시뮬레이션 월드를 만들어보고 싶은 분들을 위해, 제가 실제 맵 디자인과 좌표 설계를 요청할 때 유용했던 프롬프트 예시를 공유합니다.

"나는 비개발자고 Flutter Bonfire로 2D 시뮬레이션을 만들고 있어. 지금 가장 큰 고민은 에이전트들이 장애물을 자연스럽게 피해서 특정 좌표로 이동하게 만드는 거야. 무작정 코드를 짜주지 말고, 아래 순서대로 답변해 줘."

1. 레이어 설계: Tiled 에디터에서 '충돌 레이어'를 어떻게 설정해야 Bonfire가 벽으로 인식하는지 가장 확실한 가이드를 줘.
2. 이동 로직: 캐릭터가 대각선으로 이동하거나 벽에 끼지 않게 하고 싶어.
3. 코드 구현: 16x16 타일 기반에서 특정 좌표(예: x:160, y:112)로 부드럽게 이동(moveTo)시키는 Dart 코드를 작성해 줘. 이때 목적지에 도착했는지 감지하는 콜백 함수도 포함해야 해.

예외 처리: 만약 경로가 막혀서 이동에 실패하면 다시 시도하거나 텔레포트 하는 '안전망' 코드도 같이 짜줘.

오피스의 타일 스타일과 색, 원하는 가구의 느낌과 배치 구도를 설명해주면 됩니다. 꽤 상세하게 설명해야 합니다. 그러면 그에 맞춰서 타일맵을 만들어줍니다.

그리고 나서는 2D 캐릭터 이미지를 준비해야 하는데요. 무료 에셋을 제공하는 사이트도 있고 Gemini를 활용해서 만들어 달라고 하면 적당한 퀄리티로 만들어줍니다. AI가 할 수 있는 것들이 점점 더 많아짐에 따라 이미지도 손쉽게 만들어주기 때문에 생산성 향상이 극대화되고 있는 것 같습니다.

AI 감정을 픽셀에 담다: 감정 시각화와 시간대별 오피스

배치 파이프라인에서 이벤트 데이터가 화면에 도달하면, 텍스트만 표시되는 게 아닙니다. 직원(에이전트)의 상태가 실시간으로 픽셀에 반영됩니다. 2D 월드가 '현장감'을 준다면, 직원(에이전트) 대시보드는 에이전트들의 스탯 상태를 직관적으로 보여주는 역할을 합니다.

캐릭터 머리 위의 감정 게이지

각 직원(에이전트) 캐릭터 위에는 세 가지 정보가 실시간으로 표시됩니다.

스트레스 수치가 높을 때 캐릭터 표현이 달라집니다. 60% 이상부터 이모티콘이 나타나고, 80%를 초과하면 빨간 게이지와 함께 이모티콘이 표시됩니다. 생산성이 낮아지는 것도 스탯 패널에 수치로 반영됩니다.

로맨스 이벤트가 발생하면 해당 직원(에이전트) 주변에 하트 이펙트가 잠깐 등장합니다. 귓속말(WS) 이벤트는 특별합니다. 타겟 직원(에이전트) 근처로 이동해서 귓속말 이모티콘을 띄우고, 대시보드에는 내용이 표시되지만 2D 화면에서는 작은 아이콘만 나옵니다. "저 둘이 뭔가 수군거리는데..." 하는 느낌을 의도한 연출이었습니다.

시간이 흐르면 오피스가 달라진다

하루 시간(오전·점심·오후·저녁·밤)이 흐르면서 오피스의 시각적 분위기도 함께 바뀝니다. 단순히 시간 표시가 바뀌는 게 아닙니다. 오피스 조명 자체가 달라집니다.

이 조명 변화는 Flame의 컬러 필터(Color Filter)를 오버레이(Overlay)로 덮어씌워 구현했습니다. 교시가 전환될 때 약 2초에 걸쳐 부드럽게 페이드(Fade) 전환됩니다.

퇴근: 오피스가 비워지는 시간

저녁 시간이 끝나면 직원(에이전트)들은 퇴근 루틴을 시작합니다. 하나씩 exit 좌표를 향해 이동하고, 출구 타일에 닿는 순간 캐릭터가 화면에서 사라집니다. 단, 스트레스가 85% 이상이거나 생산성이 기준치에 미달인 직원(에이전트)에게는 팀장 캐릭터가 가까이 이동한 뒤, 야근 통보 이벤트가 트리거될 수 있습니다. 그러면 그 직원(에이전트)은 퇴근하지 못하고 다시 자기 자리로 돌아갑니다.

퇴근 후 야근 중인 직원(에이전트)만 남으면 조명은 야근 모드로 전환됩니다. 텅 빈 오피스에 한두 명만 남아 책상 램프 아래서 일하는 그 장면이 꽤 쓸쓸하게 연출됩니다. 그 순간 사용자는 자연스럽게 이런 생각을 하게 됩니다.

"저 사람한테 뭔가 해줄 수 없을까."

이게 바로 다음 기능으로 확장을 생각하게 된 계기가 되었습니다.

신의 손: 사용자가 세계에 개입하는 순간

Office AI Town의 핵심 재미 중 하나는 사용자가 시뮬레이션을 구경만 하는 게 아니라는 점입니다. 직접 개입할 수 있습니다. 2D 화면에서 직원(에이전트) 캐릭터를 탭하면 개입 모드(Intervention Mode)가 열립니다. 이 화면에서 사용자는 세 가지 행동을 선택할 수 있습니다.

이 수치 변화는 즉시 2D 화면에 반영됩니다. 커피를 받은 직원(에이전트) 캐릭터는 잠깐 커피 이모티콘을 머리 위에 띄우고, 스트레스 게이지가 눈에 띄게 줄어드는 것을 사용자가 직접 확인할 수 있습니다.

여기서 그치지 않습니다. 다음 배치 호출 시 이 변경된 스탯이 LLM에 전달됩니다. 스트레스가 낮아진 직원(에이전트)는 이전보다 더 밝은 말투로 대화하게 됩니다. 사용자의 행동이 실제로 이 세계의 서사에 영향력을 행사하게 되는 것이죠.

개입은 왜 재미있을까?

시뮬레이션을 만들면서 가장 크게 배운 것이 있습니다. 사람들은 구경보다 적절히 개입했을 때 훨씬 더 강한 몰입감을 느낀다는 것입니다. 심즈(The Sims)가 20년 넘게 사랑받는 이유, 타이쿤(Tycoon) 류 게임이 식지 않는 이유가 바로 이것입니다. "저 캐릭터에게 내가 무언가를 했더니 세상이 바뀌었다"는 경험. 이것이 단순 관찰 앱과 시뮬레이션 게임을 가르는 경계선입니다.

Office AI Town에서 사용자가 커피를 건네는 행위는 게임 점수를 올리는 것이 아닙니다. "저 직원(에이전트)이 오늘 너무 힘들어 보여서"라는 감정적 동기에서 나오는 행동입니다. 그 결과가 실제로 오피스의 분위기를 바꾼다는 것을 사용자가 눈으로 확인하는 순간, 이 세계는 단순한 앱이 아닌 내가 책임져야 할 공간이 됩니다.

픽셀 하나가 만드는 차이

텍스트 로그와 2D 픽셀 오피스는 같은 데이터를 보여주지만, 사용자가 받는 느낌은 완전히 다릅니다. 텍스트만 있었다면 이 프로젝트는 절반의 완성이었을 것입니다. 직원(에이전트) 캐릭터가 "팀장님, 오늘도 야근인가요"라는 텍스트를 출력하는 것과, 그 캐릭터가 스트레스 게이지를 머리 위에 달고 야근 조명이 켜진 오피스 안에서 팀장 책상 앞까지 걸어가서 말풍선을 띄우는 건 전혀 다른 경험이죠.

2D 픽셀이 AI 시뮬레이션에 생명력을 불어넣습니다. 그리고 그 생명력 위에 사용자가 개입할 수 있는 손(Hand of God)을 얹었을 때, 비로소 이 오피스는 살아있는 공간이 됩니다.

이제 이 오피스를 세상에 공개할 차례입니다. 4회차에서는 수익화 고민, 타인의 오피스를 구경하는 공유 시스템, 그리고 개발의 솔직한 회고들을 이야기해 보겠습니다.

4회에서 계속됩니다.