💡 해결 방안: 클라우드로의 과감한 전환
사내 서버를 고집하는 대신, AWS Lightsail을 메인 서버로 채택하고 데이터를 외부에서도 접근 가능한 곳으로 옮기기로 했습니다.
Amazon Lightsail 로고
핵심 아이디어: "데이터의 탈출"
- AWS Lightsail: 안정적인 외부 접속 포인트 확보.
- S3 Bucket: 기존 엑셀 파일을 클라우드 저장소로 이전.
- Google Sheets API: 협업과 실시간 정산 확인을 위한 간이 DB로 활용.
🛠️ 주요 구현 기능: "사용자 경험(UX)에 집착하기"
단순히 기능만 옮기는 것이 아니라, 실제 사용자가 "와, 진짜 편하다"라고 느낄 수 있는 요소들을 채워 넣었습니다.
1. 점심조 제비뽑기: GSAP으로 구현한 역동성
단순한 텍스트 결과보다는 '뽑는 즐거움'을 주고 싶었습니다. **GSAP(GreenSock)**을 활용해 실제 카드가 섞이고 뒤집히는 듯한 애니메이션을 구현했습니다.
성능: 60fps의 부드러운 움직임 보장.
제어: JavaScript로 복잡한 타임라인을 정밀하게 제어.
실제 점심조 뽑기 화면
2. Google Sheets: 서버 없는 실시간 DB
P&C팀이 개발 지식 없이도 데이터를 관리할 수 있도록 Google Sheets API를 연동했습니다.
점심조 관리: 시트에 이름만 넣으면 결과가 앱과 실시간 동기화.
P&C 팀에서 관리하는 점심조 구글시트
자동 정산: 모든 직원의 잔액을 계산하여 초과 인원을 자동으로 하이라이트.
P&C 팀에서 관리하는 식대 정산 구글시트
3. FullCalendar & 공공데이터 API: 똑똑한 달력
매달 공휴일을 수동으로 입력하는 번거로움을 한국천문연구원 특일 정보 API로 해결했습니다.
근태 상태 표시: 🍙(정상), ⏱️(반차), 🏠(재택), 🌴(휴가) 아이콘 자동 매칭.
공휴일 자동 업데이트: API를 통해 누락된 공휴일을 엑셀에 자동 기입.
캘린더 화면
4. HammerJS: 모바일 퍼스트 제스처
모바일 사용성을 극대화하기 위해 터치 제스처를 도입했습니다.
- Swipe (좌/우): 달력의 이전 달, 다음 달 이동.
- Pan (드래그): 식대 내역을 오른쪽으로 밀어서 즉시 삭제.
Tip: 버튼을 누르는 것보다 스와이프로 삭제할 때 사용자의 '심리적 마찰'이 크게 줄어듭니다.
📊 엑셀 처리 라이브러리 비교: 왜 ExcelJS인가?
기존 엑셀의 복잡한 수식과 스타일을 유지하는 것이 핵심이었기에 두 라이브러리를 면밀히 비교했습니다.
| 항목 | ExcelJS | xlsx (SheetJS) |
|---|---|---|
| 스타일 유지 | ✅ 셀 색상, 테두리 완벽 보존 | ❌ 기본형은 스타일 초기화 |
| 수식 지원 | ✅ 엑셀 수식 그대로 활용 가능 | ⚠️ 제한적 |
| API 편의성 | ✅ 직관적이고 현대적인 방식 | ⚠️ 다소 복잡한 셀 주소 방식 |
결론: 기존 사내 엑셀 폼을 그대로 활용해야 했기에 ExcelJS가 압승이었습니다.
🏗️ 전체 시스템 아키텍처
AWS Lightsail을 중심으로 한 새로운 구조는 다음과 같습니다.
🚀 마치며: 위기는 곧 성장의 기회
사내망의 벽에 가로막혔을 때 클라우드로 눈을 돌린 것은 신의 한 수였습니다.
덕분에 외부 접속 문제 해결은 물론, Google API를 활용한 업무 자동화까지 이뤄낼 수 있었습니다.
기술적 제약이 올 때 그것을 "안 된다"고 포기하기보다,
"다른 길은 없을까?" 고민하는 과정에서 진짜 실력이 쌓인다는 것을 체감한 프로젝트였습니다.
다음 편 예고
이제 기능은 완성되었습니다! 하지만 매번 브라우저로 접속하긴 번거롭죠. 다음 편에서는 **PWA(Progressive Web App)**를 통해 앱처럼 설치하고 사용하는 방법과 보안 강화 과정을 다루겠습니다.
