[KT AIVLE] 7기 (AI트랙) - 4차 미니프로젝트 웹 서비스 제작(SpringBoot+React) 후기와 배운 점
프로젝트 목표
이번 미니 프로젝트는 Spring Boot와 React를 활용한 풀스택 웹 애플리케이션 개발을 목표로 진행되었습니다. 주요 학습 목표는 REST API 설계 및 구현, JPA를 이용한 데이터베이스 연동, 외부 API(OpenAI) 연동 경험이었습니다. 그 외에도 백엔드와 프론트엔드의 역할 분담 및 연동 이해, CRUD 기능의 완전한 구현, 기본적인 UI/UX 설계, Git을 활용한 협업 등의 역량을 함께 키우는 데 중점을 두었습니다.
프로젝트 진행 1일차
이번 프로젝트는 이전과 달리 8명이 한 팀을 이루어, 비교적 큰 규모로 진행되었습니다. 팀원 간의 협업과 역할 분담, 그리고 빠른 시간 안에 결과물을 만들어내야 한다는 압박감 속에서 프로젝트가 시작되었습니다.
첫날에는 전체적인 UI 스케치, ERD, API 명세를 각자 작성한 뒤 팀원들과 공유하였습니다. 발표를 들으며, 제가 만든 ERD나 API 문서가 너무 복잡하고 항목도 많다는 것을 깨달았습니다. GPT의 도움을 받아 작성하긴 했지만, 정확히 이해하지 못한 상태에서 만든 결과물이라는 점에서 스스로 반성하게 되었습니다.
그래도 UI 스케치는 제가 제출한 안으로 진행하기로 결정되어, 작은 기여라도 했다는 생각에 안도하였습니다. 역할 분담에서는 팀장이나 발표보다는 부담이 덜한 서기 역할을 맡았습니다. 노션에 회의 내용을 빠짐없이 정리하며 프로젝트의 흐름을 파악하려고 노력하였습니다. 아직 전체 구조나 개발 흐름이 익숙하지 않아서 더 집중해서 기록하고 이해하려는 마음이었습니다.
정말 아무것도 모른다는 생각에 민폐가 될까 봐 불안했고, 미안한 마음도 컸습니다. 그래서 UI라도 조금 더 다듬어보자는 마음으로 저녁에 수정을 해보았습니다. 백엔드는 아직 어렵게 느껴져 다루기 힘들 것 같아, 대신 리액트를 복습하고 MUI 관련 유튜브를 찾아보며 프론트엔드 준비를 하였습니다. 내일은 프론트엔드 쪽에 지원하여 화면 UI 수정 등이라도 맡아, 작게나마 기여할 수 있기를 바랐습니다.
프로젝트 진행 2일차
2일차에는 본격적인 프로그래밍 작업이 시작되었습니다. 오전에는 강사님의 프로젝트 개요 설명이 있었고, 이후 팀별로 줌을 통해 개발에 착수하였습니다. 프론트엔드와 백엔드 모두 실질적인 작업이 시작된 날이었습니다. 그동안 배운 내용을 실제로 적용해본 경험이 없었기에, 무엇을 어떻게 시작해야 할지 막막했습니다.
다행히 팀원들 중 몇몇 분이 사전에 작업을 준비해오셔서, 그분들의 도움으로 전체적인 작업 흐름이 잡히기 시작하였습니다. 어제 정한 ERD와 API 명세서를 바탕으로 백엔드는 본격적인 코드 작성을 시작하였고, 프론트엔드는 Vite 환경을 세팅한 후 컴포넌트 단위로 분업에 들어갔습니다. 저는 프론트엔드 팀에 참여하였고, 리더 분께 가장 단순한 작업을 부탁드려 상세 페이지 제작을 맡았습니다.
협업을 위해 GitHub에는 프론트엔드와 백엔드 폴더가 분리되어 업로드되었고, 본격적인 협업이 시작되었습니다. Git clone 사용하는 법조차 익숙하지 않아 눈치를 보며 도움을 요청하였지만, ‘모르는 건 물어보는 게 당연하다’는 마음으로 최대한 배우려 노력하였습니다.
점심 이후에는 정리된 API 명세와 UI 스케치를 바탕으로 GPT에게 상세 페이지 코드를 요청하였으나, 텍스트 출력만 되어야 할 부분에 입력창이 생기거나, 불필요한 로컬 이미지 업로드 버튼이 생성되는 등 원하는 결과와는 다소 달랐습니다.
그럼에도 불구하고 그 코드를 바탕으로 수정해보며 화면 구성을 마쳤고, 팀 회의 시간에 공유하며 취합 작업에 기여하였습니다. Git push 사용이 익숙지 않아 코드를 복사해서 전달하는 방식이었지만, 그것 또한 하나의 배움이었습니다.
이후 진행된 작업 분배에서는 검색 기능 추가, UI 수정, 모달 기능 구현 등이 있었고, 저는 그중 모달 팝업 구현을 맡게 되었습니다. 기존에는 라우터를 이용한 페이지 이동 방식이었지만, 사용자 편의성을 높이기 위해 모달로 변경하는 작업이었습니다.
주말 2일간
주말 동안에는 기존 프로젝트에 모달 기능을 적용해보았습니다. 기본적인 동작은 하였지만, 라우터 기능과 충돌하는 부분이 많아지면서 코드 변경 범위가 예상보다 커졌습니다. 특히 제가 익숙하지 않은 props를 활용하는 부분에서 예상치 못한 동작이 발생할 수 있다는 판단이 들어, 제가 메인 코드에 적용하기는 어렵다고 결론 내렸습니다.
결국 모달 적용은 보류하고, 남는 시간에는 리액트 게시판 홈페이지를 만드는 영상을 참고하여 개인적으로 프로젝트를 만들어보았습니다.
또한 React와 Spring Boot를 연동하는 방법에 대해 두 가지 방식으로 시도해보았습니다.
하나는 Gradle 빌드를 통해 React를 통합하여 하나의 프로젝트로 묶는 방식이었고, 다른 하나는 프론트엔드와 백엔드를 따로 구동하면서 CORS 설정을 통해 통신하는 방식이었습니다. 익숙하지 않던 부분들을 직접 시도해보며 연습할 수 있었고, 프로젝트에 직접 적용하진 못했지만 확실히 좋은 학습의 시간이었습니다.
프로젝트 진행 3일차
주말이 지나고 프로젝트 3일차가 되었을 때, 프론트엔드에서 Axios를 통해 백엔드 DB와 연동되는 CRUD 기능이 정상적으로 작동하는 것을 확인할 수 있었습니다. 초반에는 제가 사용하는 SQL 파일에서 한글 폰트 깨짐 문제가 발생해 GitHub에 업로드된 프로젝트에 오류가 있는 줄 알았지만, 전체적으로는 구조가 잘 짜여 있었고 정상 작동 중이었습니다.
또한 .env 파일은 파일명 앞에 점(.)을 붙여야 하며, 프론트엔드 폴더 하위에 위치해야 정상 적용된다는 것을 팀원들의 설명을 통해 배웠습니다. 작지만 중요한 설정들이라는 걸 실감했고, 이런 기초적인 부분부터 하나씩 익혀나가는 시간이 되었습니다.
기능 구현이 일정 수준 마무리되자 백엔드 팀은 발표용 PPT 제작에 착수하였고, 프론트엔드 팀은 UI/UX 개선 작업에 돌입하였습니다. 프론트엔드에서는 다음과 같은 작업들이 진행되었습니다:
- 모달 창을 통한 수정 기능 구현
- 마우스 커서 오버 시 수정/삭제 버튼이 노출되는 인터랙션 적용
- 이미지 생성을 위한 프롬프트 입력 개선 작업
특히 이미지 생성 부분에서는 단순히 사용자가 입력한 프롬프트를 바로 DALL·E에 전달하는 방식이 아닌, GPT를 통해 프롬프트를 먼저 다듬은 후 전달하는 방식으로 개선하였습니다. 이 작업은 제가 맡은 영역이었고, 리더는 모달 기능을, 다른 팀원은 수정/삭제 UI를 담당하였으며, 또 다른 한 분과 저는 GPT 프롬프트 개선을 함께 시도하였습니다.
이전에 진행했던 2차 미니 프로젝트에서 AI 에이전트를 구성했던 경험이 이 작업에 큰 도움이 되었습니다. GPT-4.1 mini를 활용해 입력 프롬프트를 수정·보완하자, 간단한 키워드 입력만으로도 원하는 이미지에 가까운 결과물을 얻을 수 있었습니다. 생성형 AI를 실전에서 활용해 팀 프로젝트의 완성도를 높이는 데 작게나마 기여할 수 있어 뿌듯했습니다.
한편, 백엔드 팀에서는 배포 전 설정 작업도 함께 진행되었습니다. 8080 포트를 사용하는 백엔드와 프론트엔드 빌드 파일을 하나로 통합해 실행할 수 있도록 gradle 설정을 수정하고, 최종 코드를 GitHub에 업로드하였습니다. 프로젝트가 마무리 단계에 접어들자 리더가 전체 코드를 취합하였고, 또 다른 팀원은 발표 준비를 담당하였습니다. 저는 이미지 생성 결과를 기반으로 PPT에 들어갈 시각 자료를 준비하며 마무리 작업에 참여하였습니다.
마무리
짧은 시간 동안 우당탕탕 진행된 프로젝트였지만, 실력 있는 팀원분들 덕분에 무사히 잘 마무리될 수 있었습니다. 부족한 실력으로 걱정도 많았고, 구현 하나하나가 버겁게 느껴질 때도 있었지만, 끝까지 함께 해준 팀원들 덕분에 자연스럽게 묻어가며 많이 배울 수 있었던 시간이었다고 생각합니다.
발표 당일, 프로그램 개발로 바쁘셨을 텐데도 불구하고 담당해주신 팀원분의 발표가 너무나도 깔끔하고 인상 깊었습니다. 다른 조와의 차별성을 강조해준 모달 기능을 통한 UI/UX 편의성도 우리 팀의 큰 강점으로 느껴졌습니다.
다른 조의 발표도 흥미로웠습니다. 간단한 로그인 기능, 조회수 및 추천수 구현 등 각 조마다 다른 방식으로 프로젝트를 확장해나가는 모습을 보며 다양한 방향성에 대해 생각해볼 수 있었습니다.
프로젝트가 끝난 후, 작업이 끝난 다른 조의 GitHub와 Notion에 기록된 회의록과 산출물들을 둘러보며 정리의 중요성을 다시 한번 느꼈습니다. 저도 이번 프로젝트에서 서기 역할을 맡아 회의록을 작성하였고, 기술 스택, 개발 환경, 구현 기능 등 문서화에 신경 쓰며 작업해보았던 부분에 대해서는 정리하여, 추후의 프로젝트에서는 도움이 될 것이라 생각합니다.
처음에는 상세 페이지 하나도 구현하지 못할까봐 걱정이 많았지만, 프로젝트 흐름을 따라가면서 점점 구조가 보이기 시작하였고, 무엇보다 팀원들의 도움 속에서 하나씩 익숙해질 수 있었습니다. 여전히 부족한 점은 많지만, 그만큼 배우는 입장에서 기록하고, 질문하고, 시도하는 자세를 유지하며 성장하고 있다는 걸 느낄 수 있었습니다.
개인적으로 배운 점
이번 프로젝트는 완성된 결과물 속에 작은 역할이라도 제 손이 닿았다는 점에서 큰 의미가 있었습니다. 단순히 이론이 아닌, 실제 개발의 흐름과 팀 협업의 리듬을 몸으로 느끼며, 현업과 유사한 개발 환경과 역할 분담에 대해 많은 것을 배웠습니다.
실무 감각을 높여준 기술 경험
- GitHub 협업 워크플로우
저장소 클론, 브랜치 분기, 로컬 수정, 커밋, 푸시까지 기본적인 Git 사용법을 실전으로 익혔습니다. - 프론트/백엔드의 역할 이해
각자의 작업 범위와 협업 시 유의할 점을 체득하면서 전체적인 개발 흐름을 더 잘 이해하게 되었습니다. - React UI 개발 경험
기능 추가와 라우팅, 상태 관리 등을 직접 구현해보며 사용자 인터페이스 개발 역량을 키웠습니다. - 모달 기반 UI 구조 개선 시도
기존 페이지 전환 방식 대신 모달 팝업 UI를 구현하면서, 구조 변경에 따른 코드 영향 범위와 사용자 경험 개선 가능성을 경험했습니다. - Spring Boot & React 환경 설정
Spring Initializr로 백엔드 생성, Vite로 프론트엔드 속도 개선, build.gradle 수정 등을 통해 개발 환경을 직접 구성해보았습니다. - CORS 문제 해결 경험
백엔드와 프론트 간 API 연동 시 발생하는 CORS 문제의 원인과 해결 방법을 학습했습니다. - AI 이미지 생성 API 연동
GPT를 활용한 프롬프트 개선 → DALL·E 이미지 생성 → React에서 결과 렌더링까지 전체 흐름을 구현해보며 생성형 AI의 가능성을 체험했습니다.
아직 부족하거나 더 배우고 싶은 점
- 데이터 모델링과 통신 설계
ERD 설계와 API 구조화에 대한 이해가 부족하다고 느껴, 실전 예제를 더 살펴볼 계획입니다. - Git 고급 사용법
아직 익숙하지 않은 Pull, Push, Merge, Rebase 등에 대해 반복 학습이 필요하다고 느꼈습니다. - 백엔드 로직 구조 이해
컨트롤러, 서비스, 레포지토리 등 각 레이어의 역할과 흐름을 좀 더 명확히 이해하고자 복습 중입니다. - 배포 및 환경 설정 자동화
실제 운영 환경 배포까지 연결해보지 못한 점이 아쉬워, CI/CD 등 자동화 프로세스를 추후 학습하고자 합니다. - 전체 데이터 흐름 추적 능력
프론트 요청 → 백엔드 처리 → DB 연동 → 응답 반환까지의 흐름을 확실히 잡기 위해 반복 연습이 필요합니다. - 코드 품질 관리 및 테스트
단위 테스트 및 통합 테스트 작성법을 학습하고, 작성한 코드의 안정성과 유지보수성을 높이고자 합니다.
이번 프로젝트는 단순한 기능 구현을 넘어, 실제 서비스 구현과 팀 협업, 그리고 AI 기술 접목에 대한 실전 경험을 쌓을 수 있는 좋은 기회였습니다. 앞으로는 이 경험을 바탕으로 더욱 심화된 기술을 학습하고, 보다 능동적으로 팀에 기여할 수 있는 개발자가 되고자 합니다. 🥰
처음의 마음을 기억하며
비교하지 말고, 욕심내지 말고, 지금 해야 할 일을 하자.