ChatGPT Book 중고책 매입가 비교 에이전트 만들기
방 정리를 하다 보면 책꽂이에 가득 쌓인 책들을 마주하게 됩니다. 공간은 부족한데 무작위로 쌓여 있는 책들을 정리하려니 막막함이 앞서기 마련입니다. 특히 한 푼이라도 더 아끼기 위해 여러 사이트를 번갈아 가며 검색하는 과정은 무척 번거롭습니다. 스마트폰으로 일일이 제목을 검색하고 가격을 비교하다 보면 금방 지치기 일쑤입니다.
이러한 불편함을 해결하기 위해 도서 매입가를 한눈에 보여주는 도구를 만들어 볼 수 있습니다. 책 제목 하나만 넣으면 여러 도서 플랫폼의 값을 동시에 불러와 최적의 선택지를 화면에 표시하는 방식입니다. 불필요한 탐색 시간을 줄이고 합리적인 선택을 돕는 유용한 도구입니다. 수작업으로 조회하던 번거로운 단계를 자동화하여 효율성을 극대화합니다.
여기서는 외부 정보 연동을 통해 두 곳의 플랫폼 데이터를 실시간으로 수집하고 조합하는 멀티스텝 에이전트를 구축해 봅니다. ChatGPT의 도움을 받으면 복잡한 개발 지식이 없더라도 웹 브라우저와 텍스트 에디터만 준비되어 있다면 구현할 수 있습니다. 차근차근 구조를 잡아가며 실용적인 프로그램을 완성해 보겠습니다. 인공지능 모델에게 적절한 지시를 내리는 프롬프트 작성법부터 단계별 구현 흐름까지 상세히 짚어봅니다.
첫 번째 프롬프트는 화면의 전체적인 레이아웃과 외관을 잡기 위한 목적을 가집니다. 복잡한 연산 로직을 처음부터 추가하면 예기치 못한 오류가 발생했을 때 원인을 찾기 어렵습니다. 따라서 시각적인 화면 뼈대를 먼저 견고하게 구축하는 것이 유리합니다. 레이아웃이 깨지지 않도록 CSS Flexbox나 Grid를 적절히 활용하여 반응형 구조를 만드는 것이 기본입니다.
작성된 코드를 파일로 저장한 뒤 브라우저에서 열었을 때 구상했던 네온 테마의 디자인이 나타나면 첫 단계를 성공적으로 마친 셈입니다. 시각적인 결과가 먼저 확인되면 이후 작업 속도도 빨라집니다. 다크 모드 특유의 시각적 편안함과 네온 블루의 대비가 제대로 나타나는지 점검합니다.
실제 외부 데이터를 가져오는 코드는 통신 지연이나 도메인 간 요청 제한 정책으로 인해 초기 설정 단계에서 원활하게 작동하지 않을 수 있습니다. 그렇기 때문에 가상 데이터를 활용해 화면 매칭 여부와 뱃지 노출 상태를 로컬 환경에서 먼저 검증해야 합니다. 모의 데이터를 생성하는 Javascript 함수를 작성하여 입력값에 따라 결과가 제대로 바뀌는지 시험합니다.
이러한 단계를 거치면 나중에 실제 데이터 스트림을 연결하더라도 전체 구조가 흔들리지 않고 안정적으로 유지됩니다. 복잡한 문제를 단순하게 쪼개어 해결하는 효과적인 접근 방식입니다. 각 카드 컴포넌트의 렌더링 주기와 데이터 갱신 시점을 제어하는 로직의 기초가 다져집니다.
외부 통신을 연동하여 실시간 매입가 비교를 완성하는 핵심 단계입니다. 웹 브라우저 자체 보안 규칙으로 인해 외부 서버에 직접 요청을 보낼 때 차단되는 현상이 빈번하게 일어납니다. 특히 오픈 API가 아니거나 접근 제한이 걸려 있는 웹페이지의 콘텐츠를 긁어올 때는 브라우저 환경에서의 비동기 요청이 거부되기 쉽습니다.
이를 방지하기 위해 중간에서 요청을 중계해 주는 프록시 설정을 ChatGPT에게 명확히 지정해 주어야 불필요한 오류를 겪지 않습니다. 이 로직이 더해지면 실용적인 비교 도구가 비로소 구동을 시작합니다. 알라딘의 도서 조회 API 키 발급 방법이나 예스24의 검색 쿼리 매개변수 구조를 명확히 이해하고 프롬프트에 반영하는 것이 핵심 요령입니다.
개발 과정에서 마주치는 예외 상황들
검색을 진행했으나 결과 화면이 로딩 상태에서 넘어가지 않는 경우가 발생할 수 있습니다. 이는 통신 중계용 프록시 서버에 요청이 과도하게 몰려 응답이 지연되거나, 해당 서버가 비활성화되었을 때 일어납니다. 자바스크립트 코드에 정의된 중계 서버의 주소를 다른 곳으로 변경하거나 ChatGPT에게 요청하여 로컬에 간이 서버를 띄워 우회하면 해결됩니다. 다양한 무료 프록시 서버 목록을 미리 확보해 두는 것도 좋은 대비책입니다.
알라딘 정보는 정상적으로 조회되고 예스24 정보는 실패를 기록하기도 합니다. 이는 대상 웹페이지의 구조가 부분적으로 개편되면서 정보를 가져오던 경로 설정이 어긋났기 때문입니다. 개발자 도구를 활용해 대상 페이지의 변경된 요소를 식별한 뒤 이에 맞게 쿼리 선택자 코드를 보정해 달라고 ChatGPT에게 요청하면 문제를 풀 수 있습니다. 정적 페이지 구조 분석을 주기적으로 갱신해야 하는 이유입니다.
기기 화면 크기에 따라 UI 디자인이 비정상적으로 좁게 표현되는 모바일 대응 이슈도 존재합니다. 미디어 쿼리를 선언하여 가로폭이 좁은 환경에서는 카드 레이아웃이 세로 방향으로 유연하게 배치되도록 스타일 설정을 보완하는 작업이 필요합니다. 모바일 기기의 터치 감도와 입력창 크기를 고려한 디테일한 조정이 더해지면 사용자 경험은 더욱 향상됩니다.
향후 확장해 볼 수 있는 아이디어
기기 성능과 브라우저의 발달로 모바일 카메라를 활용한 중고책 바코드 탐색 기능을 덧붙여 볼 수 있습니다. 책 뒷면의 바코드를 카메라 렌즈에 대는 것만으로도 직접 타이핑하는 번거로움 없이 조회가 이루어집니다. 웹 브라우저의 카메라 API를 연동하고 자바스크립트 기반의 바코드 디코더 라이브러리를 추가하면 실현 가능합니다. 집에 보관 중인 도서들을 빠르고 효율적으로 분류하여 정리 정돈에 실질적인 도움을 주는 유용한 기능입니다. 조금씩 기능을 살 붙여 나가는 방식으로 활용도를 더욱 높일 수 있습니다.
이런 글도 있어요
관련 검색어
- 🔍 ChatGPT 사용법
- 🔍 ChatGPT 비교
- 🔍 중고책 비교
- 🔍 알라딘 사용법
- 🔍 알라딘 비교
- 🔍 예스24 사용법