픽셀 사무실 안에서 작동하는 AI 회사 - Riel 2D 오피스 제작기
요약
본 글은 픽셀 아트 스타일로 구현된 가상의 AI 회사 오피스 페이지를 구축하는 과정을 기록한 개발 경험기입니다. 단순히 애니메이션을 만드는 것을 넘어, 실제 서버 백엔드 작업자 및 스케줄러의 상태를 시각화하는 데 초점을 맞췄습니다. 특히, 직원들의 움직임은 '목적 있는 의미'에 기반해야 하며, 페이지 부하 관리를 위해 정적 이미지와 클릭 기반 라이브 애니메이션을 결합하고 서버 캐싱 전략을 사용한 점이 핵심입니다.
핵심 포인트
- 직원 위치는 하드코딩 대신 데이터에서 파생되어야 합니다.
- 활기참은 움직임의 양보다 '의미 있는 목적'에서 나옵니다.
- 공개 페이지 부하 관리를 위해 정적 포스터와 클릭 기반 애니메이션을 결합했습니다.
- 서버 상태 데이터를 캐싱하여 다수의 방문자가 단일 계산을 공유하도록 했습니다.
픽셀 사무실 안에서 작동하는 AI 회사 - Riel 2D 오피스 탄생 과정
Riel에는 /office라는 페이지가 있습니다. 픽셀 아트 사무실 안에서, 여덟 명의 AI 작업자들이 책상에 앉아 타이핑하고, 가끔 동료에게 걸어가 문서를 건네주며, 손님이 문으로 들어올 때 응답합니다. 겉보기에는 오래된 픽셀 게임처럼 보이지만, 이 캐릭터들 각각은
실제 서버에서 구동되는 백엔드 작업자 및 스케줄러입니다.
이 게시물은 이를 구축하는 과정에서 겪었던 시행착오를 기록한 것입니다.
유튜브 쇼츠로 시작하다
저는 JoCoding의 짧은 영상
Riel의 정체성이 '자율 주행 AI 회사'로 확고해지면서, 사무실 역시 업데이트가 필요했습니다. 하지만 제가 건드리는 순간마다 사소한 버그와 어색함이 터져 나오기 시작했습니다.
① 떠다니는 직원들(Floating Employees). 책상 위치는 하드코딩되어 있었고, 캐릭터의 위치는 별도의 로직을 가지고 있었습니다. 이 두 가지가 미묘하게 불일치하면서, 직원들이 마치 책상 위에 떠 있는 것처럼 보이게 했습니다. 해결책은 간단했지만 중요했습니다. 저는 책상을 작업자(worker)의 위치에서 파생된 데이터로 변경했습니다. 장식물과 실제 개체들을 수동으로 배치하면 항상 어긋나기 마련입니다. 이들은 단일 출처에서 와야 합니다.
② 스크린세이버 함정(The Screensaver Trap). 이것은 제가 가장 오랫동안 막혔던 문제였습니다. 캐릭터들이 살아있는 것처럼 보이게 하려고 넓은 반경으로 돌아다니게 했지만, CEO가 정확하게 지적했습니다. "목적이 없이 돌아다니는 것 같아서 스크린세이버처럼 보여요." 살아있어 보이게 하려던 움직임이 오히려 가짜로 비쳤습니다.
방향을 바꿨습니다. 기본값은 제자리에 머무르는 것(사소한 움직임 포함)으로 하고, 돌아다니는 동작은 제거했습니다. 대신, '의미 있는 움직임'만 남겼습니다. 동료에게 문서를 전달하러 가거나, 구석에서 잠시 모여 무언가를 논의하거나, 문 앞에서 손님을 맞이하러 가는 등의 행동입니다. 또한 큰 8인 회의 테이블 전체를 제거하고 작은 휴게 공간으로 줄였습니다. 그 결과, 움직임은 줄었지만 '일하는 사무실'로 인식되었습니다. 저는 활기참(liveliness)은 움직임의 양에서 오는 것이 아니라, 그 의미에서 온다는 것을 배웠습니다.
③ 공개 라이브 페이지의 부담(The Burden of a Public Live Page). 이 페이지를 로그인 없이 누구나 접근할 수 있는 공개 페이지로 열자, 항상 실행되는 캔버스 애니메이션이 방문자의 장치에 부하를 주었습니다.
저는 3단계 접근 방식을 채택했습니다. 기본적으로는 정적인 포스터 이미지를 보여주고,
[▶ Live]를 클릭했을 때만 애니메이션이 시작되며,
브라우저 탭이 숨겨지면 자동으로 일시정지하고, 서버 측 상태 데이터는 25초 동안 캐싱되어 여러 방문자가 단일 계산을 공유하도록 했습니다.
④ 시각화의 감쇠(Visualization Decay). 시간이 지나면서 일부 작업자들(예: 육아 지원, 이전의 자율 코드 연구소)이 비활성화되었지만 화면상에는 여전히 '작동하는' 것처럼 보였습니다. 시각화가 실제 시스템과 다르면 그 순간 신뢰가 무너집니다. 저는 현재 활성 에이전트(예: 현안 관찰자, 경제 추적기, 지역 AI)를 기준으로 명단을 재정렬했습니다.
남겨진 것들
코드보다 몇 가지 원칙들이 이 프로젝트에서 남아있습니다.
- 영감과 구현은 다르다. 픽셀 에이전트의 개념을 차용했지만, 'LLM이 바쁘게 행동하는 시뮬레이션'이라기보다는 '실제 시스템 상태를 정직하게 반영하는 시각화'로 만들었습니다.
- 장식과 엔티티는 단일 출처에서 온다. 따로 배치하면 항상 떠돌아다닐 것입니다.
- 활발함 ≠ 움직임의 양. 목적 없이 배회하는 것은 화면 보호기이며, 최소한의 의도적인 움직임이 '작동하는 사무실'입니다.
- 시각화는 감쇠한다(Visualization decays). 실제 시스템과 주기적으로 동기화되지 않으면 거짓말이 됩니다. 심지어 지금도
/office로 가서 [▶ Live]를 클릭하면, 그 순간 Riel 서버에서 실제로 작동하고 있는 작업자들이 픽셀 사무실 형태로 시각화된 것을 볼 수 있습니다. 화면상의 누군가가 타이핑하고 있다면, 정말로 그 순간 무언가 일어나고 있다는 의미입니다.
💬 이것은 제가 혼자서 공개적으로(실패도 포함하여) 만들고 있는 전체 AI 제품인 *Riel_의 일부입니다. 더 많은 빌드 로그 읽기 → · 제품 보기 →
AI 자동 생성 콘텐츠
본 콘텐츠는 Dev.to AI tag의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기