소개
포트폴리오를 만들어주는 간단한 앱을 구현하려고 했지만 지난주에 대차게 실패하고,
생각보다 chatgpt app 을 만드는 공식 문서도 조금 부실한 것 같아서...
이미 잘 되어 있는 외부 사례를 조금 변형해서 만들어보는 방식으로 우회하게 되었습니다.
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
따라할만한 github 예제 찾기
챗지피티에게 따라해볼만한 chatgpt app 공개 깃헙을 알려달라고 하고, 그 중 책 검색 서비스가 눈에 들어왔습니다.
https://github.com/viteinfinite/chatgpt-apps-sdk-gutendex-example?utm_source=chatgpt.com
gutendex 앱의 역할은?
이 레포가 하는 일
Project Gutenberg(고전 도서 공개 저장소) 책들을 검색할 수 있게 해주는 Gutendex API를 사용해요.
GitHub
그 API를 ChatGPT에서 쓸 수 있도록 MCP(Model Context Protocol) 서버를 만들고,
ChatGPT가 결과를 예쁘게 보여주도록 **커스텀 React 위젯(UI)**도 같이 제공합니다.
GitHub
즉, ChatGPT에서 “책 찾아줘” 같은 요청을 하면:
MCP 서버의 gutendex.books.search 툴이 호출되고
책 목록 JSON + 위젯 메타데이터가 돌아오며
채팅 안에 페이지네이션 있는 책 리스트 위젯이 뜨는 구조예요.실제로 실행해본 결과
고전 서적 검색 서비스라서 최근의 책들은 검색되지 않아요. 베르나르 베르베르 검색해도 안 나와요.
실행해본 결과 스크린샷을 잊어서 패스....
국내 도서도, 최신 도서도 검색할 수 있게 만들자.
클로드코드에 위 레포를 클론해둔 상태로 질문했습니다.
지금 쓰는 DB는 고전 서적을 검색하는 gutendex인데, 다른 국내 서적 검색 DB를 쓰기 위해서 API를 변경할 수 있을까?
한국어 텍스트가 있는 검은 화면
역시 알아서 계획을 잘 세워줍니다.
마침 다른 작업을 하면서 카카오 도서 검색 API를 이전에 받아둔 적이 있어서 이걸로 진행해달라고 했어요. API키를 주고 해줘 해줘를 시전합니다.
오 성공했다고 하는데 한 번 실행해볼까요?
한국어 텍스트가 있는 검은 화면
실행결과
앱 이름은 '책검색' 입니다. 자연스럽게 결과가 나왔어요.
자연스럽게 이어서 대화도 가능한데요, 아직 위젯이 다양하게 동작하진 않네요...
한국사이트 스크린샷
그래서 openai의 공식 깃헙 예제를 주고, '상세 정보'를 누르면 위젯이 펼쳐지게 해달라고 했습니다.
메시지가 있는 검은 화면
하지만 여전히 동작하지 않는군요. 뿌엥
오늘 스터디 전까지 남은시간 동안 더 디벨롭 시켜보겠습니다.
결과와 배운 점
모방은 성공의 어머니다. 하지만 개선은 쉽지 않다....