AI 에이전트 Goose로 위시리스트 앱을 뚝딱!
by DD
5개월 전
조회수 184
Goose를 활용하여 AI 기반 개발 작업을 자동화하는 방법을 소개함
MCP-UI를 통해 Goose 내에서 시각적인 UI를 렌더링하는 위시리스트 앱을 개발함
Iframe 크기 조절 문제 해결을 위해 ResizeObserver를 활용
Goose와 MCP-UI 아키텍처
Goose는 AI 에이전트로서 개발 작업을 자동화하며, MCP-UI를 통해 시각적인 UI를 제공한다. 구체적으로 MCP 서버를 구축하여 React 기반 위젯을 렌더링한다. 따라서 사용자는 Goose 내에서 위시리스트를 확인하고 관리할 수 있으며, ChatGPT App Template을 기반으로 개발 시간을 단축했다.
Iframe 크기 조절 문제와 해결
Goose 내에서 Iframe 크기 조절은 주요 과제였다. ChatGPT 앱과 달리, Goose에서는 별도의 처리가 필요했다. 반면 ResizeObserver를 사용하여 컨테이너의 크기 변화를 감지하고, postMessage를 통해 부모 프레임에 크기 변경을 알렸다. 결과적으로 UI가 내용에 맞게 동적으로 조절되도록 구현했다.
MCP-UI 개발 팁
MCP-UI 기반 개발 시, 탄탄한 템플릿을 활용하는 것이 중요하다. ChatGPT App Template과 같은 기반을 사용하면 개발 속도를 크게 향상시킬 수 있다. 따라서 Storybook을 활용하여 컴포넌트를 개발하고, Vitest를 통해 테스트를 자동화하는 것이 좋다. 또한, Iframe 크기 조절 문제를 해결하는 것이 핵심이다.
