GH 심화교육 · 1일차
GH 심화교육 · 1일차 · 2026. 09. 30

내 분야
법령 개정 현황판
만들기

상반기의 법령 도구로 이번에는 대시보드를 만들고,
팀원에게 보여 주고, 질문 칸까지 붙입니다.
READ텍스트 교안 →
김혜련 · artetlab · 경기주택도시공사 AX 심화교육
현황판
Speaker
김혜련
artetlab 대표 · 이노핏파트너스 파트너 교수
상반기 법률 챗봇 과정에 이어, 지금 GH 법률 검토 대시보드를 직접 개발하고 있습니다.
2026 상반기·GH 법률 챗봇 과정 (Claude 프로젝트 + 법령 MCP)
2026. 09·GH 법률 검토 대시보드 개발 중 (10월 오픈 목표)
2026. 02·『당신의 첫 AI 직원』 출간
강사
오늘 한 문장

만들기 전에 한 장으로 정하고,
순서표대로 만들게 합니다

한 장은 spec.md, 순서표는 tasks.json입니다. 오늘 하루가 이 두 파일로 굴러갑니다.
Today

오늘은 다섯 덩어리로 갑니다

1-2장
완성본과 실제 개발 보기
3-4장
키 두 개 받고 도구 연결
5-7장
spec.md · tasks.json으로 만들기
8장
내 아이디어 넣기
9-11장
공유하고 질문 칸 붙이기
가운데 칸이 오늘의 중심입니다. 12장은 강사 시연입니다.
Real run

화면에 나오는 결과는 전부
제가 실제로 돌린 것입니다

보상부 직원이라고 치고, 빈 폴더에서 토지보상 법령으로 만들었습니다
01명령은 전부 전산교육실과 같은 Windows PowerShell 기준
02걸린 시간·나온 문장·틀린 곳까지 그대로 옮김
03여러분 화면은 다르게 나옵니다. 그게 정상입니다
Bring

준비물은 세 가지입니다

01 · PC
전산교육실 PC
PC
Claude Code 로그인된 상태
02 · Phone
휴대폰
☎
가입 인증, 10장 접속 확인
03 · Card
결제용 카드
₩
Anthropic API 크레딧 충전
내 분야에서 자주 보는 법령 이름 서너 개를 떠올려 두면 5장이 빨라집니다.
Links 1 / 2

오늘 여는 주소: 키 받기

무엇주소 (누르면 열립니다)장
법제처 가입open.law.go.kr/LSO/usrJoin.do3.1
법제처 OPEN API 신청open.law.go.kr3.1
Anthropic 가입platform.claude.com3.2
Anthropic 결제platform.claude.com/settings/billing3.2
Anthropic API 키platform.claude.com/settings/keys3.2
Links 2 / 2

오늘 여는 주소: 도구와 공유

무엇주소 (누르면 열립니다)장
Claude Code 설치 안내code.claude.com/docs/ko/setup4
법령 도구 korean-law MCPgithub.com/chrisryugj/korean-law-mcp4
Bun 설치 안내bun.com/docs/installation9
Netlify Dropapp.netlify.com/drop10
GitHub · Vercelgithub.com · vercel.com12
Chapter 01 · Finished board

오늘 만들 것
먼저 보기

제가 만든 완성본입니다.
여러분은 이걸 빈 폴더에서 만듭니다.
01 · Finished board

분야 여섯 개, 누르면 그 분야 법령이 나옵니다

완성본 · 토지보상
상반기 시스템 프롬프트 다섯 탭 + 일반 법령 검토 = 분야 6개

분야를 바꾸면
표가 바뀝니다

날짜는 전부 9월 25일에 법령 도구로 조회한 값입니다.
주택공급·분양
주택공급 규칙 · 공공주택 특별법 · 주택법
일반 법령 검토
지방공기업법 · 개인정보 보호법 · 정보공개법
Effective date
10.02
일반 법령 검토 · 지방공기업법시행 예정
타법개정, 2026-08-04 공포 제21857호, 시행 2026-10-02
2일차 교육날에 시행되는 개정입니다. 이런 날짜가 한 화면에 모입니다.
Effective date
12.17
토지보상 · 공익사업법시행 예정
일부개정, 2026-06-16 공포 제21810호, 시행 2026-12-17 · 2027-06-17 · 2027-09-09
개정 하나가 세 번에 나눠 시행됩니다. 7장에서 이게 문제가 됩니다.
01 · Ask

질문하면 조문으로 답합니다

걸린 시간14초 · 도구 2번
질문 칸 · 잔여지 매수청구 (1/2)
1번 적용 조항, 2번 조항 본문은 법령 도구로 가져온 원문 그대로입니다.
01 · Ask

풀이 · 시행일 · 다음에 확인할 것까지

질문 칸 · 잔여지 매수청구 (2/2)
끝에 "1차 검토 결과이며 법적 자문이 아닙니다"가 붙습니다.
Today

복사하지 않고
빈 폴더에서 만듭니다

내 분야 현황판을 처음부터 만들고, 마지막에 이 질문 칸까지 붙입니다. 키 두 개는 3장에서 다 같이 받습니다.
Chapter 02 · Real development

실제 개발은
이렇게 합니다

지금 GH에 만들고 있는
법률 검토 대시보드의 문서를 봅니다.
SPEC→ADR→지금 상태
02 · Two documents

개발은 문서 두 종류로 움직입니다

SPEC · 기획 문서
무엇을 만드는가
525줄
화면, 들어가는 것, 안 들어가는 것, 모듈별 완료 기준
ADR · 결정 기록
왜 그렇게 정했는가
21장
결정 하나에 한 장. 결정 · 이유 · 버린 대안. 9/21-9/23 사흘 동안
상반기 법률 챗봇을 직원 누구나 웹 주소로 쓰게 하는 일입니다.
02 · SPEC excerpt

가장 먼저 적은 것은 "들어가지 않는 것"

### 1.4 들어가지 않는 것

기능정의서 §5 그대로. 사내 시스템 연동, 한글·워드 파일 생성, 알림 발송,
모바일 앱, 외부 호출용 API, 오프라인 실행. 검토 결과는 화면 표시·복사·
마크다운 다운로드까지만.
없으면Claude가 친절하게 알림도, 한글 파일 저장도 붙입니다
있으면만들지 않을 것을 적어 두면 거기서 멈춥니다
02 · ADR list

결정 기록은 이렇게 한 줄씩 쌓입니다

번호결정상태
00011안 개인 API 키 웹 대시보드로 만든다확정
0003AI 호출과 도구 루프는 dashboard 서버에서만 돈다확정
0007인용 검증은 LLM에 맡기지 않고 서버가 한 번 더 돌린다확정
0008개인 API 키는 서버에 암호화해 저장하고 다시 보여주지 않는다확정
0019템플릿은 분야로 보여 주고, 일반 법령 검토를 기본으로 둔다초안
0019는 9월 23일 GH 의견("5종으로 묶지 말고 유연하게")에서 생긴 장입니다.
02 · ADR-0003

한 장은 결정 · 이유 · 버린 대안 세 칸

# ADR-0003 AI 호출과 도구 루프는 dashboard 서버에서만 돈다

## 결정
브라우저는 AI 제공사를 직접 부르지 않는다. (...)

## 이유
- 키가 브라우저에 내려가면 유출 경로가 생긴다

## 버린 대안
- 브라우저에서 직접 호출: 키 노출. 제외
결정무엇으로 정했나 한 문장
이유왜 그게 맞나
11장여러분이 오늘 직접 겪을 문제와 같은 이야기입니다
02 · Status

뒷단은 끝났고, 이번 주부터 화면입니다

단계하는 일상태
M1-M3검토 엔진, 템플릿, 질문 27건으로 검증9월 24일 끝
M4 · M8A검토 화면, 직원 API 키 등록9월 28일-10월 2일
M5-M7재검토, 템플릿 관리, 로그인·사용자 관리10월 6-8일
M9-M10이용 통계, GH 서버 설치, 오픈10월 12-16일
02 · M3 result

질문 27건을 네 번 돌려 통과선을 넘겼습니다

Questions
업무 질문 + 함정
25+2
일부러 틀리게 만든 함정 질문 2건 포함
Runs
돌린 횟수
4번
돌릴 때마다 규칙과 서버를 고침
Pass
네 기준
A·B·C·D
출처 · 인용 검증 · 검토 유형 · 함정
Cost
검토 한 건
245원
Sonnet 기준. 3장 API 키에서 나가는 돈
02 · Why

개발에는 SPEC과 ADR,
오늘은 spec.md와 tasks.json

법률 검토 대시보드오늘 만드는 현황판
쓰는 사람GH 직원 전체나와 우리 팀
만드는 기간한 달 넘게, 오픈 뒤에도 고침오늘 하루
문서SPEC 525줄 + ADR 21장spec.md 한 장 + tasks.json
쓰는 사람이 많아지고 오래 고치게 되면, 그때 결정 기록을 더합니다.
02 · Why documents

문서를 먼저 두는 이유는 하나입니다

Claude Code는 새로 켤 때마다 지난 대화를 기억하지 못합니다
01대화창에서 정한 것은 창을 닫으면 사라짐
02문서를 먼저 읽고 시작하면 지난주에 버린 방법을 다시 꺼내지 않음
03파일이 기억 대신입니다
Chapter 03 · Two keys

키 두 개
받기

둘 다 오늘 받습니다.
집에 가서 할 것은 없습니다.
법제처 인증키+Anthropic API 키
03 · Two keys

질문 칸에는 키가 두 개 필요합니다

3.1 · 법제처
법제처 인증키
법령
법령을 조회할 때 씁니다. 사이트에서는 "인증값" 또는 OC라고 부릅니다
3.2 · Anthropic
Anthropic API 키
sk-ant-
질문에 답할 Claude를 부를 때 씁니다
3.1 · 법제처 인증키

국가법령정보
공동활용 사이트

상반기에 받은 분은 건너뜁니다. 아래 "Open API 신청" 칸이 오늘 갈 곳입니다.
open.law.go.kr
3.1 · 로그인 / 가입

계정이 없으면
"사용자 가입"

오른쪽 위 "로그인"을 누르면 이 화면이 나옵니다.
open.law.go.kr/LSO/usrJoin.do
3.1 · OPEN API 신청

로그인 후
OPEN API → 활용신청

빨간 점이 있는 칸만 채웁니다. 아래 법령 종류는 이미 전부 체크돼 있습니다.
3.1 · Fill in

빨간 점 칸은 이렇게 채웁니다

칸적을 것
기업명경기주택도시공사
시스템명법령 개정 현황판
설명 · 활용 목적부서 업무용 법령 개정 확인
도메인도메인 없음
법령 종류이미 전부 체크됨. 그대로 신청
승인되면 사이트에 로그인해서 내 인증키(인증값, OC)를 확인합니다.
3.1 · If it's late
당일
제가 신청했을 때승인
신청한 날 바로 승인됐습니다. 늦어지면 강사의 공유용 인증키로 실습합니다.
오늘 안에 다 끝납니다. 집에 가서 따로 할 것은 없습니다.
3.2 · Anthropic API 키

Claude를 만든 회사의
개발자용 사이트

구글 계정이나 이메일로 가입합니다.
platform.claude.com
3.2 · Console

왼쪽 "조직 설정" 아래에 결제와 API 키

제 키 목록과 잔액은 가렸습니다.
Claude Console · API 키
3.2 · Steps

결제부터 키 복사까지 다섯 번 누릅니다

01 · 결제
카드 등록, 크레딧 충전
02 · API 키
"+ 키 생성"
03 · 안내 창
"API 키로 계속하기"
04 · 이름
law-board, 만료 30일
05 · 복사
sk-ant- 키를 메모장에
settings/billing→settings/keys
자동 충전을 켜지 않으면 충전한 만큼만 쓰입니다. 검토 한 건이 245원이었습니다.
3.2 · Pop-up
API 키 생성+ 키 생성을 누르면 먼저 뜨는 창
ID 페더레이션을 사용하면 API 키가 필요하지 않습니다
ID 페더레이션 설정|API 키로 계속하기
회사 서버용 기능이라 오늘은 "API 키로 계속하기"를 누릅니다. 여기서 멈칫하는 분이 많습니다.
3.2 · Key form

키 만드는 창의 칸은 넷입니다

칸할 것
이름law-board처럼 적기
만료기본 30일. 계속 쓸 분은 더 길게
연결된 계정본인 이름 그대로
범위건드리지 않고 "키 생성"
3.2 · Once

sk-ant- 키는
딱 한 번 보입니다

바로 복사해서 메모장에 붙여 둡니다. 창을 닫으면 다시 볼 수 없고, 잃어버리면 새로 만들어야 합니다.
3 · Check

메모장에 두 줄이 있으면 됩니다

법제처 인증키      <인증값>
Anthropic API 키   sk-ant-...
이 두 줄은 11장에서 .env 파일로 옮깁니다.
3 · Why · OAuth vs API key

Claude Code 로그인과 API 키는 다릅니다

Claude Code 로그인 (OAuth 토큰)API 키
누가 쓰나나 한 사람, 내 PC에서여러 사람이 쓰는 프로그램
요금월 구독료로 정해짐쓴 만큼 크레딧에서 빠짐
두는 곳Claude Code 안프로그램의 서버 (.env)
그래서 법률 검토 대시보드도 직원이 각자 자기 API 키를 등록하는 방식으로 만들고 있습니다.
3 · Key = money

키가 곧 돈이라
화면 파일이나 채팅방에
붙이지 않습니다

11장에서 이걸 직접 확인합니다.
Chapter 04 · Empty folder

빈 폴더와
법령 도구 연결

PowerShell을 열고
폴더 하나, 명령 세 줄입니다.
04 · PowerShell

시작 메뉴에서 PowerShell을 열고 폴더를 만듭니다

mkdir law-board
cd law-board
어디서시작 메뉴 → "PowerShell" 검색
이름폴더 이름은 영어로
Claude Code가 없는 PC라면

집이나 자리 PC는
한 줄로 설치

irm https://claude.ai/install.ps1 | iex
code.claude.com/docs/ko/setup
전산교육실 PC에는 설치돼 있습니다. "not in your PATH"가 나오면 환경 변수 Path에 그 경로를 더합니다.
04 · Connect

상반기의 법령 도구를 Claude Code에 붙입니다

claude mcp add --transport http korean-law "https://korean-law-mcp.fly.dev/mcp?oc=<내 인증키>"
claude mcp list
claude
바꿀 곳<내 인증키> 자리에 3.1의 법제처 인증키
도구korean-law-mcp
04 · Check

여러 줄이 나와도 korean-law 줄만 봅니다

Checking MCP server health…

claude.ai Gmail: https://gmailmcp.googleapis.com/mcp/v1 - √ Connected
claude.ai Slack: https://mcp.slack.com/mcp - √ Connected
korean-law: https://korean-law-mcp.fly.dev/mcp?oc=<OC> (HTTP) - √ Connected
제 Windows PC에서 실제로 나온 출력입니다. 끝에 √ Connected가 붙어 있으면 됩니다.
04 · Why MCP

MCP는 Claude에게 도구를 쥐여 줍니다

붙이지 않으면
  • 법령 날짜를 기억에 의존해 말함
  • 틀려도 모름
붙이면
조회
법령정보센터에서 직접
값
공포일 · 시행일
같은 도구
상반기 Claude 프로젝트에 붙였던 것
이번 차이
Claude Code에 붙임
Chapter 05 · spec.md

무엇을 만들지
한 장으로

목표, 넘으면 안 되는 것,
잘 만들었는지 볼 기준.
묻기→답하기→spec.md
05 · Prompt 1

첫 문장은 내 부서와 일로 바꿉니다

Output질문 다섯 개
나는 GH 보상부에서 토지보상 일을 해. 우리 분야 법령이 언제 바뀌었는지, 곧 바뀌는 게 뭔지 한눈에 보는 대시보드를 만들 거야. spec.md 한 장으로 써줘. 목표, 넘으면 안 되는 것, 잘 만들었는지 볼 기준 세 개. 궁금한 거 있으면 먼저 물어봐.
바꿀 곳첫 문장. 내 부서, 내 일
세 가지목표 · 넘으면 안 되는 것 · 기준 세 개
마지막 말"먼저 물어봐"가 있어야 바로 쓰지 않습니다
05 · 15 seconds later

15초 뒤, 바로 쓰지 않고 다섯 가지를 물었습니다

1. 범위: "토지보상법" 본법만인가요, 시행령·시행규칙, 관련 고시, 개별 특별법까지 포함하나요?
2. 데이터 소스: 국가법령정보센터 같은 공식 API에서 가져올 수 있는 상태인가요? (...)
3. "곧 바뀐다"의 기준: 입법예고 단계부터 잡을지, 공포됐지만 아직 시행 전인 것만 잡을지
4. 사용자: 본인 혼자 보는 용도인가요, 아니면 팀 공유용인가요?
5. 형태: 웹 페이지 하나로 충분한가요, 아니면 엑셀/문서로도 뽑아야 하나요?
05 · Prompt 2

평소 말로 짧게 답합니다

30초 뒤spec.md
1. 토지보상법이랑 시행령, 시행규칙, 공공주택 특별법까지.
2. 상반기에 쓴 korean-law MCP 연결돼 있어. 그걸로 찾아.
3. 공포됐는데 아직 시행 안 된 것까지만.
4. 팀원도 같이 봐.
5. 웹 페이지 하나. index.html 파일 하나로. 나중에 bun으로 팀원한테 보여 주고 netlify에도 올릴 거야.
이대로 spec.md 써줘.
꼭 넣을 것"파일 하나로". 9·10장에서 공유할 때 편합니다
번호질문 번호에 맞춰 한 줄씩
05 · spec.md

시키지 않은 줄이 하나 들어갔습니다

- **날조 금지**: 개정 내용·시행일 등을 추측이나 요약으로 지어내지 않는다.
  MCP가 반환한 공식 데이터(공포일, 시행일, 개정 이유 등) 그대로 표기하고,
  없는 정보는 "미상"으로 남긴다.
어디spec.md "넘으면 안 되는 것"
누가법령을 다루는 일이라고 하니 Claude가 스스로
8장이 한 줄이 제 역할을 합니다
05 · Check

spec.md를 열어 두 가지를 봅니다

법령 목록이 내가 말한 것과 같은가클릭하면 체크
내가 말하지 않았는데 들어간 것이 맞는가틀리면 한 마디로 고침
05 · Why spec.md

spec.md를 먼저 쓰는 이유

"대시보드 만들어줘"만 하면 Claude가 빈 곳을 스스로 채웁니다
01법령 몇 개, 입법예고까지 볼지, 모르는 날짜는 어떻게 할지
02그 결정은 대화창에만 남았다가 사라짐
03spec.md에 적으면 내가 보고 고치고, 내일도 같은 기준
상반기 대시보드 반의 Plan 모드와 같은 일인데, 이번에는 계획을 파일로 남깁니다.
Chapter 06 · tasks.json

만드는 순서표
tasks.json

내가 확인하는 단계를 꼭 넣습니다.
거기서 Claude가 멈춥니다.
06 · Prompt 3

순서를 나누되, 아직 만들지는 말라고 합니다

45초 뒤단계 9개
spec.md 보고 만드는 순서를 tasks.json으로 나눠줘. 칸 뜻은 task.json에 적어줘. 화면 다 만든 다음 내가 확인하는 단계는 담당을 나로 해줘. 아직 만들지는 말고.
핵심담당이 "나"인 단계
칸 뜻따로 파일 대신 tasks.json 맨 위에 적었습니다. 이래도 됩니다
06 · 9 steps

6번까지 Claude, 7번부터 나

#단계담당
14개 법령 개정 이력 조회Claude
2시행 예정 항목 선별Claude
3데이터 스냅샷 구조화Claude
4-6화면 설계 · index.html 제작 · 동작 확인Claude
7완성 화면 검토나
8-9bun으로 팀원 시연 · Netlify 배포나
06 · One step

단계 하나는 이렇게 생겼습니다

{
  "id": 1,
  "title": "4개 법령 개정 이력 조회",
  "description": "korean-law MCP로 토지보상법, 토지보상법 시행령, 토지보상법 시행규칙, 공공주택 특별법의 개정 이력을 조회한다. (...)",
  "assignee": "assistant",
  "depends_on": [],
  "status": "todo"
}
assignee담당. assistant는 Claude, 내 이름은 나
depends_on먼저 끝나야 하는 단계
statustodo → done 진행 상태
06 · Why tasks.json

순서표를 따로 두는 이유

"다 만들어줘"
  • 끝까지 달려가 결과만 내놓음
  • 틀린 곳은 다 만든 뒤에야 보임
순서표
상태
어디까지 됐는지 파일에 남음
내 차례
Claude가 멈추고 기다림
사람이 볼 곳
법령 날짜 검토에 내 차례
PC를 꺼도
"tasks.json 이어서 해줘"
Chapter 07 · Build

순서표대로 만들고
내 차례에 확인

3분이면 화면이 나옵니다.
틀린 곳은 사람이 찾습니다.
07 · Prompt 4

순서대로, 기록 남기며, 내 차례에서 멈추라고

좋아. tasks.json 순서대로 해줘. 단계 하나 끝날 때마다 status 바꾸고 log에 한 줄 남겨. 내 차례가 오면 멈춰.
07 · 3 minutes later

6번까지 하고 멈췄습니다

생긴 파일index.html · log.md
1~6번 작업을 마쳤고, 7번(완성 화면 검토)은 담당이 kyra라서 여기서 멈춥니다.
kyra 자리에 여러분 이름이 나옵니다.
07 · log.md

단계마다 한 줄씩 기록이 남습니다

- 2026-09-25 task 1 완료: korean-law MCP로 4개 법령(토지보상법/시행령/시행규칙/공공주택특별법) 식별자·현행 공포일·시행일 조회
- 2026-09-25 task 2 완료: 공포~시행 전 항목 선별 — 토지보상법(3단계 시행예정 2026-12-17/2027-06-17/2027-09-09), 공공주택특별법(시행예정 2027-03-09). 시행령·시행규칙은 현재 시행예정 없음
07 · My turn

index.html을 더블클릭하면 이 화면

파일 탐색기에서 law-board 폴더를 엽니다.
처음 만든 현황판
07 · Find the wrong
4건?
시행 예정토지보상법이 세 번
개정은 하나인데 시행일이 셋이라 세 건으로 셌습니다
법령을 매일 보는 사람만 바로 알아챕니다.
07 · Prompt 5

본 그대로 말하고, 내 차례를 끝냅니다

50초 뒤4건 → 2건
화면 봤어. 시행 예정이 4건으로 나오는데 토지보상법은 개정 하나가 시행일만 셋이야. 한 줄로 묶고 시행일을 나란히 적어줘. 고치면 7번은 내가 확인한 걸로 처리해.
tasks.json의 7번이 done이 됐습니다.
07 · Check

날짜 하나는 원문과 맞춰 봅니다

날짜 하나를 골라 "원문 보기"를 누른다클릭하면 체크
국가법령정보센터 원문의 공포일·시행일과 같은가다르면 본 그대로 말한다
Chapter 08 · My idea

내 아이디어는
spec.md부터

여기서부터 각자 다릅니다.
화면이 아니라 문서를 먼저 고칩니다.
spec.md→tasks.json→화면
08 · Order

아이디어는 이 순서로 들어갑니다

화면을 바로 고치지 않고 spec.md부터. 마지막은 다시 내 차례입니다.
08 · Prompt 6

제 아이디어: 무엇이 바뀌는지 한 줄씩

4분 뒤13번에서 멈춤
내 아이디어 하나 넣을래. 시행 예정 개정마다 뭐가 바뀌는지 한 줄씩 보여 줘. spec.md부터 고치고 tasks.json에 단계 추가해서 이어서 해줘.
바꿀 곳가운데 한 문장이 내 아이디어
순서spec.md → tasks.json → 이어서
08 · spec.md diff

spec.md 목표에 한 줄, 순서표에 네 단계

4. 시행 예정 개정마다 **무엇이 바뀌는지 한 줄 요약**을 보여줘,
   원문을 열어보지 않아도 핵심을 파악할 수 있게 한다.
10요약 조회
11 · 12반영 · 동작 확인
13내가 검토 (여기서 멈춤)
08 · Result

시행 예정 개정마다 한 줄이 붙었습니다

아이디어를 넣은 뒤
08 · Found vs unknown

찾은 것은 쓰고,
못 찾은 것은 "미상"으로 남겼습니다

토지보상법
제89조의2 이행강제금 신설
최대 1천만원. 원문을 열어 보니 12월 17일 시행본에 실제로 있습니다
공공주택 특별법
미상, 원문 확인 필요
여러 방법으로 찾았지만 특정 못 함. 5장의 "날조 금지"대로 비워 둠
"미상"이 있으면 틀린 게 아니라 제대로 한 것입니다.
08 · Why spec first

아이디어를 spec.md부터 넣는 이유

화면만 고치면 아이디어가 index.html 안에만 있습니다
01다음에 "갱신해줘" 하면 spec.md 기준으로 다시 만들다 빠뜨릴 수 있음
02spec.md 목표에 적으면 이 현황판의 약속이 됨
03개발에서 새 요구가 오면 ADR부터 쓰는 것과 같은 이유
08 · Ideas

아이디어가 안 떠오르면 이 중 하나

01
우리 부서 법령 더하기
+
자주 보는 시행규칙·고시까지
02
D-day 크게
D-83
시행일까지 남은 날
03
분야 아이콘
6
1장 완성본처럼 나누기
04
최근 90일
90
최근에 바뀐 법령만 모아 보기
행정규칙·자치법규를 더하는 것도 됩니다.
Chapter 09 · Bun

같은 사내망
팀원에게 보여 주기

내 PC를 잠깐 웹 서버로 만듭니다.
09 · 처음 한 번만 설치

Bun 공식 안내의
Windows 명령 한 줄

powershell -c "irm bun.sh/install.ps1|iex"
bun.com/docs/installation
09 · 30 seconds later

이렇게 나오면 설치된 것입니다

Bun 1.4.2 was installed successfully!
The binary is located at C:\Users\smile\.bun\bin\bun.exe

To get started, restart your terminal/editor, then type "bun"
안내대로 PowerShell을 닫았다 다시 엽니다. 제 Windows PC에서 나온 그대로입니다.
09 · Run

폴더로 가서 켭니다

cd law-board
bun index.html --host=0.0.0.0
Bun v1.4.2 dev server ready in 5.53 ms

url: http://0.0.0.0:3000/
이 창은 닫지 않고 둡니다.
09 · Address

내 PC 주소를 찾아 옆 사람에게 알려 줍니다

01
창 하나 더 열고 ipconfig
02
"이더넷 어댑터" 아래 IPv4 주소
03
http://<내 PC 주소>:3000
04
다 봤으면 Ctrl + C
끄면 팀원도 못 들어옵니다. 사내 보안 규정상 막혀 있으면 제 PC로 보여 드립니다.
09 · Firewall

방화벽 창에서 "액세스 허용"을 눌러야 합니다

내 PC에서
localhost:3000
열림
허용을 누르지 않아도 내 PC 안에서는 보임
다른 PC에서
내 PC 주소:3000
응답 없음
제 Windows PC에서 허용을 누르지 않은 채 접속해 본 결과
09 · Why Bun

Bun은 내 PC를
잠깐 웹 서버로
만듭니다

더블클릭한 index.html은 내 PC에서만 보입니다. Bun으로 켜 두는 동안 같은 사내망 팀원이 주소로 들어옵니다. 설치가 한 줄이고 따로 설정할 것이 없어서 골랐습니다.
--host=0.0.0.0빼면 옆 사람은 못 들어옵니다
Chapter 10 · Netlify Drop

인터넷에
올리기

휴대폰으로도 보려면
파일을 끌어다 놓습니다.
10 · Netlify Drop

index.html을
"Drop here"로

잠시 뒤 https://<무작위 이름>.netlify.app 모양의 주소가 생깁니다.
app.netlify.com/drop
10 · Public

누구나 볼 수 있는 주소입니다

올리지 않는 것
  • 업무 메모
  • 담당자 이름
  • 민원인 정보
  • 11장 질문 칸 (키)
올려도 되는 것
법령 날짜
공개 정보
확인
휴대폰 와이파이 끄고 열기
업무 정보가 들어가면 9장 방식으로 사내에서만 보여 줍니다.
Chapter 11 · Ask box

질문 칸
붙이기

3장의 키 두 개를 여기서 씁니다.
8장처럼 spec.md부터.
11 · Prompt 7

질문 칸도 spec.md부터 고치게 합니다

2분 뒤spec에 키 규칙
질문 칸도 붙이고 싶어. 궁금한 걸 물으면 korean-law MCP로 조문 찾아서 답하게. API 키는 .env에 넣을 거야. spec.md부터 고치고 tasks.json에 추가해서 해줘.
11 · Stopped

그리고 바로 만들지 않고 멈췄습니다

다만 13번(지난번 요약 기능 화면 검토)이 아직 kyra 확인 대기 상태라 14번은 그 뒤에 걸려 있습니다.
13번 확인해 주시면 바로 14번부터 이어가겠습니다.
8장의 제 차례를 끝내지 않았기 때문입니다. 순서표가 순서를 지키게 합니다.
11 · Prompt 8

내 차례를 끝내고, 사내망 서버로

5분 뒤server.js
13번은 내가 확인했어. 질문 칸은 netlify 말고 bun 서버로 해줘. 사내망에서만 쓸 거야. 14번부터 이어서 해.
11 · .env

키 두 개를 .env 파일에 적습니다

notepad .env
LAW_API_KEY=<법제처 인증키>
ANTHROPIC_API_KEY=<sk-ant-...>
"새 파일을 만드시겠습니까?"에 "예". 칸 이름은 .env.example에 적힌 것과 같게.
11 · Run

서버를 켭니다

bun server.js
제 폴더에서는 여기서 문제가 두 가지 나왔습니다.
11 · Problem

주소 뒤에 /.env를 치면
키 파일이 그대로
열렸습니다

http://localhost:8787/.env · 같은 사내망 누구나 내 키를 가져갈 수 있었다는 뜻입니다. 질문 칸은 문장을 못 알아듣고 낱말만 찾았습니다.
11 · Prompt 9

본 그대로, 두 개를 고쳐 달라고 합니다

두 개 고쳐줘. 질문 칸이 낱말만 찾아서 문장으로 물으면 못 찾아. Claude API로 조문 찾아서 답하게 바꿔줘. 키는 ANTHROPIC_API_KEY로 .env에 넣을게. 그리고 주소 뒤에 /.env 치면 키가 그대로 보여. 화면 파일 말고는 안 열리게 막아줘.
하나문장으로 물어도 알아듣게
둘화면 파일만 내보내게. 고친 뒤 /.env는 열리지 않음
11 · Prompt 10

안 되면 또 본 그대로 말합니다

3분 뒤원인 찾음
.env에 키 두 개 넣었어. "잔여지 매수청구는 언제까지 할 수 있어?" 물어봤는데 "관련 조문을 찾지 못했습니다"만 나와. 토지보상법 제74조에 있는 내용이야. 직접 돌려 보고 고쳐줘.
원인: 법제처가 조문 본문을 항·호·목으로 나눠 주는데 제목 줄만 읽고 있었습니다.
11 · Answer

Windows PC에서 7초 만에 돌아온 답

질문잔여지 매수청구 기한
{
  "matches": [{
    "law": "토지보상법",
    "article": "제74조(잔여지 등의 매수 및 수용 청구)",
    "quote": "이 경우 수용의 청구는 매수에 관한 협의가 성립되지 아니한 경우에만 할 수 있으며, 사업완료일까지 하여야 한다."
  }],
  "answer": "잔여지 매수청구는 별도의 기한 제한 없이 사업시행자와 협의를 통해 청구할 수 있으나, 협의가 성립되지 않아 관할 토지수용위원회에 수용을 청구하는 경우에는 사업완료일까지 하여야 합니다."
}
answer답
quote인용한 문장이 원문에 정말 있는지 서버가 한 번 더 대조하고 남긴 것
11 · Check

서버를 켠 채로 /.env를 쳐 봅니다

브라우저 주소 뒤에 /.env를 친다클릭하면 체크
키가 보이면 Prompt 9를 그대로 친다안 열리면 통과
잔여지 질문에 조문 인용과 함께 답이 오는가7초 안팎
11 · Why .env

키는 .env에, 부르는 것은 서버가

.env
키 두 개는 여기에만
→
server.js키로 Claude와 법제처를 부름
index.html답만 받아서 보여 줌
화면 파일만서버가 내보내는 것은 이것뿐
→
답조문
2장의 ADR-0003과 같은 이야기입니다. Claude가 만든 서버는 "화면 파일만 내보내는가"를 꼭 확인합니다.
Chapter 12 · Demo

강사 시연
GitHub와 Vercel

따라 치지 않고 봅니다.
12 · Why

고칠 때마다 끌어다 놓지 않아도 됩니다

Claude Code
"올려줘"
01
GitHub
파일 저장소
github.com
02
Vercel
주소 만들기
vercel.com
03
Result
화면이 저절로 바뀜
한 번 연결해 두면
12 · Prompt

제가 치는 말은 이 정도입니다

깃허브에 비공개 저장소 만들어서 올려줘.
그다음 Vercel에서 그 저장소를 불러오면 주소가 생깁니다.
12 · Environment Variables

Vercel에서는 키를 파일이 아니라
설정 화면에 등록합니다

내 PC (11장)
  • .env 파일에 적음
  • bun server.js가 읽음
Vercel
어디
프로젝트 Settings → Environment Variables
무엇
ANTHROPIC_API_KEY · LAW_API_KEY
저장소
키는 올라가지 않음
고칠 때
올리면 주소 화면이 저절로 바뀜
한 곳 고친 뒤 주소의 화면이 바뀌는 것까지 보여 드립니다.
Submit

끝나면 세 가지를 냅니다

Netlify 주소10장
spec.md5장 · 8장
tasks.json6장 · 7장
Best 1

최우수 1인은 셋을 같이 보고 뽑습니다

8장에서 넣은 내 아이디어가 기준입니다
01새로운가
02내 업무에 실제로 쓸모가 있는가
Next month

법령이 또 바뀌면 이 한 줄이면 됩니다

spec.md랑 tasks.json 읽고, 법령 정보 오늘 기준으로 다시 조회해서 현황판 갱신해줘.
가져가는 것은 law-board 폴더 하나입니다.
Day 1 · Done

오늘은 내 현황판,
2일차는 상반기 과제의 다음 단계

Today · 9/30
내 분야 현황판
spec.md · tasks.json · 질문 칸 · 사내 공유
Day 2 · 10/2
2위 · 3위 과제 고도화
개인이 쓰던 것을 팀이 정식으로 쓰게
문의
김혜련
kyra@artetlab.com
수고하셨습니다.2일차는 10월 2일(금)입니다.