Post

[Jobby] 1차 완결 회고

Posted
By AI-chemist97
14 min read

오늘 목표

이 글은 Jobby 1차 버전의 마무리/회고 편이다.

여기까지:

  • React로 간단한 챗 UI를 만들고
  • Node.js + Express 서버에서 Dialogflow API와 통신하고
  • Dialogflow 인텐트들에 자기소개/전공/SSAFY/기술 스택/강점 등을 채워 넣어서
  • “데이터 직무 지원용 자기소개 챗봇” 1차 버전을 완성했다.

8편에서는:

  • 지금까지 만든 구조를 한 번에 정리하고
  • 각 단계에서 무엇을 배웠는지
  • 이 프로젝트가 데이터 직무 포트폴리오에 어떤 의미가 있는지 적어 본다.

1. Jobby 전체 구조 다시 한 번 정리

최종적으로 Jobby는 크게 세 부분으로 나뉜다.

  • 프론트엔드 (React)
    • client/src/Chat.jsx에서 입력창/버튼과 메시지 말풍선 UI를 담당한다.
    • 사용자가 질문을 입력하면 /api/dialogflow/textQuery로 POST 요청을 보내고,
      응답의 fulfillmentText를 포함한 답변을 화면에 쌓아 보여준다.
  • 백엔드 (Node.js + Express)
    • server/index.js에서 /, /health, /intro 같은 기본 라우트와
      POST /api/dialogflow/textQuery 라우트를 제공한다.
    • 이 라우트에서 dialogflowClient.js의 textQuery 함수를 호출해 Dialogflow detectIntent를 실행하고,
      그 결과를 { queryText, intent, fulfillmentText } 형태의 JSON으로 React에 돌려준다.
  • Dialogflow Agent (Jobby-Agent)
    • GCP 프로젝트/서비스 계정/JSON 키로 인증을 거친 뒤, 서버에서 API로 호출한다.
    • 인텐트들에는 “자기소개, SSAFY 프로젝트, 기술 스택, AI 활용 수준, 강점/공부 방향, 협업 스타일” 등
      면접용 질문과 그에 대한 답변을 미리 정의해 두었다.

이 구조 덕분에, 브라우저에서 입력한 한 줄이
“React → Express → Dialogflow → Express → React”를 거쳐 자연스럽게 왕복된다.

2. 기술적으로 얻은 것

이 프로젝트를 통해 한 번에 경험한 기술 포인트들을 정리해 보면:

  • 프론트엔드 쪽
    • React에서 useState로 입력값과 메시지 배열을 관리하는 방법.
    • 백엔드 REST API를 fetch로 호출하고, 응답 JSON을 받아 화면에 렌더링하는 패턴.
    • 간단한 말풍선 UI를 통해 “상태 → 화면”이 어떻게 연결되는지 감각을 잡았다.
    • 최종 버전에서는 Chat.css로 스타일을 분리하고, LLM(Gemini)의 제안을 참고해 말풍선/헤더/입력창 디자인을 정리했다.
  • 백엔드 쪽
    • Express로 기본 라우트를 만들고, express.json()으로 JSON 바디를 처리하는 방법.
    • POST /api/dialogflow/textQuery처럼 실제로 쓰이는 API 하나를 끝까지 설계·구현한 경험.
    • 에러가 났을 때 로그를 보고, 권한/IAM 문제나 dev.js 설정을 디버깅하는 흐름을 경험했다.
    • 개발 단계에서는 CORS를 풀어두고(localhost 허용), 나중에 배포 단계에서 origin을 좁히는 구조로 가져갈 계획이다.
  • 클라우드/챗봇 쪽
    • GCP에서 프로젝트/서비스 계정/JSON 키를 만들고, 외부 서버에서 인증해 사용하는 흐름.
    • Dialogflow Agent, 인텐트, Training phrases, Response 구조를 직접 설계해 본 경험.
    • 챗봇이 “사용자 입력 → 인텐트 매칭 → 준비된 답변”으로 동작한다는 걸 코드로 체험했다.

3. 데이터 직무 포트폴리오 관점에서 의미

Jobby는 “바로 모델을 학습시키는 데이터 분석 프로젝트”는 아니지만,
데이터 직무 입장에서 보면 여러 가지로 의미가 있다.

  • 서비스 위에 데이터를 얹을 수 있는 기반
    • 이미 대화 흐름이 React/Express/Dialogflow로 연결되어 있어서,
      대화 로그(질문/답변)를 수집하면 바로 “어떤 질문이 많이 나오는지, 어떤 답변을 개선해야 하는지” 같은 분석을 할 수 있다.
  • 클라우드 · API · 인증 이해
    • 실제 회사에서 데이터 팀이 일할 때도,
      REST API, 인증, 클라우드 리소스 구조를 이해하고 있으면 다른 팀과 협업이 훨씬 수월하다.
    • GCP + Dialogflow + Node.js 조합을 직접 만져 본 경험이 이런 부분에서 강점이 될 수 있다.
  • 문제를 쪼개서 끝까지 가져가는 근성
    • 환경 설정, 인증, API, UI, 콘텐츠까지 한 사이클을 “포기하지 않고 완주한 경험” 자체가 중요하다.
    • 기술 스택이 조금씩 바뀌어도, 이 흐름(문제 정의 → 작은 단계로 쪼개기 → 구현 → 회고)은 그대로 재사용할 수 있다.

4. 앞으로 확장해 볼 수 있는 방향들

1차 완결 상태에서, 나중에 시간이 나면 시도해 볼 수 있는 확장 아이디어:

  • 대화 로그 저장 + 간단한 통계
    • 서버에서 질문/답변을 DB나 파일로 기록하고
    • “가장 많이 나온 질문 TOP N”, “인텐트별 사용 횟수” 같은 간단한 통계를 만들어 볼 수 있다.
    • 이걸 React로 작은 대시보드 형태로 시각화하면, 데이터 포트폴리오 느낌이 더 강해진다.
  • 답변 콘텐츠 고도화
    • 지금은 Dialogflow에 고정 텍스트를 넣어두는 구조이지만,
    • 나중에는 서버에서 간단한 계산/조회 결과를 섞어서 더 동적인 답을 주도록 바꿔 볼 수 있다.
  • UI/UX 개선
    • 현재는 인라인 스타일 기반의 기본 UI라,
      나중에 Tailwind, MUI 같은 UI 라이브러리로 “좀 더 포트폴리오용 느낌”을 내볼 수도 있다.

5. 참고한 자료와 도구들

이번 Jobby 프로젝트는, 기존처럼 블로그/공식 문서를 직접 찾아 읽기보다 LLM을 “개발 파트너”로 두고 진행한 실험에 가깝다.
그래서 이 섹션에서는 “어떤 자료를 직접 봤는지”보다, “어떤 식으로 LLM과 협업했는지”에 초점을 맞춰 정리한다.

  • 설계·구현 아이디어 초안
    • Dialogflow 인텐트 구조, React–Express–Dialogflow를 어떻게 묶을지, CORS를 어떻게 풀고 .env를 어떻게 쓸지 같은 설계 초안은 GPT / Perplexity / Gemini에게 질문하고 받은 제안을 기반으로 잡았다.
    • 예를 들어 “자기소개 챗봇을 만들고 싶은데, 인텐트를 어떻게 나누면 좋을지”, “Vite + Express에서 CORS 에러를 어떻게 해결하는지”, “API 주소를 .env로 빼고 싶을 때 어떤 패턴이 좋은지” 같은 질문을 계속 던지면서 구조를 세웠다.
  • 코드 패턴과 에러 해결
    • React에서 useState로 상태를 관리하고, fetch로 백엔드 REST API를 호출하고, 응답 JSON을 화면에 렌더링하는 기본 패턴은 LLM이 보여준 예시 코드를 기준으로 시작했다.
    • CORS 에러, 폴더 구조 꼬임, Dialogflow 인증 문제처럼 실제로 막히는 지점마다 “이 에러 메시지가 의미하는 것”을 LLM에게 물어보고, 제안된 해결책을 적용해 보면서 하나씩 통과했다.
  • 챗 UI, 자동 스크롤, 말풍선 패턴
    • 채팅창 자동 스크롤, 좌우 말풍선 레이아웃, 입력창 UX 등 화면 구조 역시 “이런 느낌의 챗 UI를 만들고 싶다”고 설명하면 LLM이 코드를 제안해 주는 방식으로 만들었다.
    • 그 과정에서 useRef와 scrollIntoView/scrollTop = scrollHeight 같은 패턴을 익히고, 새 메시지가 추가될 때마다 자연스럽게 아래로 내려가는 흐름을 적용했다.
  • 디자인과 글쓰기 톤
    • 최종 UI는 “AI-chemist97이라는 닉네임 + 화학/AI 콘셉트 + 포트폴리오용 챗 UI” 조건을 LLM에게 설명하고, 헤더/말풍선/입력창 스타일, 색 조합, 로딩 애니메이션 아이디어를 제안받아 적용했다.
    • 블로그 1~8편의 구성과 문장 초안도, “이 단계를 어떻게 설명하면 좋을지”를 물어보면서 받은 답을 바탕으로, 과장되거나 실제 경험과 어긋나는 부분은 스스로 걸러내고 수정하는 식으로 정리했다.

정리하면, 이번 1차 버전에서는 공식 문서나 블로그를 직접 깊게 파기보다는, LLM이 찾아주는 정보와 예시를 바탕으로 “선택·수정·적용·완주”에 집중했다.
다음 단계에서는 여기서 익힌 패턴을 토대로, 작은 기능 단위만큼은 LLM 없이 직접 설계·구현해 보고, AI는 코드 리뷰·리팩토링에 더 가깝게 쓰는 방향으로 의존도를 줄여 나갈 계획이다.

오늘 실제로 한 작업 (로그)

  • Jobby 1~7편에서 만든 내용을 기준으로 전체 구조를 다시 정리했다.
  • React, Express, Dialogflow, GCP, SSAFY 경험을 한 프로젝트 안에서 연결해 본 의미를 돌아봤다.
  • 앞으로 Jobby를 데이터 직무 포트폴리오 쪽으로 확장할 때 시도해 볼 수 있는 아이디어(로그 수집, 통계, UI 개선)을 사용하며 메모하고 추후에 2차 개발을 해 볼 예정이다.
  • 또, Jobby를 만들면서 정리한 블로그 글(1~8편)은 스스로 복습할 때도, 다른 사람에게 ‘어떻게 배우고 일하는 타입인지’ 보여줄 수 있는 기록이 된다.
Portfolio, Jobby
Jobby
This post is licensed under CC BY 4.0 by the author.