이 글은 시리즈로 이루어져 있으므로 1편부터 읽으시는 것을 추천합니다.
1편: 웹서비스 기획하기 [읽고있는글]
2편: 웹서비스 개선하기 [바로이동하기]
3편: 웹서비스 배포하기 [바로이동하기]
4편: 웹서비스 최적화하기 [바로이동하기]
더 많은 이야기를 듣고싶다면 위드의 메이커 레터 [구독하러가기]
안녕하세요, 메이커 위드입니다. 이번엔 코딩을 1도 모르는 제가 ai를 통해 웹서비스를 제작한 과정을 공유하고자 해요.
코딩에 대해선 아예 무지한 상태였어요. 전공자도 아니였고 프로그래밍을 따로 공부한 경험도 없었어요. 가지고 있는 지식조차 파이썬의 '선그리기, 도형그리기' 와 같은 매우 기초적인 프로그래밍 경험만 있었어요.
그래도 시작하다.
경험도 없고 코딩도 못하지만 시작하기로 했어요. 이유는 간단했어요. 웹서비스를 만드는게 재미있어 보였고 어마어마하게 똑똑한 사람들이 만든 ai를 믿었기 때문이에요.👍
정말로 무지한 상태로 시작했어요. 프로그래밍의 과정, 어떤 단계를 밟아가야하는지, 어떻게 시작해야하는지도 잘 몰랐어요.
그래서 코딩은 미뤄두고, 먼저, 할 수 있는 걸 하기로 했어요.
"어떤 웹서비스를 만들지?"
좋은 아이디어가 있어야 좋은 서비스가 나올 수 있고, 개발 과정에서 무너지지 않을 수 있었으니까요.
모든 것의 시작, 기획
웹서비스 기획에 앞서 몇가지 규칙을 세우고 시작하기로 했어요.
1. 그래도 난이도가 낮은 서비스로..
2. 내가 가진 문제점 해결에서 시작하기
3. AI API를 사용할 수 있는 서비스
아무리 챗봇 AI를 이용해서 제작한다곤 하지만 AI도 한계가 존재하고, 저의 개발능력도 부족하기 때문에 '그래도 쉬운' 서비스로 기획하기로 했어요.
제작한 서비스가 개발 이후에 쓰이지 않으면 슬플것 같아서, 저라도 꾸준히 사용할 수 있게 '나의 문제점'을 바탕으로 아이디어를 내봤어요.
그리고 요새 많이 쓰이는 AI API를 통해서 쉽게 만들어 보고 싶어 'AI API'를 사용하는 서비스를 생각해보기로 했어요.
기획, 문제점 찾기
이렇게 3가지 규칙을 세우고 아이디어를 내봤어요. 먼저, 내가 가진 문제점을 찾기로 했어요.
저는 과거 실험보고서를 매주 써서 제출했어요. 보고서를 작성할 때, 기본적인 내용은 실험을 하며 익히지만 추가적인 자료조사 통해 레포트에 추가해서 작성했어요.
그런데 추가 자료조사하는 과정에서 찾을 수 있는 정보가 제한되있고 실험 디테일에 따라 비슷한 실험이라도 내용이 달라지는 경우가 있어요.
그래서 내가 입력하는 내용에 따라 유동적으로 ai가 실험보고서를 써주는 웹서비스가 있으면 실험보고서를 쓸데 편해지지 않을까? 라는 생각이 들었어요.
문제점: 자료 조사와 실험 보고서 작성 과정이 복잡하고 시간이 많이 소요된다.
"나 대신 AI가 실험보고서를 대신 써준다고?"
실험 정보를 몇가지 입력하는 것만으로도 실험보고서를 ai가 일부분 작성해주는 웹서비스가 좋아보였어요.
나의 문제점을 해결함과 동시에 AI API도 사용할 수 있고 개발 난이도도 높아보이지 않았어요!!
(이때 그만두었어야 했는데...)
AI와 함께, 기획서를
gpt에게 웹서비스 기획서를 달라고 해봤어요. 양식에서 필요없는 부분들 빼고 작성했어요. 기획서는 간단하게 해도 되지만 개발에 앞서 꼭 한번 작성해보기를 추천할께요.
기획서를 작성해보면서 웹서비스의 구체적인 방향과 목표를 그릴 수 있어요!!
웹서비스 구체화하기
웹서비스에 대한 기획은 어느정도 마무리 되었어요. 그러나 웹서비스에 어떤 기능이 들어갈지, 어떻게 서비스를 제공할 건지, 이무것도 정해진게 없어요...
개발을 위해선 웹서비스 구체화가 필요해요. 저는 제가 쓴 실험보고서를 분석해서 어떤 기능이 들어갈지, 어떻게 사용할 수 있을지, 구체화 해봤어요.
실험보고서에 들어가는 내용들만 나열해봤어요. 여기서 실험보고서 작성에 필요한 최소 내용들만 뽑아 볼께요.
웹서비스에서는 이 내용들만 작성하면 실험보고서를 생성할 수 있도록 할꺼에요. 사용자가 실험 내용에 대해 최소한만 입력하거나 일부만 입력해도 보고서를 작성될 수 있도록 만들꺼에요.
"사용자의 부담을 최소화, 최소만 넣자"
"복잡함을 줄이자!"
최대한 뺄 수 있는건 빼고, 복잡함을 덜어내 사용자가 편하게 쓸 수 있도록 할꺼에요. 제가 쓸거라서, 기능이 부족하더라도 편하게 사용할 수 있게 할거에요.
개발 시작, 너로 정했다! AI API 고르기
웹서비스는 거의 구체화 되었어요. 이제 사용할 AI API 선택해야 해요.
gpt, 클로드 등등 여러 AI API를 찾아봤지만 가격이 좀 있어서, 일부 무료로 제공되는 '구글 Gemini API'를 선택했어요. (가격이 저렴해요!)
구글에서 제공하는 Gemini AI의 API key를 받아왔어요. API key를 받아오는 건, 구글링으로 쉽게 할 수 있었어요.
하지만 API를 어떻게 사용하는지 하나도 모르는 상태여서 gpt의 도움을 받아 바로 개발을 진행하기로 결정했어요.
개발 시작, "AI야, 코딩 해줘~"
gpt에게 개발에 사용할 언어와 서비스 개요, 목적, 기능, 인터페이스 등등 웹서비스 개발에 필요한 내용들을 구체적으로 언급했어요.
코딩이 꼬이지 않게 최소 작동 기능만 먼저 애기했어요. 개발 언어는 제가 접해본적있는 파이썬으로 선택했어요.
그러자 코드가 한 순간에 나왔어요. 😯
"와...지금껏 gpt를 사용해보면서 가장 신기했어요."
코드가 쉬지 않고 뿜어져 나오는데 코딩을 처음하는 입장에선 신세계가 다름없었어요.
gpt가 준 코드를 보고 놀라는 것도 잠시, 파이썬 코드는 알겠는데 처음보는 html 코드가 나왔어요.
gpt에게 질문해보고 html은 웹 페이지를 구성하는 언어라는 것을 알았어요. 이제 코드를 받았으니 실행시켜서 테스트 해야겠죠.
앗, 야생의 코드를 만나다.
코드를 실행시켜보기 전, 개발 환경을 만들어야 해요. 개발자들은 보통 vs code라는 코드 작성 프로그램을 사용하고있었어.
vs code는 무료 프로그램이자 확장성도 좋았어요. 그러나 프로그램을 다운받고 설정하는게 좀 어려웠어요. 여러기기를 사용하는 저에게는 여러대 노트북과 컴퓨터에 설치해야하였고, 여러 대의 기기로 코딩하기에 어려움이 있었어요.
그래서 웹사이트에서 바로바로 코드를 작성할 수 있는 Replit 사이트를 선택하기로 했어요.
또한, 어떤 기기에서든 웹으로 접속해서 로그인만 한다면 코드를 이어 작성할 수 있다는 장점이 있었어요. 제대로 활용하기 위해선 결제가 필요했지만, 기본적인 시스템은 전부 무료로 지원했어요.
"gpt야 Replit 사이트에서 코드를 실행시키려 하는데 초보자인 나에게 천천히 설명해줘 "
gpt의 가이드에 따라 천천히 진행하고 준 코드를 입력하고 실행해보았어요.
"앗, 오류다!"
처음으로 준 코드를 실행하자마자, 오류가 발생했어요.
오류난 코드 전체를 복사해서 오류가 발생했다고 얘기했어요.
"한두 번이면 해결될 줄 알았어요."
이후 오류난 코드를 해결하면 다른 문제가 계속 튀어나왔어요. 특히 구글 API에서 오류가 발생해, 매우 오랜시간을 들여 겨우 해결할 수 있었어요.
꽤나 시간을 많이 쏟아부었고 웹서핑과 gpt를 함께 이용했어요.
(도중에 정상적으로 작동되는 메세지를 오류로 착각하기도 했어요.) 😅
코드를 실행시켰어요. "이게 되네"
Replit 사이트에 파이썬 코드와 html 코드를 입력했습니다. 바로 Run 버튼을 눌러 작동 시켜보았어요.
"이게 되네"
정상적으로 실행되고, 작동되었습니다.
마치 하나의 큰 산을 넘은 기분이었습니다. 다윗이 골리앗을 쓰려뜨렸을때 기분일까요? 넘을 수 없는 벽을 넘은 기분이었습니다.
기본적인 구조는 코딩이 완성했으니 편의성을 위한 기능과 디자인 개선만 남았어요!
2편에서 계속....
댓글
의견을 남겨주세요