
QA 엔지니어가 바이브 코딩(Vibe Coding)으로 JSTQB Advanced Level 시험 대비 사이트를 만들어 보았다
요약
비프로그래머인 QA 엔지니어가 Gemini와 Claude를 활용하여 JSTQB 자격증 대비 학습 사이트를 제작한 사례를 소개합니다. AI의 코드 프리뷰 기능과 데이터베이스 설계 능력을 활용해 단순 UI 구현을 넘어 실질적인 문제 풀이가 가능한 앱을 완성했습니다.
핵심 포인트
- Gemini의 canvas 기능을 활용한 신속한 UI 초안 생성
- AI 생성 코드의 논리적 결함(템플릿 반복 문제) 식별 및 해결
- Claude를 이용한 체계적인 문제 데이터베이스 설계 및 구축
- QA 엔지니어의 결함 보고 스킬이 AI 프롬프팅에 미치는 긍정적 영향
QA 엔지니어로 일하면서, JSTQB Advanced Level(테스트 매니저) 자격 취득을 목표로 공부하고 있습니다.
시중에 문제집이 없어 연습량이 부족하다고 느껴, "나만의 전용 문제집 사이트가 갖고 싶다"고 생각한 것이 계기입니다.
그렇다고 해서 저는 프로그래머는 아닙니다. HTML/CSS/JavaScript를 스스로 막힘없이 작성할 수 있는 타입의 엔지니어가 아니라, 단순한 QA 엔지니어입니다.
그런 저라도, Gemini와 Claude라는 두 가지 AI를 갈아타며 실제로 작동하는 학습 앱을 하나 완성할 수 있었습니다.
이 기사에서는 그 제작 프로세스와, 도중에 발생한 "흔히 있는" 막힘 현상, 그리고 QA 엔지니어로서의 평소 스킬이 AI와의 상호작용에서 그대로 활용되었다는 이야기를 공유합니다.
- Gemini의 canvas 기능으로 첫 초안을 만든 이야기
- 거기서 발견된 "겉모습은 그럴싸한데 내용이 부실하다"는 문제
- Claude에게 바통을 넘겨 처음부터 다시 만들게 된 경위
- 완성된 문제집 앱의 주요 기능
- 버그 수정을 요청할 때, QA 엔지니어의 "보고 스킬"이 그대로 활용된 이야기
- 참고한 JSTQB 시라버스(Syllabus)의 출처 및 저작권에 대하여
먼저 Gemini의 canvas 기능을 사용하여, "JSTQB Advanced Level 테스트 매니지먼트 문제집 사이트를 만들어줘"라고 부탁했습니다.
canvas 기능은 코드를 그 자리에서 프리뷰(Preview)하며 생성해 주기 때문에, 비프로그래머인 저도 "그럴싸한 UI"가 한 번에 나온 것에 솔직히 감동했습니다. 다크 테마의 퀴즈 화면, 선택지, 정오 판정, 북마크, 이력 화면…… 외형적인 파츠는 일단 다 갖춰져 있었습니다. 또한, 좋고 나쁨은 떠나서 제가 제안하지 않은 사양(Specification)에 대해서도 추가되어 있었습니다.
그런데 실제로 퀴즈를 풀어 나가다 보니, 어떤 사실을 깨닫게 됩니다.
어라…… 문제 번호는 올라가는데, 묻는 내용이 전부 똑같지 않아?
겉보기에는 "문제 수 ◯◯문"이라고 표시되어 있는데, 실제 문제문·선택지 내용을 보면 장(Chapter)이나 항목의 제목만 교체된 템플릿 문장이 계속 반복되고 있을 뿐이었습니다. 즉, 겉보기에는 볼륨이 있어 보이지만 실질적으로는 연습이 되지 않는 상태였던 것입니다.
사전에 문제를 작성해 달라고 했지만, 문제 수를 늘리는 과정에서 참조되지 않고 소실되었습니다.
그 외 치명적인 결함을 수정해 달라고 요청하는 과정에서, 대화 내용만 계속 늘어만 갑니다.
그래서 대략적인 사양도 결정되었기에, 여기서 시라버스 PDF와 이 "결함투성이 문제집 HTML" 두 가지를 가지고 Claude에게 상담하기로 했습니다.
Claude에게 양쪽 파일을 전달하며, "문제 내용이 전부 똑같아져 버렸다. 모든 문제의 내용이 서로 다른, 제대로 된 데이터베이스를 가진 문제집 사이트로 다시 만들어 달라"는 취지로 부탁했습니다.
Claude는 먼저 시라버스 본체의 구성(제1장~제3장, 절·항의 계층)을 읽어 들여, 템플릿 재사용이 원인임을 특정함과 동시에 문제 데이터베이스를 처음부터 설계 및 작성해 주었습니다. 최종적으로,
연습 문제: 304문 (K1~K3 레벨, 총 48개 항목 각각에 최소 6문제씩 수록)
모의 시험: 107문 (K4 레벨의 시나리오 문제, 장별 학습 시간 배분에 비례하여 1회 40문제를 자동 추첨)
용어집: 102어 (ISTQB 용어집을 베이스로, 해답 해설 중 해당 용어에 마우스를 올리면 정의가 팝업)
이라는, 그야말로 내용이 알찬 데이터베이스가 완성되었습니다.
※ 단, 사람의 눈으로 실제로 문제와 정답의 정오를 체크할 필요가 있습니다. 하루 만에 작성했기 때문에 현재는 수행하지 못했습니다. 문제의 정확성은 보장하기 어렵습니다.
- 연습 모드 (Practice Mode): 출제 범위를 장·절 단위(예: 1.1)로 자유롭게 선택할 수 있으며, 출제 수도 지정 가능
- 모의고사 모드 (Mock Exam Mode): 범위와 문제 수를 변경할 수 없는 고정 형식 (실전과 동일한 K4 시나리오 문제)
- 학습 이력 (Learning History): 세션별 기록뿐만 아니라, 장별·절별 누적 이해도율을 「%」와 「정답 수 / 누적 문제 수」 모두로 표시
- 북마크 (Bookmark): 관심 있는 문제를 저장하고, 목록에서 즉시 다시 풀어 ○× 판정을 확인할 수 있음
- 오답만 재도전 (Retry Wrong Answers Only): 결과 화면에서 틀린 문제만 선택하여 선택지를 다시 섞어 즉시 복습 가능
- 용어집 툴팁 (Glossary Tooltip): 정답 해설 중 전문 용어에 커서를 올리면 정의를 표시
- 라이트/다크 모드 전환 (Light/Dark Mode Toggle): 취향에 따라 원터치로 전환하며, 설정은 다음 접속 시에도 기억됨
- 오조작 방지 (Prevent Accidental Operation): 퀴즈 응답 중에는 헤더의 내비게이션을 비활성화하여, 실수로 탭했을 때 문제가 중단되는 것을 방지
- 단일 HTML 파일로 완결되어 있어, 다운로드 후 브라우저로 열기만 하면 동작
개인적으로 가장 큰 발견은, Claude에게 버그를 수정하게 하는 과정이 평소의 결함 보고(Bug Reporting) 업무와 거의 동일했다는 점입니다.
예를 들어, 파일을 공유받은 직후 레이아웃이 깨지고 문제 데이터도 0건이 되는 결함에 직면했을 때는 다음과 같은 형태로 보고했습니다.
전제 조건: 공유된 HTML 파일을 열었음
실제 결과: CSS가 전혀 적용되지 않아 장식이 없는 순수 HTML이 표시됨. "연습 문제 풀 0문항" 등 데이터도 로드되지 않음
첨부: 실제 화면 스크린샷
확인하고 싶은 사항: 파일 구성은 원래 모두 동일한 폴더에 두는 것을 전제로 하는가?
이에 대해 Claude는 CSS나 JavaScript가 서브 폴더를 참조하고 있어, 개별 파일 공유 시 폴더 계층이 유실된 것이 원인이라고 특정하였고, 이후에는 종속 폴더가 필요 없는 단일 HTML 파일로 다시 만들어 주었습니다. (지금 생각하면 당연히 처음에 지정했어야 했습니다.)
그 후에도,
- "연습 모드에서 선택지를 고르지 않아도 '다음 문제로' 버튼이 눌려버림"
- "퀴즈 응답 중 실수로 헤더 버튼을 누르면 문제가 중단됨"
- "장의 체크박스가 하위 절을 선택해도 연동되어 체크되지 않음"
과 같은 형태로, **현상·재현 절차·기대 결과와 실제 결과의 차이(Difference)**를 의식하여 전달했더니, 매번 매끄럽게 단 한 번에 의도한 대로의 수정안이 돌아왔습니다. 되돌아보면 이는 평소 Redmine이나 BTS(Bug Tracking System, 버그 관리 시스템)에 기재하는 버그 티켓 작성 방식 그 자체입니다. 모호하게 "뭔가 동작이 이상해요"라고 전달하기보다, QA답게 사실(Fact) 기반으로 담담하게 작성하는 것이 AI에 대해서도 압도적으로 재작업(Rework)이 적다는 것을 실감했습니다.
단기간에 제작했기 때문에 현재도 스마트폰 화면에서의 잘림 현상 등 결함이 많이 있지만...
프로그래밍 경험이 없더라도,
- 우선 AI에게 만들고 싶은 것의 완성된 이미지(Image)를 전달하여 형태를 갖추게 한다
- 실제로 구동하며 "테스트(Test)"한다 (이 부분은 QA의 본령 발휘입니다)
- 발견된 결함이나 요구사항을 사실 기반으로 구체적으로 전달한다
라는 사이클을 돌리는 것만으로 자신만의 학습 도구가 만들어졌습니다. 이번에는 「Gemini → Claude」라는 2단계 구성이었지만(토큰 소비를 억제하기 위해서도), 중요한 것은 도구의 선택보다도 평소 업무를 통해 쌓아온 "현상을 정확히 분리하여 전달하는 능력" 이었다고 생각합니다.
마찬가지로 "자격증 공부용으로 자신만의 문제집 앱이 필요하다"는 분들이나, 비엔지니어지만 AI와 함께 무언가를 만들어보고 싶은 분들에게 참고가 된다면 기쁘겠습니다.
본 앱의 문제는 아래의 JSTQB Advanced Level 테스트 매니지먼트 실라버스(Syllabus) 내용을 참고하여 개인적인 학습 목적으로 작성한 비공식 문제집입니다. JSTQB®/ISTQB®가 제공 및 감수하는 공식 교재가 아닙니다. 실라버스 본문의 저작권은 ISTQB®(International Software Testing Qualifications Board) 및 JSTQB(Japan Software Testing Qualifications Board)에 귀속됩니다.
- JSTQB 공식 사이트: https://jstqb.jp/
- JSTQB Advanced Level 실라버스 테스트 매니지먼트 Version 3.0.J04 (PDF): https://www.jstqb.jp/wordpress/wp-content/uploads/2026/06/JSTQB-Syllabus.Advanced_TM_VersionV3.0.J04.pdf
공식적인 시험 범위 및 최신 실라버스 (Syllabus)는 반드시 위의 공식 사이트에서 확인하시기 바랍니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 Qiita AI의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기