🏆 마일리지 장학금 신청 서비스 개발기: 한달간의 성장 일지

📋 프로젝트 개요

저희 학부의 마일리지 장학금 서비스는 학생들이 지난 학기의 마일리지 내역을 확인하고, 등록 후 장학금을 신청할 수 있도록 돕는 시스템입니다.

 

핵심은 간소화: 학생들이 번거롭지 않게 신청할 수 있는 환경을 구축하는 것이 목표였습니다.

특히 기간이 매우 중요했는데 학기 초 3월에 신청받아야 하는 프로젝트이다 보니 개발 시작이었던 2월에서 약 한 달의 기간 안에 작업해야하는 프로젝트였습니다.

 

🚀 개발 동기와 시작

오래된 시스템, 새롭게 재탄생하다

 

이 프로젝트의 출발은 그리 새롭지 않았습니다.

기존에는 PHP로 만들어진 구식 사이트가 운영되고 있었는데, 오래된 UI부터 사용하기 불편한 데다 유지보수도 어려운 상황이었습니다.

매년 캡스톤 팀들이 마이그레이션을 시도했지만 끝내 완성하지 못한 프로젝트였습니다.

 

교수님께서 이 프로젝트를 추천해주셨을 때, 제 머릿속에는 딱 하나의 생각이 스쳤습니다..

"또 이 프로젝트구나..."  하지만 그래도 이런 생각도 들었습니다.

"내가 이번에 꼭 완성시켜서 실제로 학생들이 사용할 수 있게 만들어야지!"라는 굳은 다짐으로 시작했습니다.

 

기존 사이트는 UI/UX 측면에서 개선이 절실했습니다. 사용자 친화적인 요소는 거의 없었고, 디자인적인 부분도 전혀 고려되지 않았습니다. 그래서 저는 "이번 프로젝트는 정말 예쁘고, 직관적이며, 기능적인 서비스를 만들겠다!"라는 목표를 세웠습니다. 기존 서비스를 모두 보여드리진 못하지만, 이전 사이트는 꽤 낡은 상태였다는 점을 감안해 주세요..! ((개발자들의 디자인..))

 

완전 이건 아니지만 대충 사실 비슷해요.. ㅋㅋㅋㅋ

 

💻 기술 스택과 개발 과정

이 프로젝트에서는 최신 기술 스택을 적극 활용해 개발을 진행했습니다. 단순한 기능을 넘어 사용자 경험을 최적화하는 데 초점을 맞췄습니다.

• 프론트엔드는 React와 TypeScript로 개발하여, 컴포넌트를 재사용 가능하게 만들고 유지보수성을 높였습니다. UI는 Emotion CSS와 MUI를 사용해 기본 스타일을 잡았고, 커스텀 컴포넌트도 만들어 사용자 친화적인 화면을 구성했습니다.
• 상태 관리는 TanStack Query와 Zustand를 활용해 데이터를 효율적으로 처리했고, 복잡한 데이터 흐름도 간단히 관리할 수 있었습니다.
• 데이터 시각화는 중요한 요소였죠. 학생들이 자신이 쌓은 마일리지를 직관적으로 볼 수 있도록 Nivo Chart를 도입해 역량 차트를 시각적으로 구현했습니다.
• 스토리북과 MSW(Mock Service Worker)를 도입해 컴포넌트를 독립적으로 개발하고 테스트하는 환경을 구축했습니다. 백엔드 개발과의 동기화를 위해 MSW를 사용해 API 에러 상황을 미리 시뮬레이션했고, 개발 중에도 실시간 반영이 가능하도록 liveStorage 기능을 추가로 활용했습니다.
  • msw 관련 글은 한번 따로 적어봤어요!  -> [msw 설정 과정 및 활용법 구경가기]

이렇게 최신 기술을 도입하면서도, 프로젝트의 목적은 단순했습니다. 사용자에게 더 나은 경험을 제공하고, 복잡했던 기존 서비스를 학생들이 쉽게 사용할 수 있도록 만드는 것. 그 목표를 달성하기 위해 UI/UX 디자인부터 상태 관리, 데이터 시각화까지 모든 과정에 신경 썼습니다.

 

🔑 주요 기능 소개

이 프로젝트에서 제가 가장 신경 쓴 부분은 학생들이 쉽게 정보를 확인하고, 신청 절차를 원활하게 진행할 수 있도록 하는 것이었습니다. 그 과정에서 구현한 주요 기능들을 소개해드릴게요.

 

• 대시보드
• 학생들이 가장 먼저 접하게 되는 화면인 대시보드는 역량 정보를 한눈에 보여주는 그래프와 장학금 신청과 관련된 공지사항을 제공하는 공간입니다. 여기에서 학생들은 본인이 쌓은 마일리지를 시각적으로 확인할 수 있고, 장학금 신청에 필요한 필수 정보를 바로 확인할 수 있도록 설계했습니다.

 

 

• 마일리지 조회
• 지난 학기 동안 받은 마일리지를 손쉽게 확인할 수 있도록 검색 및 필터 기능을 추가했습니다. 학생들이 누적된 마일리지 정보를 복잡하게 찾지 않고, 원하는 기간이나 조건에 맞춰 직관적으로 볼 수 있도록 작업했죠. 이를 통해 학생들이 스스로의 성취를 쉽게 파악할 수 있었습니다.

 

 

• 마일리지 등록
• 학교에서 자동으로 관리되지 않는 외부 대회나 자격증과 같은 항목들은 학생들이 직접 마일리지를 등록할 수 있도록 했습니다. 이름, 설명, 증명서 파일을 업로드할 수 있는 기능을 제공하여 개별적인 성과도 시스템에 반영되게 했죠.

 

 

• 장학금 신청
• 장학금 신청 페이지는 이번 학기의 장학금을 신청할 수 있는 곳입니다. 학생들은 신청 전에 본인의 마일리지 현황을 다시 한번 확인하고, 개인정보 동의 과정을 거친 후 장학금 신청을 완료할 수 있도록 흐름을 단순화했습니다. 이 기능은 절차도 간소화되고 직관적인 UI로 학생들이 장학금 신청 확인을 쉽게 할 수 있었습니다.

 

 

• 마이페이지
• 교내 Oauth를 활용해 학생들의 정보를 안전하게 인증하고, 이를 기반으로 마일리지 관련 데이터를 제공했습니다. 로그인부터 마일리지 확인까지의 과정이 매우 매끄럽게 이루어졌습니다.

 

• 로그인 페이지도 귀엽게~! 

 

 

 

• 기타 기능
• 또한 서비스 출시 이후 발생하는 에러를 빠르게 추적하기 위해 Sentry를 도입했고, 사용자 행동 분석을 위해 Amplitude를 추가해 더 나은 서비스를 제공할 수 있는 기반을 마련했습니다.
• 이 외에도 반응형 디자인을 적용하여 모바일에서도 최적의 사용자 경험을 제공할 수 있도록 했습니다.

머

 

 

🔍 추가 요구사항 반영 및 QA 진행

프로젝트가 클라이언트(학교)가 존재하는 서비스인 만큼 매주 미팅을 통해 추가 요구사항을 반영하는 작업이 있었습니다. 미팅 중 발생한 요구사항들을 바로바로 반영하면서 프로젝트의 방향성을 클라이언트와 지속적으로 맞췄죠.

 

또한 여러 차례 QA(품질 보증)를 진행하며 서비스의 안정성을 높였습니다. QA는 다양한 환경에서의 테스트를 포함해, 예상치 못한 사용자의 행동에도 서비스가 문제없이 작동할 수 있도록 했습니다.

 

QA 문서

 

 

🎯 사용자들의 반응과 성과

서비스 런칭 후 사용자들의 반응은 매우 긍정적이었습니다. 특히 클라이언트는 변경된 UI/UX와 간소화된 기능에 만족하셨습니다. 사용자가 더 편리하게 서비스를 사용할 수 있게 된 덕분에 약 300명의 학생들이 이미 장학금을 신청했고, 마감 기한인 31일까지 꾸준한 신청이 예상되고 있습니다. 프로젝트의 성과는 예상했던 것 이상이었습니다.

페이지 뷰가 무려 4.75K !!!

 

 

📚 배움과 앞으로의 성장 계획

이번 프로젝트를 통해 대규모 사용자와 클라이언트가 있는 서비스를 처음 경험하게 되었습니다.

특히 Sentry를 통한 빠른 에러 대응과 QA 과정에서 접한 다양한 에러 상황들이 저에게 많은 배움과 성장을 안겨주었습니다.

실제 사용자들이 사용하는 서비스의 개발, 유지보수를 경험하면서 기술적으로도, 커뮤니케이션적으로도 큰 성과를 거두었다고 생각합니다.

 

특히 이번 프로젝트는 제 캡스톤2 프로젝트로 저의 졸업 프로젝트인데요. 캡1 수강 이후 일년간 우테코를 다녀오며 프론트엔드에 대해서 몰입하여 공부할 시간이 있었습니다. 그러다보니 남들보다 일년 정도 졸업이 늦어지기는 했지만 이 프로젝트를 빠른 기간 안에 무사히 마치면서 전보다 성장했구나라고 느낄 수 있었습니다. 교수님들도 달라진 저의 모습에 열심히 했구나 인정도 해주셔서 그래도 내가 일년간 많이 커서 돌아왔구나.. 그 시간이 헛되지 않았구나 다시 한번 깨닫는 시간이 되었습니다. 

 

 

👋 마치며

이번 프로젝트는 그저 하나의 과제가 아니라, 제가 성장하는 과정이자 학생들에게 더 나은 서비스를 제공하기 위한 도전이었습니다.

2월 한 달간 몰입해서 프로젝트를 진행하면서 개발이 정말 재밌다고 다시 한번 느꼈던 거 같습니다. 특히 오랜 숙원이었던 이 프로젝트를 결국 잘 마무리해서 너무 뿌듯하고 후련한 마음일까요.. 

물론 아직 캡스톤이 아주 마무리 된 건 아니라서 더 성장할 기회가 남아있는거 같습니다. 

 

앞으로도 이런 실전 경험을 바탕으로 더 많은 도전을 이어가며, 사용자 중심의 서비스를 만들어가는 개발자로 성장해 나가고 싶습니다~!

 

 

 

‼️ 서비스가 궁금하시다면? 

서비스 링크 : http://walab.handong.edu/mileage/

한동대 전산전자 마일리지 시스템

 

서비스 프론트 깃허브 : https://github.com/HGU-WALAB/2025-mileage-front

GitHub - HGU-WALAB/2025-mileage-front: [25-01] SW전공자를 위한 마일리지 장학금 관리 시스템 프론트엔드