이제 본격적으로 본인이 구상하는 웹앱의 생김새, 구현했으면 하는 기능 등을 AI에게 알려줄 차례이다.
1단계. 아래와 같은 입력프롬프트를 구글 AI스튜디오에 입력
프롬프트 예시는 아래와 같다. 우측 상단 사각형 눌러서 전체 복사 가능
<프롬프트 예시>
[제목] 실시간 생각 나눔 보드
[버튼] 학생 접속용 QR 코드
- 누르면 아래에 이 웹앱으로 연결되는 QR 코드가 나타나고, 다시 누르면 닫히게 해줘.
[입력 폼]
- 가로로 나란히 반반씩 배치:
* 왼쪽: 학번 (비공개, 예: 20101)
* 오른쪽: 닉네임 (공개, 예: 호랑이)
- 그 아래 넓은 입력창:
* 나누고 싶은 생각이나 질문 (엔터 쳐서 여러 줄 입력 가능하게)
- 맨 아래 제출 버튼:
* [의견 올리기]
* (동작 센스): 버튼을 누르면 글이 즉시 등록되고 아래 게시판이 새로고침되게 해줘. 등록하는 동안에는 버튼 글자를 "전송 중..."으로 바꾸고 여러 번 중복으로 눌리지 않게 막아줘.
* (작성 편의): 등록이 성공적으로 끝나면 다음 글 작성이 편하도록 학번과 닉네임은 입력된 그대로 두고, '생각이나 질문' 입력창만 깨끗이 비워줘.
[게시판 헤더]
- 왼쪽에는 "실시간 우리반 게시판", 오른쪽에는 "🔄 새로고침" 버튼 배치
[게시판 영역]
- 학생들이 올린 글이 아래쪽에 예쁜 카드 형태로 쌓이게 해줘 (가장 최신 글이 맨 위로 오도록).
- 개인정보 보호를 위해 카드에는 "학번"은 절대 노출하지 말고, "익명(닉네임)"과 "입력한 내용"만 표시해줘.
[백엔드 및 저장]
- 학생이 제출하면 내 구글 스프레드시트('Sheet1')에 [등록 시간, 학번, 닉네임, 내용] 순서로 한 줄씩 차곡차곡 저장되게 해줘.
- 혹시 구글 권한이나 네트워크 문제로 등록에 실패하면, 사용자가 알 수 있도록 "어떤 에러 때문에 실패했는지" 화면에 친절하게 경고창(alert)으로 띄워줘.2단계. AI의 답변 복사하여 GAS에 붙여넣기
코드가 길기 때문에 AI가 응답을 완료할 때까지 기다린다. AI가 두 개의 파일 코드(code.gs, index.html)를 알려줄텐데 이를 각각 복사하여 GAS의 각 파일 창에 붙여넣으면 된다.
먼저, code.gs 코드를 전체 복사하여 아래와 같이 GAS의 code.gs 창에 있던 기존 코드를 모두 지우고(Ctrl+A, delete) 붙여넣기(Ctrl+V)
마찬가지로, index.html 파일 코드도 똑같이 복사, 붙여넣기한다.
.
3단계. GAS에서 저장
지금까지의 코드를 저장(Ctrl+S)한다. 저장하면 각 파일명 옆에 있던 주황색 동그라미가 사라지는데, 이는 잘 저장이 되었다는 뜻이다.
- >>>연수페이지 가기
- >>>이전 강의 가기
- >>>다음 강의 가기
댓글 남기기