한화 시스템 부트 캠프 25주차 회고

정신차려 이 각박한 세상 속에서

 

안녕하세요 26주차에 수료를 앞두고 있는 예비 수료생입니다. (벌써)

이제 두 번의 회고 끝에 제 부트캠프가 마무리 되는데요 ,,, 믿기지는 않지만 믿어야 하는 현실입니다.

저는 채팅 기능과 AI 기능을 넣은 챗봇을 구현 했고, 이를 구현하기 위한 기술 선정에 많은 공을 쏟았습니다. (아마)

 

저번 24주차에는 N8N을 활용해서 어떤식으로 공부를 했는지에 대해서 말씀 드렸다면, 이번 25주차에는 저희 프로젝트에 어떻게 적용 했는지를 말씀 드리고자 합니다.

 

현재 챗봇 프론트까지 그려둔 상태라 매우 뿌듯한 ,, 상태입니다. 이에 대한 이야기는 밑에 비하인드 칸에 넣어두도록 하겠습니다.

끝까지 열심히 봐주세요~!! (화이팅)

 

---

 

N8N에 대해서는 앞서 설명 드린 적이 있는데요, 다시 한 번 말씀 드리자면

오픈 소스 워크플로우 자동화 도구로, 다양한 서비스를 연결하여 작업을 자동화할 수 있게 도와줍니다. 장점으로는 오픈 소스이기 때문에 누구나 직접 설치하고, 커스터마이징 할 수 있다는 점입니다.

 

- N8N 구성

 

한 페이지 내에서 작동할 수 있게 해뒀습니다.

서버에서 N8N으로 WebHook을 보내 해당 로직을 실행할 수 있습니다.

 

제가 구현하려고 하는 기능은 챗봇이기에 사용자와 실시간 소통처럼 보이게 해야 했습니다.

• 사용자 질문 전송 (WebSocket)
  사용자가 WebSocket을 통해 서버로 질문 메시지를 보냅니다.
• 서버 → N8N WebHook 호출 (POST 요청)
  서버는 받은 질문을 POST 방식으로 N8N의 WebHook에 전달하여 N8N이 해당 로직을 처리할 수 있도록 요청합니다.
• N8N → 서버 응답 (POST 요청)
  N8N은 로직을 처리한 후, 결과를 POST 방식으로 서버에 응답합니다.
• 서버 → 사용자 메시지 전송 (STOMP)
  서버는 N8N에서 받은 응답을 구독 중인 사용자에게 STOMP를 사용하여 WebSocket으로 전달합니다. 이를 통해 실시간 소통처럼 보이게 됩니다.

 

다음과 같은 방식을 사용 했습니다. 이렇게 되면 실시간 소통을 하는 것처럼 보일 수 있습니다.

 

위에 있는 귀여운 파란색 아이콘이 바로 챗봇 아이콘입니다.

 

모든 사용자들은 챗봇 기능을 가질 수 있습니다. 워크스페이스 내에서 사용하는 것이 아닌 어디서든 사용할 수 있도록 했습니다.

공지사항의 기능을 처음 화면에 띄울까 고민을 하다가 차라리 정말 챗봇의 기능처럼 대화 형식으로 처리하기 위해 Docs 기능을

추가하여 `안녕` 이라고 보냈을 때와 `공지사항` 이라고 말 했을 때의 답변을 받아오도록 처리 해 뒀습니다.

예쁘죠 헤헤 ,, 프론트 코드도 열심히 짰어요 ,,, (우울)

 

회의별 회의록 요약 기능 [날짜 or 회의 제목]
회의 자료 추천 [회의 제목]

 

현재 두 가지 기능을 넣어둔 상태입니다. OpenAI API를 쓰면 정말 ChatGPT를 쓰는 것처럼의 대답을 받아올 수 있지만

일정 관리를 해주는 협업툴 사이트에 굳이 필요할까? 싶었습니다.

 

사용자 DB에 접근하여 회의 내용을 가지고 와서 회의 자료를 Ai-Agent로 가서 Google에 직접 검색 해 해당 자료를 가지고 올 수 있도록 했습니다. 좀 더 정형화 된 답변을 얻어올 수 있게 서비스를 만들고자 했습니다.

 

 

사용자의 회의록 요약본을 받고, 질문을 한 사용자의 id와 chatBotId를 받아 병합하여 서버에 넘겨주면 내역 조회 또한 가능하니

두 가지를 한 번에 받아올 수 있도록 했습니다.

 

현재 백엔드 코드에서는 사용자가 보낸 메세지 안에 챗봇의 메세지도 받아올 수 있도록 한 번에 처리를 해뒀습니다.

그렇기에 created_At는 사용자가 보낸 시간이고, 챗봇의 대답이 오면 modified_at로 수정 된 시간이 받아온 시간이 되도록 했습니다.

 

그렇기에 프론트에서 내역을 조회할 때 한 번에 출력하는 것이 아닌, 분리를 해 줘야 했습니다.

처음에 분리를 하지 않고, 한 번에 받아오려고 하니 DB에 저장은 되지만, 둘 중 하나만 받아오게 되어

사용자의 메세지만 화면에 출력되고, 챗봇의 대답이 console.log에 찍혀도 화면에 그려지진 않았습니다.

 

또한 이 문제를 해결하고 나니 (아래에 해결 코드 있습니다,,,) 사용자인지 챗봇인지 구분이 안 되어 챗봇 프로필 사진을 받아오지 않는 상황이 발생하게 되었습니다.

 

 

해결 방법

1. 받아온 메세지를 if 문을 사용하여 구분하고, 시간 순으로 정렬하고,

onMounted(async () => {
  // 메시지 내역 불러오기
  await chatBotStore.loadBotMessages(userStore.user.value.idx);
  const messageList = chatBotStore.botMessageList?.result || [];
  messageList.forEach((msg) => {
    // 사용자
    if (msg.question) {
      messages.value.push({
        messageContents: msg.question,
        createdAt: msg.userQuestionAt,
        userId: msg.userId,
        isFromChatBot: false,
      });
    }
    // 챗봇
    if (msg.response) {
      messages.value.push({
        messageContents: msg.response,
        createdAt: msg.botResponseAt,
        userId: msg.userId,
        isFromChatBot: true,
      });
    }
  });
  // 메시지를 시간순으로 정렬
  messages.value = sortMessagesByCreatedAt(messages.value);

 

2. isFromChatBot 을 만들어서 사용자는 무조건 false로 보내주게 하고, 챗봇은 true로 보내주게 해서 isFromChatBot 이 true면 챗봇 이미지를 받아올 수 있도록 했습니다.

<div
    :class="[
      'message-container',
      isFromChatBot ? 'chatbot' : isOwnMessage ? 'own' : '',
    ]"
  >
    <img v-if="isFromChatBot" class="profile-pic" :src="space6" alt="profile" />

    <div class="message-content">
      <div class="message-bubble">
        <p
          v-html="
            message.messageContents.replace(/\n/g, '<br>') || 'No message'
            message.messageContents
              ? message.messageContents.replace(/\n/g, '<br>')
              : 'No message'
          "
        ></p>
      </div>

 

 

이렇게 고치고 나니 예쁜 화면을 볼 수 있습니다 ,,, 😂🥰 소중한 내 프론트

 

이렇게 맡은 주요 기능들은 끝이 났고, 다른 기능들을 손 보러 가도록 하겠습니다.! 감사합니다~!! 🥰

 

---

 

이제 6번의 출석을 하게 되면 제 부트캠프는 끝나게 됩니다. 솔직히 믿기지 않고, 짧은 시간 내에 너무 많은 것을 배웠기에

이걸 어떻게 다 내 것으로 만들지? 막막하기도 합니다. 하지만 이 마음은 부트캠프를 처음 시작 했을 때도 느꼈던 ,, 마음이기에

또 잘 이겨낼 수 있을 것이라고 확신합니다. 개발자로써의 첫번째 발걸음이 한화 시스템 부트캠프에서 할 수 있게 되어 매우 매우 다행이라고 생각합니다. 좋은 강사님과 매니저님, 멘토님, 동기들 그리고 그 안에 있는 팀원들까지 만나게 되어 여러가지 경험을 해볼 수 있었습니다. 이제 정말 마무리를 해야 하는 시간이기에 ,, 괜한 소리만 주절주절 쓰고 있는 것 같습니다.

 

감성에 젖어 ,, 전 회고록을 보고 왔는데

 

 

많이 노력했고 성장 했구나를 느낄 수 있었다. 저랬던 내가 ,, 이렇게 구현하고 있다니? 싶은 마음이 든다.

노력을 하면 결과가 다가오는구나 ,, 열심히 살아야겠다. 

 

오늘도 읽어주셔서 감사합니다 ~ ! 남은 한 주 열심히 살아보겠습니다 ! 화이팅 🧡

 

 

 

---

 

위에서 말 했던 오늘의 쿠키 쿠키 ,,

 

 

첫 번째 문제 ,,

 

첫 번째 문제 해결하고 두 번째 문제

 

그렇게 해결.

 

---

 

감사합니다 ~ !!!!