JJ AI+ · HRDer AX 바이브코딩
HRD 실전
Claude Code(데스크톱 앱)에서 실습

흩어진 문서,
위키로 묶고
개념으로 잇는다

담당자가 바뀌어도 «이 일 어떻게 해요?»에 바로 답하는 직무 위키

직무 위키·개념 연결 도우미로컬판웹앱·서버판
JJ Creative 교육연구소
구성약 23분

이 자료는 이렇게 갑니다

0분5분10분15분20분25분오프닝·요청사항PART 1 설계서(PRD)PART 2 로컬판 만들기PART 3 웹앱·서버판점검·마무리 ← 오늘 실습의 중심: 로컬판
HRDer AX · 직무 위키·개념 연결 도우미
요청사항

미리 보내 주신 요청사항

만들고 싶은 것

신입, 경력 등 신규입사자 말고도 모든 직원들이 본인의 업무에 활용할 수 있는 직무보조도구를 만들고 싶습니다.

지금의 불편

굳이 OJT를 사람이 붙어서 할 필요가 있을까요?

완성되면

모든 기록이 저장, 공유되어 담당자가 교체되어도 바로 일을 할 수 있도록 지원

쓰는 사람 · 모든 직원이 매일  |  꼭 있어야 하는 기능 · 1. 자료 업로드, 분석, DB로 축적 2. 각 자료별 접근권한 제한 3. 공유, 다운로드 4. 회의록 입력을 위한 녹음(TTS, STT), 화자분석, 어휘 교…

HRDer AX · 직무 위키·개념 연결 도우미
오늘의 문제

담당자가 바뀌면
업무 노하우도 같이 사라진다

HRDer AX · 직무 위키·개념 연결 도우미
오늘 완성할 결과물예상 화면

완성하면 이런 화면이 됩니다

직무 위키·개념 연결 도우미 예상 결과물 화면
  • 위키 검색·열람(요약·절차 단계·주의사항·출처 문서·연결 개념)
  • 개념 연결 그래프(점에 올리면 연결만 강조)
  • 활용 현황(많이 찾은/못 찾은 검색어·주간 검색 수·문서 유형)
  • Claude Code가 업무 문서 CSV를 읽어 wiki.json(항목+개념 연결) 작성
HRDer AX · 직무 위키·개념 연결 도우미
두 가지 버전

한 자료, 두 가지 버전

로컬판 · 오늘 실습

내 PC 안에서만

Claude Code가 Test 폴더에 앱을 만들고, 내 PC에서 열어 봅니다. 혼자·팀 공유 폴더로 쓰기엔 이것으로 충분합니다.

웹앱·서버판 · 교육 후

모두가 같은 주소로

여러 사람이 각자 접속해 같은 데이터를 쓰려면 서버가 필요합니다. 사내 서버를 IT에 요청하거나, 설치 프로그램으로 직접 연결합니다.

내 과제는 🔴 서버 필요 — 공유 DB와 접근 권한이 핵심이라 사내 IT 프로젝트급

HRDer AX · 직무 위키·개념 연결 도우미
PART 1
1
PART 1 · 설계서(PRD)

Claude Code가 읽을
설계서부터

PRD.md 한 장이 Claude Code에게 주는 작업 지시서입니다

설계서 ①무엇을 만드나

한 줄 정의

개인 드라이브·메일·회의록에 흩어진 업무 문서를 Claude Code가 읽어 위키 항목과 개념 연결(온톨로지)로 정리하고, 직원은 앱에서 검색·열람·연결 그래프로 찾아 담당자가 바뀌어도 바로 일할 수 있게 돕는 직무 보조도구.

원래 요청에서 오늘 조정한 부분

자료 업로드·분석·DB 축적→ 가상 업무 문서 24건(docs.csv)을 Claude Code가 읽고 wiki.json 으로 정리 → 앱이 읽어 보여 주기
자료별 접근 권한 제한→ 제외 — 다음 단계로
회의 녹음(STT)·화자분석, 법령 API, MCP·에이전트→ 제외 — 회의록은 텍스트로 이미 받아 둔 것(docs.csv 의 «회의록» 5건)으로 대신
HRDer AX · 직무 위키·개념 연결 도우미
설계서 ②데이터·완료 기준

가상 데이터와 완료 기준

실습용 가상 데이터

  • docs.csv · 업무 문서 24행
  • terms.csv · 용어 사전 30행
  • search_log.csv · 검색 기록 150행

이게 되면 완성

  • 위키 항목 15개 이상, 모든 항목에 출처 문서ID
  • «출장» 검색 → «출장비 정산», 출처 D001·D002·D003
  • «경비 정산» 점에 올리면 이어진 개념만 진하게
  • 검색 150회 · 1위 «출장비 정산» 26회 · 성공률 92.7%
HRDer AX · 직무 위키·개념 연결 도우미
PART 2
2
PART 2 · 로컬판 만들기

Claude Code에게
말로 시킵니다

코드는 Claude가 씁니다. 우리는 다섯 문장을 차례로 붙여 넣습니다

Claude Code 준비

Claude Code 준비 3가지

1

실습 자료 풀기

실습자료 전체.zip 을
다운로드 › Test 폴더에

→
2

Code 탭 · Test

입력창 아래
«이 컴퓨터 · Test» 확인

→
3

편집 자동수락

허락 묻는 창이 뜨면
내용 보고 [허용]

Test 안에 job-wiki 폴더가 생기면 준비 끝

HRDer AX · 직무 위키·개념 연결 도우미
로컬판 실습
STEP 1 · 자료 확인

Claude Code 입력창에 붙여 넣기 Claude Code

지금 열어 둔 Test 폴더 안에 job-wiki 폴더가 있고, 그 안에 PRD.md 와 data 폴더(docs.csv, terms.csv, search_log.csv)가 있는지 확인해줘. 없으면 무엇이 없는지 알려주고 멈춰줘. 있으면 PRD.md 를 끝까지 읽고, 무엇을 만들지 5줄로 요약해줘. 아직 코드는 만들지 마.

보내고 나서 확인할 것

5줄 요약이 내 요청과 맞는지 — 아직 앱을 만들지 않았는지

HRDer AX · 직무 위키·개념 연결 도우미
로컬판 실습
STEP 2 · 화면 만들기

Claude Code 입력창에 붙여 넣기 Claude Code

PRD.md 의 «3. 오늘 만들 기능»과 «7. 기술 원칙»대로 job-wiki 폴더 안에 앱을 만들어줘. 위쪽에 «위키 검색·열람»과 «개념 연결 · 활용 현황» 탭 두 개를 두고, 지금은 data/docs.csv 의 문서 24건을 검색창으로 찾아 열어 볼 수 있게 해줘(나중에 wiki.json 이 생기면 위키 항목으로 바뀌게). 인터넷 주소(CDN·글꼴)는 불러오지 말고, 다 만들면 job-wiki 폴더에서 내 PC에서 열어 볼 수 있게 실행해서 내가 열 주소를 알려줘.

보내고 나서 확인할 것

알려 준 주소를 크롬에서 열어 첫 화면이 뜨는지

HRDer AX · 직무 위키·개념 연결 도우미
로컬판 실습
STEP 3 · 활용 현황 연결

Claude Code 입력창에 붙여 넣기 Claude Code

data/search_log.csv 를 읽어 «활용 현황»에 많이 찾은 검색어 막대(위에서 8개), 못 찾은 검색어 목록, 주간 검색 수 선 그래프, 검색 성공률 막대, data/docs.csv 의 문서 유형 도넛을 보여줘. 그래프에 마우스를 올리면 수치가 말풍선으로 보이게 해줘.

보내고 나서 확인할 것

가상 데이터를 불러온 뒤 숫자가 완료 기준과 같은지

HRDer AX · 직무 위키·개념 연결 도우미
로컬판 실습
STEP 4 · 위키·개념 연결 정리 (Claude Code)

Claude Code 입력창에 붙여 넣기 Claude Code

job-wiki/data/docs.csv 의 업무 문서 24건을 모두 읽고 같은 주제끼리 묶어 «위키 항목»으로 정리해줘. 항목마다 제목·분류·세 줄 요약·절차 단계·주의사항·출처 문서ID·연결 개념을 넣고, data/terms.csv 의 용어를 개념으로 삼아 «출장 품의 → 경비 정산: 먼저 할 일»처럼 개념끼리의 연결도 만들어 job-wiki/wiki.json 하나로 저장해줘. 그다음 앱의 열람 탭이 wiki.json 항목을 보여 주게 하고, «개념 연결» 그래프를 점과 선으로 그려 점에 마우스를 올리면 이어진 것만 진하게, 누르면 그 항목이 열리게 해줘.

보내고 나서 확인할 것

결과 파일이 폴더에 생기고 앱 카드에 보이는지

HRDer AX · 직무 위키·개념 연결 도우미
로컬판 실습
STEP 5 · 테스트·마무리

Claude Code 입력창에 붙여 넣기 Claude Code

PRD.md 의 «9. 완료 기준»을 하나씩 직접 확인해서 ✅/❌ 표로 알려줘. ❌ 가 있으면 고친 뒤 다시 확인해줘. 모두 ✅ 면 job-wiki 폴더를 Test/zip/job-wiki.zip 으로 묶고 파일 탐색기에서 보여줘.

보내고 나서 확인할 것

✅/❌ 표가 모두 ✅ 인지, zip 파일이 생겼는지

HRDer AX · 직무 위키·개념 연결 도우미
막힐 때

이럴 땐 이렇게

허락 묻는 창

내용 보고 [허용]

Test 폴더 밖을 건드리려 하면 [거부] 후 «Test 폴더 안에서만 해줘»

폴더에 생긴 파일

탐색기로 확인

«지금 폴더에 무슨 파일이 생겼는지 쉽게 설명해줘»

화면이 이상할 때

보이는 대로 말하기

«이 버튼을 눌렀는데 그래프가 그대로야. 원인 찾아 고쳐줘»

HRDer AX · 직무 위키·개념 연결 도우미
PART 3
3
PART 3 · 웹앱·서버판

여러 사람이
함께 쓰려면

교육 후, 사내 기준을 확인한 뒤에 하는 부분입니다

웹앱·서버판바뀌는 점

로컬판 → 웹앱판, 무엇이 바뀌나

전 직원이 매일 같은 위키를 찾고, 자료마다 볼 수 있는 부서·직급을 나누려면 공유 저장소와 로그인이 꼭 필요합니다. 로컬판은 위키 관리자 한 명의 PC에서만 돌아가고, 실제 사내 문서를 담는 순간 사내 IT 프로젝트가 됩니다.

로컬판 (오늘)
웹앱판 (교육 후)
입력
관리자가 문서 CSV에 추가
부서별 관리자가 문서를 직접 올림
저장
관리자 PC 폴더 + 위키 파일
Supabase에 문서·위키·연결을 한 곳에
보기
관리자 PC에서만
전 직원이 같은 주소로 검색·열람
권한
필요 없음(혼자 사용)
항목마다 볼 수 있는 부서·직급 지정
HRDer AX · 직무 위키·개념 연결 도우미
웹앱·서버판준비

방법 ① 직접 연결 — 준비물

설치 프로그램 하나로

  • 무료 계정 3개: GitHub · Supabase · Vercel
  • HRD-AX-Setup 실행 → 설치·연결 시작
  • 로그인·승인은 본인이 직접
설치 프로그램HRD-AX-Setup.exe (Windows)

Supabase에 만들 표

  • 업무 문서 · 문서ID·제목·부서·유형·작성일·본문
  • 위키 항목 · 제목·분류·요약·절차·주의사항·출처·공개 범위
  • 개념 연결 · 출발 개념·관계·도착 개념
  • 검색 기록 · 검색일시·부서·검색어·찾음 여부

직원: 로그인 → 내 부서에 열린 항목 검색·열람 / 위키 관리자: 문서 올리기·위키 정리·공개 범위 지정

HRDer AX · 직무 위키·개념 연결 도우미
웹앱판 실습교육 후
W1 · 설계를 웹앱용으로

Claude Code 입력창에 붙여 넣기 Claude Code

지금 만든 job-wiki 앱을 전 직원이 각자 로그인해서 검색하고, 항목마다 볼 수 있는 부서를 나누는 웹앱으로 바꾸고 싶어. PRD.md 의 «11. 웹앱·서버 버전»을 읽고, 무엇이 바뀌는지와 Supabase에 만들 표 4개를 쉬운 말로 먼저 정리해줘. 내가 OK 하기 전에는 아무것도 바꾸지 마.

보내고 나서 확인할 것

바뀌는 점과 표 3~4개 설명이 내 생각과 맞는지 — OK 전에는 아무것도 바뀌지 않았는지

HRDer AX · 직무 위키·개념 연결 도우미
웹앱판 실습교육 후
W2 · Supabase 연결

Claude Code 입력창에 붙여 넣기 Claude Code

좋아, 진행해줘. Supabase에 새 프로젝트를 만들고 업무 문서·위키 항목·개념 연결·검색 기록 표 4개를 만들어 data 폴더와 wiki.json 의 가상 데이터를 채워줘. 로그인한 사람만 보고, 공개 범위 밖 항목은 검색에도 안 나오게 잠금 설정도 해줘. 비밀값은 화면에 보여 주지 말고, 내가 넣을 게 있으면 어디에 넣는지만 알려줘.

보내고 나서 확인할 것

로그인 화면이 뜨고, 가상 데이터가 들어갔는지 — 비밀값이 화면에 안 보였는지

HRDer AX · 직무 위키·개념 연결 도우미
웹앱판 실습교육 후
W3 · GitHub에 올리고 Vercel로 배포

Claude Code 입력창에 붙여 넣기 Claude Code

이제 GitHub에 비공개 저장소로 올리고 Vercel로 배포해줘. 비밀값이 저장소에 올라가지 않았는지 먼저 확인하고, 배포가 끝나면 접속 주소를 알려줘.

보내고 나서 확인할 것

접속 주소를 휴대폰으로도 열어 보기

HRDer AX · 직무 위키·개념 연결 도우미
웹앱판 실습교육 후
W4 · 다른 사람 화면으로 확인

Claude Code 입력창에 붙여 넣기 Claude Code

배포된 주소에서 PRD.md 의 «웹앱판 완료 기준»을 하나씩 확인해서 ✅/❌ 표로 알려줘. 회계팀 직원 계정과 다른 부서 직원 계정을 하나씩 가상으로 만들어서, 같은 검색어로 찾았을 때 보이는 항목이 다른지도 확인해줘.

보내고 나서 확인할 것

역할별로 보이는 화면이 다른지, 로그인 안 하면 안 보이는지

HRDer AX · 직무 위키·개념 연결 도우미
웹앱·서버판사내 서버
방법 ② · 사내 서버를 IT에 요청

Claude Code 입력창에 붙여 넣기 Claude Code

지금 만든 job-wiki 앱을 전 직원이 매일 쓰는 직무 위키로 키우려고 해. 사내 IT 담당자에게 보낼 요청서를 한 장으로 써줘. ① 무엇을 하는 앱인지 ② 누가 몇 명 쓰는지(전 직원, 부서별 관리자) ③ 저장되는 데이터(업무 매뉴얼·규정·회의록 원문, 작성자 이름 — 사내 기밀·개인정보 일부) ④ 필요한 것(사내 서버, 사내 계정 로그인, 부서별 열람 권한, 백업) ⑤ 지금은 가상 문서로만 만들었다는 점. 기술 용어는 괄호로 쉽게 풀어줘.

보내고 나서 확인할 것

요청서에 가상 데이터로 만들었다는 점과 필요한 것(사내 서버·로그인·백업)이 들어갔는지

회사 업무용은 이 방법이 기본입니다. 오늘 만든 앱 화면이 가장 좋은 기획서가 됩니다.

HRDer AX · 직무 위키·개념 연결 도우미
최종 점검

최종 점검

HRDer AX · 직무 위키·개념 연결 도우미
마무리

오늘은 로컬판,
함께 쓰려면 웹앱·서버판

JJ Creative 교육연구소 · jjh@jjcreative.co.kr
← → 넘기기 / T 목차 / G 전체 미리보기 / S 발표자 모드 / F 전체 화면