🥁 TEAM TRIUMERS 🥁

😎 곽윤경

😶‍🌫️ 김규린

🎸 이기연

😺 임원재

🐰 한소혜

---

📚 Tech Stack 📚

✨ Platforms & Languages ✨

🛠 Tools 🛠

🗓️ 전체 프로젝트 일정

2024.04.08 ~ 2024.04.17

---

1. 프로젝트 개요

🔗 프로젝트 개요

Newsnippet은 데일리 시사 상식 퀴즈 플랫폼으로 매일 최신 뉴스를 기반으로 자동으로 생성되는 문제들을 풀며 시사 상식을 습득할 수 있는 웹사이트입니다. 사용자들은 퀴즈를 풀고 결과를 확인하며, 해설을 통해 학습 효과를 높일 수 있습니다. 또한, 점수 시스템을 통해 학습 동기를 부여하며, 학습 기록과 통계를 통해 성장을 확인할 수 있습니다.

---

2. 프로젝트 문서

🔗 프로젝트 문서

---

3. UI

🔗 UI

---

4. CI/CD(빌드-배포)

🔗 CI/CD 빌드-배포

---

5. 회고

😎 곽윤경

프로젝트를 진행하면서 백엔드 개발 과정에서 Many-to-Many 등의 관계를 피하기 위해 DDL을 수정하고 논리 및 물리 모델링을 통해 테이블 정의를 명확히 한 후 작업을 시작했습니다. 처음부터 확실하게 정의하고 최대한 많은 경우의 수를 고려하며 진행한 것이 작업 속도를 높이는 데 도움이 되었고, 중간에 약간의 수정 사항이 있었지만 이를 유연하게 대처할 수 있었습니다. 개발 환경을 로컬에서 시작하여 공통 DB를 가진 서버로 이동하고, 최종적으로는 RDS로 연결하여 작업했기 때문에 yml 파일이 여러 번 변경되는 과정을 겪었습니다. 초기에는 더미 데이터를 직접 입력했지만, 점차 뉴스 크롤링과 GPT를 활용한 문제 생성 기능이 구현되면서 RDS 서버와 DB에서 크롤링된 문제들이 실제로 나오는 것을 보며 처음에 기획하면서 막연하게만 보였던 기능들이 실제로 동작하는 모습에 감탄했습니다.

프론트엔드 개발에서는 Vue.js를 사용하여 페이지를 구성하고 CSS와 필요한 기능들을 구현하는 데 주력했습니다. Vuex를 활용하여 로딩 창과 다크 모드를 구현하는 등 사용자 편의성을 고려한 작은 기능들도 세심하게 개발했습니다. 백엔드에서 잘 구현된 기능을 사용자에게 최대한 잘 표현하고 모든 기능을 이용할 수 있도록 UI 디자인에 많은 노력을 기울였습니다. 또한 퀴즈 풀이, 정답 여부와 해설 표시, 결과 화면을 하나의 Vue 파일에 구현하는 것은 쉽지 않았지만, 이를 통해 새로운 방법을 익힐 수 있었던 좋은 경험이었습니다. 여러 페이지를 만들고 프론트를 깊이 파보면서 예전 프로젝트보다 프론트에 좀 더 익숙해졌고 여러 세세한 기능들을 구현하는 것에 재미를 느끼기도 했습니다. 모르는 것을 더 배워가고 이를 직접 바로바로 적용해서 눈으로 확인할 수 있다는 것의 장점을 느끼기도 했습니다.

백엔드와의 연결은 이전 경험 덕분에 수월했지만, 매일 풀어야 하는 퀴즈 데이터를 한꺼번에 불러오는 방식이 퀴즈 수가 많아질 경우 로딩 시간이 길어질 것 같아 개선이 필요하다는 생각이 들었습니다. 퀴즈 데이터를 하나씩 불러오는 식으로 구현하고 프론트에서도 퀴즈를 하나씩 풀 때마다 바로 다음 문제를 가져올 수 있는 식으로 개선하려고 합니다. 이런 식으로 생각한 기능들이 많이 구현되었지만 더 구현해보고 싶은 기능들이 남아있고, 지금 있는 것들도 충분히 더 발전시키고 고도화를 시킬 수 있다고 생각하기 때문에 계속해서 이 프로젝트를 진행하면서 이 부분 또한 개선을 할 계획입니다. 또한 프로젝트를 진행하면서 앱으로의 발전 가능성을 생각해보게 되었고, 시연 시 다른 사람들이 문제를 풀고 난 후 등수 확인을 즐거워하는 모습을 보고 랭킹이나 리그와 관련된 기능 구현의 필요성을 느꼈습니다. 무엇보다 사용자 입장에서 가치 있고, 간편하게 이용할 수 있으며, 지속적으로 사용하고 싶은 서비스를 만드는 것이 중요하다는 점을 깨달았습니다.

팀원들과 함께 아이디어를 구현해나가는 과정이 즐거웠고, 서로의 의견을 존중하며 협업하는 경험을 통해 많은 것을 배울 수 있었습니다. 하고 싶은 것이 생기면 바로바로 의견을 공유하고 피드백을 서로 했고, 서로 어떤 부분을 맡고 있는지 수시로 공유했기 때문에 크게 막히는 일 없이 진행될 수 있었던 것 같습니다. 개인적으로 테스트할 때는 보이지 않았던 부분들이 다른 팀들과 서비스를 공유하면서 발견되기도 했고, 이를 통해 서비스를 더욱 발전시킬 수 있는 아이디어를 얻을 수 있었습니다. 생각했던 바를 실제로 구현하고 동작하는 것을 보는 것이 신기하고 뿌듯한 경험이었으며, 앞으로도 팀원들과 적극적으로 소통하면서 사용자 중심의 가치 있는 서비스를 만들기 위해 노력하고 싶습니다.

😶‍🌫️ 김규린

이 프로젝트를 마무리하면서, 프로젝트 과정을 돌아보니 기획하고 개발하는 과정이 신선하고 즐거웠다. 아이디어가 많은 팀원들과 대화하면서 내가 생각하지 못했던 것들을 알아갈 수 있는 시간들이어서 유익했다. 이전에는 해보지 않았던 새로운 도전들도 시도하면서 나에겐 많은 정보들을 흡수할 수 있는 과정들이었다.
이 프로젝트를 하기 전까지는 동적 크롤링인 selenium만 사용했었지만, 이번에 정적 크롤링인 trafilatura와 beautiful soup을 사용하면서 코드를 짜는 즐거움을 느꼈고, 특히 trafilatura라는 새로운 라이브러리를 사용하면서 코드의 직관적이고 간단함에 감탄을 느꼈던 순간이었다. 그리고 크롤링 한 데이터를 어떻게 하면 GPT 서버로 넘길 수 있을까에 대한 고민도 했었던 것 같다. 웹훅 서버 자체를 자동화 해서 뉴스 크롤링을 해서 GPT 서버로 이동하는 방법을 사용할까, 아니면 크롤링 서버를 자동화해서 GPT 서버로 이동하는 방법을 사용할까 고민을 하는 과정에서 두 가지 방법을 모두 시도해보았고 처음부터 쉽게 타파되는 법은 없었지만, 한 번도 경험하지 못한 순간들을 얻게 된 것 같았다.
조금 아쉬웠던 점은 처음 사용해보는 라이브러리와 jupyter 초기설정 등으로 인해 내가 하는 역할에만 몰입하다보니, 다른 팀원들의 역할에 대해서 많은 관심을 가지지 못했던 것 같다. 프로젝트 진행하면서 팀원들과의 소통 및 진행상황도를 수시로 체크해야 한다는 것을 명심하고 다음 프로젝트 진행할 때는 보완할 점을 생각하면서 해야 겠다. 또한 추후 고도화 하면서 크롤링 한 모든 데이터가 GPT서버로 넘어가는 것이 아닌 조건을 걸어서 많은 데이터가 넘어가지 않도록 디테일을 살려야 겠다는 생각을 했다.

🎸 이기연

'Newsnippet' 서비스에 대한 기획 과정부터 최종 서비스를 구현하는데까지 다양한 기술적인 시도를 할 수 있었습니다. 데이터 수집을 위한 크롤링, 서비스 개발 및 유지보수를 위해 적용한 CI/CD, Open AI API를 활용한 데이터 가공 등 각 경험들을 통해 앞으로 새로운 기술들을 배우고자하는 마음으로 나아가야겠다는 생각을 하게 되었습니다.

이번 프로젝트는 기능과 구현해야 할 항목을 명확하게 하기위해 요구사항을 먼저 정리하고 진행하였습니다. 이를통해 체계적인 프로젝트를 진행할 수 있었고, 팀원들이 서비스에 대해 수월하게 이해할 수 있었습니다. 먼저 방향성을 잡고 기준점을 정하는 것이 과업을 진행할 때 얼마나 중요한지 다시 느낄 수 있었습니다.

개인적으로 프로젝트에서 가장 크게 기여한 부분은 CI/CD입니다. Github Action을 통해 TDD 기반 개발을 할 수 있었으며 이전에 경험했던 프로젝트와 비교했을때, 원격 Repository를 관리하는 것이 보다 수월함을 느꼈습니다. 또한 Jenkins의 Pipeline을 통해 Docker에 자동 배포하는 것을 구축하는 과정에서 이슈 추적을 위해 해당 작업이 필요하겠다는 생각을 하게되었습니다. 처음에 설정하는 것들이 많아 까다로웠지만 추후 서비스를 개발하고 유지보수하는 과정에서 해당작업을 하길 잘했다는 생각을 할 것 같았습니다.

전반적인 프로젝트 관리와 CI/CD, 백엔드 개발을 진행하면서 알고리즘적으로 효율적인 코드를 구현하는 방법에 대해 깊이 있게 생각해보지 못한 부분이 아쉬웠습니다. 효율적인 코드를 연구하여 다음에 경험할 프로젝트에 적용할 수 있도록 개인적인 역량을 키워야겠다고 생각했습니다.

😺 임원재

이번 프로젝트를 통해 테스트코드의 고도화와 세세한 QA 리스트 준비 및 테스트 과정의 필요성을 절실히 느꼈다. 각자의 코드에 대한 테스트가 이루어진 상태로 프로젝트가 진행되었지만, 다들 기능 하나라도 추가적으로 구현하고 싶다보니 정작 통합 QA를 제대로 해보진 못했다. 그 상태로 시연을 하다보니 일부 버그가 발생하는 경우가 있었고, 라이브 도중 급하게 코드를 수정하게 되었다. 추후 개발 시에는 테스트할 목록을 좀 더 세세히 정리하고, QA 기간을 진행하도록 할 것이다. 이 때 Jenkins, Docker, GithubAction, 등 이번에 사용했던 CI/CD Tool 들을 좀 더 공부해보고 잘 적용할 수 있도록 할 것이다.

이번 프로젝트는 정말 해보고 싶은 것들을 정말 많이 구현해본 프로젝트였다. 뉴스 기사를 전처리하여 적절한 프롬프트를 만들어 OpenAI API에 보내고, 결과를 다시 적절하게 전처리하여 DB에 저장하는 과정, SpringSecurity를 이용해 UserRole까지 구현하여, 권한에 따라 프론트와 백에서 관리자 페이지에 대한 접근을 필터링하는 과정, AWS의 RDS와 EC2를 이용한 서버와 DB서버 구축, 인바운드 규칙 설정 등, 인프라를 구축해보는 과정, 등을 구현, 구축했다. 해보지 않았던 것들, 익숙치 않았던 것들을 찾아보며 구현하는 과정이 너무 즐겁고 행복한 시간이었다. 물론 이따금 잘 동작하지 않거나, 방법을 찾을 때 머리를 싸매며 힘들 때도 있었지만 그만큼 결국 해냈을 때, 더욱 즐거움을 얻을 수 있었다. 앞으로도 고이지 않고 계속해 발전할 수 있을 거라는 자신감을 얻을 수 있는 프로젝트였다.

🐰 한소혜

이번 프로젝트는 지난 프로젝트를 진행하며 경험했던 것을 토대로 백엔드와 프론트 모두를 구현해 볼 수 있었습니다. 처음 주제를 확정하는 시간이 오래 걸렸지만, 많이 고민했던 만큼 모두에게 필요하고 도움이 될 서비스를 주제로 진행할 수 있어서 의미 있었던 프로젝트였다고 생각합니다. 이번 프로젝트에서는 모두 jpa를 사용했기 때문에 N+1 문제가 발생하지 않기 위해 백엔드 코드를 작성할 때 고민했던 시간이었습니다. 또 원하는 문제를 insert 할 때 mapper 문제로 id 값까지 함께 할당되어 이전에 출제된 문제가 update 되는 문제, 퀴즈의 정답을 확인할 때 사용자의 답을 저장하지 않고 먼저 조회해 null값이 조회 되는 상황 등의 여러 이슈를 해결하며 문제가 발생했을 때 이를 해결한 방법 또한 기록으로 남겨 놓는 것이 좋겠다고 생각했습니다. 시연회 때 다양한 이슈들이 새롭게 발생하면서 미리 테스트하고 확인해보는 것, 비슷한 이슈가 발생했을 때 이를 참고할 수 있는 상황이 많을 수 있다는 것을 느꼈기 때문입니다.

CI/CD 적용을 위해 테스트 코드도 함께 작성하며 진행하게 되었는데, 여러 기능을 구현하는 것도 중요하지만 구현한 기능을 테스트함으로써 제대로 된 기능을 서비스하는 것도 굉장히 중요한 부분이라고 느끼게 되었습니다. 이번 프로젝트 때는 CI/CD 부분을 제대로 경험해 보지 못해서 아쉬웠지만 다음 프로젝트 때는 관련 내용을 더 공부해서 해당 부분을 제대로 경험해 보고 싶습니다. 짧은 기간이었지만 팀원들과의 소통 과정을 배워갈 수 있었고, 피드백을 통해 서로 발전할 수 있는 시간이라 좋았습니다. 또 짧은 만큼 프로젝트 규모가 크지 않아 하고 싶었던 기능들에 비해 구현한 기능이 많지는 않았지만, 반에서 자체적으로 진행했던 시연회를 통해 모두가 즐겁게 경험할 수 있는 서비스로서의 가능성을 보게 되었습니다. 앞으로 팀원들과 고도화를 통해 더욱 의미 있고 재밌는 서비스를 만들 수 있을 것 같아 기대됩니다.