Claude와 만드는 "AI 용어 퀴즈 게임" — 용어사전 데이터를 게임으로 바꾸기

"에이전트? 토큰? 파인튜닝?" — 자신 있으세요?

AI 관련 글을 읽다 보면 모르는 용어가 툭툭 튀어나옵니다. 대충 넘기다가 결국 글 전체를 이해 못 하게 되는 경험, 한 번쯤 있으시죠? 용어사전을 찾아보자니 재미가 없고, 그냥 외우자니 머리에 안 남고.

그래서 오늘은 Claude와 함께 "AI 용어 퀴즈 게임"을 만들어보겠습니다. 트렌드랩의 AI·IT 용어사전 데이터를 활용해서, 독자가 직접 플레이할 수 있는 인터랙티브 퀴즈예요. 공부는 재미있어야 하니까요.

완성물 미리보기 — 이런 걸 만듭니다

우리가 만들 퀴즈 게임은 이렇게 동작합니다.

기능설명

4지선다 퀴즈	용어의 뜻을 보고 정답 용어를 고르는 방식
난이도 선택	입문 / 중급 / 고급 3단계
즉시 피드백	정답·오답 즉시 표시 + 해설
점수 & 랭킹	10문제 기준 점수 집계, 등급 부여
오답 노트	틀린 문제만 모아서 다시 풀기

브라우저에서 바로 플레이할 수 있는 HTML 파일 하나로 만듭니다. 설치도 로그인도 필요 없어요.

Step 1 — 용어 데이터 준비

퀴즈 게임의 핵심은 문제 데이터입니다. 다행히 트렌드랩에는 이미 AI·IT 용어사전, 블로그·웹 실전 용어사전, IT비즈니스 용어사전 세 개의 용어집이 있어요.

Claude에게 이렇게 요청했습니다.

"트렌드랩 용어사전에서 용어 50개를 뽑아서, 각각 용어명·뜻·난이도(입문/중급/고급)·오답 보기 3개를 포함하는 JSON 데이터를 만들어줘."

여기서 중요한 건 오답 보기의 품질입니다. 너무 동떨어진 오답은 문제가 너무 쉬워지고, 너무 비슷한 오답은 불공정해지거든요. Claude는 같은 카테고리 내에서 헷갈릴 만한 용어를 오답으로 뽑아주는데, 이게 꽤 자연스럽습니다.

예를 들어 "파인튜닝(Fine-tuning)"의 정답 해설이 "사전 학습된 AI 모델을 특정 용도에 맞게 추가 학습시키는 것"이면, 오답 보기로 "프롬프트 엔지니어링", "전이 학습", "강화 학습"을 배치하는 식이에요. 다 비슷한 영역의 개념이라 진짜 아는 사람만 맞출 수 있죠.

Step 2 — 게임 로직 구현

데이터가 준비됐으니 게임 엔진을 만들 차례입니다. Claude에게 요청한 핵심 기능들:

① 랜덤 출제 — 선택한 난이도에서 10문제를 랜덤으로 뽑되, 같은 문제가 반복되지 않게

② 보기 셔플 — 정답 위치가 항상 같으면 패턴이 보이니까, 4개 보기 순서를 매번 섞기

③ 타이머 — 문제당 15초 제한시간. 시간 압박이 있어야 게임 느낌이 나니까요

④ 즉시 피드백 — 정답이면 초록색 + "정답!" 표시, 오답이면 빨간색 + 정답 해설 표시

⑤ 결과 화면 — 10문제 끝나면 점수, 등급(S/A/B/C/F), 걸린 시간, 오답 목록 표시

한번에 완벽하게 나오진 않았지만, "타이머 바가 너무 작아" → "결과 화면에 공유 버튼도 넣어줘" → "오답 노트에서 바로 다시 풀기 기능도 추가해줘" 같은 수정을 3~4번 거치니 꽤 완성도 높은 게임이 됐습니다.

Step 3 — UI 다듬기, 게임은 느낌이 중요하다

기능만 되는 거랑 "하고 싶은" 게임은 다릅니다. Claude에게 디자인 관련 추가 요청을 했어요.

① 정답 맞혔을 때 효과 → 초록색 펄스 애니메이션 + 점수 +10 팝업

② 오답일 때 효과 → 빨간색 흔들림 + 정답 하이라이트

③ 타이머 바 → 남은 시간에 따라 초록→노랑→빨강으로 색 변화

④ 결과 등급 → S등급이면 금색 효과, A등급이면 은색, 등급별 재미있는 코멘트

이런 디테일이 추가되니까 "도구"가 아니라 진짜 "게임" 느낌이 나기 시작했어요. CSS 애니메이션 몇 줄의 차이인데, 사용자 경험은 완전히 달라집니다.

기존 콘텐츠를 "재활용"하는 전략

이 프로젝트에서 주목할 점이 하나 더 있습니다. 바로 이미 만들어둔 콘텐츠(용어사전)를 다른 형태(퀴즈 게임)로 재가공했다는 거예요.

블로그를 운영하다 보면 열심히 쓴 글이 한 번 읽히고 묻히는 게 아까울 때가 있습니다. 그런데 같은 데이터를 퀴즈로 만들면 독자들이 반복적으로 방문하고, 더 오래 머물게 됩니다. 검색엔진 입장에서도 체류시간이 긴 페이지는 높이 평가하고요.

이 발상을 다른 콘텐츠에도 적용할 수 있어요. 비교표 → 인터랙티브 비교 도구, 가이드 글 → 단계별 체크리스트, 뉴스 요약 → 트렌드 타임라인 등. 하나의 콘텐츠를 여러 형태로 변환하는 것, AI 시대의 콘텐츠 전략입니다.

오늘의 핵심 요약

• Claude와 함께 트렌드랩 용어사전 기반 "AI 용어 퀴즈 게임"을 만들어봤습니다
• 4지선다 퀴즈 + 난이도 선택 + 타이머 + 점수/등급 + 오답 노트까지 갖춘 완성형 게임
• 오답 보기 품질이 퀴즈의 핵심 — Claude가 같은 카테고리 내 헷갈리는 용어를 자동 배치
• 기존 콘텐츠(용어사전)를 새로운 형태(게임)로 재활용 — 체류시간 증가 + SEO 효과
• 기능 + 디자인 디테일(애니메이션, 색 변화)이 "도구"를 "게임"으로 바꾸는 차이를 만듦