워크스페이스 스터디인데 바이브코딩 사례.. 괜찮을까요? :)

소개

이번기수 수업은 한번도 제대로 듣지 못했네요.

업무에 여유가 생기면 다시보기로 복습을 해보려고 합니다.

현재 업무에 나름 AI를 써보려고 시도하는 중인데, 바이브 코칭 사례를 작성해보려고 합니다.

회사의 사외코치 Pool 관리 업무를 디지털화하는 것이 목표였습니다. 기존에는 엑셀 파일로만 관리하던 90여 명의 외부 코치 정보를, 역할별 접근 권한이 있는 웹 서비스로 전환하고자 했습니다.

이유

• 코치 정보를 열람하는 대상이 다양함 (내부 관리자, 코칭 회사 담당자, 코치 본인)

• 각 그룹이 봐야 할 정보가 달라 역할 기반 접근 제어가 필요

• 엑셀 파일 공유의 보안 리스크 및 관리 불편 해소

• 별도 백엔드 서버 없이 정적 웹 페이지로 구현하여 Netlify 무료 호스팅 활용

진행 방법

사용 도구

• Claude Code (CLI) — 전체 코드 설계 및 구현, 디버깅

• Python — 엑셀 → data.js 변환 자동화 (generate_data.py), auth.md → auth.js 변환 자동화 (generate_auth.py)

• HTML/CSS/JavaScript — 순수 정적 웹앱 (프레임워크 없음)

• Netlify or Vercel — 정적 사이트 무료 배포

구조 개요

CoachingLanding/
├── index.html          # 로그인 UI + 앱 셸 + 탭 네비게이션
├── auth.js             # 인증/세션 관리 (역할 기반 접근 제어)
├── data.js             # 코치 데이터 (엑셀에서 자동 생성)
├── auth.md             # 계정 설정 원본 (사람이 편집하는 파일)
├── generate_auth.py    # auth.md → auth.js 변환
├── generate_data.py    # 엑셀 → data.js 변환
└── pic/ indi/ cit/     # 코치 프로필 사진

핵심 프롬프트 예시

"엑셀 D열을 alias로 쓰고, 코치 본인이 coach 아이디 + alias 비밀번호로 로그인하면 본인 프로필만 보이도록 해줘. 관리자는 전체, 코칭 회사는 소속 탭만 보이게."

"auth.md 파일을 사람이 편집하면 generate_auth.py가 auth.js를 자동으로 갱신하는 구조로 만들어줘."

역할별 접근 권한 설계

auth.js 핵심 인증 로직

결과와 배운 점

배운 점 / 꿀팁

• 백엔드 없이 역할 기반 접근 제어 구현 가능 — sessionStorage + JS만으로 로그인/권한 분리가 된다. 물론 보안 수준은 낮지만, 사내 내부용 도구로는 충분

• "사람이 편집하는 파일"과 "기계가 읽는 파일"을 분리하는 패턴이 유효함 — auth.md(사람용) → generate_auth.py → auth.js(기계용) 구조 덕분에 비개발자도 계정 추가/삭제가 쉬움

• Claude Code에게 구조 설계를 맡기고, 사람은 요구사항만 명확히 하면 됨 — "코치 본인은 본인만 보이게", "회사 담당자는 소속만 보이게" 같은 자연어 요구사항이 그대로 코드가 됨