코딩 한 줄 몰라도 Ai로 웹사이트 만들 수 있을까요?
Ai에게 단 한 줄 프롬프트로 ‘나의 첫 프로그램’을 실행해 보기
1. 바이브코딩이란?
Ai에게 내가 원하는 걸 자연어로 설명하면,
Ai가 그걸 코드로 번역해 주고,
나는 그 코드를 붙여 넣어 실행하기만 하면 됩니다.
코딩은 이제 문법이 아니라 “대화”입니다.
우리는 Ai와 함께 ‘코드 세계와의 대화’를 배우는 중이에요.
2. 프롬프트 4요소 공식
Ai에게 “무엇을 만들어달라”라고 할 때는
아래 4가지만 지켜보세요
너는 [분야/경력] 전문가야.
나는 [무엇을] 만들고 싶어.
반드시 [조건/디자인]을 지켜줘.
최종 코드는 [브라우저에서 바로 실행] 되게 해 줘.
3. 실습 - Hello Ai, Vibe World!
프롬프트 예시
너는 웹 개발 전문가야.
브라우저에서 실행하면
"Hello Ai, Vibe World!" 문구가 화면 중앙에 크게 보이는
가장 간단한 HTML을 작성해 줘.
Ai가 이런 코드를 줄 거예요.
4. 실행하는 방법
1. VS Code 설치 후 실행
→https://code.visualstudio.com
2. 새 파일 생성 → 이름 : hello.html
3. Ai가 준 코드를 붙여 넣고 Ctrl + S (저장)
4. 저장한 파일을 더블클릭 → 브라우저가 열리면
→ 화면 중앙에 "Hello Ai, Vibe World!"가 뜹니다!
Tip : VS Code 메뉴가 영어라면
Ctrl + Shift + P → "Configure Display Language" → "한국어" 선택
으로 언어를 변경할 수 있습니다.
5. 응용 아이디어
이제 프롬프트만 바꿔보세요
“글자 색을 파란색으로 바꿔줘.”
“폰트를 좀 더 세련되게.”
“버튼을 눌렀을 때 문구가 바뀌게.”
“배경색을 부드러운 그러데이션으로 바꿔줘.”
저 또한 '비전공자'였고, 코딩을 한 줄도 몰랐습니다. 오직 Ai를 통해서
'바이브코딩'을 독학했고 누구에게도 배우지 않았으며,
이제는 그것을 공유할 수 있다면, 모두와 지식을 나누고 싶다는 생각을 했습니다.
그렇기에 이 글은 비전공자들을 위한 바이브코딩 입문서입니다.
Ai의 등장과 바이브 코딩이 가능하게 된 이유는 제가 느꼈을 때,
'코딩'이라 함은 어쩌면 그들의 언어와 문법들로 '코드 세계'에서 대화를 나누는 것입니다.
"이렇게 해줘" , "이렇게 보여줘" , "이런 색상으로" , "이런 애니메이션을" 등등.
Ai에 등장으로 우리는 직접 문법을 외우거나 언어를 공부하지 않지만,
Ai라는 번역기를 통해 '코드 세계'와 대화를 나누는 것입니다.
그렇기 때문에 우리가 원하는 걸 '자연어'로 설명하면 Ai는 그것을 '코드 언어'로 번역해 줍니다.
즉, 우리는 언어를 배우는 과정을 Ai와 함께 조금씩 익히는 중이라고 생각하면 훨씬 편해지며,
이 과정을 더욱 어떻게 이해하고 해석하느냐에 따라 프로그램의 질이 달라지는 것이라 생각합니다.
이 부분은 그저 간략하게 "Ai 번역기를 통해 코딩 세상에서 내 아이디어를 코드언어로 대화를 나눈다"라고
생각하시면 될 것 같습니다.
프롬프트 작성에 어려움이 있다면,
혹은 가끔 내가 만드는 결과물에서 더욱 좋은 결과물을 만들고 싶으시다면,
Ai에 채팅방을 두 개 만든 다음 하나의 채팅방에서 Ai와 이렇게 대화를 나눠보세요.
"나는 지금부터 OO 하는 것에 활용할 수 있는 프로그램을 만들고 싶은 데,
혹시 코드를 주지는 말고, 나랑 같이 설계를 하는 데 도움을 줄 수 있어?"라고 하며,
Ai와 대화를 나눠보세요. 이후 → Ai와 대화를 통해
"내가 생각했던 것만큼의 퀄리티가 나오는 설계가 나왔다면"
그때 "그럼 해당 프로젝트를 만들 수 있게, 프롬프트로 정리해 줘" 혹은
"해당 프로그램을 만들게 첫 프로젝트 생성 명령어부터 시작해 줘"라고 시도해 보세요.
Ai에게 모든 걸 의존하려 하지 말고, 대화를 하며 Ai를 활용하려고 하세요.
이렇게 점점 응용하다 보면, "작은 아이디어"를 Ai가 금방 코드로 바꿔주는 걸 확인할 수 있습니다.
해당 글의 반응에 따라 이후
"Ai 바이브 코딩 심화과정에 대한 브런치 북"
연재 여부를 고려하도록 하겠습니다.
{바이브 코딩을 통한 간단한 포트폴리오}
그 외에도 30여 가지 프로그램 및 사이트가 있으며,
지금도 필요한 기능이 있는 것이 있다면 언제든 구현이 가능합니다.
이제는 Ai 및 바이브 코딩이 실생활에 도움이 되고 있으며 "기술"로 배워두면
도움이 많이 되기에, 많은 분들과 공유하고자 이렇게 집필을 하게 되었습니다.
전문가 분들의 수준에는 전혀 미치지 못하겠지만
"비전공자" 분들의 눈높이에 맞춰 같은 시점에서 바라보고 배운 과정이라 생각했으며,
그렇게 작성하게 되었습니다.
