기능 추가하기
준비물
- S1에서 띄운 공개 주소와 그 페이지 (계정에 저장해 둔 사이트)
이렇게 해요
방문자가 눌러서 반응할 기능을 하나 골라, 그 프롬프트를 클로드에게 붙여넣으세요.
예시
1. 나에 대한 O/X 퀴즈 기능 추가하기
내 페이지에 나에 대한 O/X 퀴즈를 넣어줘. 방문자가 답을 고르면 정답인지 바로 알려주고, 맞은 개수를 보여줘.
2. 메시지 버튼 추가하기
내 페이지에 버튼을 하나 넣어줘. 방문자가 누르면 짧은 메시지가 화면에 떠.
3. 방명록 추가하기
내 페이지에 방명록을 넣어줘. 방문자가 한 줄 남기면 화면 아래에 바로 보여줘.
배포하기 전에, 방금 만든 기능을 내 노트북에서 먼저 확인합니다.
배포 전에 mock으로 먼저 확인해볼게. 방금 만든 기능을 내 노트북에서 미리 볼 수 있게 띄워줘.
원하는 대로 안 되면 한 번에 하나씩 고쳐 달라고 하세요. (예: “정답일 때 초록색으로 표시해줘.”)
내 노트북에서 잘 동작하면 배포해봅니다.
- app.netlify.com/drop이 아니라, app.netlify.com(opens in new tab)에 로그인한 뒤 내 사이트를 여세요
- 사이트 위쪽 메뉴에서 Deploys 탭을 누르세요
- Deploys 페이지 맨 아래 드래그·드롭 영역에 고친 HTML 파일을 끌어다 놓으세요
- 배포가 끝나면 같은 공개 주소에 반영됩니다
공개 주소를 새로고침하고, 폰에서도 눌러 반응을 확인하세요.
배포까지 끝났으면, 방금 만든 코드가 어떻게 짜여 있는지 클로드에게 설명받아 보세요. 코드를 못 써도 구조를 아는 사람이 될 수 있습니다.
내 사이트 HTML 파일을 열고, 이 페이지가 크게 어떤 부분들로 나뉘는지 초보자도 알 수 있게 그림처럼 설명해줘. 각 부분이 화면의 어디에 해당하는지도 같이 알려줘.
머리말·본문·버튼 같은 큰 덩어리로 나눠 설명이 나옵니다. 모를 부분은 콕 집어 더 물어보세요.
이러면 완료예요
막힐 때는
눌러도 반응이 없으면, 무엇을 누르면 어떤 반응을 원하는지 구체적으로 다시 요청하세요.
원하는 대로 동작하지 않으면, “5 whys 기법으로 원인을 좁혀줘”라고 물어보세요. 방법은 원인 진단하기에 정리해 뒀어요.
원하는 디자인이 아니면, 그 부분을 캡처해 클로드에게 보여주며 원하는 모습을 함께 말하세요.