AI로 코딩 없이 웹사이트 개발 가능할까요? - v0.dev 사용법

이 글은 유튜브 영상으로 제작되었습니다.
https://youtu.be/YxEZkQi3M5w?si=7sQx_Gpz8kgioPTl

 

---

코딩 없이 웹사이트 개발이 가능할까요?

물론입니다. 요즘 "바이브 코딩"이라는 단어 들어보셨죠?
이게 직접 코드를 입력하지 않고 코드를 개발하는 방법입니다.
AI를 이용하는 것이죠.
코드를 입력하는게 아니라 AI에게 Prompt를 입력해서 개발을 진행하는 것을 바이브 코딩이라고 합니다.

 

바이브 코딩이란?

"내가 어떤 분위기의 화면을 원한다, 어떤 느낌의 구성으로 만들고 싶다."
이런 ‘의도’를 AI에게 자연어로 전달하면, 그걸 코드로 바꿔주는 새로운 프로그래밍 방식입니다. 

 

기존 프로그램 개발 방식과의 차이점은 다음과 같습니다.

 

기획-디자인-코딩과 같은 형태에서, 프롬프트 입력 만으로 개발이 가능해졌습니다.

 

v0.dev

이렇게 바이브코딩을 지원하는 AI 중 하나가 Vercel에서 나온 v0.dev입니다.

Vercel은 Next.js 프레임워크를 만든 곳입니다.

따라서 v0.dev를 사용하면 next.js 프레임워크로 제작된 코드가 생성됩니다.

 

v0.dev는 굉장히 높은 수준의 디자인과 코드 품질을 보여줍니다.

그래서, 구현된 코드를 실전에 적용해 바로 사용이 가능합니다.

 

데모 프로젝트

v0.dev에서 테크블로그 사이트를 만드는 프로젝트를 진행해보겠습니다.

 

https://v0.dev 에 방문하여 새로운 프로젝트를 만들고,

다음과 같이 프롬프트를 입력합니다.

모던한 디자인의 프로그래밍 테크 블로그를 만들꺼야.
상단에 Hot Issue 섹션을 만들어줘
그 아래는 이미지와 요약이 포함된 최신 기사를 그리드 형태로 보여줘.
사이드바에는 카테고리와 뉴스레터 구독 신청 기능을 넣어줘.

 

단지 이것만으로 AI가 아래와 같이 완성된 사이트를 만들어주었습니다.(2~3분 소요)

추가로 "다크모드"를 요청하면 2분내로 아래와 같은 결과물을 만들어주었습니다.

 

---

결론

이제 비개발자도 바이브코딩으로 웹사이트를 개발할 수 있게 되었습니다.

그것도 빠르고, 좋은 품질의 결과물을 만들 수 있습니다.

물론 문제가 생겼을때는 개발자가 훨씬 유리하고 빠르게 해결을 할 수 있습니다.

 

이제 기술 보다는 "어떤 것을 만들 것인가?" 훨씬 중요한 시대가 되었습니다.