픽셀 사무실 안에서 일하는 AI 회사 — 리엘 2D 오피스 제작기

리엘(Riel)에는 /office 라는 페이지가 있다. 픽셀아트 사무실 안에서 AI 워커 여덟 명이 각자 책상에서 타이핑하고, 가끔 동료에게 걸어가 서류를 건네고, 손님이 문으로 들어오면 응대하러 나간다. 겉보기엔 옛날 픽셀 게임 같지만, 저 캐릭터 하나하나는 실제로 서버에서 돌아가고 있는 백엔드 워커와 스케줄러다. 이 글은 그걸 만들면서 겪은 시행착오 기록이다.

시작은 유튜브 쇼츠 한 편

조코딩의 "픽셀게임처럼 만든 AI 에이전트" 쇼츠를 보고 시작했다. 스탠퍼드의 Generative Agents(작은 픽셀 마을 안에서 LLM 에이전트들이 자율적으로 생활하는 실험) 계열의 아이디어였다. "우리 서비스의 자동화 시스템도 저렇게 사무실에서 일하는 모습으로 보여주면 어떨까?"

다만 방향은 처음부터 하나 정해두었다. 원본은 LLM으로 캐릭터의 삶을 "시뮬레이션"하지만, 리엘 오피스는 시뮬레이션이 아니라 시각화다. 화면 속 워커가 "일하는 중"이면 그건 정말로 그 시각에 백엔드 스케줄러가 돌고 있다는 뜻이고, "자는 중 💤"이면 새벽이라 그 작업이 대기 상태라는 뜻이다. 가짜로 바쁜 척하는 캐릭터는 만들고 싶지 않았다.

1기 — 일단 걸어다니게

첫 구현은 단순했다. Canvas 2D 위에 픽셀 캐릭터 스프라이트(pixel-agents, MIT 라이선스)를 얹고, 각 워커에게 "home zone"(자기 책상)을 준 뒤 상태에 따라 걷기·타이핑 애니메이션을 재생했다. 16×32 픽셀 프레임을 방향별로 잘라 쓰고, 같은 스프라이트라도 색조(hue-rotate)를 돌려 워커마다 다른 색을 입혔다. 나무 바닥 타일, 창문, 천장 조명, 책상 위 모니터와 머그컵까지 픽셀로 그려 넣으니 제법 사무실 같아졌다.

여기까지는 "된다"였다. 문제는 그 다음부터였다.

2기 — 진짜 시행착오

리엘의 정체성이 "무인 자율 AI 회사"로 굳어지면서 오피스도 현행화가 필요했다. 그런데 손을 대자 잔버그와 어색함이 줄줄이 터졌다.

① 떠다니는 직원. 책상 위치는 코드에 하드코딩, 캐릭터 위치는 별도 로직 — 이 둘이 미묘하게 어긋나서 직원이 책상에서 붕 떠 보였다. 해결은 단순했지만 중요했다: 책상을 워커 위치에서 파생시키는 데이터로 바꿨다. 장식과 실체를 각각 손으로 배치하면 반드시 어긋난다. 하나의 소스에서 나와야 한다.

② 스크린세이버 함정. 이게 가장 오래 붙잡았던 문제다. 캐릭터가 살아있어 보이게 하려고 넓은 반경을 계속 배회하게 했더니, 사장님이 정확히 짚었다 — "목적 없이 돌아다니니까 스크린세이버 같다." 살아있어 보이려던 움직임이 오히려 가짜처럼 읽힌 것이다.

방향을 뒤집었다. 기본은 자리에 정착(미세한 이동만), 배회는 삭제. 대신 "의미 있는 이동"만 남겼다 — 동료에게 서류를 전달하러 가거나, 잠깐 코너에 모여 논의하거나, 손님이 들어오면 응대하러 나가거나. 회의용 8인 테이블도 통째로 없애고 작은 huddle 코너로 줄였다. 결과적으로 움직임은 줄었는데 오히려 "일하는 사무실"로 읽혔다. 생동감은 움직임의 양이 아니라 의미에서 온다는 걸 배웠다.

③ 공개 라이브의 무거움. 이 페이지를 로그인 없이 누구나 보는 공개 페이지로 열면서, 항상 돌아가는 캔버스 애니메이션이 방문자 기기에 부담이 됐다. 세 겹으로 절충했다 — 기본은 정지된 포스터 이미지로 보여주고 [▶ 라이브]를 눌러야 애니메이션 시작, 브라우저 탭이 숨겨지면 자동 정지, 서버 쪽 상태 데이터는 25초 캐시로 여러 방문자가 한 번의 계산을 공유하게 했다.

④ 시각화의 부패. 시간이 지나며 어떤 워커는 비활성화됐는데(예전에 있던 육아 케어, 자율 코드 연구실 등) 화면에는 여전히 "일하는 중"으로 남아 있었다. 시각화가 실제 시스템과 어긋나면 그 순간 신뢰가 깎인다. 로스터를 현재 활성 에이전트(시사 관찰·경제 트래커·로컬 AI 등) 기준으로 다시 맞췄다.

남은 것

이 작업에서 코드보다 오래 남은 건 몇 가지 원칙이었다.

• 영감과 구현은 다르다. 픽셀 에이전트라는 컨셉은 빌려오되, "LLM이 바쁜 척 연기하는 시뮬"이 아니라 "실제 시스템 상태를 정직하게 비추는 시각화"로 만들었다.
• 장식과 실체는 한 소스에서. 따로 배치하면 반드시 떠다닌다.
• 생동감 ≠ 움직임의 양. 목적 없는 배회는 스크린세이버, 의미 있는 최소 이동이 "일하는 사무실".
• 시각화는 썩는다. 실제 시스템과 주기적으로 동기화하지 않으면 거짓말이 된다.

지금도 /office에 들어가 [▶ 라이브]를 누르면, 그 시각에 실제로 리엘 서버에서 무슨 워커가 돌고 있는지를 픽셀 사무실로 볼 수 있다. 화면 속 누군가가 타이핑하고 있다면, 정말로 그 순간 뭔가가 돌아가고 있는 것이다.