GH 심화교육

1일차 실습 교안 · 2026-09-30(수)

1일차. 내 분야 법령 개정 현황판 만들기

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

상반기에는 Claude 프로젝트에 법령 도구를 붙여 법률 챗봇을 만들었습니다. 오늘은 같은 법령 도구로 대시보드를 만듭니다. 내 분야 법령이 언제 바뀌었고 곧 무엇이 시행되는지 한 화면에 보이고, 궁금한 것을 물으면 조문으로 답하는 현황판입니다.

순서는 이렇습니다.

1. 제가 만든 완성본을 먼저 봅니다
2. 지금 개발 중인 법률 검토 대시보드가 어떤 문서로 만들어지고 있는지 봅니다
3. 키 두 개를 받습니다 (법제처 인증키, Anthropic API 키)
4. 빈 폴더를 만들고 법령 도구를 연결합니다
5. 무엇을 만들지 한 장으로 정합니다 (spec.md)
6. 만드는 순서표를 만듭니다 (tasks.json)
7. 순서표대로 만들게 하고, 내 차례에서 확인합니다
8. 내 아이디어를 넣습니다
9. 팀원에게 보여 주고, 인터넷에 올리고, 질문 칸을 붙입니다

모든 명령은 전산교육실 Windows PC의 PowerShell 기준입니다. 4장부터 나오는 "치면 무엇이 생기나"는 제가 빈 폴더에서 실제로 돌린 결과입니다. 보상부 직원이라고 치고 토지보상 법령으로 만들었습니다. 여러분 화면은 다르게 나옵니다.

준비물 전산교육실 PC(Claude Code 로그인), 휴대폰(가입 인증용), 결제용 카드 한 장(Anthropic API 크레딧 충전용). 내 분야에서 자주 보는 법령 이름 서너 개를 적어 오면 5장이 빨라집니다.

오늘 여는 사이트와 받는 프로그램은 이것이 전부입니다. 각 장에서 다시 안내합니다.

1. 오늘 만들 것 먼저 보기

제가 만든 현황판입니다. 상반기에 시스템 프롬프트를 다섯 탭(토지보상, 주택공급·분양, 건축·인허가, 도시계획·정비, 인사·노무)으로 나눴던 것에 일반 법령 검토를 더해 분야 6개를 아이콘으로 두었습니다. 분야를 누르면 그 분야 법령의 공포일, 시행일, 곧 시행될 개정이 나옵니다.

날짜는 전부 9월 25일에 법령 도구로 조회한 것입니다. 토지보상법은 12월 17일에 개정 시행이 잡혀 있습니다. 일반 법령 검토 분야의 지방공기업법은 2일차 교육날인 10월 2일에 시행됩니다.

아래 질문 칸에 물으면 법령 도구로 조문을 찾아 답합니다. 14초 걸렸고, 법령 도구를 두 번 불렀습니다.

오늘 여러분은 이 폴더를 복사하지 않습니다. 빈 폴더에서 내 분야 현황판을 처음부터 만들고, 마지막에 이 질문 칸까지 붙입니다. 질문 칸에는 키 두 개가 필요한데, 3장에서 다 같이 받습니다. 어렵지 않습니다.

2. 실제 개발은 이렇게 합니다: SPEC과 ADR

오늘 실습에 들어가기 전에, 지금 제가 GH에 만들고 있는 법률 검토 대시보드를 어떤 문서로 만들고 있는지 보여 드립니다. 상반기 법률 챗봇을 직원 누구나 웹 주소로 쓰게 하는 일이고, 10월 중순 오픈이 목표입니다. 오늘 여러분이 쓸 방식의 큰 버전이라, 먼저 보고 나면 5장과 6장이 왜 그런 순서인지 이해가 쉽습니다.

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

• SPEC(기획 문서): 무엇을 만드는가. 화면, 들어가는 것, 안 들어가는 것, 모듈별 완료 기준. 525줄입니다
• ADR(결정 기록): 왜 그렇게 정했는가. 결정 하나에 한 장씩, 결정·이유·버린 대안 세 칸. 9월 21일부터 23일까지 사흘 동안 21장이 쌓였습니다

SPEC에서 가장 먼저 보여 드리고 싶은 곳은 "들어가지 않는 것"입니다.

### 1.4 들어가지 않는 것

기능정의서 §5 그대로. 사내 시스템 연동, 한글·워드 파일 생성, 알림 발송,
모바일 앱, 외부 호출용 API, 오프라인 실행. 검토 결과는 화면 표시·복사·
마크다운 다운로드까지만.

이 여섯 줄이 없으면 Claude는 친절하게 알림 기능도 붙이고 한글 파일 저장도 붙입니다. 만들지 않을 것을 적어 두면 거기서 멈춥니다.

ADR 한 장은 이렇게 생겼습니다. 11장에서 여러분이 직접 겪을 문제와 같은 이야기라 이 장을 골랐습니다.

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

## 결정
브라우저는 AI 제공사를 직접 부르지 않는다. dashboard 서버가 직원 키를 복호화해
Anthropic API를 호출하고 (...) korean-law-mcp는 외부에 노출하지 않는다.

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

## 버린 대안
- 브라우저에서 직접 호출: 키 노출. 제외

지금 상태는 이렇습니다. 화면 없는 뒷단(검토 엔진, 분야별 템플릿, 검증)이 끝났고, 이번 주부터 화면과 키 등록을 만듭니다.

M3 검증에서는 질문 25건과 일부러 틀리게 만든 함정 질문 2건을 네 번 돌렸습니다. 마지막 판에서 출처 표시·인용 검증·검토 유형·함정 네 기준을 모두 통과했고, Sonnet 모델 기준 검토 한 건에 평균 245원이 들었습니다. 이 245원이 3장의 Anthropic API 키에서 나가는 돈입니다.

오늘 여러분은 SPEC과 ADR을 쓰지 않습니다. 그 대신 한 장짜리 spec.md와 순서표 tasks.json만 씁니다.

왜 이렇게 하나: 개발에는 SPEC과 ADR, 실습에는 spec.md와 tasks.json 법률 검토 대시보드는 GH 직원 전체가 쓰고, 한 달 넘게 여러 날에 걸쳐 만들고, 오픈한 뒤에도 고쳐야 합니다. 그래서 무엇을 만드는지(SPEC)와 왜 그렇게 정했는지(ADR)를 따로 남깁니다. Claude Code는 새로 켤 때마다 지난 대화를 기억하지 못하는데, 이 문서를 먼저 읽고 시작하면 지난주에 버린 방법을 다시 꺼내지 않습니다. 오늘 만드는 현황판은 나와 우리 팀이 쓰고 하루 안에 끝납니다. 그 크기에는 한 장짜리 목표(spec.md)와 순서표(tasks.json)면 충분합니다. 쓰는 사람이 많아지고 오래 고치게 되면 그때 결정 기록을 더하면 됩니다.

3. 키 두 개 받기

질문 칸에는 키가 두 개 필요합니다. 법령을 조회할 때 쓰는 법제처 인증키, 질문에 답할 Claude를 부를 때 쓰는 Anthropic API 키입니다. 둘 다 오늘 받습니다.

3.1 법제처 인증키

상반기에 받은 분은 건너뜁니다. 브라우저에서 https://open.law.go.kr을 열고 오른쪽 위 "로그인"을 누릅니다. 계정이 없으면 "사용자 가입"(https://open.law.go.kr/LSO/usrJoin.do)으로 가입합니다.

로그인한 뒤 위 메뉴 "OPEN API"에서 활용신청을 누르면 이 양식이 나옵니다.

빨간 점이 있는 칸만 채웁니다. 기업명은 경기주택도시공사, 시스템명은 "법령 개정 현황판", 설명과 활용 목적은 "부서 업무용 법령 개정 확인", 도메인은 "도메인 없음"으로 둡니다. 아래 법령 종류는 이미 전부 체크돼 있으니 그대로 신청합니다.

신청하면 법제처 담당자가 확인하고 승인합니다. 승인되면 사이트에 로그인해서 내 인증키(사이트에서는 "인증값" 또는 OC라고 부릅니다)를 확인합니다.

승인이 늦어지면 제가 해 봤을 때는 신청한 날 바로 승인됐습니다. 혹시 실습 시간 안에 승인이 안 나면 제가 가져온 공유용 인증키로 실습합니다. 오늘 안에 다 끝나고, 집에 가서 따로 할 것은 없습니다.

3.2 Anthropic API 키

브라우저에서 https://platform.claude.com을 엽니다. Claude를 만든 회사(Anthropic)의 개발자용 사이트입니다. 구글 계정이나 이메일로 가입합니다.

로그인하면 왼쪽 메뉴의 "조직 설정" 아래에 "결제"와 "API 키"가 있습니다. 순서는 셋입니다.

1. 결제 (https://platform.claude.com/settings/billing): 카드를 등록하고 크레딧을 충전합니다. 자동 충전을 켜지 않으면 충전한 만큼만 쓰입니다. 2장의 검토 한 건이 245원이었으니, 오늘 실습에는 적은 금액이면 충분합니다
2. API 키: 오른쪽 위 "+ 키 생성"을 누릅니다. 바로 가는 주소는 https://platform.claude.com/settings/keys 입니다. 먼저 "ID 페더레이션을 사용하면 API 키가 필요하지 않습니다"라는 창이 뜹니다. 회사 서버용 기능이라 오늘은 아래 "API 키로 계속하기"를 누릅니다
3. 키 이름과 만료: 이름 칸에 law-board처럼 적습니다. 만료는 기본이 30일입니다. 오늘 실습만 할 거면 그대로 두고, 계속 쓸 분은 더 길게 고릅니다. 연결된 계정은 본인 이름 그대로 두고 "키 생성"을 누릅니다

sk-ant-로 시작하는 키가 딱 한 번 보입니다. 바로 복사해서 메모장에 붙여 둡니다. 창을 닫으면 다시 볼 수 없고, 잃어버리면 새로 만들어야 합니다.

확인할 것: 메모장에 법제처 인증키 한 줄, sk-ant-로 시작하는 키 한 줄이 있는가.

왜 이렇게 하나: Claude Code 로그인과 API 키는 무엇이 다른가 지금 전산교육실 PC의 Claude Code는 구독 계정으로 로그인돼 있습니다. 이 로그인(OAuth 토큰)은 나 한 사람이 내 PC에서 쓰는 권한입니다. 요금은 월 구독료로 정해져 있고, 다른 사람이 쓰는 프로그램에 넣는 용도가 아닙니다. 대시보드처럼 여러 사람이 쓰는 프로그램이 Claude를 부를 때는 API 키를 씁니다. API 키는 쓴 만큼 크레딧에서 빠지고(2장의 검토 한 건 245원처럼), 프로그램 안 서버에 넣어 둡니다. 그래서 법률 검토 대시보드도 직원이 각자 자기 API 키를 등록하는 방식으로 만들고 있습니다. 키가 곧 돈이라, 화면 파일이나 채팅방에 붙이면 안 됩니다. 11장에서 이걸 직접 확인합니다.

4. 빈 폴더 만들고 법령 도구 연결하기

시작 메뉴에서 "PowerShell"을 검색해 엽니다. 폴더를 하나 만들고 들어갑니다. 폴더 이름은 영어로 합니다.

mkdir law-board
cd law-board

Claude Code가 없는 PC라면 전산교육실 PC에는 설치돼 있습니다. 집이나 자리 PC에 설치할 때는 PowerShell에 아래 한 줄을 칩니다. 설치 안내: https://code.claude.com/docs/ko/setup

irm https://claude.ai/install.ps1 | iex

끝에 "C:\Users\<이름>\.local\bin is not in your PATH"가 나오면, 윈도우 검색에서 "환경 변수"를 열어 사용자 Path에 그 경로를 더하고 PowerShell을 다시 엽니다.

상반기에 쓴 법령 도구(korean-law MCP, https://github.com/chrisryugj/korean-law-mcp)를 Claude Code에 연결합니다. <내 인증키>에 3.1의 법제처 인증키를 넣습니다.

claude mcp add --transport http korean-law "https://korean-law-mcp.fly.dev/mcp?oc=<내 인증키>"
claude mcp list
claude

확인할 것: claude mcp list에 여러 줄이 나와도 korean-law: https://korean-law-mcp.fly.dev/mcp?oc=... 줄만 봅니다. 끝에 √ Connected가 붙어 있으면 됩니다.

왜 이렇게 하나: MCP를 붙이는 이유 MCP는 Claude에게 도구를 쥐여 주는 연결 방식입니다. 상반기에 Claude 프로젝트에 붙였던 것과 같은 법령 도구를 이번에는 Claude Code에 붙였습니다. 이게 없으면 Claude는 법령 날짜를 기억에 의존해 말하고, 틀려도 모릅니다. 붙여 두면 만드는 동안 법령정보센터에서 공포일과 시행일을 직접 조회해서 화면에 넣습니다.

5. 무엇을 만들지 한 장으로 정하기: spec.md

만들기 전에 한 장짜리 문서부터 씁니다. 무엇을 만드는지, 넘으면 안 되는 것, 잘 만들었는지 볼 기준입니다.

나는 GH 보상부에서 토지보상 일을 해. 우리 분야 법령이 언제 바뀌었는지, 곧 바뀌는 게 뭔지 한눈에 보는 대시보드를 만들 거야. spec.md 한 장으로 써줘. 목표, 넘으면 안 되는 것, 잘 만들었는지 볼 기준 세 개. 궁금한 거 있으면 먼저 물어봐.

첫 문장은 여러분 부서와 일로 바꿉니다. 15초 뒤 바로 쓰지 않고 다섯 가지를 물었습니다.

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

평소 말로 짧게 답합니다. 5번에 "파일 하나로"를 꼭 넣습니다. 9장과 10장에서 팀원에게 보여 주고 인터넷에 올릴 때 이게 있어야 편합니다.

1. 토지보상법이랑 시행령, 시행규칙, 공공주택 특별법까지.
2. 상반기에 쓴 korean-law MCP 연결돼 있어. 그걸로 찾아.
3. 공포됐는데 아직 시행 안 된 것까지만.
4. 팀원도 같이 봐.
5. 웹 페이지 하나. index.html 파일 하나로. 나중에 bun으로 팀원한테 보여 주고 netlify에도 올릴 거야.
이대로 spec.md 써줘.

30초 뒤 spec.md가 생겼습니다. "넘으면 안 되는 것"에 이런 줄이 들어갔습니다.

- **날조 금지**: 개정 내용·시행일 등을 추측이나 요약으로 지어내지 않는다.
  MCP가 반환한 공식 데이터(공포일, 시행일, 개정 이유 등) 그대로 표기하고,
  없는 정보는 "미상"으로 남긴다.

제가 시킨 적 없는 줄입니다. 법령을 다루는 일이라고 하니 스스로 넣었습니다. 이 한 줄이 8장에서 제 역할을 합니다.

확인할 것: spec.md의 법령 목록이 내가 말한 것과 같은가. 내가 말하지 않았는데 들어간 것이 있으면 맞는지 봅니다.

왜 이렇게 하나: spec.md를 먼저 쓰는 이유 "대시보드 만들어줘"라고만 하면 Claude는 빈 곳을 스스로 채웁니다. 법령을 몇 개 넣을지, 입법예고까지 볼지, 모르는 날짜는 어떻게 할지를 알아서 정하고, 그 결정은 대화창에만 남았다가 사라집니다. spec.md에 먼저 적으면 그 결정을 내가 보고 고칠 수 있고, 내일 새로 켜도 Claude가 이 파일을 읽고 같은 기준으로 일합니다. 상반기 대시보드 반에서 Plan 모드로 계획을 받았던 것과 같은 일인데, 이번에는 그 계획을 파일로 남긴다는 점이 다릅니다.

6. 만드는 순서표 만들기: tasks.json

spec.md를 보고 만드는 순서를 단계로 나누게 합니다. 이때 내가 확인하는 단계를 꼭 넣습니다. 거기서 Claude가 멈추고 저를 기다립니다.

spec.md 보고 만드는 순서를 tasks.json으로 나눠줘. 칸 뜻은 task.json에 적어줘. 화면 다 만든 다음 내가 확인하는 단계는 담당을 나로 해줘. 아직 만들지는 말고.

45초 뒤 tasks.json에 단계 아홉 개가 생겼습니다. 칸 뜻은 따로 파일을 만들지 않고 tasks.json 맨 위에 적었습니다. 이래도 됩니다.

1  4개 법령 개정 이력 조회      Claude
2  시행 예정 항목 선별          Claude
3  데이터 스냅샷 구조화         Claude
4  화면 레이아웃 설계           Claude
5  index.html 제작             Claude
6  로컬 동작 확인               Claude
7  완성 화면 검토               나
8  bun으로 팀원 시연            나
9  Netlify 배포                나

단계 하나는 이렇게 생겼습니다. depends_on은 먼저 끝나야 하는 단계, status는 진행 상태입니다.

{
  "id": 1,
  "title": "4개 법령 개정 이력 조회",
  "description": "korean-law MCP로 토지보상법, 토지보상법 시행령, 토지보상법 시행규칙, 공공주택 특별법의 개정 이력을 조회한다. 각 개정 건의 공포일, 시행일, 개정 이유를 확보한다.",
  "assignee": "assistant",
  "depends_on": [],
  "status": "todo"
}

확인할 것: 담당이 "나"(여러분 이름)인 단계가 있는가. 없으면 "7번 담당을 나로 바꿔줘" 한 마디로 고칩니다.

왜 이렇게 하나: 순서표를 따로 두는 이유 한 번에 "다 만들어줘"라고 하면 Claude는 끝까지 달려가서 결과만 내놓습니다. 중간에 틀린 게 있어도 다 만든 뒤에야 보입니다. 순서표로 나눠 두면 단계마다 상태가 파일에 남아서 어디까지 됐는지 보이고, 담당이 "나"인 단계에서는 Claude가 멈춥니다. 법령 날짜처럼 사람이 봐야 하는 곳에 내 차례를 넣어 두는 것이 핵심입니다. 중간에 PC를 꺼도 "tasks.json 이어서 해줘"로 다음 단계부터 다시 갑니다.

7. 순서표대로 만들게 하고, 내 차례에서 확인하기

이제 순서표대로 하라고 합니다.

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

3분 뒤, 6번까지 하고 멈췄습니다.

1~6번 작업을 마쳤고, 7번(완성 화면 검토)은 담당이 kyra라서 여기서 멈춥니다.

폴더에 index.html과 작업 기록 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). 시행령·시행규칙은 현재 시행예정 없음

파일 탐색기에서 law-board 폴더를 열고 index.html을 더블클릭합니다.

여기가 7번, 내 차례입니다. 맨 위에 "시행 예정 4건"이라고 떴습니다. 그런데 아래를 보면 토지보상법이 세 번 나옵니다. 개정은 하나인데 시행일이 세 번으로 나뉘어 있어서 세 건으로 셌습니다. 법령을 매일 보는 사람만 바로 알아챕니다.

화면 봤어. 시행 예정이 4건으로 나오는데 토지보상법은 개정 하나가 시행일만 셋이야. 한 줄로 묶고 시행일을 나란히 적어줘. 고치면 7번은 내가 확인한 걸로 처리해.

50초 뒤 "시행 예정 2건"으로 바뀌었고, 토지보상법은 한 줄에 시행일 세 개가 나란히 붙었습니다. tasks.json의 7번은 done이 됐습니다.

확인할 것: 내 현황판의 날짜 하나를 골라 "원문 보기"를 눌러 국가법령정보센터 원문과 같은지 봅니다.

8. 내 아이디어 넣기: spec.md부터 고친다

여기서부터 각자 다릅니다. 현황판에 더하고 싶은 것 하나를 넣습니다. 이때 화면을 바로 고치라고 하지 않고, spec.md부터 고치고 순서표에 단계를 더하라고 합니다.

저는 시행 예정 개정마다 무엇이 바뀌는지 한 줄씩 보고 싶었습니다.

내 아이디어 하나 넣을래. 시행 예정 개정마다 뭐가 바뀌는지 한 줄씩 보여 줘. spec.md부터 고치고 tasks.json에 단계 추가해서 이어서 해줘.

spec.md 목표에 한 줄이 더해졌습니다.

4. 시행 예정 개정마다 **무엇이 바뀌는지 한 줄 요약**을 보여줘,
   원문을 열어보지 않아도 핵심을 파악할 수 있게 한다.

tasks.json에는 10-13번(요약 조회, 반영, 동작 확인, 내가 검토)이 붙었습니다. 4분 뒤 13번, 다시 제 차례에서 멈췄습니다.

토지보상법에는 "이행강제금(최대 1천만원)을 부과하는 제89조의2 신설"이 붙었습니다. 원문을 열어 보니 12월 17일 시행본에 제89조의2(이행강제금)가 실제로 있습니다. 공공주택 특별법에는 "미상, 원문 확인 필요"가 붙었습니다. 여러 방법으로 찾아봤지만 무엇이 바뀌는지 특정하지 못해서, 5장에서 스스로 넣은 "지어내지 않는다"대로 비워 둔 것입니다.

확인할 것: 요약이 붙은 줄 하나를 골라 원문과 맞는지 봅니다. "미상"이 있으면 틀린 게 아니라 제대로 한 것입니다.

왜 이렇게 하나: 아이디어를 spec.md부터 넣는 이유 화면만 바로 고치면 그 아이디어는 index.html 안에만 있습니다. 다음에 "법령 다시 조회해서 갱신해줘"라고 하면 Claude는 spec.md를 기준으로 다시 만들다가 한 줄 요약을 빠뜨릴 수 있습니다. spec.md 목표에 적어 두면 그 기능은 이 현황판의 약속이 되고, 순서표에 단계가 붙어 진행 상황도 남습니다. 2장의 개발에서 새 요구가 오면 ADR부터 쓰는 것과 같은 이유입니다.

아이디어가 안 떠오르면 우리 부서가 자주 보는 법령 더하기, 시행일까지 남은 날(D-day) 크게 보여 주기, 분야 아이콘으로 나누기(1장 완성본처럼), 최근 90일 안에 바뀐 법령만 모아 보기, 행정규칙·자치법규 더하기.

9. 같은 사내망 팀원에게 보여 주기: Bun

처음 한 번만 Bun을 설치합니다. 설치 안내는 https://bun.com/docs/installation에 있고, 아래 한 줄이 거기 적힌 Windows 명령입니다.

powershell -c "irm bun.sh/install.ps1|iex"

30초쯤 뒤 끝에 이렇게 나오면 설치된 것입니다.

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을 닫았다 다시 열고, 폴더로 가서 켭니다.

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/

PowerShell 창을 하나 더 열어 ipconfig를 칩니다. 어댑터가 여러 개 나오면 "이더넷 어댑터" 아래 "IPv4 주소"가 내 PC 주소입니다. 옆 사람 PC 브라우저에서 http://<내 PC 주소>:3000을 열어 보게 합니다.

Bun을 처음 켜면 Windows 방화벽 창이 뜹니다. 여기서 "액세스 허용"을 눌러야 옆 사람이 들어옵니다. 제 Windows PC에서 이 창을 누르지 않은 채 다른 컴퓨터로 접속해 보니, 내 PC 안에서는 열리는데 다른 컴퓨터에서는 응답이 없었습니다. 다 봤으면 Bun 창에서 Ctrl + C로 끕니다. 끄면 팀원도 못 들어옵니다. 사내 보안 규정상 막혀 있으면 이 장은 제 PC로 보여 드립니다.

확인할 것: 옆 사람 PC에서 내 현황판이 열리는가.

왜 이렇게 하나: Bun이 하는 일 Bun은 내 PC를 잠깐 웹 서버로 만들어 주는 실행 도구입니다. 더블클릭으로 연 index.html은 내 PC에서만 보이는데, Bun으로 켜면 같은 사내망의 다른 PC가 주소를 치고 들어올 수 있습니다. 설치가 명령 한 줄이고 따로 설정할 것이 없어서 골랐습니다. 뒤에 붙인 --host=0.0.0.0이 "같은 망의 다른 PC도 들어오게 해라"라는 뜻입니다. 이걸 빼고 bun index.html만 치면 내 PC에서만 열리고 옆 사람은 못 들어옵니다.

10. 인터넷에 올리기: Netlify Drop

9장 주소는 사내망 안에서, 내 PC가 켜져 있을 때만 열립니다. 휴대폰으로도 보려면 인터넷에 올립니다. Netlify Drop은 파일을 끌어다 놓으면 인터넷 주소를 만들어 주는 사이트입니다.

브라우저에서 https://app.netlify.com/drop을 엽니다.

파일 탐색기에서 index.html을 가운데 "Drop here"로 끌어다 놓습니다. 잠시 뒤 https://<무작위 이름>.netlify.app 모양의 주소가 생깁니다.

확인할 것: 휴대폰(와이파이 끄고)으로 그 주소가 열리는가.

누구나 볼 수 있는 주소입니다 법령 날짜는 공개 정보라 올려도 됩니다. 현황판에 업무 메모, 담당자 이름, 민원인 정보를 넣었다면 올리지 않고 9장 방식으로 사내에서만 보여 줍니다. 11장의 질문 칸은 키가 들어가기 때문에 Netlify에는 올리지 않습니다.

11. 질문 칸 붙이기

1장 완성본처럼 질문하면 조문으로 답하는 칸을 붙입니다. 3장에서 받은 키 두 개를 여기서 씁니다. 8장과 똑같이 spec.md부터 고치게 합니다.

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

2분 뒤 spec.md에 "API 키는 .env에만 두고 화면 파일에 넣지 않는다"는 뜻의 줄이 생기고, tasks.json에 단계가 붙었습니다. 그리고 바로 만들지 않고 멈췄습니다.

다만 13번(지난번 요약 기능 화면 검토)이 아직 kyra 확인 대기 상태라 14번은 그 뒤에 걸려 있습니다.
13번 확인해 주시면 바로 14번부터 이어가겠습니다.

8장에서 제 차례인 13번을 끝내지 않았기 때문입니다. 순서표가 이렇게 순서를 지키게 합니다. 이어서 친 말은 이것입니다.

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

5분 뒤 server.js와 .env.example이 생겼습니다. 이제 키를 넣습니다. PowerShell에서 메모장으로 .env 파일을 엽니다.

notepad .env

"새 파일을 만드시겠습니까?"에 "예"를 누르고, 3장에서 메모장에 붙여 둔 키 두 개를 이렇게 적고 저장합니다. 칸 이름은 .env.example에 적힌 것과 같게 씁니다.

LAW_API_KEY=<법제처 인증키>
ANTHROPIC_API_KEY=<sk-ant-로 시작하는 키>

서버를 켭니다.

bun server.js

제 폴더에서는 여기서 두 가지 문제가 나왔습니다. 질문 칸이 문장을 알아듣지 못하고 낱말만 찾았고, 브라우저 주소 뒤에 /.env를 치면(제 경우 http://localhost:8787/.env) 키 파일이 그대로 열렸습니다. 같은 사내망 누구나 내 키를 가져갈 수 있었다는 뜻입니다. 본 그대로 고쳐 달라고 했습니다.

두 개 고쳐줘. 질문 칸이 낱말만 찾아서 문장으로 물으면 못 찾아. Claude API로 조문 찾아서 답하게 바꿔줘. 키는 ANTHROPIC_API_KEY로 .env에 넣을게. 그리고 주소 뒤에 /.env 치면 키가 그대로 보여. 화면 파일 말고는 안 열리게 막아줘.

그다음에는 "관련 조문을 찾지 못했습니다"만 나왔습니다. 이것도 본 그대로 말했습니다.

.env에 키 두 개 넣었어. "잔여지 매수청구는 언제까지 할 수 있어?" 물어봤는데 "관련 조문을 찾지 못했습니다"만 나와. 토지보상법 제74조에 있는 내용이야. 직접 돌려 보고 고쳐줘.

3분 뒤 Claude가 원인을 찾았습니다. 법제처가 조문 본문을 항·호·목으로 나눠서 주는데 제목 줄만 읽고 있었습니다. 고친 폴더를 Windows PC로 옮겨 bun server.js로 켜고 같은 질문을 하니 7초 만에 이렇게 돌아왔습니다.

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

answer가 답이고, quote는 Claude가 인용한 문장이 원문에 정말 있는지 서버가 한 번 더 대조하고 남긴 것입니다.

확인할 것: 서버를 켠 채로 브라우저 주소 뒤에 /.env를 쳐 봅니다. 키가 보이면 위의 "두 개 고쳐줘"를 그대로 칩니다.

왜 이렇게 하나: 키를 .env에 두고 서버가 부르는 이유 2장의 ADR-0003과 같은 이야기입니다. 키를 index.html에 넣으면 화면을 여는 사람 누구나 키를 볼 수 있습니다. 그래서 키는 .env 파일에만 두고, 내 PC의 서버(server.js)가 그 키로 Claude를 부른 뒤 답만 화면에 넘깁니다. 그런데 서버가 폴더 안 파일을 아무거나 내보내면 .env도 같이 나갑니다. 제 폴더가 딱 그랬습니다. Claude가 만든 서버는 "화면에 필요한 파일만 내보내는가"를 꼭 한 번 확인합니다.

12. 강사 시연: GitHub와 Vercel

이 장은 따라 치지 않고 봅니다.

Netlify Drop은 고칠 때마다 파일을 다시 끌어다 놓아야 합니다. 저는 평소에 GitHub와 Vercel을 씁니다. GitHub(https://github.com)는 파일을 올려 두는 저장소이고, Vercel(https://vercel.com)은 그 저장소와 연결해 인터넷 주소를 만들어 주는 서비스입니다. 한 번 연결해 두면 고친 것을 올릴 때마다 주소의 화면이 저절로 바뀝니다.

제가 Claude Code에 치는 말은 이 정도입니다.

깃허브에 비공개 저장소 만들어서 올려줘.

그다음 Vercel에서 그 저장소를 불러오면 주소가 생깁니다. 질문 칸의 키는 11장처럼 .env 파일에 두지 않고, Vercel 프로젝트의 Settings → Environment Variables에 ANTHROPIC_API_KEY와 LAW_API_KEY를 등록합니다. 현황판을 한 곳 고친 뒤 주소의 화면이 바뀌는 것까지 보여 드립니다.

끝나면

세 가지를 냅니다.

• 10장에서 만든 Netlify 주소
• spec.md
• tasks.json

최우수 1인은 이 셋을 같이 보고 뽑습니다. 8장에서 넣은 아이디어가 새로운지, 내 업무에 실제로 쓸모가 있는지 봅니다.

가져가는 것은 law-board 폴더 하나입니다. 다음 달에 법령이 또 바뀌면 이 폴더에서 Claude Code를 켜고 이렇게만 치면 됩니다.

spec.md랑 tasks.json 읽고, 법령 정보 오늘 기준으로 다시 조회해서 현황판 갱신해줘.