왜 되지? 😂 너무 쉽게 앱스 스크립트로 만든 독서 감상문 앱

소개

ChatGPT에 GPTs가 처음 적용되었을 때 무척 재미있어서 다양한 종류의 GPTs 들을 만들었었어요. Claude를 사용한 후에는 전혀 돌아보지 않다가, 최근 검색해보니 사용량이 600+ 인 것이 있더라고요. 😱 (엄청난 제작자 분들이 많은 지피터스에서 부끄럽지만) 저로선 신기했습니다.
사실 대충 만들어두고 별로 신경 쓰지 않았었는데, 뒤늦게 걱정이 밀려 왔고요.

"바로 쓰는 독서 감상문" GPTs

ALT

검은 화면에 한국 앱 스크린샷

ALT

검은 화면에 표시된 한국어 앱 스크린샷

급히 독서록을 써야하는 수요가 그만큼 있었던 것이 아닌가... 싶습니다. 무슨 책에 대해 어떤 수준으로 작성하였는지 기록이 있었다면 분석할 수 있었을텐데~ 라고 아쉬워하다, 구글 시트와 연동한 앱스 스크립트를 활용하여 웹앱을 제작해 보았습니다.

왜 되지? 코딩 중 가장 무섭고 소름끼는 순간 ㄷㄷㄷ...

앱스 스크립트로 제작한 "바로 쓰는 독서 감상문 - Quick Review" 앱이 오류 없이 한번에 작동하여 깜짝 놀랐습니다. (어떻게 된 거지? 원래 이런 건가? 🤣) LangChain부터 Bubble과 영상 스터디까지 바로 성공하기는 커녕 제대로 나오는 데에 많은 시간과 노력이 필요했었는데 정말 깜놀이었어요.

Claude의 코딩 실력이 뛰어나기도 하지만, 앱스 스크립트는 구글 시트, 지메일과 연동되어 상대적으로 쉽게 앱 제작을 시도할 수 있는 도구였습니다.

오류 없는 초안이었으나 사용해본 후 아쉬운 점을 수정해 완성했습니다.

1. Quick Review App: 초안

1) Claude를 이용하여 앱 구상하기

• "바로 쓰는 독서 감상문" GPTs의 사용자 지침을 참고하여 원하는 앱을 설명하고 구성 검토를 요청

ALT

한국어 앱 스크린샷

• Claude와 함께 앱의 구성을 검토, 3개의 탭 이름을 정하고 구조를 수정 및 보완
  

  1. Quick Review App 구조

     1. 상단: Quick Review 로고와 간단한 앱 설명

     2. 깔끔한 카드 형태의 레이아웃

     3. 3개의 탭으로 구성

        • 입력폼 (기본 탭): Write Review

        • 결과물 확인: My Review

        • 통계 보기: Review Trends

  2. Write Review

     1. 입력 필드

        • 책 제목 (필수) - 미입력시 빨간색 테두리와 경고 메시지

        • 저자명 (선택)

        • 독서 감상문 수준 (기본값: 대학생)

        • 길이 선택 (기본값: 500자)

        • 특별 요청사항 (텍스트 영역)

     2. 하단의 "감상문 작성하기" 버튼

     3. 작성 중일 때는 로딩 스피너와 함께 "작성 중" 표시

  3. My Review

     1. 생성된 감상문 표시 영역

     2. 기능 버튼들

        • 다시 작성하기 (입력폼으로 돌아가되 이전 입력값 유지)

        • 복사하기 (클립보드에 복사)

        • 이메일로 보내기 (이메일 주소 입력 팝업)

  4. Review Trends

     1. 4개의 통계 결과를 카드 형태로 표시

        • 인기 도서 Top 5

        • 수준별 인기 도서

        • 최근 24시간 트렌드

        • 길이별 선호도

  5. 백엔드 구조

     1. Google Apps Script를 활용한 웹앱 서버

     2. Claude API 연동: 글쓰기

        • 적절한 프롬프트 템플릿 구성

        • 독서 감상문 생성

        • 에러 처리 및 재시도 로직

     3. Google Sheets: 데이터 저장

        • 타임스탬프

        • 입력 정보

        • 생성된 감상문

        • 통계 계산 컬럼들

2) 앱 제작을 위한 구글 시트, 앱스 스크립트와 html 코드 생성하기

• Claude에게 필요한 구글 시트와 필드 요청

ALT

한국어 사전 - 스크린샷 미리보기 이미지

• 답변을 참조하여 하나의 파일(QuickReview)에 2개의 시트 'Reviews'와 'Statistics' 생성

ALT

Google 문서 스프레드시트의 스크린샷

• Claude에게 앱 제작을 위한 앱스 스크립트 코드와 html 생성을 요청

ALT

구글 플레이 스토어 스크린샷

3) 앱 제작하기

• 구글 시트 > 확장 메뉴 > Apps Script > 프로젝트 이름을 "Quick Review App"으로 변경

• 파일 목록에서 + 버튼 클릭 > HTML 선택 > 파일 이름을 "Index"로 입력 > Index.html에 생성한 html 코드 붙여넣기 > 저장

  • Code.gs에서 "Index.html"을 명시하여 동일한 이름으로 입력

• Code.gs 파일 선택 > 생성한 Apps Script 코드 붙여넣기 > 저장

  • 스프레드시트 ID를 Code.gs의 SPREADSHEET_ID에 입력

  • 구글 스프레드시트의 URL에서 /d/ 다음에 오는 긴 문자열이 스프레드시트 ID임 (예시: https://docs.google.com/spreadsheets/d/스크립트아이디/edit#gid=0)

  • Claude API 키를 Code.gs의 CLAUDE_API_KEY에 입력

4) 앱 배포하기

• 배포 > 새 배포 > 유형 선택: 웹 앱

  • 설명: Quick Review 웹앱

  • 실행할 때 다음 사용자로 실행: 나

  • 액세스할 수 있는 사용자: 모든 사용자

• 배포 > Google 계정 인증 진행 > 액세스 승인 요청

  • 배포가 완료되면 웹앱 URL 생성, 이 URL로 앱에 접속

  • 스터디장님이 추천하신 허세임님 지피터스 특강을 따라서 진행

5) 앱 사용하기

• (독서 감상문을 오류 없이 작성해줘서 놀란) Quick Review 앱을 사용

• Write Review: 입력 폼

ALT

웹사이트의 리뷰 양식 이미지

• My Review: 생성된 독서 감상문

  • 독서 감상문을 클립 보드로 복사하기

  • 이메일 주소를 입력하고 이메일로 보내기

ALT

'빠른 검토'라는 문구가 적힌 페이지 스크린샷

ALT

버튼이 있는 웹페이지의 스크린샷

ALT

한국어 텍스트 편집기의 스크린샷

• Review Trends: 독서 감상문 생성 통계

ALT

빠른 검토 페이지의 스크린샷

2. Quick Review App: 수정

1) 수정할 기능 정리

• 입력 필드명 변경 및 필수 항목 설정

  • "도서명" (필수), "저자명", "감상문 수준", "감상문 길이", "감상문 문체", "요청사항"

• 옵션 값 수정

  • 감상문 수준: "초등학생, 중학생, 고등학생, 대학생, 전문가"

  • 감상문 문체: "합니다체(격식체), 해요체(준격식체), 한다체(반말체), 해체(구어체)"

  • 요청사항 placeholder: "이 책을 읽고 가장 공감했던 부분을 중심으로 작성해주세요"

• 프롬프트 설정

  • 개인적 감상을 담되 '나는' 표현의 반복을 지양, 한국어 특성을 고려한 자연스러운 문장

  • 선택된 수준에 맞는 어휘와 표현 사용, 선택된 문체 일관성 유지

  • 지정된 글자 수 준수, 요청사항 반영

  • 감상문에 도서명과 저자명을 표시, 저자명이 필수가 아니므로 만약 입력폼에 없으면 Claude가 작성

  • 수준, 문체, 감상문의 내용을 고려하여 감상문의 제목 쓰기

  • 위 설정을 반영하여 Code.gs의 프롬프트 생성함수 수정

ALT

컴퓨터 화면의 스크린샷

• 통계 탭의 카드 표시 개선

  • 새 감상문 작성 직후 통계가 자동으로 업데이트 되도록 수정

  • 수준별 인기 도서: 각 수준당 2개로 제한, 스크롤바 적용, 우측 여백 추가

  • 인기 도서 Top 5, 24시간 트렌드, 길이별 선호도, 상위 5개만 스크롤 없이 표시

• 수정 기능을 반영한 앱 구조

ALT

한국어 앱의 기능을 보여주는 다이어그램

2) 수정할 디자인 정리

• 폰트

  • Noto Sans KR 글꼴 전체 적용

  • 제목, 설명문, 라벨, 입력 필드, 버튼, 통계 카드의 글자 크기 축소

• 세련된 디자인

  • 섬세한 그레이 스케일, 부드러운 그림자 효과, 여유 있는 여백과 간격

3) Claude API의 최신 모델 사용

• 보다 나은 감상문 작성을 위해 Claude 모델을 확인

ALT

한국어 앱 스크린샷

4) 수정 사항을 반영하여 앱 완성

• Claude로 생성한 Code.gs와 Index.html의 수정본을 앱스 스크립트 파일에 붙여넣고 저장

• 배포 > 배포 관리 > 수정 > 새 버전 선택 > 배포

• 배포가 완료되면 웹앱 URL 생성, 이 URL로 앱에 접속

ALT

한국어 Google 검색 페이지의 스크린샷

ALT

한국어가 포함된 웹페이지 스크린샷

5) 수정한 Quick Review 앱 사용하기

결과와 배운 점

• GPTs로 시작한 "바로 쓰는 독서 감상문"을 웹앱으로 제작하였습니다. GPTs에는 없었던 독서 감상문 수집 및 분석 기능을 구현하고, 이메일 전송 등 편의 기능을 추가하여 보다 활용도 높은 서비스를 만들 수 있었습니다.

• 처음 시도한 앱스 스크립트 개발이었지만, Claude의 도움으로 예상보다 훨씬 빠르고 쉽게 앱을 구현할 수 있어서 좋았습니다. 😁 앱스 스크립트는 구글 시트의 연동으로 데이터베이스 구축 없이도 데이터 관리가 가능하고, 지메일 등의 구글 서비스와 자연스럽게 통합할 수 있는 것이 큰 장점이라고 생각합니다.

• 다만 앱스 스크립트의 앱을 실제 서비스로 확장하기에는 실행 시간 제한, 동시 접속자 수 제한, API 호출 제한 등 여러 제약이 있다고 하네요. 우선은 앱스 스크립트를 활용해 앱에 대한 아이디어를 빠르게 구현하고 검증해 볼 계획입니다! 😆