Vanilla JS와 localStorage 기반의 로컬 전용 출석 관리 웹 앱 'Attendly' 개발기
🤖 AI 추천
본 콘텐츠는 프레임워크 없이 순수 Vanilla JS와 브라우저 localStorage만을 활용하여 독립적인 출석 관리 시스템을 구축하고자 하는 프론트엔드 개발자, 웹 앱 개발자, 또는 임베디드 개발자에게 유용합니다. 특히, 클라우드 서버 없이 로컬 환경에서 데이터를 관리하고 싶거나, 간소화된 백오피스 솔루션을 직접 구현해보고 싶은 개발자에게 추천합니다.
🔖 주요 키워드

핵심 기술: Vanilla JS와 브라우저의 localStorage
를 사용하여 서버 없이 독립적으로 작동하는 로컬 전용 출석 관리 웹 애플리케이션 'Attendly'를 개발한 경험을 공유합니다. 운영 효율성과 사용자 편의성을 동시에 고려한 점이 특징입니다.
기술적 세부사항:
* 프로젝트 개요: 소규모 공방(도자기 공방 '무릇')의 수기 출석 및 결제 관리의 번거로움을 해소하기 위한 웹 기반 시스템 개발.
* 핵심 기능: 수강생 셀프 체크인, 자동 잔여 횟수 차감, 출석 및 결제 내역 연동, 회원 관리, 월별 출석 현황 달력 보기, 데이터 백업/복원 (JSON/CSV).
* 기술 스택: Vanilla JS, HTML, CSS, Browser localStorage
.
* 아키텍처: 완전한 로컬 기반으로 서버 없이 작동하며, 모든 데이터는 localStorage
의 mooroot_db_v4
키에 JSON 형태로 저장됩니다.
* UI/UX 디자인: 짙은 톤의 미니멀 UI, 페이지별 다른 질감의 배경 이미지, 직관적인 모달창(상황별 구분), Noto Sans KR 폰트, blur + shadow
중심의 버튼/알림 디자인.
* 배포: index.html
파일 더블 클릭으로 작동하는 간편한 배포 방식.
* 커스터마이징: 로고, 배경 이미지, 문구, 결제 기준 단위, 테마 색상 등 공방 특화 커스터마이징 가능.
개발 임팩트: 서버 구축 및 별도 배포 과정 없이 웹 브라우저만으로 즉시 사용 가능한 간편한 출석 관리 시스템을 구축할 수 있습니다. 소규모 사업장의 관리 효율성을 크게 향상시키고, 데이터 관리의 독립성을 확보할 수 있습니다.
커뮤니티 반응: (언급 없음)
톤앤매너: 개발자의 실무 경험을 바탕으로, 기술적 선택과 구현 과정을 상세하고 객관적으로 설명합니다.