서론
이번에 졸업 팀프로젝트에서 아르바이트생 관리를 돕는 사장님을 위한 서비스를 만들기로 했다.
서비스 주요 기능을 간단히 정리하자면 아래와 같다.
아르바이트생근무 일정 관리 -> 캘린더
아르바이트생 관련 서류 보관 -> 전자서명 및 암호화
근태 기록관리 -> GPS & wifi / QR
급여 계산
업무 진행사항 확인 -> 체크 리스트 & 푸시알림
서류관리나 일정 관리의 경우 PC가 더 편리성이 높다고 생각했고, 실시간 업무 진행사항과 근태 기록 관리 같은 경우 모바일이 편리성이 높다고 생각했다.
PC와 모바일 둘 다 필요하다.
하지만 우리 팀에게 주어진 시간은 단 3개월!!! (기획 포함), 웹과 앱 모두를 만들기엔 부족한 시간이라고 생각했다.
( 앱 개발을 경험해 본 팀원도 없었다... 백엔드 2명, 디자이너 1명, 그리고 프론트엔드(나)1명 )
그래서 프로젝트 개발 환경은 주로 경량화와 개발 속도에 집중하였다.
🍋 MangoBoss 프로젝트 프론트엔드 개발 환경 및 기술 스택 소개
알바 관리 자동화 플랫폼, MangoBoss의 프론트엔드 기술 아키텍처 및 개발 경험을 정리했습니다.
📌 프로젝트 개발 환경
| 항목 | 내용 |
|---|---|
| 언어 | TypeScript |
| 프레임워크 | React 19 |
| 빌드 도구 | Vite |
| 트랜스파일러 | SWC |
| 스타일링 | Tailwind CSS (v3.4) |
| 상태관리 | Zustand |
| 패키지 매니저 | pnpm |
| 코드 품질 도구 | ESLint + Prettier |
| 기타 | Vite PWA Plugin, FirebaseMessaging |
🚀 기술 스택 선택 이유
🔹 PWA로 개발하자!
이전 프로젝트 ajouevent.com에서 PWA를 직접 구축한 경험이 있던 나는,
이번 MangoBoss 프로젝트에도 PWA를 도입하는 것이 적합하다고 판단했다.
가장 중요한 점은 FCM과 연동되야하기 때문에 backgroud webpush를 받기 위해서는 PWA 환경을 선택해야했다
PWA는 특히 매장 밖에서도 알림을 받고, 웹앱처럼 설치해서 사용할 수 있기 때문에
"알바 관리 자동화"라는 서비스 목적과 매우 잘 맞는다.
🔹 Vite + SWC
이전에는 Webpack을 사용했지만, 프로젝트 크기가 커질수록 HMR 속도 저하와 빌드 시간 지연 문제가 있었다.
그래서 이번에는 Vite와 SWC 조합을 선택했다.
- Vite: 빠른 개발 서버, 최적화된 번들링
- SWC: Rust 기반의 초고속 트랜스파일러로
Babel보다 훨씬 빠름
이 조합 덕분에 실제로 로컬 개발 환경이 훨씬 쾌적해졌고,
yarn build 속도도 매우 만족스러웠다.
🔹 TypeScript
이전 프로젝트에서는 비교적 단순한 기능이 많아 JavaScript로 개발했었다.
하지만 이번 프로젝트에서는 급여 계산, 근태 관리, 계약서 자동화 등
정확한 데이터 구조와 안정성이 필요한 기능이 많았기 때문에
TypeScript를 도입해보기로 했다.
결과적으로:
- API 요청/응답 정의가 명확해졌고
- form validation이나 계산 로직에서 실수를 크게 줄일 수 있었다.
🔹 Zustand
Redux는 너무 무겁고 boilerplate가 많아, 더 가볍고 심플한 상태관리를 원했다.
그래서 선택한 게 바로 Zustand.
- 전역 상태 관리를 훨씬 간단하게 구성할 수 있고
- hook 기반으로 사용하기도 편하다
- 중복 렌더링 없이 selector로 성능 최적화도 가능
Zustand 덕분에 "알바생 스케줄 관리", "급여 입력 상태" 등 필요한 부분만 모듈화해서 관리할 수 있었다.
🔹 Tailwind CSS
디자이너와의 협업을 위해 일관된 UI 스타일 시스템이 필요했고,
무엇보다 컴포넌트마다 별도 CSS 파일 없이 빠르게 UI를 구성하고 싶었다.
Tailwind는:
- utility-first 스타일로 반복 작업이 줄고
- 디자이너가 제공한 디자인 시스템을 그대로 코드에 반영하기 쉬웠다
✅ 요약: 기술 선택 포인트
| 기술 | 이유 |
|---|---|
| Vite + SWC | 빠른 번들링 및 빌드 속도, 개발 환경 향상 |
| TypeScript | 타입 안정성 확보, 복잡한 로직에서의 안정성 증가 |
| Zustand | 간단한 API, 모듈화 쉬운 상태 관리 |
| TailwindCSS | 디자인 일관성 유지, 빠른 UI 작업 가능 |
| PWA | 알림 및 설치형 웹앱 기능, 알바 관리와 잘 어울림 |
🔄 CI/CD 파이프라인 구성
🛠 도구 스택
| 도구 | 역할 |
|---|---|
| GitHub Actions | 커밋 푸시 시 CI/CD 자동 실행 |
| Amazon S3 | 정적 파일 배포 (React 빌드 결과물) |
| CloudFront | CDN 및 HTTPS 제공 |
🌿 test / main 브랜치 전략으로 스테이징 & 운영 분리
이번 프로젝트에서는 test 브랜치와 main 브랜치를 분리하여
스테이징 / 운영 환경을 각각 구분해서 배포하도록 CI/CD 파이프라인을 구성했다.
🌱 test 브랜치
- 개발 중인 기능이나 UI 테스트를 위한 스테이징 환경
- 내부 QA 및 기능 확인용
- S3 버킷:
mangoboss-fe-test - CloudFront로 HTTPS 연결
🌳 main 브랜치
- 실제 서비스 운영을 위한 운영 환경
- 안정적인 코드만 머지됨
- S3 버킷:
mangoboss-fe - 사용자에게 제공되는 실제 서비스 URL
🔁 전체 배포 흐름
[ GitHub Push ]
↓
[ GitHub Actions ]
- 테스트 & 린트 실행
- Vite Build
- S3 업로드
- CloudFront 캐시 무효화
↓
[ 사용자 ]
- CloudFront 통해 빠르게 접근🔚 마무리
이번 MangoBoss 프로젝트는 기술적으로도 새로운 도전이 많았던 프로젝트이다.
기술 스택 하나하나를 신중히 선택했고, 덕분에 개발 효율도 높아지고 유지보수도 쉬워졌다.
이 글이 비슷한 고민을 하고 있는 프론트엔드 개발자 분들에게 도움이 되었으면 좋겠다 :)
실습
vite 공식 페이지에 있는 템플릿을 사용하여 간단하게 프로젝트 초기세팅을 해보겠다.
React + ts + swc 템프릿 사용하여 프로젝트 생성
yarn create vite (서비스 이름) --template react-swc-tspwa 플러그인 설치
yarn add -D vite-plugin-pwa PWA index.html 및 vite.config.ts 설정
https://vite-pwa-org.netlify.app/guide/
eslint + prettier
✅ 1. ESLint 관련 패키지 설치
yarn add -D eslint @eslint/js eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y eslint-plugin-react-refresh eslint-plugin-prettier eslint-config-prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser✅ 2. Prettier 관련 패키지 설치
yarn add -D prettier eslint-plugin-prettier eslint-config-prettier✅ 3. PostCSS 관련 (optional)
yarn add -D postcss autoprefixer✅ 4. eslint.config.js 및 prettier.c 설정
