ChatGPT 앱을 만들 때 필요한 교훈

본문에 앞서, ChatGPT 앱이란 https://chatgpt.com/apps 에서 볼 수 있듯 ChatGPT에서 사용할 수 있는 앱을 총칭해서 이릅니다. ChatGPT Apps SDK를 사용해서 개발하면 ChatGPT에서 앱에 접근해서 작동시키게 할 수 있거든요. 이러한 앱들을 개발하기 위한 교훈이 OpenAI Developer Blog에 올라와서 공유드립니다. 그러나, 내용을 보시면 'ChatGPT에서 사용할 수 있는 앱' 뿐만 아니라, 'LLM API를 붙여서 만드는 모든 앱'에도 적용될 수 있는 광범위한 내용이기에 분명 포괄적으로 도움이 될 것 같다 느껴 공유드립니다.

원문: https://developers.openai.com/blog/15-lessons-building-chatgpt-apps

OpenAI 공식 블로그 글 "15 lessons learned building ChatGPT Apps"는, 실제 ChatGPT 앱들을 만들면서 얻은 인사이트를 15가지 교훈으로 정리한 글입니다. 핵심만 압축해서 정리하면 아래와 같습니다.

전체 요지

• "모델이 똑똑하다"보다 "경험이 매끄럽다"가 더 중요하며, UX/제품 설계/에러 처리까지 포함한 전체 경험을 설계해야 한다는 내용입니다.
• 초기엔 간단한 앱부터 만들어서 실제 사용자 행동을 보고 빠르게 수정·개선하는 식의 실전형 빌드-측정-학습 사이클을 강조합니다.

주요 교훈 (요약)

1. 모든 컨텍스트를 공유하지 않습니다.

   • 성능적 측면: 화면의 이미지나 가격 정보는 AI에게 불필요해 토큰과 속도가 낭비됩니다.
   • 논리적 측면: 추리게임에선 AI만 범인을, 퀴즈에선 화면에만 정답을 보여야 합니다.
   • 공유필드와 화면전용 필드로 정보를 의도적으로 분리합니다.

2. 지연로딩(lazy-loading)은 사용하지 않습니다.

   • 웹처럼 클릭할 때마다 데이터를 가져오면 AI 도구 호출 지연으로 느려집니다.
   • 처음부터 필요한 데이터를 모두 내려 보내고 화면을 빠르게 채웁니다.
   • AI와 공유할 필요 없는 데이터는 화면에서 직접 가져옵니다.

3. AI는 화면 상태를 알아야 합니다.

   • 사용자가 버튼 클릭 후 질문하면 AI가 어떤 버튼인지 모릅니다.
   • 화면 상태를 저장하고 data-llm 태그로 자동 전달 해야합니다.
   • Vite 플러그인이 이를 처리해 수동 동기화 없이 작동할 수 있습니다.

4. 상호작용마다 전용 통신 경로가 필요합니다.

   • 화면↔서버↔AI 간 여러 통신선이 각각 다른 역할을 합니다.
   • 어떤 데이터가 어떤 경로로 가야 하는지 명확히 설계해야 합니다.

5. 화면은 3가지 표시 모드에 대응합니다.

   • 인라인(간단작업) / 전체화면(지도등 복잡) / PiP(대화중 유지) 모두에 대응해야 합니다.
   • 모바일의 닫기버튼 등 안전영역을 고려합니다.

6. ChatGPT 안에서 일관된 디자인이 중요합니다.

   • 독립앱이 아니라 ChatGPT에 삽입되는 앱이라 디자인 차이가 바로 드러납니다.
   • 공식 UI Kit으로 ChatGPT와 동일한 느낌을 냅니다.

7. 자연어로 필터링합니다.

   • 체크박스 대신 "유럽 20만원 이하 해변"처럼 말하게 합니다.
   • AI가 자연어를 백엔드 조건으로 자동 변환합니다.

8. 파일은 단순 첨부물이 아니라 새로운 상호작용을 시작합니다.

   • 물건 사진 올리기 → AI가 인식 → 화면에서 상품 검색과 같은 식으로 작동하게 합니다.
   • AI는 채팅에 업로드된 파일을 fileParams로 직접 분석할 수 있습니다.

9. CSP(보안정책)는 결국 CORS와 같습니다.

   • OpenAI가 앱을 이중 중첩 iframe 안에서 실행하므로 보안이 매우 엄격합니다.
   • API(connectDomains), CDN/이미지(resourceDomains), 유튜브(frameDomains), 외부링크(redirectDomains)를 미리 선언해야 합니다.
   • 이를 통해 개발환경에선 되다가 운영환경에서만 막히는 전형적 문제를 방지합니다.

10. 작은 설정 플래그가 전체 동작을 결정합니다.

    • 앱 주소(widgetDomain) / 읽기전용여부(readOnly) / 위험작업 경고(destructiveHint) / 화면 독립실행권한(openWorldHint) 등의 플래그가 존재합니다.
    • 이런 작은 플래그들이 게시 후 앱의 탐색/도구/실행 경계를 결정하는데, 최대한 정확히 설정해야합니다.

11. 빠른 개발을 위해 실시간 새로고침(HMR)이 필요합니다.

    • ChatGPT 앱 환경에서 일반 Vite/Next.js의 HMR(파일 저장시 자동 새로고침)이 작동하지 않습니다.
    • 반면, Alpic AI가 만든 Vite 플러그인은 개발서버 요청을 가로채서 ChatGPT 내부 iframe에 실시간으로 코드 변경사항을 주입합니다.
    • 코드 수정 → 저장 → ChatGPT 앱에서 즉시 반영되어 개발 반복 속도가 획기적으로 빨라집니다.

12. 모든 테스트를 ChatGPT에서 하지 않습니다.

    • 초안: 로컬 모의환경에서 화면 배치를 빠르게 확인하고,
    • 완성: ChatGPT에서 AI 반응을 검증합니다.

13. 모바일 테스트는 별도 설정이 필요합니다.

    • 로컬 서버를 iPhone/Android에서 접속할 수 있게 터널링합니다.

14. 익숙한 React 도구를 사용합니다.

    • 복잡한 JS API 대신 React 훅(useCallTool 등)으로 간편화합니다.
    • Zustand로 상태관리를 쉽게 합니다.

15. 반복되는 문제들을 툴링으로 해결하므로 Alpic AI의 Skybridge 사용을 추천합니다.

    • 개발훅/새로고침/모의환경 등을 한 번에 제공합니다.
    • chatgpt-apps-builder로 아이디어부터 배포까지 자동화합니다.
    • 이들은 Skills로 배포되어 있습니다.

몇몇개는 자사 제품 홍보(이 글은 Alpin이라는 업체가 게스트로서 OpenAI 블로그에 작성한 글입니다.)지만, 많은 생각을 하게 만드는 내용들이니, 특히 LLM을 프로덕트 안에 넣는 작업을 하실 예정이라면 참고하시면 좋을 내용 같습니다.