☕ AI LLM 커피 원두 요약 설명기

최근 LLM에 큰 흥미를 가지게 되면서, 학습 목적으로 작은 프로젝트를 만들어봤습니다.
처음에는 단순히 원두 이름을 입력하면 AI가 요약을 생성하는 도구로 시작했지만, 이후 확장하여 실제 상품 상세 페이지에 붙여보며 실사용이 가능할지를 실험해봤습니다.

원두 이름 자체에 원산지, 품종, 가공 방식 등 주요 정보가 담겨 있어
이름만으로도 AI가 그럴듯하게 설명을 만들어낼 수 있다는 점에서 아이디어를 얻었습니다 !

📌 프로젝트 개요

이 프로젝트는 단순한 입력-출력 형태의 AI 실험을 넘어서,
전자상거래 환경에서의 AI 활용 가능성을 보여주는 것을 목표로 했습니다.

목적
- LLM(OpenAI API)을 전자상거래 맥락에 적용해
  소비자 친화적인 상품 설명을 자동 생성하는 기능을 실험
- 단순 데모가 아니라 실제 서비스 플로우와 유사한 구조 구현
- Nest.js API 서버를 통해 상품 목록/상세 데이터를 제공 → Next.js 프론트엔드와 연동
진행 과정
1. 원두명을 입력하는 간단한 AI 요약기 제작
2. 원두 이름에서 품종·가공 방식 같은 키워드 정보를 추출해 AI 입력에 활용
3. 원두 상세 페이지를 만들고, 원두명·컵노트와 추출된 키워드를 함께 전달해, 종합된 AI 요약을 표시
4. 에러 발생 시 기본 설명(fallback) 노출, Grid 기반 반응형 등 실사용 요소 추가

상품 상세 페이지
- Nest.js API(GET /products, GET /products/:id)로 원두 정보 제공
- Next.js에서 API 호출하여 데이터 렌더링
- 반응형 Grid 레이아웃 적용
AI 요약 생성 기능
- 상세 페이지 접속 시 자동 실행
- 버튼 클릭 시 재생성 가능
- 실패 시 fallback 기본 설명 표시
AI 원두 설명기 (입력형 도구)
- 원두명을 직접 입력해 요약 결과 확인 가능
- 학습 목적의 초기 버전

LLM 활용 경험
- OpenAI API를 직접 호출해 프롬프트를 설계
- process_phrase, variety_phrase, cupnote를 반영해 자연스러운 설명 생성
- 단순 텍스트 출력이 아닌 컨텍스트 기반 요약 설계 경험
실전 응용 실험
- 단순 입력창이 아니라 유사하게 구현된 쇼핑몰 상세 페이지에 AI를 붙여봄
- 전자상거래에서 소비자 친화적 설명 보조 기능의 가능성을 확인
프론트엔드 역량 강화
- useEffect + useCallback으로 자동 실행 구현
- Next.js 15에서 params 비동기화 경고 해결(await params 적용)
- Tailwind Grid 레이아웃으로 반응형 구현
백엔드 연동 학습
- Nest.js로 in-memory 상품 API 제작
- Next.js 프론트엔드에서 API 호출 및 데이터 표시
- CORS 설정, 환경 변수(NEXT_PUBLIC_API_BASE) 관리 경험

상세 페이지 1	상세 페이지 2

실패 시 fallback 기본 설명

AI 원두 설명기 (초기 버전)

상세 페이지 접속 시 AI 요약 자동 실행

Grid 를 이용한 반응형 처리