그란데클립 AI 실습
그럴듯한 웹 사이트 만들기

데이터 저장하기


준비물

이렇게 해요

1
저장되는 입력창 넣기

방문자가 한 줄 남길 입력창을 넣고, 남긴 내용이 저장되게 해 달라고 하세요.

클릭하면 복사

내 페이지에 방문자가 한 줄 남기는 입력창을 넣어줘. 이 사이트는 Netlify에 올라가 있으니, 남긴 내용이 Netlify Forms로 저장되게 만들어줘.

복사됐어요

기능 추가하기에서 방명록을 넣었다면 “그 방명록이 Netlify Forms로 저장되게 해줘”라고만 해도 됩니다.

2
배포하고 남겨보기

저장은 올린 사이트에서만 됩니다. 노트북에서는 입력창이 뜨는지까지만 보이고, 실제 저장은 배포한 뒤에 확인해요.

  • app.netlify.com(opens in new tab)에 로그인해 내 사이트를 열고, 기능 추가하기와 같은 방법으로 다시 올리세요 (Deploys 탭 → 맨 아래 드롭 영역에 고친 HTML 끌어다 놓기)
  • 배포가 끝나면 공개 주소를 열어 직접 한 줄 남겨 보세요
3
쌓였는지 확인하기

남긴 게 사라지지 않고 쌓였는지 확인합니다.

  • app.netlify.com에서 내 사이트를 여세요
  • 사이트 위쪽 메뉴에서 Forms 탭을 누르세요
  • 폼 이름을 누르면 제출 목록이 나오고, 방금 남긴 내용이 있으면 성공입니다

새로고침하거나 껐다 켜도 목록에 남아 있습니다. 화면에만 떴다 사라지지 않고 ‘기억’되는 것입니다.

4
데이터 집계해보기

클로드에게 집계·요약을 시켜봅니다. 손으로 하나씩 세지 않아도 됩니다.

  • 방금 본 제출 목록 화면에서 기록을 CSV 파일로 내려받으세요
  • 그 파일을 클로드에게 건네고, 아래처럼 요약을 시켜 보세요
클릭하면 복사

이 파일은 내 사이트에 방문자들이 남긴 기록이야. 총 몇 개인지, 자주 나오는 내용이나 눈에 띄는 점을 짧게 요약해줘.

복사됐어요

더 알고 싶은 게 있으면 이어서 물어보세요. (예: “어떤 항목을 더 받으면 방문자에 대해 더 알 수 있을까?”)

5
제출되면 알림 받기

누가 남기면 내 메일로 바로 알림이 오게 해봅니다. 페이지 코드는 안 건드리고 Netlify 설정만 켜면 돼요. 페이지에 비밀 키를 넣지 않아 안전합니다.

  • app.netlify.com(opens in new tab)에서 내 사이트를 열고, 폼 알림 설정(Form notifications)을 찾으세요
  • 이메일 알림을 추가하고, 알림 받을 내 이메일 주소를 넣어 저장하세요
  • 공개 주소에서 방명록에 한 줄 남겨 보세요
  • 내 메일함에 알림이 오면 성공입니다 (안 보이면 스팸함도 확인)

방금 내 사이트가 다른 서비스(메일)로 소식을 보낸 거예요. 데이터베이스와 API에서 본 ‘서비스끼리 대화하기’의 실전판입니다.

이러면 완료예요

공개 주소에서 남긴 내용이 Forms 목록에 새 줄로 쌓인다
새로고침하거나 껐다 켜도 그 기록이 남아 있다
폰에서 남긴 것도 목록에 들어온다

막힐 때는

노트북에서 남겨지는 것 같은데 목록이 비어 있으면, 정상입니다. 저장은 올린 사이트에서만 되니 공개 주소에서 다시 남겨 보세요.

공개 주소에서 남겼는데도 목록이 비어 있으면, 폼이 아직 인식되지 않은 것입니다. 다시 배포한 뒤 남겨 보고, 그래도 안 되면 이렇게 요청하세요.

클릭하면 복사

Netlify Forms로 인식되게 폼을 고쳐줘.

복사됐어요

목록에서 한글이 깨져 보이면, 한글이 깨진다고 알리고 고쳐 달라고 하세요.

마지막으로