바이브코딩으로 첫 서비스를 개발하다
어찌저찌 스크립트 정도는 가져다 쓸 수 있는 정도는 되었지만, 여전히 서버를 구축하거나 DB가 붙은 서비스를 개발하는 것은 나와는 먼 얘기였다.
하지만 이제는 발이라도 담글 수 있다.
바로 바이브코딩 덕분.
바이브코딩은 직접 하드코딩하지 않고 다양한 ai 서비스를 통해 서비스를 구축하는 걸 말하는데, 미국 실리콘밸리에서 만들어진 트렌드이자 단어라고 한다.
예를 들어, 개발자가 "카드 한 벌을 섞는 JavaScript 함수를 만들어줘"와 같이 자연어 형태로 AI에게 요청하면 AI가 해당 기능을 수행하는 코드를 생성한다. 개발자는 생성된 코드를 확인하고 필요에 따라 수정하거나 개선할 수 있다. (via 구글 gimini)
전부터 내가 불편하다고 생각했던 요소이자 꼭 서비스로 만들어보고 싶었던 아이디어 중 하나인 '이메일 서명 코드 빌더' 서비스를 개발했다.
퍼블리싱과 스크립트 라이브러리 활용, 그것도 scss 는 잘 모르고 정통 css/html 만 사용하던 나인데 GPT를 만나면서 개발자에 엄지발가락 한 개 담가본 셈이다.
사실 아예 개발이나 퍼블리싱 등에 대한 개념이 1도 없는 상태라면, 바이브코딩은 사실상 불가하다.
왜냐하면 ai가 코드를 짜 줘도 틀린 부분이 어딘지 확인하려면 어느정도 코드를 읽을 줄은 알아야 하고, 정확하게 읽지는 못하더라도 대략 이 부분이 이 기능을 구현하는 부분이구나 정도는 캐치해야 수정할 수 있더라.
GPT와 함께 개발하면서 느낀 건, 내가 원하는 부분을 최대한 자세하게 컴퓨터 개발 언어 작성하는 흐름처럼 작성해줘야 내가 딱 원하던 그림을 만들어 준다는 것이었다.
또, 너무 긴 코드는 한 번에 작성하기 어려워하는데 뭔가 섹션별로 이어서 다음 코드를 추가하려고 하면 처음의 코드에서 지정한 ID 나 클래스를 마음대로 바꿔버린다.
원하는 지점이 A 인데 GPT는 a' 도 생각하고 a-1도 생각해야 하다보니 결과는 a처럼 보이는 @가 되기도 했다.
그래서 전반적인 코드의 흐름이나 대략적인 명령어에 대한 육감적인 캐치 능력이라도 있어야 할 수 있는 것 같다.
항목별로 input에 정보를 넣고, 넣은 정보를 미리보기 해 주고, 미리보기 된 상태를 코드화하는 것 뿐인 단순한 기능인데도 시행착오를 정말 많이 거쳤다.
이미지 파일 첨부 기능은 구글 파이어베이스를 사용했는데 아직도 이 서비스의 정확한 개념은 잘 모르겠다.
보강할 때 input에 넣은 단순 스타일 적용 기능을 미리보기에 바로 보여주는 것도 참 애를 먹었다.
여러가지를 한 번에 하느라 조금씩 나누어서 작업했지만 실질적으로 들어간 시간만을 따지면 대략 4주 정도 걸렸다.
디자인은 앞으로 계속 업데이트할 생각인데, 누가 써줄지 잘 모르겠다.
비즈니스 처음 작게 시작하는 분들이라면 보통은 이메일 서명 생성 시 Html 코드는 직접 넣어야 하는 포털을 주로 사용하게 되니 필요한 분들이 없지는 않겠지.
혹시 사용해볼 분들은 아래 링크를 참고 부탁드린다.