[실전 1편] 근태 앱 뼈대 세우기 — DB 설계와 회원가입 | S2-EP14

클로드 어디까지 써봤니

SEASON 2 · EP 14

[실전 1편] 근태 앱 뼈대 세우기

DB 설계, 회원가입, 로그인 — Claude와 함께 첫 코드 쓰기

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

1. 이제 진짜 만든다

EP13에서 팀근태(TeamAttend) 앱의 요구사항을 완성했습니다. 이제 실제 코드를 작성합니다. Claude에게 코드를 만들어달라고 하는 것이지만, 이 과정에서 어떻게 대화해야 하는지, 결과를 어떻게 검증하는지를 함께 배웁니다.

이 편에서 만들 것은 앱의 뼈대입니다. 로그인, 사용자 관리, 역할별 화면 분기까지 — 이후 기능들이 올라탈 수 있는 구조를 먼저 만듭니다.

EP14에서 완성하는 것

✅ LocalStorage 기반 데이터 레이어 (users, attendance, leaves 구조)
✅ 로그인 / 로그아웃
✅ 관리자 화면: 직원 목록 조회 + 신규 직원 추가
✅ 직원 화면: 대시보드 (오늘 출퇴근 상태 표시)
✅ 역할별 라우팅 (관리자 ↔ 직원 화면 자동 분기)

2. Claude에게 코드를 요청하는 방법

코드를 요청할 때도 "잘 짜인 발주"가 필요합니다. 막연하게 "앱 만들어줘"가 아니라, EP13에서 정의한 명세를 명확하게 전달해야 합니다.

첫 번째 코드 요청 — 뼈대 구조

아래 명세대로 단일 HTML 파일로 근태 관리 앱 뼈대를 만들어줘. === 기술 조건 === - 단일 HTML 파일 (CSS, JS 모두 인라인) - 서버 없이 브라우저에서 실행 - 데이터 저장: LocalStorage - 디자인: 깔끔한 비즈니스 스타일 (흰색 배경, 초록 포인트 컬러) === 데이터 구조 === users: [{id, name, department, role: "admin"|"employee", password}] attendance: [{userId, date, checkIn, checkOut, workMinutes}] leaves: [{id, userId, startDate, endDate, type, reason, status}] === 초기 데이터 (앱 첫 실행 시 자동 생성) === 관리자 1명: {id:"admin1", name:"관리자", role:"admin", password:"admin123"} 직원 3명: 김민준(dev팀), 이지은(마케팅), 박수아(영업) 각 직원 비밀번호: "1234" === 구현할 화면 === 1. 로그인 화면: ID + 비밀번호 입력, 로그인 버튼 2. 관리자 대시보드: 전체 직원 목록 카드, 신규 직원 추가 버튼 3. 신규 직원 추가 모달: 이름, 부서, ID, 비밀번호 입력 4. 직원 대시보드: 오늘 날짜 표시, 출근/퇴근 버튼, 오늘 상태 표시 === 라우팅 === - 로그인 성공 → role에 따라 관리자/직원 대시보드로 자동 이동 - 로그아웃 → 로그인 화면으로 이동 - 비로그인 상태에서 다른 화면 접근 시 → 로그인 화면으로 리다이렉트

코드를 받은 후 해야 할 일

Claude가 코드를 주면 바로 복사해서 텍스트 파일에 붙여넣고 확장자를 .html로 저장합니다. 브라우저에서 열면 바로 실행됩니다. 동작을 확인하면서 수정이 필요한 부분을 Claude에게 구체적으로 요청합니다.

수정 요청 방법

❌ "버튼 색이 이상해" → 막연함
✅ "로그인 버튼 색을 #1a4d2e 진한 초록으로, 텍스트는 흰색으로 바꿔줘"

❌ "뭔가 안 돼" → 막연함
✅ "admin1 / admin123으로 로그인하면 콘솔에 'Cannot read property id of null' 오류가 나. 아래 코드의 어디가 문제일까?" + 관련 코드 붙여넣기

3. 뼈대 코드 핵심 구조 설명

Claude가 만들어준 뼈대 코드의 핵심 구조를 이해하면 이후 기능 추가가 훨씬 쉬워집니다.

LocalStorage 데이터 레이어

// 데이터 저장 function saveData(key, data) { localStorage.setItem(key, JSON.stringify(data)); } // 데이터 읽기 function getData(key) { const raw = localStorage.getItem(key); return raw ? JSON.parse(raw) : []; } // 초기 데이터 세팅 (앱 처음 실행 시) function initData() { if (!localStorage.getItem('users')) { saveData('users', [ {id:'admin1', name:'관리자', dept:'경영', role:'admin', pw:'admin123'}, {id:'emp1', name:'김민준', dept:'개발', role:'employee', pw:'1234'}, {id:'emp2', name:'이지은', dept:'마케팅', role:'employee', pw:'1234'}, {id:'emp3', name:'박수아', dept:'영업', role:'employee', pw:'1234'} ]); } }

화면 전환 (SPA 방식)

// 모든 화면을 숨기고 특정 화면만 보여주기 function showPage(pageId) { document.querySelectorAll('.page').forEach(p => p.style.display = 'none'); document.getElementById(pageId).style.display = 'block'; } // 로그인 처리 function login() { const id = document.getElementById('loginId').value; const pw = document.getElementById('loginPw').value; const users = getData('users'); const user = users.find(u => u.id === id && u.pw === pw); if (user) { sessionStorage.setItem('currentUser', JSON.stringify(user)); user.role === 'admin' ? showPage('adminDashboard') : showPage('empDashboard'); } else { alert('아이디 또는 비밀번호가 올바르지 않습니다.'); } }

4. 오류가 났을 때 Claude와 디버깅하기

코드를 처음 받으면 오류가 나는 경우가 종종 있습니다. 당황하지 말고 오류 메시지를 그대로 Claude에게 전달합니다.

디버깅 요청 방법

아래 코드를 브라우저에서 실행했는데 오류가 납니다. === 증상 === [무엇이 안 되는지 구체적으로] === 브라우저 콘솔 오류 메시지 === [F12 → Console 탭에서 복사] === 관련 코드 === [오류가 나는 부분의 코드] 어디가 문제인지 찾아서 수정된 코드로 돌려줘.

브라우저 콘솔은 F12(또는 Cmd+Option+I)를 누르면 열립니다. Console 탭에 빨간 오류 메시지가 있으면 그것을 복사해서 Claude에게 주면 됩니다. 대부분의 경우 Claude가 몇 번의 대화 안에 해결해줍니다.

Claude가 코드를 틀리게 주는 경우

Claude는 완벽하지 않습니다. 특히 코드가 길어질수록 앞에서 정의한 함수명을 나중에 다르게 쓰는 실수가 생깁니다. 이런 경우 "함수명 login과 loginUser가 혼용되고 있어. login으로 통일해줘"처럼 구체적으로 수정 지시하면 됩니다. 오류를 신고하듯이 정확하게 말하는 것이 핵심입니다.

5. 기능 추가 — 출퇴근 기록

뼈대가 완성되면 기능을 하나씩 추가합니다. 출퇴근 기록 기능을 추가하는 요청 예시입니다.

기존 코드에 출퇴근 기록 기능을 추가해줘. === 추가할 기능 === 1. 직원 대시보드에 "출근하기" / "퇴근하기" 버튼 - 오늘 출근 기록이 없으면 "출근하기" 버튼 표시 - 출근만 있고 퇴근이 없으면 "퇴근하기" 버튼 표시 - 둘 다 있으면 "오늘 근무 완료" 표시 2. 버튼 클릭 시 현재 시각(HH:MM 형식)을 LocalStorage attendance에 저장 - 출근: {userId, date: "YYYY-MM-DD", checkIn: "HH:MM"} - 퇴근: checkOut 추가, workMinutes 계산 (퇴근시각 - 출근시각) 3. 대시보드 상단에 오늘 상태 카드 표시 - 출근 전: 회색 "미출근" - 출근 후: 초록 "근무 중 (출근 HH:MM)" - 퇴근 후: 파란 "퇴근 완료 (총 N시간 M분)" === 기존 코드 === [뼈대 코드 전체 붙여넣기]

6. 관리자 기능 — 직원 목록 + 근태 현황

관리자 화면에도 핵심 기능을 추가합니다.

관리자 대시보드에 오늘 근태 현황 기능을 추가해줘. === 추가할 기능 === 1. 오늘 날짜 기준 전체 직원 근태 현황 테이블 - 컬럼: 이름 / 부서 / 상태 / 출근 시각 / 퇴근 시각 / 근무 시간 - 상태 색상: 미출근(빨강) / 근무중(초록) / 퇴근(파랑) 2. 직원 추가 버튼 클릭 → 모달 팝업 - 입력: 이름, 부서, 아이디, 비밀번호 - 저장 시 users LocalStorage에 추가 3. 상단 요약 카드 3개 - 전체 직원 수 / 오늘 출근자 수 / 근무 중인 직원 수

7. 실습 — EP14 완성 체크리스트

EP14에서 만든 앱을 직접 테스트해보는 체크리스트입니다.

✅ 완성 체크리스트

□ 브라우저에서 HTML 파일을 열면 로그인 화면이 나온다
□ admin1 / admin123으로 로그인하면 관리자 화면으로 이동한다
□ emp1 / 1234로 로그인하면 직원 화면으로 이동한다
□ 직원 화면에서 "출근하기" 버튼을 누르면 현재 시각이 저장된다
□ 출근 후 새로고침해도 출근 상태가 유지된다 (LocalStorage 확인)
□ "퇴근하기" 버튼을 누르면 근무 시간이 계산된다
□ 관리자 화면에서 오늘 근태 현황 테이블이 보인다
□ 신규 직원을 추가하면 목록에 즉시 반영된다
□ 로그아웃 후 뒤로가기를 눌러도 로그인 화면으로 돌아온다
LocalStorage 데이터 확인 방법

브라우저 F12 → Application 탭 → Local Storage → 파일 경로 선택
users, attendance 키에 데이터가 저장되어 있으면 정상입니다.
데이터를 초기화하려면 LocalStorage의 해당 키를 삭제하면 됩니다.

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

처음으로 실제 작동하는 앱을 만들어보면 이상한 감정이 듭니다. "내가 이걸 만들었다고?" 하는 놀라움입니다. 코드 한 줄 안 짰는데 앱이 돌아갑니다.

이것이 Claude와 함께하는 개발의 핵심입니다. 코드를 쓰는 것은 Claude가 합니다. 무엇을 만들지, 어떻게 동작해야 하는지, 테스트하고 검증하는 것은 여러분이 합니다. 이 역할 분담이 비개발자가 실제 앱을 만들 수 있게 합니다.

다음 편 EP15에서 앱을 완성합니다. 휴가 신청과 관리자 승인 워크플로우, 월별 근무 시간 집계, 그리고 QR 코드 출퇴근 기능을 추가합니다.

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

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

🤖 Created with Claude (Anthropic)

#클로드어디까지써봤니 #클로드시즌2 #AI생산성 #앱개발 #근태관리앱 #LocalStorage #HTML앱 #Claude코딩 #비개발자앱 #실전프로젝트 #웹앱개발 #하네스엔지니어링 #Anthropic #클로드의친구 #AI앱개발 #업무앱 #근태앱 #팀근태 #JavaScript #프론트엔드

コメント

コメントを投稿

このブログの人気の投稿

"이거 매일 해줘" — 첫 번째 자동화 태스크 [클로드 어디까지 써봤니 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...
続きを読む