코딩 초보의 AI 활용 웹사이트 제작기
코딩 모르는 내가 AI와 함께 만든 TeamEducator 재시도 Cla
오늘은 코딩을 전혀 모르는 상태에서 'TeamEducator'라는 웹사이트를 만든 과정을 공유하려고 합니다. 노코드 솔루션을 사용했다면 어찌어찌 만들었을지 모르지만 많은 부분이 불안정했을 것 같습니다. 하지만 AI의 도움으로 더 안정적인 사이트를 구축할 수 있었습니다. 코딩 전문가들에게는 웃긴 이야기일 수도 있지만, 저처럼 코딩을 모르는 분들에게 용기를 드리고 싶어 기록해봅니다.
시작은 오래된 꿈에서
TeamEducator는 사실 2019년에 제가 도메인을 구매해서 시작했던 프로젝트입니다. 처음에는 교육자들이 모여 소통하는 커뮤니티로 기획했고, 특히 구글 트레이너로 활동하면서 디지털 교육에 관심 있는 분들과 교류하고 싶었습니다. 그런데 코로나가 찾아오면서 도메인만 가지고 있는 상태로 멈춰있었습니다.
작년부터 새로운 필요성을 느꼈습니다. 제가 많은 교육자를 알고 있지만, 정작 제가 소개해줄 수 있는 분들의 정보가 체계적으로 없다는 걸 깨달았습니다. 특히 대전에서는 더욱 그랬습니다. 그래서 TeamEducator를 '교육자와 기관을 이어주는 플랫폼'으로 발전시키고 싶었습니다.
AI 플랫폼들과의 첫 만남
본격적인 개발을 위해 Cursor, V0, Windsurf, Trae, Augument 등 다양한 AI 코딩 도구들을 사용해봤습니다. 처음에는 무료인 Trae로 시작했는데, 대기 시간이 길어서 중간에 포기했습니다. 그 다음엔 Augument로 옮겨서 시도했습니다. 둘 다 Claude 3.7을 기반으로 하지만, 플랫폼이 다르니 코드 스타일도 달랐습니다. 코드를 읽지도 못하는 제가 그 차이를 느낄 정도였으니까요.
진지한 시작과 설계의 중요성
최근에야 본격적으로 프로젝트를 시작했습니다. 다른 코딩하는 분들의 글을 눈팅하면서 PRD의 중요성과 AI와 함께 설계 후 코딩하는 방법 등을 배워가며 진행했습니다. 처음에는 Genspark와 함께 설계를 했습니다. Genspark는 제가 초대 이벤트로 100명을 가입시켜서 20개월 무료를 받았었는데, 이상하게 사용률이 떨어져서 일부러 선택해서 사용한 것입니다.
Genspark에서는 제가 수익 창출 계획이 없다고 하자 다양한 오픈소스를 추천해주었고, 그 설계를 바탕으로 Augument에서 작업을 시작했습니다. 첫 결과물은 정말 놀라웠습니다! 실시간 채팅까지 구현된 것처럼 보였습니다! 화면에 나타난 UI를 보고 "이게 진짜 내가 만든 거야?"라는 생각이 들 정도였습니다.
예상치 못한 문제들
Supabase로 백엔드를 구성하고 이메일, 구글, 카카오 로그인까지 어떻게든 성공했습니다. 그런데 오픈소스 3개를 사용하다 보니 AI가 이들을 제대로 연동시키지 못했습니다. 회원가입은 되는데, 등록된 교육자 정보가 지도에 표시되지 않는 문제가 발생한 것입니다.
이틀을 고생했습니다. 중간중간 강의도 하고 다른 업무를 했기에 48시간을 꼬박 소비한 건 아니지만, 그래도 정말 고생했습니다. 이전에도 다양한 웹사이트를 만들어봤기에 빠르게 포기하고 다시 시작하는 법을 알았지만, 이 문제는 해결이 안 되었습니다.
불면의 밤과 새로운 시작
4월 24일 밤 9시부터 25일 새벽 2시까지... 실패 후의 우울함에 휩싸여 Perplexity의 음성 기능을 활용해 대화를 나눴습니다. 마침 그날 업데이트가 되어서 테스트도 해보고 싶었던 것입니다.
"나는 바이브 코딩을 활용해서 사이트를 만들려고 하거든. 나랑 같이 설계 한번 해볼래?"
이렇게 시작된 대화 중에 잠시 졸기도 했습니다. 15분이나 잤습니다! 결국 그동안의 대화를 PRD 문서로 정리해달라고 요청하고 잠들었습니다.
Windsurf와 60%의 성공
다음날, 정리된 PRD 파일을 Windsurf에 넘겼습니다. 놀랍게도 PRD 문서를 주자마자 처음부터 제가 원하는 수준의 60%를 구현해냈습니다. 추가 요청 이후에는 75%까지 달성했습니다. "이거다!" 싶었지만, 함정이 있었습니다. 이때는 회원 데이터와 지도가 잘 맞았지만, Supabase에는 등록된 계정이 없었습니다. 알고 보니 Mock 파일이었던 것입니다.
데이터베이스 연결의 난관
Supabase와 연결을 시도했는데, 데이터 테이블을 만들어야 했습니다. 필드명이 뭐가 되어야 하는지, 어떤 형식으로 저장해야 하는지... 모든 것이 낯설었습니다. SQL 입력을 복사해서 직접 넣었지만 오류의 연속이었습니다. 다시 Perplexity의 도움을 받아 드디어 성공했습니다!
행정구역 표시와 마지막 장애물들
또 다른 문제는 행정구역 표시였습니다. 처음에는 시-구까지만 표시했는데, 경상북도, 전라남도 같은 지역은 군이 많잖아요. 그래서 시-구-군까지 표시해달라고 했는데, 계속 군이 안 나오는 것입니다. 결국은 JSON 형식 변환 과정에서의 오류였음을 발견하고 해결했습니다.
비용 최소화 전략
이 모든 과정에서 중요했던 것은 최대한 고정비가 적게 나가는 방향으로 개발하는 것이었습니다. 등록하는 교육자나 강사를 찾는 사람들에게는 돈을 받을 계획이 없기 때문입니다. 그래서 메시지 보내기, 채팅 기능은 직접 구현하는 대신 카카오톡 오픈채팅이나 이메일 같은 외부 서비스를 활용하기로 했습니다.
바이브 코딩의 한계와 가능성
이 모든 과정을 통해 깨달은 것은, 바이브 코딩이 있어도 기본 지식은 필요하다는 점입니다. 마치 제가 20살 때 무주리조트 상급자 코스에서 스노우보드를 배웠던 것처럼요! 당시 저는 초보자였지만, 상급자 코스에 들어가서 억지로 타며 배웠습니다. 자세는 이상해도 타게 되긴 했죠. 스노우보드를 탄 지 몇 년이 지나도 그때의 경험이 몸에 남아있는 것처럼, 코딩의 기본 개념도 조금씩 쌓여가는 것 같았습니다.
코딩을 모르는 제가 AI랑 바이브 코딩을 하면서 느낀 건데, 코딩은 다른 것과는 확실히 다릅니다. 스노우보드에서 다치면 병원에서 치료받을 수 있지만, 코딩에서는 AI에게 문제를 정확히 설명하기 어렵습니다. "다리가 아파요, 한번 진단해주세요"라고 말하는 것과 비슷합니다. 구체적인 증상을 설명하지 못하니 정확한 진단이 어려운 것입니다.
그렇게 질문했을 때 AI의 답은 민간요법으로 치료하는 의사 같습니다. "이렇게 해보세요, 저렇게 해보세요"라고 제안하는데, 그게 정석인지 아닌지 판단하기 어렵습니다. 자연 치유인지 민간요법의 효과인지 구분하기 어려운 '바이브 진료'인 셈입니다. 결과적으로 해결되면 "오, 이게 맞았구나!"라고 느끼지만, 왜 해결됐는지는 정확히 모르는 상태로 남게 됩니다.
앞으로의 계획
이제 TeamEducator에 많은 분들이 등록해주셨으면 좋겠습니다. 제가 강사 섭외를 위해 이곳저곳 연락하고 수소문하는 과정에서 느낀 불편함을 다른 분들은 겪지 않았으면 합니다.
현재는 MVP 1차 버전이라 앞으로 업데이트가 필요합니다. 다음 버전에서는 실시간 강사 섭외 현황판처럼 보이게 해보려 합니다. 이번에 연수 강사 6명을 구하면서 느낀 점이 많았습니다. 실시간으로 강사 섭외 현황이 보이면, 중복 지원도 방지 할 수 있을 것 같고요.
업데이트하는 것이 두렵기는 합니다. 지금까지 얻은 성과가 무너질까 봐 걱정되기도 합니다. 하지만 이번 경험을 통해 어려움을 극복하는 방법을 조금은 배웠으니, 다음에는 더 잘할 수 있지 않을까 싶습니다.
많은 분들이 TeamEducator에 등록해주셨으면 좋겠습니다. 코딩을 전혀 모르는 제가 AI의 도움으로 이만큼 만들 수 있다면, 앞으로는 더 많은 가능성이 열릴 거라고 믿습니다. 아무튼 많이 등록해주십시오!
