한국GPT협회
home
기관 소개
home

ChatGPT 활용 웹서비스 개발

카테고리
Tools
Softr
Make
Airtable

이 글을 쓰는 목적

■ 웹페이지에서 ChatGPT를 바로 작동시키는 웹서비스를 개발해 보겠습니다. 아주 간단한 서비스 개발이지만, 이 과정을 그대로 따라하면서 자신만의 서비스, 기능, 특징을 추가하면 아주 다양한 서비스를 만들 수 있습니다.
■ 그대로 따라하실 수 있도록 과정을 아주 자세하게 설명합니다. 이 방법을 이해하고 그대로 연습해 보시면 느낌이 올겁니다. 이제 나도 사업 개발을 할 수 있다는 그 느낌 말입니다. 그대로!! 한번 만들어보세요.
■ 그리고 내일부터는 "나만의 사업 아이템"을 찾아 나서면 됩니다. 그리고 도전하신 프로젝트는 댓글로, 그리고 우리 단톡방에 공유 부탁드립니다. 다른 사람들에게도 자극이 되고 공부가 될 수 있도록 말입니다.

웹서비스에 대한 기획 과정

■ 서비스 기능 설명

여행을 다녀온 키워드를 입력하면 여행일기(체험학습 보고서)를 ChatGPT로 실시간 생성해주는 웹사이트
왼쪽처럼 form 형태로 키워드를 입력 받고, 이것을 바탕으로 ChatGPT가 글을 쓰고 오른쪽처럼 체험학습 보고서를 만들어서 보여주는 사이트
웹페이지에서 실시간으로 작동함

■ 시작하게 된 계기

아내의 한마디, “아~ 체험학습 보고서 내야 돼~ 귀찮아~” 이 얘기 듣고 문득 떠올랐습니다. "내가 만들어줄까?" 했더니, "오~ 그게 가능해? 요새 ChatGPT 공부 좀 하더니 자신있나봐". 그래서 만들기로 했습니다.
원래 사람들의 귀찮음을 해결해주면 돈이 됩니다. 사람들의 불편, 불만, 불결, 불쾌, 불안을 해결해주면 됩니다. 모두가 불평만 하고 지나칠 때, 우리는 그 지점을 놓치지 않고 사업기회를 발견해야 합니다. 아주 많은 서비스들이 그렇게 시작되었고 결국 큰 사업이 되기도 했습니다.

■ 시장 니즈 조사

시장의 니즈가 진짜 있는지를 확인하기 위해 인터넷 조사, 학부모 인터뷰, 선생님 인터뷰를 각각 진행해 보았습니다.
'체험학습 보고서' 인터넷 검색하니 검색 결과가 엄청나게 많고 작성법, 샘플 이런게 많이 나옵니다. 사람들이 많이 찾아보고 있다는 얘기고 어쩌면 수요가 있겠다는 생각이 들었습니다.
학부모와 일부 선생님 인터뷰를 해보니 다들 영혼 없이 쓰고 있었습니다. 출석 인정을 위해 필요하기는 하지만 어차피 아무도 안 읽어본다고 학부모도 대충 쓰고 선생님이 잘 안 읽어보고... 그렇다면 이걸 대신 써주는 일이 비윤리적인 일은 아니라고 생각했습니다.(교육을 망친다거나 그러면 안 되니까요)

■ 시장 분석

이 체험학습 보고서를 쓰는 사람이 얼마나 될지 시장 규모를 대략 계산해 봅니다
통계청을 찾아보니 현재 초등학생은 총 260만명(통계청, 2023년 추정)
1인당 평균 체험학습 보고서 제출 : 4회 / 연
총 보고서 수 = 260 만명 * 4회 = 약 1000 만회
전체 보고서 숫자중 나의 '체험학습 보고서 생성 AI'를 사용하는 비율(내 서비스의 시장점유율이 되겠죠. 바이럴 열심히 하면 10%는 되지 않을까 추산했습니다)
그렇다면 연간 사용량 100만회, 1일 사용량 약 3000회
1일 방문자 3천명이 들어온다면(아마도 체류시간은 1분 정도 되겠죠) 구글 애드센스로 광고 수익 월 110만원을 목표로 잡았습니다. (구글 애드센스 경험 많으신 분은 제보와 보정 부탁드립니다)
Open AI API 사용 비용(GPT-3.5) : 월 10만원 추산
최종 목표 순이익 : 월 100만원
결론 : 이 정도면 해볼만 하다. 왜냐하면, 이건 100% 풀 자동화 서비스니까. 만들어 놓은 다음에 내가 해야 하는 일이 전혀 없으니까.

■ 서비스 모델의 특징

위 계산을 바탕으로 서비스 특징(Feature)을 정의했습니다.
한명의 사용자는 1년에 평균 4회만 사용합니다. 따라서 내 서비스를 유료로 구독할 가능성은 없습니다.심지어 회원 가입도 안 하려고 할겁니다. 어쩌다 한번 쓰고 꺼버리는 사이트가 될테니까요.
시장 점유율 10%를 차지하기 위해서는 사용자 26만명을 유치해야 합니다. 바이럴과 검색 상위 노출이 아주 중요할 듯 합니다.

■ 서비스 모델의 특징을 바탕으로 Feature 정의

신규 사용자 접근성을 위해 무료 사용 사이트로 한다, 로그인 없이 사용 가능하다
사용법 설명이 필요 없는 심플하고 직관적인 웹페이지를 만든다
간단한 키워드만 입력하면 되는 Form을 구성한다
실시간으로 본인 및 타인의 결과물을 열람할 수 있도록 해서 실제 사용과 바이럴을 유도한다
수익 모델은 트래픽 기반의 구글 애드센스로만 한다

자동화 구성요소 기획

■ 웹페이지 빌더는 Softr로 선택함

■ 자동화 도구는 Make(구 Integromat)로 선택

■ DB 저장은 Airtable로 선택

웹서비스 구현 (개요)

■ Softr 구성 개요

여행 기본정보를 입력하는 form을 Softr로 만듭니다
form에 입력받은 정보는 웹훅을 통해 Make로 보냅니다
최종 체험학습 보고서 생성물은 다시 Softr에서 보여줍니다

■ Make 자동화 개요

Softr form에서 웹훅으로 데이터를 받습니다
ChatGPT를 불러서(API 연동) form 데이터를 이용해서 체험학습 보고서를 생성합니다
생성된 보고서를 DB 관리도구인 Airtable에 저장합니다
Softr form에서 데이터가 날아올때마다 자동으로 ChatGPT 작동과 Airtable 기록이 실행됩니다

■ DB 관리 & 모니터링 개요

Softr form에서 들어온 데이터와 Make가 시켜서 생성된 ChatGPT 글이 저장되는 DB 입니다
이 DB가 그대로 Softr를 통해서 웹페이지에서 결과보고 화면에 노출됩니다

웹서비스 구현 (상세 단계별)

Softr, Make, ChatGPT, Airtable 4개의 도구들이 서로 연결되어 작동합니다. 그래서 최종적으로는 사람이 개입하지 않아도 완전 자동으로 돌아가는 서비스가 만들어집니다.
하지만 이 연결을 해주기 위해 우리는 살짝 왔다갔다 하면서 설정을 잡아줘야 합니다. 나오는 순서 그대로 전부 다 따라하시면 여러분의 웹서비스가 만들어질겁니다. 작업하는 순서 그대로 기록합니다. 처음부터 하나씩 다 따라해보세요.

■ Softr 시작하기

접속 및 회원가입 링크
아래 링크는 저의 추천인코드가 적용된 링크입니다. 아래 링크로 가입하시면 Softr에서 저에게 소정의 credit을 제공합니다. 여러분들은 공홈에서 가입하시는 것과 똑같습니다.
무료 템플릿을 골라서 사이트를 시작할수도 있고, 백지 상태에서 시작할 수도 있습니다.

■ Softr의 특징

60여 개의 무료 템플릿 : 고객 포털, 투자자 포털, 팀 위키, 콘텐츠 캘린더, 블로그 등
직관적이고 쉬운 인터페이스 : 전부 다 버튼 눌러서 추가하고, 샘플 그림 보면서 블록을 고르면 되는 방식이라 별도 교육이 거의 필요없음. 딱 보면 느낌이 옵니다.
가장 기본적인 구성이지만, 있을 기능은 다 있습니다. 홈페이지 구성에 기본이 되는 Header, Hero, Feature, Testimonial, Gallery 등등 다 있습니다. 다만 2~3종류씩밖에 없습니다.
다양한 도구와의 연동 : Google, GA, GTM, SEO, reCAPTCHA, Stripe 등 아주 다양한 노코드, 자동화 도구들과 연동이 잘 됩니다.
이렇게 연결된 노코드 툴 생태계를 활용하여 내 사이트의 기능을 확장할 수 있습니다. Softr에 없는 특별한 폼 형태를 Typeform 같은 다른 툴에서 만들어서 붙일 수도 있고, Softr에 입력된 정보를 구글 시트에 바로 저장할 수도 있습니다.
Softr에는 다양한 Block들이 있습니다. 정적인 페이지를 만드는 STATIC 블록도 있고, 동적인 페이지(사이트 방문자가 정보를 직접 입력한다거나, 사이트 방문자의 회원정보에 맞는 특정 정보만 필터링해서 보여준다거나) 블록들도 있습니다.
이 블록을 하나씩 클릭해서 추가하는 방식이라 편리합니다.

■ Softr에서 구현하기

Softr부터 풀 자동화 구현을 시작해 보겠습니다.
우선 서비스 페이지 디자인부터 합니다. 사용자가 접속했을 때 보여지는 헤더, 히어로(우리 서비스 장점 자랑하기)를 만들어줍니다
Form 디자인 하기 : 여행 정보를 사용자가 입력할 수 있는 폼을 만듭니다. 폼을 구성하는 field별로 추가하고 삭제할 수 있고, field별로 입력가능한 값이 숫자다, 글자다, 이메일이다 처럼 형식을 지정할 수 있습니다.
폼 만들때 고민했던 부분 너무 많은 정보를 요구하면 고객이 귀찮아 할 것 같고, 너무 적은 정보만 받으면 ChatGPT가 글을 제대로 쓸 수가 없고... 프롬프트 많이 만들어보면서 최소한이지만 충분한 키워드를 정의해야 합니다.
Form 입력 정보를 Make로 전송하도록 설정합니다. Softr form에 있는 기능 중에 "Send to Make" 기능을 선택합니다. (Make보다 더 유명한 Zapier로 보내서 자동화 할 수도 있습니다)
Form의 Field별로 형식(Input type)을 정의해줍니다(number, text, email 등). 사용자가 실수로 오입력하는 것을 방지해 줍니다. 나이 넣으라는 자리에 우리 아이 이름 적으시고 이러면 ChatGPT가 당황해서 체험학습보고서를 망칠 수도 있으니까요.
Softr form과 Make 사이의 데이터 전달을 "웹훅(Webhook)"이라는 것으로 연결합니다.
Softr사에서 제공하는 웹훅 튜토리얼 영상 링크합니다.

■ Make에서 구현하기

Softr 설정을 일단 마무리하고, 이제 Make에 들어가서 작업을 합니다
빈 화면에서 New scenario 만들기 > 추가하기 > Webhook > Custom Webhook을 고릅니다
Custom Webhook이 생성되면 Add 이름 눌러서 이름 정해주고 > Webhook Url 복사하기 누릅니다

■ Softr에서 구현하기

다시 Softr로 돌아옵니다. Softr와 Make 사이에 웹훅을 주고받는 것을 설정해주는 과정입니다
Make에서 복사한 웹훅 url(Webhook address)을 Softr에 주소란에 붙여넣기 합니다
그리고 아래의 "Click here to send test data" 누릅니다.
Make에 다시 가보면 Custom Webhook 모듈에 “Successfully determined” 라고 뜹니다.
실패했거나 꼬였으면 웹훅 url 만드는 부분부터 다시 하면 됩니다. 얼마든지 다시 해도 됩니다.
Softr와 Make 사이에 일어나는 일이 헷갈리니, 다시 한번 정리해 드립니다.

■ Make에서 구현하기

한가운데 커다란 + 그림을 눌러서 'Open AI'라고 검색합니다. Create a Completion (GPT-3, GPT-3.5, GPT-4) 선택합니다.
Model : (GPT-3.5) text-davinci-003 선택합니다. 우리가 GPT Plus 유료 가입자라고 해도 GPT-4는 아직 API를 안 열어줍니다.
프롬프트 입력 : 앞 단계 Webhook으로 받은 Softr form의 field 값들을 변수로 지정할 수 있습니다. 내가 고정으로 쓰는 글자와 앞에서 받은 변수들을 섞어가며 좋은 프롬프트를 입력합니다.
체험학습 보고서의 품질과 완성도는 결국 프롬프트가 결정합니다. 짧으면서도 좋은 글을 생성하는 프롬프트를 결정하는 과정을 많이 연습해야 합니다. 이 웹서비스 자동화 개발을 시작하기 전에, ChatGPT와 1:1 대화 엄청 하면서 프롬프트를 아주 여러번 다듬었습니다.

■ Airtable에서 구현하기

이제 Airtable도 열어서 설정을 해줍니다.
Airtable 접속 및 가입 링크
아래 링크는 저의 referral link입니다. 제가 추천인으로 적용되어서 저에게 일정부분 credit이 생깁니다. 여러분들은 그냥 바로 접속해서 가입한 것과 똑같습니다.
Workspace(작업공간 그룹핑 하는 용어입니다)를 만듭니다.(개인용, 회사업무용, 프로젝트명 등으로 이름 지으시면 됩니다)
Base 만들기를 합니다.
Airtable에서는 Base, Table이라는 용어가 나옵니다. Base는 하나의 엑셀 파일 같은거고, Table은 엑셀 내에 있는 여러 개의 탭 같은겁니다.
Base 내 Table에서 필드(엑셀에서 '열'에 해당하는 부분)를 만듭니다 : Softr form과 동일한 필드를 동일한 속성(숫자, 글, 시간 등)으로 지정합니다. 그래야 Softr form에서 받은 정보가 그대로 Airtable에 깔끔하게 오류없이 저장이 됩니다.
ChatGPT 생성한 글을 저장할 ‘Report’ 필드를 추가해 줍니다. 이 글은 제법 길테니까 Single line text가 아니고 long text로 합니다.
이력 관리를 위해 ‘Created Time’ 필드도 추가합니다. 누가 언제 어떤 글을 만들었는지를 파악할 수 있습니다.

■ Make에서 구현하기

Make에서 Airtable 계정을 연결합니다(이럴 때 Airtable API를 씁니다. Airtable 내 계정정보에 보면 API도 있습니다)
Make에서 Airtable 모듈을 추가하고 "Create a Record"를 선택합니다. Airtable에 새로운 Record(데이터)를 생성하는 모듈입니다.
Make에서 Softr form 입력 데이터와 ChatGPT 생성물을 모두 Airtable에 저장시킵니다
앞에서 Webhook으로 받은 변수들을 저장할 필드도 지정하고, 앞에서 ChatGPT로 생성한 글을 저장할 필드도 지정합니다.

■ Softr에서 구현하기

생성 결과보기 페이지 구성 : 페이지명을 "Report result"로 했습니다.
Softr에서 List 블록 추가하기 > 보여줄 데이터베이스로 Airtable 선택하기 > Airtable API 입력하기 > 보여줄 Airtable 화면 선택하기 (Base 선택하고 Table 선택하고 View 선택하면 됨)
결과보기 페이지 디자인 : 여행정보(여행지, 여행기간, 활동) + 체험학습 보고서(Airtable 필드명 ‘Report’)
Form 제출 완료 후 자동으로 결과보기 페이지로 이동시키기 위해서 On form submit 메뉴에서 Action은 Open page 선택하고 페이지명에서 "Report result"(만들어진 페이지 이름에서 선택) 선택합니다.
사이트를 웹에 공개합니다 : Publish 누르면 됩니다
Custom Domain 버튼을 누르면 도메인 이름 변경이 가능합니다. 저도 이거 눌러서 travelreport.softr.io로 변경했습니다. 뒤에 softr.io는 변경 못하고 앞부분만 변경 가능합니다.

■ Make에서 구현하기

Make에서 자동화 테스트를 해봅니다 : Run once 누르면 딱 1회만 작동하며 웹훅 테스트 가능합니다
Run once 작동 눌러놓고, 웹 공개한 Softr 사이트에 접속해서 form에 테스트 데이터 입력하고 제출 눌러봅니다.
Make로 다시 돌아와서 시나리오를 보면 각각의 모듈이 작동한 결과가 표현됩니다. 웹훅 눌러보면 어떤 데이터가 웹훅으로 들어왔는지 표시되어 있고, OpenAI 눌러보면 어떤 글을 생성했는지 나오고, Airtable 눌러보면 어떤 데이터 저장했는지 나옵니다.
Run once 테스트에 성공했으면 그 아래에 있는 "ON"을 시킵니다.
시나리오(Scenario) 메뉴에서 언제든지 On/Off 변경할 수 있습니다.
시나리오 화면 우측에서 자동화 작동 로그, on/off 로그 확인 가능합니다.
클릭 시 세부내용 확인 가능합니다.

웹서비스 발전 방안

[1] 생성 글의 정교화

ChatGPT 프롬프트에 6하 원칙 반영
User 입력 form에 글 길이, 글 스타일(설명, 묘사, 감상) 지정 메뉴 추가
드롭다운 등 특이형식의 form 필요 시 Softr 외에 별도의 노코드 form 툴 연동 필요

[2] 학교별 맞춤화

학교별 템플릿 입수 및 반영
학교별 템플릿을 User가 등록할 수 있는 화면 구성

[3] 완전 자동화

템플릿 작성, 사진 첨부, 인쇄까지 자동화
학교별 템플릿 선택 > 템플릿 채우며 보고서 작성
업로드 된 인증사진, 입장권 사진을 자동 배치
보고서 완성 후 바로 인쇄/다운로드 기능

[4] 회원가입 추가

로그인 후 보고서 생성 기능 사용
자신이 생성한 보고서만 열람 가능

후기

이렇게 다 만들었고 지금도 접속하면 사용이 가능합니다.
하지만 돈을 벌기 위한 마케팅은 하지 않고 있습니다.
몇가지 마음에 걸리는 부분이 있습니다.
1) 글이 충분히 멋지지 않습니다. 입력 키워드를 더 받고 프롬프트도 더 세련되게 업글해야 할 듯 합니다.
2) 여전히 체험학습 보고서 대필은 마음이 편치 않습니다. 의미있고 유익한 글을 만드는 서비스가 아니라 자랑스럽지 않고 마음이 불편합니다.
3) 고객의 심각한 pain point가 아닙니다. 1년 4번 정도는 그냥 검색해서 쓰거나 애한테 시킬 것 같습니다.
그래서 일단 여기서 멈춰 있습니다.
폐기할까요? 업그레이드를 할까요?