✅ 단순한 장학금 신청 시스템에서 성장 기록 도구로
캡스톤 디자인 프로젝트의 시작은 간단했습니다
기존 불편했던 사이트를 전면 개편해서 학생들이 더 간편하게 마일리지를 확인하고 신청하게 하자!
이 목표로 ‘마일리지 장학금 시스템’이라는 이름의 웹서비스를 개발했습니다.
학생들은 기존보다 훨씬 직관적인 UI로 마일리지를 조회하고 장학금을 신청할 수 있게 되었습니다!
자세한 기존 사이트가 궁금하시다면? >> 🏆 마일리지 장학금 신청 서비스 개발기: 한달간의 성장 일지
이 시스템은 실제로 교내 서비스로 채택되어 3월 초 운영되었고 장학금 신청 기간 동안 약 520명이 사용해주셨습니다.
약 100명에게 만족도 조사를 진행한 결과 92%가 “개편된 사이트에 만족한다”라고 답해주었습니다.
프로젝트를 운영하면서 이제 학생들에게 더 제공할 수 있는 기능이 무엇이 있을까 고민이 생겼습니다.
단순히 마일리지를 보여주는 것을 넘어 학생 스스로의 성장을 ‘기록하고 돌아볼 수 있는 도구’가 된다면 어떨까?
이 고민 끝에 프로젝트의 방향을 ‘마일스톤’이라는 이름으로 재정의되었고 학생의 성장 여정을 기록하는 아래 기능들이 새롭게 추가되었습니다.
- 역량 기반 성장 모니터링 대시보드 강화
- 상장 및 수료증 아카이빙
- 프로젝트 기록 및 포트폴리오 저장
- 나의 프로필 관리 기능
하나씩 설명해드리겠습니다 !!
🧭 사용자 피드백에서 출발한 기능 확장
초기 운영을 마친 뒤, 약 100명의 사용자 대상으로 만족도 조사를 진행했습니다.
그중 반복적으로 등장한 피드백은 ‘역량 그래프’에 대한 이야기였습니다.
“5대 가치가 뭔지 잘 모르겠어요...”
“장학금은 상대평가인데 내 지표만 보여줘서 아쉬워요.”
이 피드백은 팀에게 중요한 인사이트를 주었습니다.
그래서 우리는 역량 그래프에 3가지 기능 개선 방향을 설정했습니다.
1. 비교 지표 도입
기존 그래프를 학생들이 자신의 역량을 같은 학기, 학년, 전공 학생들과 비교할 수 있도록 비교 그래프로 업그레이드 했습니다.
2. 가치 설명 추가
역량을 구성하는 ‘5대 가치’에 대한 개념을 설명하고 학생 스스로 부족한 영역을 인지할 수 있도록 안내를 추가했습니다.
3. 맞춤형 활동 추천
부족한 가치 영역에 대해 어떤 활동으로 보완할 수 있는지 추천 기능을 추가했습니다.
이 기능을 통해 학생이 자기주도적으로 역량을 관리할 수 있도록 도울 수 있습니다.
🗃️ 성장에 필요한 정보, 지금부터 기록하기
많은 공채가 올라오던 4월 많은 4학년 학생 그리고 저도 취업 준비를 하며 이력서를 쓰고 있었습니다.
그 과정에서 느낀 건
“수상내역과 프로젝트 경험을 정리해두지 않으면 기억이 흐릿해진다.” 라는 사실이었습니다.
또한 주변 취준생들에게 물어보니 저학년 때 받은 상장 기록이 없어서 수상 내역을 적지 못했다는 이야기도 들었습니다.
저 역시도 수상의 정확한 주관지나 발급일자를 기억하지 못해 낭패를 본 기억이 있었습니다.
그래서 우리는 다음 두 가지 아카이빙 기능을 제공하기로 했습니다.
🏅 수상내역 아카이빙
- 상장의 정확한 제목, 주관처, 발급일자 등은 제공하여 학생들이 이력서를 작성할 때 도움을 줄 수 있도록 했습니다.
- 특히 학교에서 주관하는 상장 데이터는 시스템과 연계되어 있어 저희가 제공할 수 있는 데이터 중 하나였습니다.
📁 프로젝트 기록 아카이빙
- 대부분 프로젝트가 끝나면 리드미조차 정리되지 않은 채 방치되었습니다.
((심지어 저도)) - 그래서 “내가 무엇을 했는가, 무엇을 배웠는가, 어떤 결과를 냈는가”를 성장 중심으로 기록할 수 있는 폼을 설계했습니다.
- 이 기능을 시작으로 마일스톤은 단순 저장이 아닌 “나만의 성장 포트폴리오”로 활용되는 것이 목표로 잡았습니다.
🎀 나의 프로필 기능
- 이렇게 작성한 데이터를 하나의 페이지로 보여주는 기능이었습니다.
- 아직 완벽하진 않았지만 사용자들에게 저희 마일스톤이 꿈꾸는 최종 단계가 포트폴리오 관리라는 걸 알려주고 싶어서
가장 작은 MVP 형태로 캡스톤 발표회에서 출시해 봤습니다. - 그리고 이 기능을 원하는 20명의 사용자에게만 먼저 제공하여 캡스톤 페스티벌에서 외부인이 간편한 큐알로 학생들의 이력서를 확인 할 수 있도록 제공했습니다.
💻 오래 남는 구조, 유지보수를 위한 리팩토링
진행 과정에서 한 가지 특별한 피드백이 있었습니다.
“이 시스템은 앞으로도 매 학기 계속 운영될 예정이야~ 유지보수 잘할 수 있도록 잘해봐” - 지도교수님
제가 졸업한 뒤에도 이 시스템이 계속 쓰인다는 이야기를 듣고, 기뻤고 또 걱정도 되었습니다.
누가 내 코드를 다 읽고 뜯어볼텐데 잘 이해할 수 있는 코드였나? 유지보수하기 좋은 코드로 잘 작성했나?
그러면서 기능 추가를 진행하다보니 기존 구조를 제대로 정비하면 좋을 거 같다고 생각이 들었습니다.
그래서 기능 작업에 앞서 기존 기능을 유지한 채, 도메인 기반 폴더 구조로 리팩토링을 진행했습니다.
🛠 왜 도메인 기반 구조였을까?
초기에는 기능 중심으로 폴더가 나뉘어 있었지만
기능이 늘어날수록 유지보수가 어렵고, 의도하지 않은 결합이 생기기 시작했습니다.
- 각 도메인의 데이터를 여러 컴포넌트에서 다루다 보니 상태가 흩어짐
- 기획과 설계가 바뀔 때마다 구조도 손을 봐야 하는 부담
이에 따라 도메인 중심으로 API, 상태, 컴포넌트를 정리한 결과
기능 추가나 수정이 훨씬 수월해졌고, 다음 개발자 입장에서도 이해하기 쉬운 코드 구조가 되었습니다.
더 자세한 글은 여기에 작성해봤습니다 >> 📦 React 프로젝트에서 도메인 중심 디렉터리 구조로 리팩터링 한 이유
📦 React 프로젝트에서 도메인 중심 디렉토리 구조로 리팩터링한 이유
마일리지 서비스가 마일스톤 서비스로 확장됨에 따라 ‘상장 아카이빙 기능’을 추가하게 되었습니다. 이 과정에서 기존의 역할 기반 디렉토리 구조로는 점점 확장성과 유지보수에 한계를 느
healim01.tistory.com
🏆 작은 성과들이 모아모아
이렇게 작업한 작업물을 캡스톤 발표회에서 부스를 준비하여 발표했습니다.
정말 많은 사람들이 와서 서비스에 대해 듣고 가고 피드백과 칭찬을 해주셨습니다.
특히 실제 3월에 운영을 했던 서비스이다 보니 사용자였던 분들이 오셔서 “장학금 기간에 너무 잘 썼다. 수고하셨다”라는 말 한마디 한마디가 그간 고생을 모두 잊게 해 주었던 거 같습니다.
또 새로 추가된 기능들을 보시면서 “이건 언제 출시되냐 출시되면 사용해보고 싶다”라고도 해주셔서 얼마나 기뻤는지 모릅니다.
많은 분들의 관심과 열심히 준비한 덕에 캡스톤 발표에서 ‘최우수상’과 ‘인기상’을 동시에 수상하게 되었습니다!
거기다가 준비 중 작성했던 KCC 논문에도 발탁되어 7월 초에 제주도 컨퍼런스에 초대되어 부스를 운영하기로 했습니다.
((내가 간다 제주도 ~ ))
그간 잠도 못 자면서 고민하고 개발한 결과물이 이렇게 나타나는 거 같습니다.
정말 늘 감사하고 또 이렇게 열심히 할 수 있는 에너지를 주심에 감사합니다.
🌱 회고: 내가 얻은 것과 남긴 것
이 프로젝트를 통해 다시 한 번 절실하게 느낀 것은"빠르게 실험하고 개선하는 과정", 그리고 "오래 유지될 수 있는 구조"의 중요성이었습니다.
사실 이 서비스는 2018년에 처음 만들어진 이후 최소 3번 이상 다른 팀에서 마이그레이션을 시도했지만 결국 모두 기존 서비스를 사용하는 상황이 이어지고 있었습니다. 물론 그들의 사정까지 정확히 알 수는 없지만 이번 프로젝트에서 다음의 과정을 끊임없이 반복했습니다.
문제를 정의하고 → 유저 플로우를 간단히 구체화하고 → 빠르게 구현하고 → 실제 운영 → 피드백 반영
이 과정을 여러 번 거치며 실제로 ‘사용되는 서비스’로 완성될 수 있었던 것 같습니다.
또한 저는 사용자 피드백을 반영하되, 기능 구현에만 치우치지 않고 전체 구조를 해치지 않는 방법을 배웠습니다.
그리고 무엇보다도, 사용자에게 어떤 경험을 줄 것인지에 대해 끊임없이 고민했습니다.
이번 프로젝트는 단순한 캡스톤 과제를 넘어 제가 개발자로서 어떤 관점을 가져야 하는지를 깊이 고민하게 해준 경험이었습니다.
덕분에 단순한 프론트엔드 개발자가 아니라 기획자이자 설계자, 사용자 경험을 설계하는 사람으로서 한 단계 성장할 수 있었습니다.
📌 앞으로의 마일스톤은?
아직 마일스톤 서비스는 끝나지 않았습니다!!
- 비교과 활동의 시각화를 더욱 직관적으로 개선하고
- 나의 데이터를 포트폴리오처럼 관리할 수 있는 기능을 고민하고 있습니다.
저희 팀은 마일스톤이 단순한 장학금 신청 시스템이 아니라 학생이 스스로의 역량을 인식하고 성장의 흐름을 돌아볼 수 있는 도구가 되기를 바랍니다. ((다들 많관부 ~~ ))
'개발자의 성장 도파민 기록' 카테고리의 다른 글
| 차근차근 자라고 있는 토스터부스, 운영 회고 (3) | 2025.06.15 |
|---|---|
| 📸 Safari에서 이미지가 누락된 채 다운로드되는 문제 해결기 (with html-to-image) (0) | 2025.04.22 |
| 🍞 Toaster Booth — 토스터기로 네 컷을 찍어보세요! (5) | 2025.04.14 |
| 📸 toaster: 네컷 사진이 사라졌다!? 새로고침을 견디는 상태 저장 여정 (1) | 2025.04.12 |
| 🥐 toaster: Rive를 사용해서 귀엽고 인터랙티브한 서비스 만들기 (5) | 2025.04.08 |