1. 스켈레톤 프로젝트?
약 한 달간 진행된 웹 인터페이스 구축 프론트엔드 개발 교육이 끝나고, 4월 7일(월)부터 11일(금)까지 '스켈레톤 프로젝트'를 진행했습니다.
이 프로젝트는 최종 프로젝트에 앞서 가볍게 팀 단위 협업을 경험해볼 수 있도록 설계된 활동으로,
짧은 기간이지만 서로 소통하며 협업과 실습을 즐기고, 의미 있는 시간을 만들어가는 것이 목적이었습니다. 😊
이번 팀 프로젝트는 완전 랜덤으로 팀을 구성한 뒤, 팀장도 자유롭게 선출하는 방식이었는데요,
저는 총 5명으로 구성된 팀에서 팀장을 맡아 진행하게 되었습니다! 🤗
2. 주제 소개
금융권 부트캠프인만큼 프로젝트의 주제는 공통으로 '가계부 서비스 앱'입니다.
프로젝트 목표는 '실제 서비스 개발 과정을 경험하며 프로그래밍 능력 향상, 협업 및 버전 관리 역량 강화, 파이널 프로젝트 준비를 위한 실습'이라고 할 수 있습니다.
사용 기술 스택이나 기본 화면 레이아웃 같은 경우에는 가이드라인으로 제공을 해주셨고, 추가적인 기술이나 기능은 팀에서 협의를 통해 결정하는 방향이었습니다.
그래서 저희 팀이 정한 주요 기능 (요구 기능 명세서)는!
| 구분(페이지) | 기능명 | 설명 | 우선순위 |
|---|---|---|---|
| 메인 대시보드(홈) | 최근 거래 내역 요약 | 달력 / 날짜 선택시, 상세 내역 보이기(수정 가능) | 필수 |
| 빠른 추가 버튼을 통한 새 거래 등록 | 고정 수입 / 지출 데이터 기반으로 빠른 추가 버튼 누르면 바로 입력되도록(세부 페이지에서 수정 가능) | 필수 | |
| 소비 리포트 | 월별 수입 및 지출 요약 | 소비 리포트(차트–교차꺾은선그래프, 파이차트) | 필수 |
| 거래 목록(리스트) | 거래 내역 전체 보기 | 오늘 기준으로 과거의 기록을 순서대로 보여줌(최신이 맨 위) | 필수 |
| 기간별, 카테고리별 필터링 기능 | 필터 바: 날짜 및 카테고리별로 거래를 필터링할 수 있는 옵션 | 필수 | |
| 거래 등록 및 수정(세부 페이지) | 새로운 거래 추가 | 거래명, 날짜, 금액, 카테고리-미분류 디폴트, 메모-옵션 - 추가 버튼: 입력된 정보 저장/업데이트 - 취소 버튼: 입력을 취소하고 이전 화면으로 돌아감 | 필수 |
| 각 거래에 대한 세부 정보 보기 및 수정, 삭제 | - 거래 목록: 각 거래의 날짜, 카테고리, 금액, 거래명, 메모가 표시됨 - 수정 및 삭제 옵션: 각 거래를 클릭하면 수정 가능(삭제, 취소 버튼 제공) | 필수 | |
| 설정 및 프로필 관리 | 사용자 설정 변경 | - 카테고리 기본값 설정 - 고정 수입 / 지출 데이터 추가(반복 옵션) → alert (서버가 따로 필요하면 알림은 toast message로 대체) | 필수 |
| 프로필 정보 관리 | 이름 수정 | 필수 |
일주일도 채 되지 않는 짧은 기간이었기에 우선순위가 높은 핵심 기능부터 구현하는 데 집중했습니다.
그 외 추가로 넣고 싶었던 기능들은 각자 평소에 자주 사용하는 가계부 앱을 벤치마킹하며 아이디어를 얻어, 별도로 정리해두었습니다.
개발에는 수업 시간에 배운 기술 스택을 적극 활용했습니다.
vue, axios, pinia, json-server를 기반으로 프론트엔드와 백엔드를 간단히 구성했고,
Figma, GitHub, Notion을 협업 도구로 사용하여 디자인, 일정, 이슈를 함께 관리했습니다.
3. Vue 기반 반응형 가계부 웹앱 '내돈내쓴'
내 돈 내가 쓴 기록, 내돈내쓴
'고정 지출부터 소비 리포트까지, 한눈에 관리하고 빠르게 기록하는 스마트 반응형 가계부 웹 애플리케이션'
저희 프로젝트에서는 웹과 모바일 모두를 고려한 반응형 디자인을 적용했습니다.
기본 레이아웃은 유지하되, 화면 크기에 따라 버튼 크기나 요소 배치가 유동적으로 조정되도록 구현했어요.
어떤 디바이스에서도 편리하게 사용할 수 있도록 사용자 경험을 세심하게 고려했습니다.
사용자 입장에서 꼭 필요하다고 생각한 기능들을 하나하나 담아낸 결과,
‘내돈내쓴’은 반복적인 입력은 줄이고, 필요한 정보는 한눈에 확인할 수 있는
실용적인 가계부 서비스로 완성됐습니다.
그렇게 담은 '내돈내쓴'의 다양한 기능들 중,
• 📅 예정 거래 알림: 고정 수입/지출 데이터를 기반으로, 오늘 예정된 거래를 자동으로 알려주는 알림 기능
• ➕ 빠른 추가 기능: 버튼 한 번으로 거래를 손쉽게 등록할 수 있는 편의 기능
이 두 가지는 특히 사용자의 행동 패턴을 고려해 반복 작업을 줄이고,
소비 관리를 더 스마트하게 할 수 있도록 기획 단계부터 차별화한 부분입니다.
이번 포스트에서는 모바일(Web App) 화면을 중심으로 기능들을 소개드릴게요 :)
웹 환경에서도 동일한 사용성을 제공하니, 어떤 화면에서도 편하게 사용할 수 있어요!
1️⃣ 예정 거래 알림 - 고정 지출/수입 데이터를 기반으로 오늘 예정 거래 알림
2️⃣ 홈 - 캘린더를 통한 날짜별 데이터 보기, 버튼으로 수정 화면 연결
3️⃣ 빠른추가 - 빠른 추가 기능을 통해 한 번의 클릭으로 거래 추가까지 바로 가능
4️⃣ 기본추가 - 플로팅 버튼으로 어느 페이지에서든 추가 화면으로 이동 가능
5️⃣ 거래목록 - 날짜별 거래목록을 리스트로 보기
6️⃣ 필터 - 다양한 수입/지출, 카테고리, 기간 필터 기능
7️⃣ 소비리포트 - 데이터 기반 차트 생성 및 요약 제공
8️⃣ 설정 및 프로필 관리 - 이름 수정, 카테고리 기본값, 고정 수입/지출 수정
4. 개발 스택 및 구조
짧은 기간 동안 빠르게 개발을 진행해야 했던 만큼, 초기에 개발 환경을 정리하고 팀원 간의 공통 구조를 명확히 하는 것이 특히 중요했습니다.
본격적인 개발에 앞서, 먼저 프로젝트의 전반적인 파일 구조를 설계해
페이지, 컴포넌트, 스타일 파일 간 충돌 없이 깔끔하게 관리할 수 있는 기반을 마련했습니다.
이건 저희 서비스의 ERD(Entity-Relationship Diagram)입니다.
db.json을 기반으로 사용자, 카테고리, 거래내역, 빠른 추가 옵션 등의 데이터를 구조화하여 구성했습니다.
다음으로, 컴포넌트 트리입니다.
이와 같은 구조로 컴포넌트와 페이지를 분리하여 유지보수가 쉽고 확장 가능한 구조로 만들었습니다.
재사용성과 일관성도 중요하게 생각했습니다.
헤더, 버튼, 입력창 등 다양한 곳에서 반복되는 UI 요소는 공통 컴포넌트로 분리했고, 폰트와 컬러도 사전에 정의해서 전체적인 디자인 톤을 통일시켰습니다.
이런 세팅 덕분에 각자 작업하면서도 전체 흐름을 맞춰가는 데 훨씬 수월했어요.
그리고 빠른 협업을 위해 GitHub를 적극 활용했습니다.
커밋 메시지 컨벤션과 Issue, PR 템플릿을 설정하고, 필요한 라벨(feat / fix / style 등)을 만들어 한눈에 어떤 이슈를 해결했는지 알아볼 수 있게 했습니다.
5. 후기
이번 프로젝트는 KB IT’s Your Life 6기 교육 과정 중 처음으로 진행된 팀 프로젝트였고,
웹 기반으로 협업하며 서비스 하나를 처음부터 함께 만들어 본 소중한 경험이었습니다.
그동안 앱 중심의 개발 경험이 많았던 저에게
이번 스켈레톤 프로젝트는 웹에서의 화면 구성, 반응형 설계, 상태 관리 등
프론트엔드 개발자로서의 새로운 시야를 열어준 기회였어요.
기능 하나, 화면 하나씩 만들어 나가면서 테스트 해보는 과정도 재미있었고, 커스텀된 웹 화면을 보면 뿌듯하기도 했습니다.
(노트북 화면 얼룩 닦아주고 싶다 🥺 ....)
짧은 시간 안에 기획부터 구현, 배포까지 마치며 어떤 기능을 왜 넣을지, 어떻게 구현할지,
그리고 누구를 위한 서비스로 만들지에 대해 팀원들과 함께 끝없이 고민했던 과정이
무척 값지고 재밌었습니다.
또한 팀장 역할을 맡아 프로젝트의 전반적인 흐름을 조율하며, 협업에서의 소통 능력과 책임감, 그리고 발표 경험까지 함께 쌓을 수 있었습니다.
물론 이번에는 웹 프론트엔드 위주로만 구현된 프로젝트였지만,
다음 최종 프로젝트에서는 이번 경험을 바탕으로 백엔드까지 직접 구현하고, 더 정리된 구조와 기능을 가진 서비스로 완성해보고 싶습니다.
한 번 해봤기에, 다음은 더 잘할 수 있을 거라는 자신감도 생겼고 이번 프로젝트가 그 발판이 되어줄 거라 생각해요.
"DB 구조도 짜보고 깃허브로 작업을 잘 분담하면서 대기업에서 일 한다는 느낌도 받고 많이 배웠습니다. 좋은 경험이었어요!" 라는 팀원의 후기처럼,
짧은 시간이었지만 진심을 다해 협업한 팀원들과의 경험은 저에게도 오래 기억에 남을 소중한 시간이었습니다.😊
