[실전 2편] 근태 앱 완성 — 휴가 신청, 월별 집계, QR 보안 | S2-EP15

클로드 어디까지 써봤니

SEASON 2 · EP 15

[실전 2편] 근태 앱 완성

휴가 신청, 월별 집계, QR 보안 — 앱을 끝까지 완성하는 법

클로드의 친구 · 2026-04-18

1. EP14에서 이어서

EP14에서 팀근태 앱의 뼈대를 완성했습니다. 로그인, 사용자 관리, 출퇴근 기록까지 작동합니다. 이제 EP15에서 앱을 완성합니다. 휴가 신청 워크플로우, 월별 근무 시간 집계, 그리고 QR 코드 출퇴근 보안 기능입니다.

EP15에서 추가하는 기능

✅ 휴가 신청 (직원) + 승인/거절 (관리자) 워크플로우
✅ 월별 근무 시간 집계 및 시각화
✅ QR 코드 출퇴근 (Canvas API 활용)
✅ 전체 UI 마감 (반응형, 모바일 대응)

2. 휴가 신청 워크플로우 구현

휴가 신청은 여러 화면과 상태가 얽힌 복잡한 기능입니다. 이런 경우 워크플로우를 먼저 설명하고 Claude에게 요청합니다.

기존 앱에 휴가 신청 워크플로우를 추가해줘. === 워크플로우 === 직원: 1. "휴가 신청" 버튼 클릭 2. 신청 폼: 시작일, 종료일, 유형(연차/반차/병가), 사유 입력 3. 신청 완료 → leaves LocalStorage에 {id, userId, startDate, endDate, type, reason, status:"pending"} 저장 4. 직원 화면에 "내 휴가 현황" 테이블: 신청일 / 기간 / 유형 / 상태(대기중/승인/거절) 관리자: 1. 대시보드에 "휴가 신청 대기" 배지 표시 (대기 건수) 2. 클릭 시 대기 중인 휴가 목록 표시 3. 각 신청에 "승인" / "거절" 버튼 4. 승인/거절 시 status 업데이트, 직원 화면에 즉시 반영 === 상태 색상 === 대기중: 노란 배지 | 승인: 초록 배지 | 거절: 빨간 배지 === 현재 코드 === [EP14 완성 코드 전체 붙여넣기]

이처럼 복잡한 기능은 "워크플로우"를 단계별로 설명하면 Claude가 정확하게 구현해줍니다. 단순히 "휴가 기능 추가해줘"보다 훨씬 좋은 결과가 나옵니다.

3. 월별 근무 시간 집계

데이터가 쌓이면 집계가 필요합니다. 월별 근무 시간을 계산하고 시각화하는 기능을 추가합니다.

기존 앱에 월별 근무 집계 기능을 추가해줘. === 직원 화면에 추가할 것 === "내 이번 달 근무 현황" 섹션: - 이번 달 총 근무일 / 총 근무 시간 / 평균 근무 시간 - 일별 근무 시간 막대 그래프 (Canvas API 사용, 라이브러리 없이) - 월 이동 버튼 (이전달 / 다음달) === 관리자 화면에 추가할 것 === "팀 월별 현황" 테이블: - 직원별 총 근무일 / 총 근무 시간 / 지각 횟수(09:10 이후 출근) - CSV 다운로드 버튼 (이름,날짜,출근,퇴근,근무시간 형식) 계산 방법: - workMinutes가 있는 attendance 레코드 기준 - 해당 월(YYYY-MM)로 필터링

라이브러리 없이 Canvas로 차트 그리기

외부 차트 라이브러리 없이 HTML5 Canvas API만으로 간단한 막대 차트를 그릴 수 있습니다. Claude에게 "Chart.js 없이 Canvas API로 막대 차트를 그려줘"라고 하면 순수 JavaScript 코드로 만들어줍니다. 단일 HTML 파일을 유지할 수 있는 이점이 있습니다.

4. QR 코드 출퇴근 — 보안 강화

버튼 클릭만으로 출퇴근을 기록하면 대리 출근이 가능합니다. QR 코드를 활용하면 실제로 사무실에 있는 사람만 출퇴근을 기록할 수 있게 됩니다.

QR 출퇴근 워크플로우

1. 관리자가 "오늘의 QR 코드" 생성 (날짜 + 비밀 키 기반 토큰)
2. 사무실 입구 모니터 또는 프린트에 QR 코드 부착
3. 직원이 스마트폰으로 QR 코드를 스캔 → 출퇴근 페이지 열림
4. 로그인 후 오늘의 QR 토큰이 유효하면 출근/퇴근 기록
기존 앱에 QR 코드 출퇴근 기능을 추가해줘. === 구현 방식 === QR 코드 생성 (외부 라이브러리 없이): - 관리자 화면에 "오늘 QR 생성" 버튼 - 클릭 시 오늘 날짜 + 랜덤 4자리 토큰 생성 (예: 2026-04-18-8472) - Canvas API로 QR 코드 이미지 생성 (QRCode.js 라이브러리 CDN 사용 가능) - 생성된 QR은 LocalStorage에 저장 (당일만 유효) QR 스캔 처리: - URL 파라미터로 토큰 전달 (?token=2026-04-18-8472) - 직원이 해당 URL로 접속 시 토큰 자동 검증 - 유효한 토큰 + 로그인 상태 = 출퇴근 기록 허용 - 유효하지 않은 토큰 = "오늘의 QR 코드가 아닙니다" 오류 === 현재 코드 === [전체 코드 붙여넣기]
QRCode.js CDN 사용 방법

단일 HTML 파일에 외부 스크립트를 불러올 수 있습니다:
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

이 한 줄을 HTML 상단에 추가하면 QRCode 라이브러리를 사용할 수 있습니다. 인터넷 연결이 필요하지만, 사무실 환경에서는 문제없습니다.

5. UI 마감 — 반응형 + 모바일 대응

기능이 완성되면 UI를 다듬습니다. 특히 QR 스캔은 스마트폰에서 사용하므로 모바일 대응이 중요합니다.

기존 앱의 UI를 개선해줘. === 개선 사항 === 1. 반응형 레이아웃 - 모바일 (< 768px): 1열 레이아웃, 버튼 크게 - 태블릿 (768px~): 2열 레이아웃 - 데스크톱: 기존 레이아웃 2. 공통 개선 - 모든 버튼에 hover 효과 (cursor:pointer, 밝아지는 효과) - 로딩 없는 부드러운 화면 전환 - 빈 상태 처리 (데이터 없을 때 "아직 기록이 없습니다" 표시) 3. 직원 대시보드 - 오늘 날씨 느낌의 근무 상태 카드 (크게, 색상으로 구분) - 이번 주 출근 현황 미니 캘린더 4. 관리자 대시보드 - 상단 요약 지표 카드 (더 크게, 아이콘 추가) - 테이블 정렬 기능 (컬럼 클릭 시 정렬)

6. 최종 완성 체크리스트

팀근태 앱 완성 체크리스트

기본 기능
□ 로그인/로그아웃 (역할별 화면 분기)
□ 출근/퇴근 버튼 + 시각 저장
□ 오늘 근무 상태 표시 (미출근/근무중/퇴근완료)
□ 관리자: 전체 직원 오늘 근태 현황 테이블
□ 관리자: 신규 직원 추가

완성 기능
□ 휴가 신청 (직원) + 승인/거절 (관리자)
□ 월별 근무 시간 집계 + 차트
□ CSV 다운로드
□ QR 코드 생성 + 검증
□ 모바일 반응형

예외 처리
□ 중복 출근 방지
□ 로그아웃 시 세션 초기화
□ 빈 데이터 상태 처리
□ 유효하지 않은 QR 토큰 오류 처리

7. 이 앱을 넘어서 — 다음 단계

팀근태 앱을 완성했다면 자연스럽게 다음 질문이 생깁니다. "더 발전시킬 수 있을까?"

📦 서버 연동으로 업그레이드

LocalStorage → Firebase Firestore 연동으로 실시간 다중 기기 지원 가능. Claude에게 Firebase 연동 코드를 요청하면 됩니다.

📱 PWA로 앱화

HTML 앱을 PWA(Progressive Web App)로 만들면 스마트폰 홈 화면에 설치 가능. Service Worker 추가만으로 됩니다.

🔔 알림 기능

퇴근 시간 30분 전 브라우저 알림, 미출근자 자동 슬랙 메시지 등. Zapier + Slack API 연동으로 가능.

📊 Claude 분석 연동

CSV 다운로드 후 EP08에서 배운 데이터 분석을 적용. "이번 달 지각 패턴을 분석해줘" 등으로 즉시 활용 가능.

8. 클로드의 친구가 드리는 말씀

EP13~EP15, 3편에 걸쳐 실제 앱을 처음부터 끝까지 만들었습니다. 요구사항 정의, 뼈대 구현, 완성까지. 코드를 한 줄도 안 짜고 작동하는 앱이 나왔습니다.

이 과정에서 여러분이 한 일은 무엇이었습니까? 무엇을 만들지 결정했고, 어떻게 동작해야 하는지 설명했고, 결과를 테스트했습니다. 이것이 프로덕트 씽킹입니다. 코드를 짜는 능력이 아니라, 문제를 구조화하고 솔루션을 설계하는 능력. 그것은 여러분에게 이미 있었습니다.

Claude는 코드를 구현했을 뿐입니다. 아이디어와 판단은 여러분의 것입니다.

다음 편 EP16에서는 Phase 6, 통합과 철학으로 들어갑니다. 지금까지 만든 모든 것 — 이메일 자동화, 문서 생성, 정보 분석, 루틴, 앱 — 을 하나의 시스템으로 연결하는 멀티 에이전트 오케스트라를 다룹니다.

📚 시즌 2 전체 에피소드 목차

📖 시즌 1: 클로드와 처음 만나는 법 (EP00~EP18) →

🤖 Created with Claude (Anthropic)

#클로드어디까지써봤니 #클로드시즌2 #AI생산성 #앱완성 #근태앱 #QR출퇴근 #휴가신청 #Canvas차트 #PWA #반응형웹 #Claude코딩 #비개발자앱 #실전프로젝트 #하네스엔지니어링 #Anthropic #클로드의친구 #AI앱개발 #웹앱 #팀근태 #Firebase

コメント

コメントを投稿

このブログの人気の投稿

"이거 매일 해줘" — 첫 번째 자동화 태스크 [클로드 어디까지 써봤니 EP 04]

🤖 Created with Claude (Anthropic) 클로드 어디까지 써봤니 · EP 04 "이거 매일 해줘" — 스케줄 태스크로 반복 작업 자동화하기 클로드의 친구 · 2026년 4월 13일 ◀ EP 03: AI가 나를 기억한다 | 📚 EP 04 | EP 05: 나만의 헌법 만들기 ▶ 1. "매일 아침 뉴스 요약해줘"가 어떻게 작동할까 Lucas는 어느 날 아침 클로드에게 이렇게 말했습니다. "클로드, 매일 저녁 7시에 경제 뉴스 요약해서 블로그에 올려줘." 그 이후로 클로드는 매일 저녁 7시에 스스로 일어나, 뉴스를 검색하고, 글을 쓰고, 블로그에 올립니다. Lucas는 지금 이 일을 위해 아무것도 하지 않습니다. 이게 바로 스케줄 태스크 입니다. 그런데 "매일 저녁 7시"는 어떻게 기계가 이해하는 숫자로 바뀔까요? 그 비밀이 바로 크론 표현식(Cron Expression) 입니다. 2. 크론 표현식 — 시간을 코드로 말하는 방법 크론(Cron)은 원래 Unix/Linux 계열 운영체제에서 주기적 작업을 자동 실행하기 위해 만들어진 스케줄러입니다. 이름은 그리스어로 "시간"을 뜻하는 Chronos에서 왔습니다. 크론 표현식은 이렇게 생겼습니다: 분 시 일 월 요일 0 19 * * * 5개의 자리가 공백으로 구분되어 있습니다. 왼쪽부터 분(0-59) , 시(0-23) , 일(1-31) , 월(1-12) , 요일(0-6, 0=일요일) 입니다. * 는 "모든 값"을 뜻합니다. 위의 예시 0 19 * * * 는 "매일, 매월, 모든 요일, 19시 정각"이라는 뜻이죠. 실전 예시들 0 19 * * * → 매일 저녁 7시 정각. Lucas의 "클...
続きを読む

AI가 나를 기억한다 — 메모리 시스템의 비밀 [클로드 어디까지 써봤니 EP 03]

🤖 Created with Claude (Anthropic) 클로드 어디까지 써봤니 · EP 03 AI가 나를 기억한다 — 메모리 시스템의 비밀: 대화가 끝나도 남는 것들 클로드의 친구 · 2026년 4월 13일 ◀ EP 02: 클로드, 너 뭐 할 수 있어? | 📚 EP 03 | EP 04: "이거 매일 해줘" ▶ EP 02 에서 클로드의 기능 지도를 펼쳤습니다. 프로젝트, 아티팩트, MCP, 스케줄 태스크까지. 그런데 이 모든 기능을 쓰면서도 한 가지 아쉬운 순간이 있습니다. 새 대화를 열 때마다 "저는 누구인지" 다시 설명해야 하는 것. 오늘은 그 문제를 해결하는 기능을 이야기합니다. 클로드와 대화를 하다 보면 신기한 경험을 합니다. "저번에 만들어준 블로그 CSS 말인데요"라고 했는데, 클로드가 정확히 기억하고 있는 경우. 반대로 새 대화를 열었더니 어제 한 이야기를 하나도 모르는 경우. 이 차이는 어디서 올까요? 답은 메모리 입니다. 클로드에는 대화가 끝난 뒤에도 살아남는 기억 체계가 있습니다. 이것을 이해하면 클로드와의 협업이 완전히 달라집니다. 매번 같은 설명을 반복하는 대신, "나를 아는 AI"와 바로 일을 시작할 수 있으니까요. 1. 대화는 휘발된다 — 왜 메모리가 필요한가 AI 챗봇의 근본적인 한계는 대화가 끝나면 모든 맥락이 사라진다 는 것입니다. 이것은 클로드만의 문제가 아닙니다. ChatGPT든 Gemini든, 기본적으로 AI는 "지금 이 대화"만 기억합니다. 클로드가 똑똑하게 느껴지는 건 대화 안에서 문맥을 잘 추적하기 때문입니다. 하지만 새 대화를 시작하면? 백지 상태. 여러분의 이름도, 직업도, 어제 만들어달라고 한 코드의 스타일도 모릅니다. 😤 메모리 없는 세계 "안녕 클로드, 블로그 글 써줘." "네! 어떤 블로그인가요? 주제는 무...
続きを読む

블로그 자동화 첫걸음 — Blogger v3 API 정복기 [클로드 어디까지 써봤니 EP 07]

🤖 Created with Claude (Anthropic) 클로드 어디까지 써봤니 · EP 07 블로그 자동화 첫걸음 — Blogger v3 API로 첫 자동 게시 완성하기 클로드의 친구 · 2026년 4월 14일 ◀ EP 06: Guides 완전 정복 | 📚 EP 07 | EP 08: CSS 한 번 쓰고 열두 번 쓰기 ▶ 지난 EP 06에서는 AI를 조종하는 5가지 레버(Guides)를 완전 정복했습니다. 이번 에피소드에서는 드디어 블로그 자동화의 핵심 기술을 만납니다. 클로드에게 "이 글 블로그에 올려줘"라고 말하면 실제로 포스트가 올라가는 마법 — Blogger v3 API입니다. OAuth 인증의 원리부터 REST API 호출, 그리고 초보자를 함정에 빠뜨리는 CodeMirror 문제까지 낱낱이 파헤칩니다. 1. "그냥 붙여넣으면 안 되나요?" — 수동 게시의 한계 블로그 자동화를 처음 생각한 사람들은 대부분 이런 상상을 합니다. "클로드가 HTML을 만들면, 내가 복사해서 붙여넣으면 되잖아?" 맞습니다. 처음 한두 번은요. 하지만 블로그를 5개, 10개 운영하고, 매일 2~3편씩 올려야 한다면 이야기가 달라집니다. 클로드의 친구도 처음엔 그렇게 했습니다. HTML을 복사하고, 블로그 관리 화면을 열고, HTML 모드로 전환하고, 붙여넣고... 이 반복 작업이 하루에만 40분을 잡아먹었습니다. ✏️ 계산해보면: 1편 게시에 5분 × 하루 8편 = 40분 × 30일 = 매달 20시간 낭비 20시간이면 새로운 에피소드 10편을 쓸 수 있는 시간입니다. 수동 게시는 처음엔 "어렵지 않다"고 느끼지만, 규모가 커지면 반드시 병목이 됩니다. 이 병목을 제거하는 열쇠가 바로 Blogger v3 API 입니다. 2. API란 무엇인가 — 식당 비유로 이해하기 API(Application Programming Interfa...
続きを読む