[회고] 유레카 부트캠프 프론트엔드 과정: 종합 프로젝트 SO:U+

 
3주 간 진행한 종합 프로젝트에 대한 회고를 해보고자 한다. 이번 프로젝트 주제는 프론트엔드 반 공통적으로 '상담 요약 서비스' 였다.
 

💼 FE Github

GitHub - Ureca3rd-FE/Trillion-FE: 종합프로젝트 1조 FE Repository입니다.

 

💼 BE Github

GitHub - Ureca3rd-FE/Trillion-BE: 종합프로젝트 1조 BE Repository입니다.

 

📌 주제

LG U+ 고객의 상담 내역을 요약하고, 용어 팝오버와 요약 기반 추가 질의 기능을 제공하여 상담 내용을 직관적으로 이해할 수 있도록 하는 상담 AI 요약 서비스
 

⚙️ 프론트엔드 기술스택

• React `^19.2.3`
• Next.js `^16.1.1`
• TypeScript `^5`
• Tailwind CSS `^4`
• Tanstack Query `^5.90.19`
  
  

⚙️ 백엔드 기술스택

• Java
• Spring Boot
• Gradle
• JPA
• mariaDB
• Docker
• JWT

 

💵 DB 설계

 
 

🏃🏻 유저 플로우차트

로그인	메인

 
 

🌆 피그마 - 디자인시스템 및 UI 구성

디자인 시스템

 
 

📮 API 문서

 
 

👾 내가 맡은 파트

▪︎ Jira 세팅 및 Github Actions를 통한 자동화 설정

이전 프로젝트에서는 Jira를 적극 활용하라는 지침이 떨어졌다. Jira의 사용은 난생 처음이었기 때문에 기초 세팅부터 자동화설정, github 연동까지 본인이 도맡아서 했다.
Jira 세팅을 위해 구글링을 했는데, UI와 용어가 계속해서 변화하는 것 같아서 맞는 것을 찾기에 정말 어려웠다.
Jira 세팅 및 Github Isuue 연동 과정은 아래 포스트에 자세히 기록해두었다.

[90일차] Jira 슬기롭게 사용하기

Jira 세팅은 어려웠으나, 일정 및 스프린트, 이슈를 관리하기에는 매우 편리했음을 느꼈다. 현업에서 왜 Jira를 사용하여 일정 관리를 하는지 깨닫게 되는 프로젝트였다.
 
정말 좋았던 점은 1. Github Issue와 Jira Issue 연동을 자동화해서 Issue를 통합해서 관리할 수 있다 와 2. 각자 할당된 작업량을 확인하고, 작업을 분배하기 수월하다 였다.
융합 프로젝트 때는 자동화 설정을 더 많이 해보고 싶다.
 
 

▪︎ 요약 리스트, 요약 상세 페이지 구현

상담 내역에서 '요약 시작' 버튼을 누르면, 요약 리스트로 redirect 되면서 요약 상태가 PENDING에서 COMPLETED 혹은 FAILED가 되면, 요약 카드가 실시간으로 업데이트되도록 구현하였다.
 
실시간 조회를 구현하기 위해 처음에는 polling을 사용하여 3초 동안 지속적으로 조회 API를 호출하도록 했었다. 그러나 polling (client에서 주기적으로 서버에게 event가 발생했는지 확인하는 방법) 방법은 요약 상태가 변경되기 전까지는 끊임없이 API가 일정 시간 간격으로 호출되기 때문에 불필요한 트래픽이 발생한다는 단점이 있다.
 
이러한 자원 낭비를 방지하기 위해 SSE 라는 방법을 알게 되었고, 실제 현업에서도 자주 사용한다는 것을 알게 되었다. 이에 관한 내용은 따로 작성하겠다.
SSE의 특징과 장단점을 따져보았을 때, 종합 프로젝트 규모나 개발 비용을 따져보았을 때, SSE를 사용하지 않을 이유가 없다고 판단하였다. 
 
실시간 조회 기능에서 Polling 방식을 SSE로 전환하여 불필요한 API 호출을 약 87.5% 감소시키고, 서버 및 네트워크 리소스 사용 효율을 개선하였다.

polling	SSE

 

💫 회고 

🌝 좋았던 점

 

▪︎ AI 활용한 첫 프로젝트
상담 요약이라는 주제 자체가 AI를 활용해야 돼서 처음으로 프로젝트에 AI를 도입했다. AI 구현 자체는 다른 팀원이 했지만, 어떤 구조로 프로젝트에 도입되고, 사용되는지 알게 되는 좋은 기회였다. 다음에는 AI 파트를 직접 맡아보게 되어도 좋은 경험이 될 것 같다.
 
▪︎ Jira의 성공적인 사용
이번 프로젝트에서 Jira를 처음으로 도입하여 일정 관리를 함으로써 역할 배분, 스프린트 점검 등 수기 기록 없이 Jira에서 한눈에 확인할 수 있어서 편했다. 물론 초기 세팅이 오래 걸리긴 했지만, DevOps에 대해서 조금이라도 알게 되는 계기가 되었다.
 
 

🌚 아쉬웠던 점

 

▪︎ 기획의 잦은 변동
이것은 우리 조만의 문제라기 보다는, 처음 주제를 받았을 때 세부 과업이 세세히 적혀 있지 않았고, mock data를 활용해야 했는데 mock data가 너무 늦게 나와서 생긴 문제였다. 이 부분은 정말 아쉽게 느껴진다. 처음엔 LG U+를 사용하는 소상공인을 위한 서비스를 개발하고자 하였는데, mock data를 받아보니 일반 고객을 위한 데이터여서 주제 자체를 바꿔야 했다. 이런저런 문제로 기획이 자주 변동되었지만, 이 또한 성장의 밑거름이 된 것 같다.
 
▪︎ 프론트엔드의 작은 규모
기간도 3주에다가, 실제 프로젝트를 시작한 지 1주가 지나서 기획이 대판 바뀌게 되면서 프론트엔드의 규모가 너무 작았던 것 같다. 또한 AI 요약 자체가 핵심 주제이다 보니, 페이지 수도 너무 적었고 기능적으로도 좀 적었던 것 같아서 개인적으로 조금 아쉽게 다가오는 것 같다.
 

---

마치며 ..

벌써 부트캠프의 2번째 프로젝트가 끝이 났다. 프로젝트 발표 때 실제 현직자 분이 오셔서 평가하고 코드리뷰부터 디자인 시스템 컬러 등 세세하게 리뷰를 해주셔서 도움이 많이 됐다. 특히 절대 경로 사용을 위해 '@'를 사용하는 부분에서 이제까지 나는 정말 경로 표시를 위해서 src 대용으로 사용을 했었다. 그러나 실제 현업에서는 분류하고자 하는 모듈을 잡고, @를 사용해야 한다고 해주신 부분에서 큰 깨달음을 얻었다. 
그리고 코드를 보시고 세세하게 피드백해주신 점에서 감동받았고, 존경스러워서 개발자가 된다면 꼭 저 분처럼 되고 싶다는 생각이 처음으로 들었다. 이 피드백을 바탕으로 융합 프로젝트 땐 더 발전한 모습을 보여드리고 싶다.