ChatGPT로 iHerb 추천 에이전트 30분 만에 완성

내가 매일 먹는 영양제, AI에게 맞춰달라고 하면 어떨까

ChatGPT 계정 하나면 준비 끝

준비물은 컴퓨터와 ChatGPT 계정 하나면 충분합니다. API 키나 복잡한 로컬 개발 세팅 없이도 브라우저에서 바로 결과물을 확인할 수 있습니다.

추천 에이전트 단계별로 빌드하기

원하는 대로 작동하지 않고 꼬인다면

• 현상: 추천 카드 안에 생성된 구매 링크를 클릭해도 엉뚱한 기본 홈페이지로 나오거나, 내가 설정한 추천 리워드 코드가 붙지 않은 상태로 출력됩니다.
  원인: ChatGPT가 긴 대화를 나누는 동안 컨텍스트 창이 채워지면서, 앞서 정의했던 AGENTS.md의 세부 링크 규격을 놓치고 기본 설정으로 코드를 짜기 때문입니다.
  해결: 이럴 때는 기존 대화창에 계속 덧붙이지 말고 완전히 새 대화 세션을 여는 편이 좋습니다. 첫 프롬프트 맨 앞에 '반드시 추천인 코드 ABC1234를 포함할 것'이라고 한 번 더 강조해서 전달하면 바로 정상화됩니다.
• 현상: 브라우저로 html 파일을 열어보니 UI가 심하게 찌그러져 있거나, 다크 모드 스타일이 깨진 검은 화면만 보입니다.
  원인: ChatGPT가 생성한 CSS 코드에서 닫는 중괄호가 빠졌거나, 경로가 잘못 꼬였을 가능성이 큽니다.
  해결: ChatGPT에게 'index.html 코드의 CSS 코드에 문법 에러가 없는지 검수하고 완전한 스타일 코드로 다시 줘'라고 요청해서 덮어쓰면 깔끔하게 해결됩니다.
• 현상: 종합비타민과 루테인 등 여러 건강 카드를 동시에 눌러도 중복 섭취 시 안전 경고 문구가 뜨지 않고 브라우저 콘솔에 자바스크립트 오류가 납니다.
  원인: 데이터 매칭 로직에서 한글 텍스트의 미세한 공백 처리나 배열 순회 과정에서 널(Null) 값을 가리키는 예외 처리가 빠져서 스크립트가 멈췄기 때문입니다.
  해결: ChatGPT에게 에러가 발생한 자바스크립트 함수 부분을 복사해 보여주면서 '배열 데이터가 비어 있거나 공백이 있을 때 발생할 수 있는 오류를 차단하도록 안전장치 코드를 덧붙여줘'라고 요청하면 해결됩니다.

다음 단계: 실제 세일 정보까지 긁어오기