[3주차] 지식베이스 중심의 '법률 용어사전' 웹앱 서비스 설계(NotebookLM + Claude)

[3주차] 지식베이스 중심의 '법률 용어사전' 웹앱 서비스 설계

NotebookLM + Claude + Claude Code 3단계 파이프라인

'용어 선별 + 뜻'(클로드가 한번에 작업, 1차) -> 기획 방향을 고도화함
법조문 연결 -> 사이트 방향 픽스
용어의 정교화(NotebookLM 적극 활용, 2차)
재배포

소개

1) 시도한 것

데이터 베이스 구축: 기본에 충실하자!
1주차와 2주차는 이미 콘텐츠를 가지고 있고 이를 활용하여 웹앱 서비스(인증절차 등 관리자 페이지 필요)를 만드는 데 중점을 두었다면, 3주차에는 콘텐츠를 새로 생성하는 데에서 출발하여 비교적 간단한 웹엡 서비스를 설계했습니다.
베리어프리 서비스: 알기 쉬운 법령 사이트 구축을 해보자! *정보 접근성 강화
국가법령 5,000개 중 4,600여건 이상이 행정법령에 해당('21.1. 기준)한다는 보고서를 보고, 법률 모바일 용어사전 웹앱을 만들었어요. 사이트로도 접근 가능하고 관련된 교재에 QR코드를 스캔하면 바로 접속되는 구조예요. 시범적으로 행정법으로 구축해보았습니다.

2) 목표

법을 처음 읽는 일반인 혹은 수험생이 낯선 용어에서 막히지 않도록. 용어 자체의 낯섦을 해소하는 것이 핵심이에요.

핵심 포인트: 이번 프로젝트의 포인트는 콘텐츠(지식베이스) 자체를 직접 구축한 것이에요.

용어 선정 + '용어 + 뜻 연결' + 법조문 사이트 연결

진행 방법

1) 작업에 사용한 도구들

2) 각 도구의 역할

NotebookLM  → 소스 기반 수집·출처 추적
Claude.ai   → 편집 기준 설계·뜻 작성·맥락 판단
Claude Code → 자동화·검증·파일 생성·배포
사람        → 방향 결정·최종 검수

3) 구체적인 내용

1단계 — Claude.ai로 콘텐츠 설계

편집 기준을 먼저 잡았어요. 웹앱 구조보다 중요한 작업이었어요.

용어 규칙: 간결 & 쉬운 표현 & 명사형
한자 병기: 동음이의어(발음이 같고 뜻이 다른 것)만 적용
관련 용어: 서로 비교해서 보면 유용한 용어들(취소 vs. 철회) & 유사/확장 용어 등 -> see 필드로 연결
보안 규칙: 순수 용어 정리에만 집중(출제 포인트·심화 해설·교재 핵심 콘텐츠는 DB에 넣지 않음) + 저작권 이슈 최소화

💡 이 규칙들을 CLAUDE.md에 명문화해두면 Claude Code가 매번 일관되게 적용해요.

2단계 — NotebookLM으로 용어 확장 (가장 많은 시간을 들이고 집중했던 단계)

기출문제 PDF + 법령용어 자료를 소스로 업로드했어요.
소스를 한꺼번에 넣지 않고, 세부적으로 단계를 나눠서 질문했어요.
NotebookLM에는 꼭 필요한 데이터 소스를 넣고 지침(프롬프트)도 정교화할 것(모두 학습함)

1차: 기출문제만 → 용어 목록 추출 (단어명만)
2차: 법령용어 추가 → 법조문 정의 조항 추출
3차: 참고자료 추가 → 나머지 용어 뜻 초안

A/B/C 중요도로 분류하다가 방향을 바꿨어요. 검색형 용어사전은 줄이는 게 목적이 아니라 표시 방식을 다르게 하는 것이 맞았거든요.

3단계 — Claude + Claude Code로 DB 병합·배포

기존 DB와 중복 검사 먼저 했어요.

신규 후보 132개
  → 기존 DB와 비교
  → 중복: 기존 meaning 유지 (덮어쓰기 금지)
  → 신규: 새로 뜻 작성

Claude Code 자동화 흐름

# DB 교체 핵심 코드
s = content.index("const DB = [")
e = content.index("];", s) + 2
content = content[:s] + new_db + content[e:]

검증 후 zip 생성까지 한 번에

DB 검증 → index.html 교체 → zip 생성 → Cloudflare 배포

4) 최종 결과물

웹앱: 용어사전 + 법조문 탭 (Cloudflare Pages 배포)
DB: 기존 + 신규 병합 최종본
배포용 zip 파일

용어 검색 & 관련 용어 링크

용어 키워드 형광펜 표시

용어 제안하기: 관리자 메일로 이동

법조문: 주제별 분류 & 법제처 사이트 연결

* 다음의 배포 형태와 비교 필요

1. GitHub Pages 
   파일 올리기 → URL 자동 생성
   예) username.github.io/terms

2. Netlify (무료)
   파일 드래그앤드롭 → URL 자동 생성
   예) random-name.netlify.app

3. 도메인 연결

결과와 배운 점

1) 배운 점 & 나만의 꿀팁

CLAUDE.md에 규칙을 명문화하세요.
작업 기준, 금지 사항, 검증 체크리스트를 담아두면 매번 설명 없이 일관성이 유지돼요.
NotebookLM은 수집 도구, Claude는 작성 도구
소스 분석은 NotebookLM이 강하고, 뜻 풀어쓰기·뉘앙스 판단은 Claude가 더 정교해요. 역할을 섞으면 비효율이에요.
검색은 단어명만, 형광펜은 뜻에도
단어+뜻 모두 검색하면 엉뚱한 단어가 너무 많이 떠요. 검색 대상과 표시 대상을 분리하는 게 포인트예요.

2) 시행착오

NotebookLM 첫 추출이 너무 압축됨 → 세부 계열 용어를 예시로 들어 추가 요청으로 해결
중복 검사 없이 바로 작성할 뻔함 → 기존 DB 비교 먼저
Cloudflare zip 구조 실수 → index.html 단독으로 있어야 함 (폴더 감싸면 404)
용어 제안 mailto → 모바일 미작동 → Google Forms로 교체

3) SOS: 도움이 필요한 부분

NotebookLM 법조문 정의 조항 추출 시 누락 최소화 방법

4) 향후 계획

검수 완료 후 웹앱 업데이트 배포
기출·법령 소스 추가로 용어 대폭 확장
공공데이터 적극 활용하여 다른 법령으로 확장

도움 받은 글 (옵션)

스터디장님 사례글

📣 24기 대기자 모집이 시작되었습니다!

[3주차] 지식베이스 중심의 '법률 용어사전' 웹앱 서비스 설계(NotebookLM + Claude)