[팀 프로젝트/웹페이지 제작] LLM API를 사용한 사용자 맞춤형 펫 용품샵

<웹페이지 개발 목적 및 배경>

평소에 여러 쇼핑몰에서 상품을 검색할 때 내가 원하는 상품을 정확하게 찾는 데 어려움이 있었기에, 자연어로 검색할 수 있는 검색창이 있으면 좋겠다는 생각을 해왔다. 따라서 펫 용품을 판매하는 일반적인 쇼핑몰 웹페이지를 개발하고, 그 안에 검색 인터페이스를 카카오톡 채팅창처럼 디자인하여 구현하였다. 쇼핑몰 컨셉에 맞게 ai챗봇은 강아지처럼 대답하도록 프롬프트를 작성해주었다.  또한, 검색 결과에서 상품명을 클릭하면 바로 상세 페이지로 이동할 수 있도록 링크를 연결하였다. 

이외에도 평소에 API를 활용해 보고 싶다는 생각을 많이 해왔기에 여러 기능을 추가하였다. 지도 API를 사용해 주소를 입력할 수 있도록 만들었고, 카카오페이 API를 통해 핸드폰으로 QR 코드를 찍으면 결제가 가능하도록 구현하였다. 또한 카카오 API를 통해 회원가입 및 로그인을 할 수 있도록 개발하였다.

---

<개발과정>

먼저 Figma를 통해 웹페이지를 디자인한 후, 이를 기반으로 Dreamweaver에서 1차 프론트엔드 작업(HTML, CSS)을 진행하였다. 이후 Eclipse로 파일을 불러와 2차 작업을 진행하였으며, 일부 HTML 파일을 JSP로 변환하는 작업을 수행하였다. JavaScript와 Java를 사용하여 프론트엔드를 다듬고 백엔드 기능까지 구현하였다. 데이터베이스는 HeidiSQL에서 테이블을 설계한 다음 Eclipse에 연동하여 데이터를 활용하였다.

• 개발인원: 3명
• 개발기간: 10/27~12/15
• 협업도구: Notion, GitHub

---

<기능 소개>

1. 메인페이지

메인배너와 베스트 상품(Best Products) 부분은 일정 시간이 지나면 바뀌도록 제작함

 

2. 로그인 페이지

데이터베이스에 회원가입한 정보가 있으면 로그인되고, 정보가 없다면 회원가입 페이지로 이동함

 

3. 회원가입 페이지

일반 회원가입 방법과 카카오 회원가입 중에서 선택할 수 있다. 카카오로 회원가입한 경우는 사용자에게 이름, 닉네임, 이메일을 추가적으로 입력받음.

 

4. 카탈로그 페이지

상품마다 등록시간(opendate), 구매수(freq)가 데이터베이스에 등록되어 있으므로 정렬가능하다. 맨 아래에는 검색창이 있기에 상품명으로 검색 가능하다. 좌측에는 카테고리가 있어 원하는 상품별로 볼 수 있다. NEW 카테고리는 opendate가 제일 최근인 상품이 뜨고, BEST에는 freq가 높은 상품이 뜬다. 구매수는 사용자가 상품을 구매한 수만큼 증가되어 반영되므로 실시간으로 바뀔 수 있다.

 

5. 상품 상세페이지

컬러 및 사이즈, 수량을 선택할 수 있고, 하트를 누르면 위시리스트에 상품이 저장된다.

구매평을 누르면 사용자가 입력한 리뷰를 볼 수 있다.

 

6. 장바구니

원하는 상품을 장바구니에 넣을 수 있고, 장바구니 창에서는 옵션과 수량 변경이 가능하다.

 

7. 구매페이지

• 지도 api를 활용하여 주소를 검색하면 자동으로 웹페이지에 입력되도록 만들었다. 기본 배송지로 선택하게 되면 다음에 구매할 때 이 주소 및 전화번호 정보가 자동적으로 입력된다.
• 결제는 카카오페이 api를 활용하여 핸드폰으로 QR코드를 찍으면 결제가 되도록 구현했다. 지금은 테스트용이므로 실제 돈이 빠져나가진 않는다.

실제 핸드폰 화면

 

 

8. 주문내역

주문내역에서는 지금까지 구매한 상품을 모두 볼 수 있다. 재구매 버튼을 누르면 위에 있는 구매 페이지로 이동한다.

 

9. 리뷰작성

• 위에서 구매평 작성 버튼을 누르면 아래 사진과 같은 화면이 나오고 별점, 텍스트 리뷰, 사진을 등록할 수 있다. 구매평을 작성한 상품에 들어가보면 실시간으로 리뷰가 반영되어 사용자들에게 보여진다.
• 카테고리에 있는 'REVIEW'(리뷰창)에 들어가보면 전체 상품 리뷰를 볼 수 있고, 사진을 누르면 큰 화면으로 볼 수 있다. 사진 아래 있는 글씨 부분을 클릭하면 해당 상품으로 이동한다.

 

10. 위시 리스트

상품 상세 페이지에서 하트버튼을 누르면 위시 리스트에 상품이 저장된다.

 

11. 문의하기

문의를 남기면 사용자에게는 답변 대기로 뜨고, 관리자가 답변을 해주면 답변 완료 상태로 변한다. 

 

12. 정보 수정

회원 정보 수정 버튼을 누르면 자신의 정보가 나오고 수정 가능하다.

 

13. 회원탈퇴

회원탈퇴를 진행하면 작성한 리뷰와 주문 내역을 제외한 회원정보(개인정보)가 모두 삭제된다.

 

14. 공지사항

카테고리의 NOTICE에 들어가면 관리자가 작성한 공지사항을 볼 수 있다.

 

15. AI 쇼핑 도우미 (채팅 형식)

Chat GPT api를 사용하고 답변에 대한 로직을 구현하여 적절한 상품을 사용자에게 알려준다. 상품명에는 링크를 걸어 클릭했을 때 상품 상세페이지로 이동하도록 만들었다.

 

16. 관리자 페이지

① 제품 관리

• 관리자는 상품추가 버튼을 눌러 새로운 상품을 등록할 수 있다.
• 수정 버튼을 누르면 기존 상품에 대한 정보를 수정할 수 있다.
• 삭제 버튼을 누르면 상품 데이터가 삭제된다.

상품 등록

상품 수정

상품 삭제

 

② 주문 관리

전체 사용자들이 주문한 상품들을 볼 수 있는 페이지이다. 이를 클릭하면 자세한 주문 정보가 나온다.

 

③ 게시판 관리

• 문의내역

사용자가 등록한 문의에 대해 관리자가 답변을 해줄 수 있다. 관리자가 답변을 입력하면 '답변 대기'가 '답변 완료'로 바뀌게 되고, 문의를 한 사용자는 관리자가 입력한 답변을 볼 수 있다.

아까 문의 했던 계정으로 들어가면 관리자가 입력한 답변이 뜸.

 

• 공지사항

관리자가 공지사항을 작성할 수 있는 페이지이다. 공지사항을 입력하게 되면 모든 사용자는 카테고리의 'NOTICE' 메뉴에서 공지사항을 볼 수 있다.

사용자가 로그인하여 공지사항 페이지에 들어가면 관리자가 입력한 답변이 뜸.

 

• 후기관리

사용자들이 입력한 리뷰를 삭제할 수 있다. (부적절한 리뷰 삭제 용도)

 

---

<주요 로직 설명>

1. AI 쇼핑 도우미

• 사용자가 채팅창에 문장을 입력한다.
• SQL문을 활용해 키워드를 추출하고 정제한다.
• 제일 저렴한/인기 있는 같은 키워드가 있으면 SQL문을 통해 정렬 조건을 사용한다. (ASC/DESC)
• 데이터베이스에서 상품 검색
  • 1단계: 카테고리별 묶음 (필수)
  • 2단계: 생성된 SQL로 직접 검색 (필수)
  • 3단계: (결과 없을 시) ORDER BY 제거 후 재검색 
  • 4단계: (여전히 결과 없을 시) GPT api를 활용해 자동으로 유사어 확장 SQL생성
  • 5단계: (여전히 결과 없을 시) 핵심키워드로 단순 LIKE 검색
• 1,2단계까지는 필수이지만 3단계부터는 상품을 찾게 된다면 해당 단계에서 멈추고 그 이후 과정을 진행하지 않는다.
• 상품이 있다면 상품 출력 메시지를 보여줘야하므로 JSON으로 응답 생성을 한 다음, 상품명에 링크를 추가하고 채팅창에 답변을 출력한다.
• 상품이 없다면 결과 없음 메시지를 출력하고 다른 상품을 추천해주거나, 추천해주길 원하냐고 사용자에게 묻는 방식을 사용한다.

 

2. 카카오 회원가입

• 회원가입 페이지에서 카카오 회원가입 버튼을 누르게 되면 OAuth 인증 URL이 생성되며 카카오 인증 페이지로 이동한다.
• 인가코드를 받은 후 access token을 발급받는다.
• access token을 활용해 카카오 사용자 정보를 조회한다.
• 사용자 정보를 반환한다.
• 만약 DB에 정보가 있다면 이미 가입완료상태이므로 로그인 페이지로 바로 이동한다.
• 만약 DB에 정보가 없다면 세션에 카카오 정보를 저장하고 사용자에게 추가정보를 입력받는다.
• 세션에서 카카오 정보를 확인하고 입력값 검증, 중복가입 확인을 진행한다.
• 중복가입이 되지 않았으면 회원정보를 생성하고 DB에 저장한다.
• 세션을 정리한 후 로그인 페이지로 이동한다.

 

3. 카카오 로그인

• 로그인 페이지에서 카카오 로그인 버튼을 클릭하면 OAuth 인증 URL이 생성되며 카카오 인증 페이지로 이동한다.
• 인가코드를 받은 후 access token을 발급받는다.
• access token을 활용해 카카오 사용자 정보를 조회한다.
• 사용자 정보를 반환한다.
• 만약 DB에 정보가 있다면 로그인에 성공한 것이므로 메인 페이지로 이동한다.
• 만약 DB에 정보가 없다면 로그인에 실패한 것이므로 회원가입 페이지로 이동한다.

 

※ OAuth: 다른 서비스(카카오) 계정으로 자신의 사이트에 로그인하는 방식

※ Callback: 카카오가 인증 후 자신의 사이트로 돌려보내는 주소

※ 인가코드: 카카오가 발급하는 임시번호 -> 사용자가 카카오 로그인 성공 시 발급 (access token 교환에 사용됨)

※ Access Token: 카카오 api를 호출할 수 있는 도구 -> 사용자정보 조회 가능

 

4. 상품 구매

• 상품 상세페이지에서 장바구니 담기 또는 구매하기 클릭
• 구매 페이지로 이동
• 카카오페이 결제
• DB에 주문정보 저장
• DB에 사용자가 구매한 개수만큼 구매수(freq) 증가
• 구매 완료 페이지로 이동

---

<후기 & 어려웠던 점>

대학교 2년 동안 배웠던 이론들을 실제로 적용하여 웹페이지를 만들어볼 수 있어서 매우 의미 있는 경험이었다. IT경영학과 학생으로서 기술적인 구현뿐만 아니라 비즈니스 관점에서도 깊이 있게 고민해볼 수 있었던 시간이었다. 그 결과 '사용자 맞춤형'이라는 큰 주제를 중심으로 프로젝트를 기획하게 되었고, 단순히 기술만 앞세우는 것이 아니라 경영학도의 시각에서 사용자들이 우리 사이트를 지속적으로 이용할 수 있는 차별화된 가치를 제공하는 데 집중했다. 특히 타 쇼핑 사이트와 달리 실제 매장에 방문한 것처럼 AI가 제품 설명과 상담을 제공하는 기능을 통해 사용자들이 편리하면서도 신뢰할 수 있는 쇼핑 경험을 할 수 있도록 했다. 이러한 AI 쇼핑 도우미는 평소 상상만 해왔던 기능이라 실제로 구현할 수 있을지 확신이 서지 않았는데, 한 달간 코딩과 디버깅을 반복한 끝에 성공적으로 완성하여 큰 성취감을 느낄 수 있었다.

가장 힘들었던 순간은 발표 이틀 전 Gemini API가 갑자기 작동하지 않았을 때였다. 알고 보니 국내외에서 전체적으로 발생한 Gemini 오류였고, GPT API로 변경한 후에는 다행히 정상적으로 실행되었다. 또한 AI 쇼핑 도우미의 전체적인 틀을 잡고 구현하는 것은 비교적 빠르게 진행되었지만, 특정 계절 검색이나 가격 정렬 등 세부적인 기능을 완성하는 과정에서 예상치 못한 문제들이 많아 해결하는 데 상당한 시간이 소요되었다.

디자인 측면에서도 Figma를 활용하여 팀원들과 협업하며 많은 시간을 투자했다. 강아지 용품샵 컨셉에 맞춰 깔끔하면서도 귀여운 느낌을 주기 위해 직접 그림을 그리고 여러 차례 수정 작업을 거쳤다.

최종 발표는 성공적으로 마쳤고, 우수팀으로 선정되어 장학금도 받게 되었다. 교수님과 현직 개발자 두 분께서 심사를 진행하셨는데, AI 쇼핑 도우미 기능이 현재 대부분의 웹이나 앱에서 찾아보기 어려운 차별화된 기능이라는 점에서 많은 관심을 받았다. 질문의 대부분이 이 기능에 집중되었고, 심사위원들께서 흥미롭게 봐주신 덕분에 좋은 결과를 얻을 수 있었던 것 같다. 함께 열심히 해준 팀원들에게도 감사하다.

---

<활동 사진>

Figma

GitHub

Notion