개발 1도 모르는 나도 서비스 만들 수 있어

바이브코딩으로 첫 서비스를 개발하다

by 기획하는 디자이너

어찌저찌 스크립트 정도는 가져다 쓸 수 있는 정도는 되었지만, 여전히 서버를 구축하거나 DB가 붙은 서비스를 개발하는 것은 나와는 먼 얘기였다.


하지만 이제는 발이라도 담글 수 있다.

바로 바이브코딩 덕분.



바이브코딩이란

바이브코딩은 직접 하드코딩하지 않고 다양한 ai 서비스를 통해 서비스를 구축하는 걸 말하는데, 미국 실리콘밸리에서 만들어진 트렌드이자 단어라고 한다.


예를 들어, 개발자가 "카드 한 벌을 섞는 JavaScript 함수를 만들어줘"와 같이 자연어 형태로 AI에게 요청하면 AI가 해당 기능을 수행하는 코드를 생성한다. 개발자는 생성된 코드를 확인하고 필요에 따라 수정하거나 개선할 수 있다. (via 구글 gimini)




스크린샷 2025-07-15 오전 1.02.06.png TAGLINE 태그라인 이메일 서명 코드 생성기


개발 1도 모르던 내가 서비스를 만들다니


전부터 내가 불편하다고 생각했던 요소이자 꼭 서비스로 만들어보고 싶었던 아이디어 중 하나인 '이메일 서명 코드 빌더' 서비스를 개발했다.

퍼블리싱과 스크립트 라이브러리 활용, 그것도 scss 는 잘 모르고 정통 css/html 만 사용하던 나인데 GPT를 만나면서 개발자에 엄지발가락 한 개 담가본 셈이다.




스크린샷 2025-07-15 오전 1.01.57.png


사실 1도 모르면 할 수 없다


사실 아예 개발이나 퍼블리싱 등에 대한 개념이 1도 없는 상태라면, 바이브코딩은 사실상 불가하다.

왜냐하면 ai가 코드를 짜 줘도 틀린 부분이 어딘지 확인하려면 어느정도 코드를 읽을 줄은 알아야 하고, 정확하게 읽지는 못하더라도 대략 이 부분이 이 기능을 구현하는 부분이구나 정도는 캐치해야 수정할 수 있더라.


GPT와 함께 개발하면서 느낀 건, 내가 원하는 부분을 최대한 자세하게 컴퓨터 개발 언어 작성하는 흐름처럼 작성해줘야 내가 딱 원하던 그림을 만들어 준다는 것이었다.

또, 너무 긴 코드는 한 번에 작성하기 어려워하는데 뭔가 섹션별로 이어서 다음 코드를 추가하려고 하면 처음의 코드에서 지정한 ID 나 클래스를 마음대로 바꿔버린다.

원하는 지점이 A 인데 GPT는 a' 도 생각하고 a-1도 생각해야 하다보니 결과는 a처럼 보이는 @가 되기도 했다.


그래서 전반적인 코드의 흐름이나 대략적인 명령어에 대한 육감적인 캐치 능력이라도 있어야 할 수 있는 것 같다.


스크린샷 2025-07-15 오전 1.00.24.png GPT와 함께하는 바이브코딩




코드는 1주 완성, 보강 1주, 디자인 2주


항목별로 input에 정보를 넣고, 넣은 정보를 미리보기 해 주고, 미리보기 된 상태를 코드화하는 것 뿐인 단순한 기능인데도 시행착오를 정말 많이 거쳤다.

이미지 파일 첨부 기능은 구글 파이어베이스를 사용했는데 아직도 이 서비스의 정확한 개념은 잘 모르겠다.


보강할 때 input에 넣은 단순 스타일 적용 기능을 미리보기에 바로 보여주는 것도 참 애를 먹었다.

여러가지를 한 번에 하느라 조금씩 나누어서 작업했지만 실질적으로 들어간 시간만을 따지면 대략 4주 정도 걸렸다.




디자인은 앞으로 계속 업데이트할 생각인데, 누가 써줄지 잘 모르겠다.

비즈니스 처음 작게 시작하는 분들이라면 보통은 이메일 서명 생성 시 Html 코드는 직접 넣어야 하는 포털을 주로 사용하게 되니 필요한 분들이 없지는 않겠지.




혹시 사용해볼 분들은 아래 링크를 참고 부탁드린다.

이메일 서명 생성기 TAGLINE 바로가기