GPT api를 활용한 노코드 웹사이트 제작: 상형문자 작명소

'나 혼자 산다'를 보다가 문득 떠오른 아이디어

여자친구와 '나 혼자 산다'를 보고 있는데, 이집트 편에서 이름을 상형문자로 바꾸면 무슨 뜻이 되는지 알아보는 장면을 보다가 GPT api를 활용하면 간단하고 재밌는 서비스를 만들 수 있을 것 같다는 생각이 들었습니다. 그 즉시 바로 컴퓨터를 켜서, 사용자가 이름을 입력하면 상형문자로 변환하고 그 뜻풀이까지 GPT를 통해 제공하는 웹사이트 기획을 시작했습니다.

나혼자 산다 이집트편

 

Webflow: 노코드 웹사이트 빌더

어떤 툴로 만들지 고민하다가, 노코드로 웹사이트를 만들 수 있는 Webflow를 이용해서 구현하기로 결정했습니다. 예전에 Webflow를 이용해서 GPT api 서비스를 만드는 튜토리얼을 봤던 기억이 나서 다시 찾아봤습니다. 고맙게도 해당 튜토리얼의 템플릿을 제공하고 있어서 해당 Layout에서 약간의 수정만 적용하여 필요한 웹사이트 UI를 구현할 수 있었습니다.

Webflow에서 gpt api를 활용하는 튜토리얼 영상

 

GPT api 프롬프트 엔지니어링

처음 목표는 사용자가 이름을 입력해서 api에 전송하면, GPT 3.5 모델을 이용해서 그 이름을 상형문자로 변환하고 뜻풀이를 하는 아이디어로 시작했습니다. 하지만, 몇 번 테스트를 해보니 상형문자 변환에서 일정한 퀄리티가 유지되지 않았습니다. 그래서 방식을 바꿔, 알파벳과 상형문자를 대응하는 로직을 하드코딩으로 구현하였고, 변환된 상형문자를 GPT의 prompt로 입력하는 것으로 수정했습니다.

 

Make를 이용한 API 처리

막연하게 프롬프트와 API key를 화면에서 넘기면 될 거라고 생각했었는데, 그러면 제 API 키가 노출되어 보안 이슈가 발생한다는 사실을 알게 되었습니다. 그래서 튜토리얼에서 알려준 대로 Make에서 Webhook으로 GPT api를 호출하는 시나리오를 만들었습니다. 예상하지 못했던 부분은 한 번의 시나리오에서 [웹훅으로 전달, API 호출, 웹훅 응답 수신] 총 3개의 operation이 발생하여 비용이 3배로 발생한다는 점이었습니다.

Make에서 webhook을 이용해 간단하게 GPT api를 이용하는 시나리오

 

구글 애드센스 게재 실패

또 하나 미처 알지 못했던 것은 이런 유틸리티 웹사이트에 Google ads를 실을 수 없다는 점이었습니다. GPT api와 Webflow를 이용해 간단한 웹사이트를 만들고 광고를 이용해 파이프라인을 늘려보려는 저의 얄팍한 시도를 구글은 이미 파악하고 있었습니다. 사이트 내에 관련 콘텐츠를 싣거나, 이용자 수가 많아지면 게재될 수 있을 것도 같지만 우선은 홀딩하기로 했습니다.

구글 광고 게재 검토

 

교훈으로 남은 것들

생각보다 웹사이트를 만드는 것과 GPT api를 활용하는 방법이 간단하다는 사실을 알게 되었습니다. 그리고 그렇게 생성된 GPT의 응답의 퀄리티도 충분히 만족할만한 수준이었습니다. 물론 이를 활용해서 수익화하는 것은 좀 더 아이디어와 노력이 필요할 것 같지만, 앞으로 더 다양한 시도를 통해 극복해 나가보려고 합니다.

 

Echoes of Egypt

1 page로 구성된 웹사이트, make에서 제공한 무료 사용량이 초과하기 전에 어서 사용해보세요