10장. 아티팩트

이번 장에서 할 일

답에 HTML이나 SVG 코드가 있으면 "미리 보기" 버튼을 달고, 누르면 오른쪽 창에서 실제로 돌려 봐요. 이렇게 답에서 바로 써 볼 수 있는 결과물을 아티팩트라고 불러요.

미리 보기 창은 모델이 만든 코드를 돌리니 안전하게 막아 둬요. 창 안의 코드는 내 로그인 정보나 브라우저 저장 값을 읽을 수 없고, 바깥 인터넷으로 요청도 보내지 못해요.

1. 미리 보기 만들기

9장의 확인을 마친 에이전트에 보내요.

에이전트는 이런 순서로 일해요.

1. 1.

   스펙(기능의 범위와 동작을 적은 문서)을 보여 주며 확인을 받아요.

2. 2.

   답의 코드 블록 아래에 "미리 보기" 버튼을 달고, 오른쪽 창(4장에서 만든 뷰어)에 이어요.

3. 3.

   창을 막는 설정(샌드박스와 외부 요청 차단)을 넣고, 창 안 코드가 사이트의 저장 값을 읽으려 하면 실패하는지 자동 테스트로 확인해요.

4. 4.

   리뷰를 마치면 개발 서버를 켜 두고 확인을 요청해요.

새 대화에서 HTML 카운터 만들어 줘라고 보내면 키가 없어도 모의 응답으로 HTML 카운터가 와요. 그 답으로 확인하세요.

괜찮으면 확인했어라고 보내세요.

에이전트가 물어보면

5장처럼 라운드(기능 하나를 만들거나 요청한 것을 고치고 확인까지 마치는 작업 묶음) 하나로 진행되고, 끝에 직접 써 보고 확인해 달라고 해요. 4장과 5장 표의 질문(디자인 점수, 스킬 업데이트 등)도 나올 수 있어요. 선택지 창에서 답하는 법은 질문에 답하는 법에 있어요.