에이전트 GUI 툴에 HTML 표시 기능을 탑재하니 상상 이상으로 효과적이었다 ― Pockode

스마트폰에서 Claude Code를 구동하기 위해 만든 Pockode이지만, PC 개발에서도 자주 사용하며 꾸준히 개발을 이어왔습니다.

최근 추가한 기능 중 하나는 에이전트가 채팅창 내에 HTML을 표시하는 기능입니다. 솔직히 말해서, 만들기 전에는 '프리뷰가 조금 편리해지려나' 정도의 기대였습니다. 실제로 사용해보니, 에이전트와의 상호작용 자체가 바뀌었습니다.

제가 직접 만든 퍼즐 게임 리포지토리에서 Pockode를 새로 띄우면서 기록했습니다. 보낸 메시지는 다음 세 가지입니다.

• Diagram the game flow in a fun, pop style, keep it brief (게임의 흐름을 재미있고 팝한 스타일로, 간결하게 도식화해줘)
• Show me all the dango images, keep it brief (단고 이미지를 전부, 간결하게 보여줘)
• Let me hear the merge sounds, keep it brief (합성 시 소리를, 간결하게 들려줘)

※gif라서 소리는 없지만, 실제로는 음성 버튼 클릭 시 소리가 납니다.

이 세 가지 모두 'Pockode의 HTML 툴로'와 같은 지정은 하지 않았습니다. 에이전트가 스스로 판단하여 MCP 툴을 사용했습니다.

또한, 표시된 화면들은 어느 것도 리포지토리에는 존재하지 않습니다. 에이전트가 대화 응답으로서 그 자리에서 만든 것입니다.

※데모의 보기 좋게 하기 위해 '팝하게' 하도록 요구했지만, 평소에는 더 간소하고 실용적인 것이 나옵니다.

첫 번째에서는 설계 문서의 화면 전환을 바탕으로 게임 흐름을 팝한 플로우차트로 정리했습니다. 단고 그림에는 리포지토리에 있는 게임 본체 스프라이트가 사용되었습니다.

두 번째에서는 에이전트가 리포지토리에서 단고 스프라이트를 찾아내어 11종류 × 3표정의 33장을 표로 만들어 반환했습니다.

세 번째는 조금 더 복잡합니다. 이 게임의 합성음은 하나의 음원을 재생 속도를 바꿔서 내고 있으며, 큰 단고일수록 낮은 소리가 납니다. 에이전트는 그 계산식을 소스 코드에서 읽어내어 사이즈별 소리와 연쇄했을 때 소리가 올라가는 모습을 들을 수 있는 시청 페이지를 만들었습니다.

만약 이 기능이 없었을 때 같은 질문을 했다면 어땠을까요?

돌아오는 것은 아마 이런 글일 것입니다.

단고 이미지는

asset-src/sprites/

에 33장이 있습니다. 01~11 각각에 보통(normal), closed, squeeze의 3종류가 있습니다.

정확하기는 하지만, 친절하지 않습니다. 폴더를 열어 하나하나 직접 확인하는 것은 시간이 걸리고 무엇보다 번거롭습니다.

이번 기능에서는 HTML을 통해 프로젝트 내부 파일을 참조할 수 있습니다. 이미지도 영상도 음성도 그 자리에서 프리뷰가 가능해져서 채팅 화면을 벗어나지 않고 소재를 확인할 수 있게 되었습니다.

HTML로 반환할 수 있게 되면서 바뀐 것은 단순히 이미지가 보기 좋아졌다는 것만은 아닙니다.

아까의 시청 페이지는 코드 내 동적 제어를 반영한 것입니다. 지금까지라면, 게임을 실행해서 들어야 하거나 전용 툴을 유지 관리해야 했습니다. 대화 중에 문득 궁금해진 사양을 확인하려면 둘 다 큰 작업이었습니다.

하지만 지금은 한마디 부탁하는 것만으로 대화 속에 나타납니다. 커밋되지도 않고, 프로젝트를 더럽히지도 않습니다. AI가 만든 툴을 굳이 실행할 필요도 없습니다.

스마트폰에서 조작하고 있을 때조차 PC와 같은 화면이 그대로 보입니다. 손에 브라우저로 열 파일이 없어도 채팅만 열면 확인할 수 있다는 점—여기가 Pockode만의 강점입니다.

또한 마음에 드는 것은 HTML을 파일로 저장하게 하면 툴로 재사용할 수도 있습니다.

구현 전의 플랜이나 기능 설명을 가볍게 도식화해 주는 것도 큰 장점입니다. 긴 글을 머릿속으로 다시 조합해야 하는 부담이 상당히 줄어듭니다.

Pockode는 시작 시 에이전트에게 MCP 툴 html_render를 전달합니다. 인수는 제목과 HTML만이며, 호출되면 전달된 내용을 채팅 화면에 렌더링합니다.

툴 설명도 간단합니다.

Markdown은 편리하지만, 표현할 수 있는 데에는 한계가 있습니다. 다이어그램을 쉽게 요청하고, 때로는 움직이는 페이지까지 대화 속에서 받아볼 수 있게 된 것만으로도 에이전트와의 상호작용이 상당히 달라졌습니다.

어떤 상황에서 가장 효과적인지는 개발 스타일에 따라서도 다를 것입니다. 관심 있으시면 꼭 사용해 보세요.