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