클로드 바이브코딩, 첫 체크 도구 따라 만들기

AI 입문 연재 · 4 / 5편 공개 1. 프롬프트 예문 · 2. 기본 지침 설정 · 3. 바이브코딩 첫 요청서 · 4. 클로드 아티팩트 실습 · 5. 클로드 코드 첫 파일

클로드 바이브코딩의 첫 실습은 웹 Claude에서 ‘준비물 세 개를 체크하는 화면’을 아티팩트로 요청하는 것으로 시작할 수 있다. 터미널이나 Claude Code 설치, 인터넷 공개까지 한 번에 진행할 필요는 없다. 이번 목표는 체크·해제·초기화가 맞는지 직접 판단하는 것이다.

AI 입문 연재 4편으로, 앞선 바이브코딩 입문 글에서 정한 요청서를 Claude에 적용하는 단계다. 아래는 가상 학습 예제와 예상 결과다. 로그인한 Claude에서 같은 결과물을 실제 생성·시험했다는 체험담이 아니며, 설명도도 실제 앱 캡처가 아니다.

클로드 바이브코딩은 어느 화면에서 시작하나?

이번 실습은 브라우저에서 Claude에 로그인한 뒤 새 대화를 시작하는 방식이다. 아티팩트는 대화 옆에서 따로 확인하고 고칠 수 있는 결과물이다. 파일과 개발 환경을 다루는 Claude Code의 설치 실습과 구분한다.

Claude 공식 현행 도움말은 Free·Pro·Max·Team·Enterprise에서 대화로 아티팩트를 만들 수 있다고 안내한다. 데이터 저장과 앱 연결은 유료 플랜 항목이다. 기본 화면 생성이 가능하다는 것과 사용량이 무제한이라는 것은 다르다.

공식 도움말은 설정의 Capabilities에 있는 클라우드 코드 실행·파일 생성 기능을 전제로 설명한다. 업데이트된 설정 화면에서는 Create and edit files라는 이름으로 표시될 수 있다. 조직 계정은 Organization settings의 허용 범위를 확인해야 한다. 메뉴가 없으면 개인 설정 문제로 단정하거나 관리자 정책을 임의로 바꾸지 않는다.

요금제별 이용 한도와 기능은 클로드 요금제 안내에서 구분해 본다. 첫 실습이 막혔다는 이유로 바로 결제하거나 API 키를 만들 필요는 없다.

1. 클로드 바이브코딩 요청문을 새 대화에 넣는다

새 대화에 아래 요청문을 넣는다. 준비물 이름은 바꿔도 되지만 항목 개수를 바꾸면 ‘전체 3개’ 조건도 함께 수정한다. 실습에는 개인 일정이나 회사 자료가 필요하지 않다.

학습용 준비물 체크 도구를 만들고 싶다.
대화 옆에서 눌러 볼 수 있는 작은 맞춤 아티팩트로 만들어 줘.

항목은 물병, 우산, 충전기 세 개다.
처음에는 모두 체크가 비어 있어야 한다.
체크하면 '준비 완료 1/3'처럼 개수가 바뀌어야 한다.
해제하면 개수가 줄어야 한다.
초기화 버튼은 모든 체크와 개수를 0/3으로 되돌려야 한다.

로그인 기능, 앱 연결, AI 호출, 서버 저장은 넣지 마.
새로고침하면 체크 기록이 사라지는 연습용으로 만들고
그 사실을 화면에 표시해 줘.
휴대폰 폭에서도 항목과 초기화 버튼을 읽고 누를 수 있게 해 줘.
모호한 조건이 있으면 만들기 전에 먼저 물어봐 줘.

Claude가 질문하면 범위를 늘리는 답보다 이번 목표에 필요한 조건부터 답한다. 예를 들어 ‘가족끼리 함께 쓰는가’라는 질문에는 ‘혼자 연습하며 저장과 공유는 필요 없다’고 설명한다.

Claude Academy 공식 튜토리얼도 목적 설명, 필요한 질문, 아티팩트 제작 요청으로 이어지는 흐름을 제시한다. 질문을 주고받는 것은 실패가 아니라 조건을 좁히는 과정이다. 모델의 답변 문구가 예문과 똑같을 필요는 없다.

2. 설명만 나오면 ‘눌러 볼 화면’을 다시 요청한다

텍스트 설명이나 코드만 나온 경우에는 결과가 놓인 위치부터 확인한다. 별도 결과물 영역이 없다면 같은 대화에 ‘설명 대신 체크하고 해제할 수 있는 맞춤 아티팩트로 만들어 달라’고 요청한다.

결과물 영역이 열리면 항목 세 개, 완료 개수, 초기화 버튼, 기록이 남지 않는다는 안내가 있는지 본다. 화면 색깔과 꾸밈은 나중에 바꿔도 된다. 중요한 것은 체크 표시와 글자가 같은 항목에 연결돼 있고 개수가 맞게 움직이는가다.

위 이미지는 물병 하나만 체크했을 때 1/3을 기대하는 설명도다. 만들어진 앱의 인증된 실행 결과나 Claude의 실제 메뉴 배치를 보여 주는 캡처가 아니다.

3. 클로드 바이브코딩 결과는 어떤 순서로 확인할까?

처음 상태로 돌아온 뒤 아래 순서를 따라가며 예상 표시와 실제 표시를 나란히 적는다. ‘화면이 떴다’와 ‘요구한 기능이 맞다’를 구분하는 확인표다.

‘초기화가 되니 체크 해제도 될 것’이라고 넘기지 않는다. 다른 조작이므로 각각 확인해야 한다. 마지막에는 항목 하나를 체크한 뒤 새로고침해 기록이 초기 상태로 돌아가는지 본다. 이번 요청에서는 기록이 사라지는 것이 예상이다. 유지된다면 저장 기능이 들어갔는지 묻는다.

휴대폰 크기에서도 글자와 버튼이 가려지지 않는지 확인한다. 독자가 직접 만든 화면에서는 선택 영역을 눌렀을 때 해당 항목이 바뀌는지까지 살펴야 한다. 이 글의 모바일 검수와 독자가 생성한 앱의 모바일 동작 확인은 별개다.

4. 한 가지 오류만 재현 순서와 함께 고친다

수정할 때는 실패한 행동·예상·실제 결과를 적는다. 예를 들어 물병 체크, 우산 체크, 물병 해제 후 2/3이 그대로 남았다고 가정해 보자. 아래 문구는 그 가상 증상을 전달하는 예시다.

물병 체크 → 우산 체크 → 물병 해제 순서로 눌렀다.
체크는 우산 하나인데 숫자는 2/3으로 남는다.
예상은 1/3이다. 해제할 때 개수가 줄어드는 부분을 고쳐 줘.
항목 이름, 저장하지 않는 조건, 초기화 동작은 유지해 줘.
고친 다음 어떤 동작을 다시 확인해야 할지도 알려 줘.

수정 후에는 해제 단계만 보지 말고 처음 열기부터 초기화까지 다시 확인한다. 기능을 바꾸기 전에 복제하거나 이전 결과와 비교할 수 있는지 확인하면 문제가 커졌을 때 판단하기 쉽다. 공식 튜토리얼은 큰 변경 전에 결과물 제목 메뉴의 Duplicate를 이용하는 방법을 안내하지만, 계정·배포 중인 화면에서 실제 메뉴가 보이는지 먼저 확인한다.

오류 메시지 근처에 ‘Try fixing with Claude’가 있다면 공식 도움말의 오류 수정 기능이다. 버튼이 고쳐 줄 가능성은 있지만 성공을 보장하지 않는다. 오류 내용을 전달하기 전에 비밀키나 개인정보가 들어 있는지도 확인한다.

저장·공유·HTML 내보내기는 마지막에 구분한다

아티팩트를 다시 찾는 것, 체크 상태를 저장하는 것, 외부 사람에게 공개하는 것은 다른 작업이다. 대화와 결과물이 남아 있다고 사용자가 입력한 체크 상태까지 보관되는 것은 아니다.

현행 공식 안내에서는 결과물을 사이드바의 Artifacts에서 다시 찾을 수 있다고 설명한다. 이전 아티팩트와 현행 결과물은 저장·공유 안내가 다르므로, 오래된 글의 ‘Publish를 눌러야 보인다’는 설명을 모든 화면에 적용하지 않는다.

맞춤 아티팩트를 HTML로 내보낼 때도 같은 주의가 필요하다. 공식 튜토리얼은 내보낸 복사본에서는 저장·Claude·연결 도구를 사용하는 부분이 작동하지 않는다고 설명한다. 따라서 파일을 받았다는 이유만으로 온라인 결과물의 기능이 모두 따라온다고 판단하지 않는다.

클로드 바이브코딩의 이번 완료 기준은 체크와 해제를 설명하고 예상 결과를 대조해 오류 한 가지를 구체적으로 전달할 수 있는가다. 인터넷 공개나 회사 자료 연결은 다음 과제로 남기고, 먼저 작은 결과물을 스스로 확인하는 연습을 마친다.

AI 입문 연재 이어 읽기

• 이전 편: 3편 · 바이브코딩 첫 요청서 만들기
• 다음 편: 5편 · 클로드 코드로 첫 파일 만들고 한 줄 고치기
• 처음부터: 1편 · 프롬프트 예문 바꿔 쓰기

출처

1. Claude 도움말 — 현행 아티팩트와 계정별 조건
2. Claude Academy — 맞춤 아티팩트 만들기