[1009] 돈 벌기

2025.10.09 · 일기

Attendly

친구가 창업한 도자기 공방 무릇(@mooroot__)에서 사용할 출석 관리 시스템을 웹 기반으로 만들어달라는 요청을 받았다.

처음에는 “출석부만 체크하면 되는 단순한 웹페이지겠지”라고 생각했는데, 막상 작업을 시작하니 운영 효율과 사용 편의성을 동시에 잡아야 했다.

게다가 당근에서 오만원이면 구할 수 있는 구형맥에서 구동이 되어야해서 구버전의 브라우저를 지원해야하는 조건도 있었다.

공방에 음악을 틀어놓는 용도로 비치해둔 구형 아이맥으로 지금은 수기로 작성하고 있는 출석 체크 또한 하고 싶은 것이다.

친구가 원하는 화면구성을 간단히 그려서 나에게 보내주었다.

화면 구성 예시 1	화면 구성 예시 2	화면 구성 예시 3
화면 구성 예시 4	화면 구성 예시 5	화면 구성 예시 6

공방이나 학원 같은 소규모 공간은 대부분 수강생 출석과 결제 기록을 수기로 관리한다. 문제는, 그게 생각보다 굉장히 귀찮고 자주 헷갈린다는 점이다.

“이 사람 이번 달 몇 번 남았지?” “결제는 했던가?” “출석부 적는 거 깜빡했다…”

이런 작은 일들이 쌓이면 관리 피로도가 꽤 크다고 한다. 그래서 수강생들이 공방에 와서 직접 타이핑을 통해 출석을 하고 남은 수업 횟수까지 직접 확인 할 수 있게 만들어 달라는 요청을 받았다.

핵심 아이디어 — 셀프 체크인(Self Check-in)

Attendly는 수강생이 스스로 자신의 이름을 입력해서 출석하는 방식이다. 관리자가 한 명 한 명 체크하지 않아도 된다.

• 이름을 입력하면 → 출석 완료
• 잔여 수강 횟수가 자동으로 차감
• 출석 내역과 결제 내역이 연동되어 저장

사장님은 그저 화면만 열어두면 된다. 회원이 오면 직접 이름을 입력하고, 어탠들리가 자동으로 정리해준다.

기능 요약

• 출석 관리: 이름 입력 → 출석 완료 → 잔여 횟수 차감
• 회원 등록: 이름, 번호, 초기 횟수 입력
• 결제 관리: 결제 내역 추가 → 잔여 횟수 갱신
• 달력 보기: 월별 출석 현황 확인
• 백업 / 복원: JSON/CSV 내보내기 / 불러오기
• 완전 로컬 기반: 서버 없이, 브라우저 localStorage로만 작동

인터넷이 안 되어도 출석은 된다. 데이터는 오직 사장님 컴퓨터 안에만 있다.

디자인

무릇의 공간 분위기에 맞춰 전체적으로 짙은 톤의 미니멀 UI로 구성했다. 페이지마다 다른 질감의 배경 이미지를 사용하고, 모달창을 통해 출석 상황(정상, 추가 출석, 잔여 0회, 동명이인 등)을 직관적으로 구분했다.

폰트는 Noto Sans KR, 그리고 모든 버튼과 알림은 손끝의 감각이 느껴지도록 blur + shadow 중심으로 디자인했다.

기술적으로

• Vanilla JS + localStorage 기반
• 프레임워크 없이, 완전 정적 HTML 구조
• 모든 데이터는 mooroot_db_v4 키에 JSON 형태로 저장
• 페이지 간 상태 공유는 동일 로컬 스토리지 참조로 처리

이 방식의 장점은 배포가 필요 없다는 것. 그냥 index.html 파일을 더블 클릭하면 작동한다. 이보다 더 간단한 백오피스는 아마 없을 거다.

무릇 전용 커스터마이징

이 버전은 무릇의 실제 운영 흐름에 맞춰 커스터마이징되었다.

• 로고 / 배경 이미지 교체
• 문구와 버튼 라벨 한글화
• 결제 기준 단위 수정
• 테마 색상 및 알림 문구 조정

하지만 로고만 바꾸면 사실상 어느 공방이나 학원에서도 그대로 쓸 수 있다. 완전히 범용적인 구조다.

스크린샷

출석 메인 (index.html)

이름 입력 → 출석 처리 → 잔여 횟수 자동 차감 다양한 상황(정상, 추가 출석, 잔여 0회, 동명이인 등)에 따른 모달 예시입니다.

기본 화면	플로팅 메뉴	샘플데이터 경고
출석 확인 모달	출석 완료 모달	추가 출석 확인 모달
추가 출석 완료	출석 불가 (잔여 0회)	동명이인 확인 모달

신규 등록 (register.html)

이름, 전화번호, 초기 잔여횟수를 입력하여 회원을 등록합니다.

등록 화면	등록 확인 모달	등록 완료 모달

회원 목록 (members.html)

전체 회원 조회 및 검색, 정렬 기능을 제공합니다.

회원 목록

회원 정보 수정 (edit.html)

선택한 회원의 이름, 전화번호, 잔여횟수를 수정하거나 삭제할 수 있습니다.

회원 정보 수정 화면	회원 삭제 확인 모달

결제 정보 (payments.html)

회원별 결제 추가, 잔여횟수 갱신, 결제/출석 이력 확인이 가능합니다.

결제 검색	결제 내역 입력

출석 달력 (calendar.html)

월별 출석 현황을 한눈에 확인할 수 있는 달력형 인터페이스입니다.

월별 달력	일별 출석자 목록

설정 / 백업 (settings.html)

데이터 백업, 복원, 샘플 생성, 초기화 기능을 제공합니다.

데이터 관리 메뉴	모든 데이터 삭제	삭제 완료 모달

마무리

어탠들리를 만들면서 처음으로 견적서를 쓰고 프리랜서로 코딩을 통해 돈을 벌어 보았다. 적지 않은 금액을 받았기 때문에 책임감이 생긴다.