할루시네이션 없는 AI 콘텐츠

상식 퀴즈 게임 구현하기

상식 퀴즈 게임을 클로드 코드로 구현할 수 있도록 PRD를 바탕으로 3단계 프롬프트를 정리해 줘.

프롬프트를 차례로 입력하는 중에 그만 토큰이 바닥이 나 버렸습니다.
너무 오래걸려서 이상하게 생각하던중에 제가 바닐라 JS랑 리액트 중에서 선택을 리액트로 했다는 사실이 떠올랐습니다.
클로드의 추천은 바닐라 JS였는데 뭔가 생소하기도 하고 어디선가 리액트를 들어본 것 같아서 그냥 리액트를 선택했거든요.
다음날 토큰이 다시 차서 오랜 기다림 끝에 개발을 완료했습니다.
그런데 말이죠 localhost주소로 들어가면 실행이 되는데, 이전 실습처럼 폴더로 들어가서 index 파일을 열면 빈 화면만 나오더라구요.

• 파일 더블클릭으로 실행되는 앱 = 정적 HTML 앱
• 서버 주소로만 실행되는 앱 = 빌드/번들 단계가 필요한 SPA

갑자기 너무 어려운 말이 나와서 당황했는데 SPA(Single Page Application)는 ‘웹페이지’가 아니라 ‘웹프로그램’으로 이해하면 된다고 하네요. React 앱의 index.html은 앱이 아니라 ‘앱을 조립하라는 지시서’이며 SPA의 HTML은 결과물이 아닌 것이 포인트입니다.

직접 느낀 혼란	SPA 개념
파일 실행 안 됨	HTML이 진입점일 뿐
localhost만 됨	서버 필요
새로고침 오류	라우팅은 JS
dist는 왜 다르지	빌드 결과물
배포가 복잡함	파이프라인 필수

SPA(Single Page Application) 한 줄 정의
페이지를 새로 안 불러오고, 화면만 갈아끼우는 웹

정말 앱이 돌아가니까 너무 신기합니다!
공부하는김에 리액트를 선택했을때 시간이 오래 걸린 이유에 대해서도 알아보았습니다.

1️⃣ 클로드가 왜 “바닐라 JS”를 추천했을까?

클로드 입장에서 너의 요구를 보면:

• 단일 페이지
• 입력 → 결과 표시
• 서버 없음
• 블로그에 붙일 도구
• 빠른 완성

👉 이 조건엔 React가 과함

그래서 추천한 게: Vanilla JS (HTML + CSS + JS)

2️⃣ 네가 React를 고른 이유도 합리적이야

너 생각은 이거였을 거야:

• “나중에 확장할 수 있지 않을까?”
• “요즘 다 React 쓰잖아”
• “컴포넌트 구조가 깔끔할 것 같아서”

👉 이건 공부 관점에선 100점 선택이야.

3️⃣ 근데 왜 체감상 “오래 걸렸나?”

React가 추가로 요구하는 것들

• 프로젝트 세팅
• 개발 서버
• JSX 이해
• state / props
• 빌드 & 배포
• 경로 / 라우팅 개념

👉 기능 10줄인데 환경이 100줄

4️⃣ 바닐라 JS로 만들었으면 어땠을까?

구조 예시

index.html
style.css
script.js

• 더블클릭 → 실행
• 배포 = 파일 업로드
• iframe 바로 삽입
• 디버깅 쉬움

👉 개발 시간 1/3
👉 이해 난이도 1/2

5️⃣ 그렇다고 React 선택이 실패냐?

❌ 전혀 아님.

지금 얻은 것:

• SPA 개념
• 배포 파이프라인
• GitHub / Netlify 흐름
• 실무 웹앱 구조

👉 이건 나중에 훨씬 큰 자산이 된다.

6️⃣ “다음 앱”에 대한 현실적인 전략

🔹 방문자 유입용 계산기 / 도구

➡ Vanilla JS

🔹 복잡한 상태 / 페이지 / 확장

➡ React

🔹 학습 + 포트폴리오

➡ React

전 AI 없이는 못살아요… 이해하고 넘어가니까 속이 시원합니다.

---

AI의 당당한 거짓말, ‘할루시네이션’

할루시네이션(Hallucination)이란, AI가 사실이 아닌 정보를 마치 진실인 것처럼 그럴듯하게 꾸며내는 현상을 말합니다.

왜 생길까?

AI는 사실을 판별하는 게 아니라, 학습된 패턴에 따라 ‘다음에 올 가장 자연스러운 단어’를 예측하기 때문입니다. 모르는 내용도 “모릅니다”라고 하지 않고, 확신에 찬 어조로 거짓 답을 생성합니다.

대표적인 예시

• 역사 왜곡: “세종대왕의 맥북 던짐 사건에 대해 알려줘” → 그럴듯한 연도와 일화를 지어내 설명함.
• 가짜 정보: 존재하지 않는 논문 제목이나 가상의 통계 수치를 진짜처럼 인용함.
• 퀴즈 오류: “가장 빠른 육상 동물은 독수리”처럼 조건(육상)을 무시하고 오답을 제시함.

필수 가이드라인

퀴즈나 교육 자료처럼 정확성이 생명인 콘텐츠를 만들 때는 AI를 맹신하면 위험합니다.
출처 확인: AI에게 정보의 출처(URL)를 요구하여 근거를 체크하세요.
교차 검증 필수: 수치, 연도, 인명은 반드시 검색으로 확인하세요.

/memory 명령어로 가이드라인 구축

/memory : AI가 기억하는 프로젝트 정보를 확인하고 관리. CLAUDE.md 파일을 편집합니다.

• /memory 입력 → Project memory 선택
• 시스템 에디터에서 CLAUDE.md 열림
• 가이드라인 추가 후 저장

여기에 가이드라인을 붙여넣기하였습니다.
이게 제가 실습을 쭉 하다가보니 PDR프롬프트에서 멈췄어야했는데 가이드라인까지 전부 클로드 프롬프트로 입력을 했거든요.
강의에서 보여주는 CLAUDE.md 파일은 영어로 되어 있는데 전 한글로 되어있고 그럽니다.

현재 프로젝트의 CLAUDE.md 내용을 확인해줘.

지금까지 만들어진 문제를 방금 저장한 가이드라인을 참고해서 점검해 줘. 가이드라인에 맞지 않은 퀴즈와 정답이 있다면 이에 맞게 수정해줘.

---

자동화로 개발 효율 높이기

커스텀 명령어(Custom Command)란?

사용자가 직접 정의하는 나만의 단축 지시어.
반복적으로 쓰는 지시사항을 명령어로 만들어 두면, 매번 긴 프롬프트를 입력하지 않아도 됩니다.

전역 명령어 vs 프로젝트 명령어

전역 명령어

~/.claude/commands/

홈 디렉터리에 저장.
모든 프로젝트에서 공통으로 사용 가능(~ 는 홈 디렉터리를 의미)

프로젝트 명령어

.claude/commands/

현재 프로젝트 폴더에 저장
해당 프로젝트에서만 사용 가능(. 는 현재 디렉터리를 의미)

첫 번째 커스텀 명령어 만들기

1. 명령어 폴더 생성 : “.claude/commands 폴더를 생성해줘”
2. 명령어 파일 생성 : quiz-validate.md 파일 생성 요청
3. 클로드 코드 재시작 : /exit → claude
4. 명령어 실행 : /quiz-validate

커스텀 명령어 생성 후 반드시 클로드 코드 재시작 필요!

현재 프로젝트에 커스텀 명령어 폴더를 만들어 줘.
.claude/commands 디렉터리를 생성하고 구조를 보여줘.

.claude/commands/quiz-validate.md 파일을 만들어 줘.
퀴즈 문제 중에서 ‘가장’, ‘최초’, ‘최대’ 같은 최상급 표현이 있는지 찾아서 목록으로 보여줘.

완료되면 반드시 밖으로 빠져나왔다가 다시 들어와야합니다.

인수(Argument)로 명령어 확장하기

인수란 명령어에 전달하는 추가 정보.
“무엇을 대상으로 어떻게 할 것인가”를 구체적으로 지정.
$ARGUMENTS, $1, $2 등 플레이스홀더 사용.

/quiz-validate 한국사

특정 카테고리 검증
$ARGUMENTS로 카테고리 받아 해당 카테고리만 검증

/quiz-range 1 20

특정 범위 분석
$1, $2로 시작/끝 번호 받아 해당 범위 분석

/quiz-add 한국사 중급

카테고리와 난이도 받아 새 문제 추가

---

명령어 체이닝과 유지보수 전략

명령어 체이닝 (Command Chaining)

여러 커스텀 명령어를 순서대로 연결하여 반복 작업을 자동화.
&& 연산자로 연결하면 앞 명령 성공 시 다음 명령 실행.
앞 명령 실패 시 다음 명령 실행 안됨. (작은 단위로 테스트 후 연결)

악! 또 토큰이 바닥나버렸습니다! 내일 다시 하기로 하죠.
특별한 재개 명령어는 없고 같은 명령어 다시 치면 됩니다.
중단됐던 작업은 자동 저장이 안되니까요.

AI가 스스로 만드는 커스텀 명령어

클로드 코드에게 필요한 명령어를 스스로 판단해서 만들도록 할 수 있습니다.
각 명령어를 독립된 .md 파일로 관리.
필요한 부분만 선택적 업데이트 가능.

---

핵심 키워드 정리

• 할루시네이션 : AI가 그럴듯하지만 틀린 정보를 생성하는 현상
• /memory : CLAUDE.md에 검증 가이드라인 저장/편집
• /clear : 대화와 컨텍스트를 완전히 초기화
• 커스텀 명령어 : 사용자가 직접 정의하는 단축 지시어
• 전역/프로젝트 명령어 : ~/.claude/commands vs ,claude/commands
• 인수/플레이스홀더 : $ARGUMENTS, $1, $2로 유연한 명령어 설계
• 명령어 체이닝 : && 연산자로 여러 명령어 순차 실행
• 통합 명령어 : 여러 작업 하나로 묶은 자동화 파이프라인

---

🚶기본 미션(필수)

• PROJECT 5. 할 일 관리 앱 만들고 캡처하기

무료 Todo 관리 웹앱｜설치 없이 바로 사용하는 할 일 관리 도구

🏃추가 미션(선택)

• PROJECT 7. 상식 퀴즈 게임 앱 만들고 캡처하기

React 퀴즈 앱 (웹에서 바로 실행)

• AI를 활용해 개발할 때 주의해야 할 점 리스트 정리하기

AI를 활용해 개발할 때 주의할 점

AI는 개발을 빠르게 도와주지만, 그대로 믿고 사용하면 문제가 생길 수 있습니다. 다음 사항들은 꼭 알고 사용해야 합니다.

1. 할루시네이션 문제가 있습니다

AI는 존재하지 않는 함수나 잘못된 정보를 사실처럼 만들어낼 수 있습니다. 반드시 직접 실행하거나 공식 문서로 확인해야 합니다.

2. 코드가 항상 정상 작동하지는 않습니다

겉보기에는 맞아 보여도 실행하면 오류가 나는 경우가 많습니다. 복사 후 바로 사용하지 말고 테스트가 필요합니다.

3. 보안에 취약한 코드가 나올 수 있습니다

입력값 검증이 없는 코드나 위험한 방식이 포함될 수 있습니다. 보안은 개발자가 직접 책임져야 합니다.

4. 최신 정보가 아닐 수 있습니다

라이브러리 버전이나 정책이 이미 바뀌었을 수 있습니다. 공식 문서 확인은 필수입니다.

5. 이해하지 못한 코드는 사용하면 안 됩니다

AI가 준 코드라도 동작 원리를 모르면 수정과 유지보수가 어렵습니다. 반드시 이해하고 사용해야 합니다.

6. AI는 보조 도구일 뿐입니다

AI가 정답을 주는 존재는 아닙니다. 최종 판단과 책임은 개발자에게 있습니다.