<aside>

맛춤형 음식추천 챗봇 ‘맛톡’ :맛톡:

유레카프로젝트(2024.11.04~2024.12.15)에서 경영정보 학부생 3명으로 구성된 팀의 팀장으로, AI 기반 음식 추천 챗봇 ‘맛톡’을 개발했습니다. 팀장으로서 PM과 개발을 담당했습니다.

:맛톡2: 서비스 소개

🏅 성과

💻 개발과정

Sprint 1

과제: AWS 인스턴스를 생성하고 Claude 모델과 연결해 기본 챗봇 기능을 구현한다.

기본 환경 구성 과정

교수님의 지도하에 AWS EC2 인스턴스를 생성했지만, 이후의 웹 배포 및 실행 과정은 팀이 스스로 해결해야 했습니다. 이전 과제로 GitHub Pages나 Postman 등을 활용해 본 경험이 있었기에, 단순히 파일만 업로드하면 될 거라 예상했습니다.

실제로는 예상과 달리 웹이 작동되지 않았고, 챗봇 초기 화면을 띄우기 위한 서버 구동 환경을 직접 구성하고 문제를 해결해야 하는 상황이었습니다

index.htmlmain.py 파일을 서버에 업로드했지만 웹이 실행되지 않아 원인을 분석했습니다.

Python 버전 확인, uvicorn, fastapi 등 필수 패키지 미설치 문제를 발견하고 시스템 패키지를 업데이트한 뒤 가상환경을 구성해 필요한 모듈을 설치했습니다.

EC2 접속 및 재부팅 후 동일 환경을 유지하기 위해 필요한 명령어들을 정리해 팀 내부 문서로 매뉴얼화하였습니다.

초기 챗봇 화면이 정상적으로 구동되었고, EC2 서버에 대한 설정 및 실행 과정을 체계적으로 문서화함으로써 팀원 모두가 동일한 환경에서 안정적으로 개발을 이어갈 수 있는 기반을 마련했습니다.

이 경험은 단순한 기능 구현을 넘어, 개발 환경 구축과 협업 체계 마련의 중요성을 인식하게 된 계기가 되었습니다.

image.png

Claude 모델 호출 오류 해결

AWS EC2에서 챗봇 화면을 성공적으로 띄운 후, Bedrock을 통한 Claude 모델 호출을 연동하려 했지만, 챗봇이 응답하지 않는 문제가 발생했습니다.

오류 로그를 확인한 결과, Claude 호출 과정에서 문제가 발생하고 있음을 알게 되었습니다.

정확한 호출 방식이 정리되어 있지 않았고, 관련 정보도 많지 않아 오류 원인을 직접 파악하고 해결책을 스스로 찾아야 했습니다.

AWS 공식 문서를 확인하고, 관련 블로그를 찾아 읽으며 기존 사례들을 분석했습니다.

또한 Claude 호출 방식과 관련해 여러 AI에게 질문을 던지며 접근을 시도했고, 결국 Bedrock에 직접 접속해 API 요청 구조와 파라미터 오류를 점검했습니다.

실험적으로 호출 방식의 세부 구문을 수정하며 반복 테스트를 진행했고, 올바른 호출 포맷을 확인할 수 있었습니다.

Claude 호출 오류를 성공적으로 해결하여 챗봇 응답이 정상적으로 작동하게 되었고, 이후 동일 오류가 발생하지 않도록 호출 예제를 내부 문서로 정리해 팀원들과 공유했습니다.

정보가 부족한 상황에서도 주도적으로 문제를 해결해 나간 경험은 제 기술적 자신감을 크게 높여주었습니다.

image.png

Sprint 2

과제: 발전시키기 기본 챗봇 구동과 Claude 연결을 성공적으로 마친 후, 두 번째 스프린트에서는 단순 동작을 넘어 답변 품질 향상과 인터페이스 개선을 목표로 설정했습니다.

사용자 경험을 더 풍부하게 만들기 위해 두 가지 핵심 과제를 설정했습니다:

  1. Claude 모델의 역할 부여를 통해 더욱 전문적인 답변 유도
  2. 챗봇의 화면 구성을 대화형 UI로 개편하여 실제 채팅처럼 느껴지게 하기

Claude 모델 호출 시 system_message를 활용해, 모델에게 “고든 램지를 뛰어넘는 최고의 요리사” 역할을 부여했습니다.

이를 통해 사용자가 음식 외 질문을 하더라도 요리에 집중된 답변만 유도할 수 있었습니다.

UI 측면에서는 HTML/CSS 구조를 개편하고, 메시지 형태의 박스를 구현해 실제 메신저 같은 대화 인터페이스를 구성했습니다.

Claude 모델의 응답이 더 명확하고 일관되게 요리 중심으로 개선되었으며, 사용자가 느끼는 대화 몰입도 또한 향상되었습니다.

image.png

노션 페이지 개선

1주차 과제 평가 후, 교수님이 공유해주신 다른 팀의 결과물을 살펴볼 기회가 있었습니다. 일부 팀은 과제 진행이 빠를 뿐 아니라, 노션 페이지를 깔끔하고 전문적으로 꾸며 프로젝트의 완성도를 높이고 있었습니다. 저희 팀도 단순히 기술 구현만이 아니라, 노션을 활용해 프로젝트 내용을 잘 표현하고, 팀의 기획 의도를 명확히 전달하자는 방향으로 의견을 모았습니다.

노션 디자인 예시와 꾸미는 팁을 인터넷에서 조사하고, 다른 팀의 구조와 구성을 참고해 저희만의 스타일로 구성해보았습니다.

섹션 구분, 아이콘 활용, 목차 구조 정비, 색상 통일 등을 적용해 가독성과 완성도를 높였습니다.

정돈된 페이지 구성 덕분에 프로젝트 내용을 보다 명확하고 직관적으로 전달할 수 있었고, 발표 시 교수님으로부터 “노션 구성이 보기 좋고 깔끔하다”는 긍정적인 피드백도 받았습니다.

이 경험을 통해 기술 외적인 부분도 팀의 인상을 좌우할 수 있다는 점을 체감했고, 표현력과 팀 브랜딩의 중요성을 다시금 느꼈습니다.

Sprint 3

과제: 더 발전시키기

브랜딩 요소 반영

전 주차 과제 피드백 시간에 교수님으로부터 “기능 개선이 눈에 띄지 않는다”는 지적을 받았습니다.

이 피드백을 계기로, 프로젝트가 단순 구현을 넘어 팀 내에서 적극적인 테스트를 통해 실제 사용자가 경험하는 완성도와 매력도를 높여야 한다는 의견이 모아졌습니다.

정체된 서비스 수준에서 벗어나기 위해, 기존에 계획했던 브랜딩 요소(캐릭터, 색상)를 본격적으로 도입하고, UI/UX를 개선하여 사용자 친화적인 챗봇으로 발전시키는 것이 이번 스프린트의 목표였습니다.

기획 초기에 구상했던 캐릭터 디자인과 색상 테마를 실제 서비스에 적용하기 위해, 관련 이미지 파일을 AWS S3에 업로드하고 웹에서 불러오는 방식을 구현했습니다.

대화가 챗봇처럼 느껴지도록 말풍선 꼬리를 추가하고, 이전 대화 내역이 스크롤하면 보이도록 채팅 화면을 개선했습니다.

첫 진입 시 사용자에게 인사하는 인트로 멘트를 삽입하여, 초기 진입이 어색하지 않고 더욱 친근한 인상을 줄 수 있도록 했습니다.

시각적 일관성과 몰입감 있는 대화 흐름 덕분에, 챗봇의 개성이 뚜렷해지고 사용자 경험이 보다 자연스러워졌습니다.

팀 내부 리뷰에서도 “이제야 서비스답다”는 긍정적인 반응이 나왔고, 교수님 피드백을 반영해 짧은 기간 내 기능과 디자인을 균형 있게 개선한 점에 대해 팀 전체가 성취감을 느낄 수 있었습니다.

image.png

다른 사용자의 채팅 기록이 보이는 문제 해결

챗봇 테스트 과정에서 팀원 중 한 명이 “자신의 대화 내용이 아닌, 다른 사용자의 대화 내용이 화면에 보인다”는 문제를 제기했습니다.

이는 다수의 사용자가 동시에 접근하는 웹 서비스에서는 심각한 문제로, 개인화된 대화 경험을 제공한다는 서비스 목적에 어긋나는 상황이었습니다.

image.png

문제를 분석한 결과, 대화 기록이 전역 변수로 저장되고 있었고, 이는 모든 사용자에게 공유되는 상태였습니다. 이상적인 해결은 세션별로 대화 데이터를 구분하거나 캐시 또는 DB를 활용해 사용자별로 상태를 관리하는 것이었습니다. 하지만 당시 구현 수준과 기술 이해도상 캐시는 다소 난이도가 있었습니다.

즉각적인 해결책으로, 대화 기록을 초기화할 수 있는 버튼을 추가하여, 사용자가 직접 데이터를 리셋할 수 있도록 했습니다.

기술적으로 완전한 해결은 아니었지만, 문제 인식 → 원인 분석 → 제한된 조건 내에서의 실질적 조치라는 일련의 문제 해결 과정은 팀 내에서도 긍정적인 평가를 받았습니다.

이 경험을 통해 상태 관리와 사용자 분리의 중요성을 체감했고, 이후 개인 프로젝트나 팀 협업에서도 유사한 문제가 발생하지 않도록 해당 부분을 발전시켜야겠다는 생각을 하게 되었습니다.

image.png

시스템 메시지 노출 오류 개선을 통한 사용자 경험 향상

챗봇 테스트 중, 사용자가 작성하지 않은 system_message ****내용(예: "당신은 고든 램지를 뛰어넘는 최고의 요리사입니다")에 대해 챗봇이 반응하며 대답하는 현상이 발생했습니다.

사용자 입장에서 자신이 말하지 않은 문장을 챗봇이 언급하는 상황은 혼란을 유발했고, 챗봇 응답이 부자연스럽고 어색하다는 피드백이 나왔습니다. 이 문제의 근본 원인을 파악하고, 사용자에게 보다 자연스럽고 몰입감 있는 대화 경험을 제공할 수 있도록 챗봇 응답 흐름을 개선하는 것이 목표였습니다.

image.png

오류 원인을 추적한 결과, system_messageuser_prompt를 하나의 문자열로 묶어 Claude에 전달하면서 AI가 시스템 메시지를 실제 대화로 오인하는 문제가 있었음을 확인했습니다.

이를 해결하기 위해, invoke_model 구조 내에서 system_message는 별도 역할 메시지로 명확히 분리하고, 사용자 입력만을 user_prompt로 전달하도록 코드를 수정했습니다.

수정 후에도 챗봇이 시스템 문장을 인식하지 않도록 여러 번 테스트하며 출력 결과를 조정했습니다.

챗봇의 응답이 더 자연스럽고 사용자 중심적인 흐름으로 전환되었고, 혼란을 유발하던 메시지 노출 문제는 사라졌습니다.

단순한 기술 오류가 아닌, 사용자 관점에서의 어색함을 민감하게 인지하고 이를 적극 개선한 사례로, 이후 프로젝트 내에서 프롬프트 설계의 중요성에 대한 인식도 높아졌습니다.

자연스러운 유저 흐름을 위해 시작 화면 추가

사용자가 웹 챗봇에 접속하자마자 대화가 즉시 시작되는 UI 흐름은, 테스트 과정에서 “갑작스럽고 어색하다”는 피드백을 받았습니다.

대화 시작을 사용자가 직접 선택할 수 있는 구조로 UI 흐름을 개선하고, 서비스 기능이 명확히 전달되도록 초기화면을 설계해야 했습니다.

인트로(start.html) 화면을 별도로 제작하고, ‘대화 시작’ 버튼 클릭 시에만 채팅이 시작되도록 변경했습니다.

안내 문구와 말풍선 캐릭터를 추가해 서비스 목적과 사용 방식을 직관적으로 전달했습니다.

기존 채팅 화면과 디자인을 일치시켜 전환이 어색하지 않도록 시각적 통일성을 고려했습니다.

채팅 화면 상단에 홈 버튼을 배치해 언제든지 시작 화면으로 돌아갈 수 있도록 UX 흐름을 유연하게 구성했습니다.

사용자는 챗봇과의 대화를 보다 주도적으로 시작하고 종료할 수 있게 되었고, 서비스 전반에 대한 이해도와 만족도가 향상되었습니다. 단순한 기능 구현을 넘어, 사용자 관점에서의 인터페이스 설계 능력과 감성적 품질 개선 역량을 입증한 경험입니다.

image.png

최신 모델 적용 및 사용자 친화적 프롬프트 개선

챗봇의 답변이 어딘가 부자연스럽고 반복적인 인상을 준다는 피드백이 있었고, 답변 형식도 긴 문장 형태로 가독성이 떨어진다는 의견이 있었습니다.

더 높은 품질의 응답 제공과 사용자 피드백을 반영한 출력 형식 개선이 필요했습니다.

코드를 점검하던 중 모델이 구형 Claude로 설정되어 있는 것을 발견하고, 최신 버전으로 교체했습니다.

모델이 달라지면서 답변 톤과 스타일도 변화했기 때문에, 이에 맞는 프롬프트를 새로 설계했습니다.

답변의 가독성을 위해 리스트 형식(1. 2. 3.)으로 구조화했고, 추천 이유를 간결하게 설명할 수 있도록 유도하는 프롬프트를 적용했습니다.

user_prompt = f"""사용자: {user_text}

요리사: 저는 음식에 대해 이야기하는 것을 좋아하는 요리사입니다. 음식과 관련이 없더라도 최대한 음식과 연관 지어 대화를 이어갈게요. 말씀을 듣고 연상되는 음식 3가지를 말씀드리겠습니다:
1. 
2. 
3. 
어떠세요? 다른 음식이 더 추천 받고 싶으시면 말씀해주세요!"""

응답 품질이 눈에 띄게 개선되었고, 사용자들은 더 읽기 쉽고 명확한 추천 결과에 만족감을 표현했습니다.

이는 모델 선택의 중요성과 프롬프트 구성의 영향력을 직접 체감한 경험으로, AI 응답 품질 향상을 위해 사용자 관점에서 지속적으로 구조를 점검하고 개선할 수 있는 역량을 키울 수 있었습니다.

image.png

Sprint 4

과제: 피드백 받아 개선하기

</aside>