바이브코딩을 하지 않으면 뒤쳐질 것 처럼 말이 많다. 꽤 동의한다. 할줄 아는 사람과 하지 못하는 사람의 기술 격차는 굉장히 많이 날 것이기 때문에…
다른 방향에서 특출난 재능을 보이지 못하고 일반적이고 행정적인 분야에서 직업을 선택하게 된다면 반드시 필요한 능력이 바이브코딩, ai 활용능력일 것이다.
바이브코딩을 다양하게 하고 있는데 어떻게 시작하면 좋을지 살짝 정리해본다.
공부부터 하지 마라
무엇을 만들고 싶은지부터 정하는 게 가장 중요하다 코딩을 처음 접하면 무작정 책부터 사거나 강의를 결제하곤 한다. 하지만 단순히 공부를 위한 공부는 금방 지치고 무의미하다. 대신 아주 사소한 거라도 좋으니 내가 직접 써먹을 수 있는 기능을 먼저 떠올려보는 것이 좋다.
예를 들어 내가 자주 먹는 라면 시간을 재주는 타이머나 내가 좋아하는 사이트들을 버튼 하나로 한 번에 열어주는 기능을 만드는 식이다. 이렇게 구체적인 목표가 생기면 코딩은 지루한 공부라기 보다 나의 불편함을 해결해주는 즐거운 도구가 된다.
무엇을 만들고 싶은지 정하는 것이 바이브코딩의 시작이자 사실상 전부라고 할 수 있다.
시작은 무조건 우리에게 익숙한 인터넷 브라우저로
한국 사람들은 인터넷 브라우저와 윈도우 PC 환경에 매우 익숙하다. 그래서 시작은 이 두가지 환경에서 하는 게 좋다.
하지만, 윈도우에서 바로 실행되는 복잡한 프로그램보다는 우리가 매일 쓰는 크롬이나 엣지 같은 브라우저에서 볼 수 있는 것을 만드는 걸 추천한다.
프로그램이라는 것은 기본적으로 코드를 작성하고 그 코드를 해석해서 화면에 보여주는 과정을 거친다. 브라우저는 이미 우리 컴퓨터에 설치되어 있고 우리가 짠 코드를 즉각적으로 보여주기 때문에 코딩이라는 세계에 훨씬 더 쉽게 접근할 수 있게 해준다.
HTML, JavaScript, CSS AI를 개인 과외 선생님처럼 활용하기
웹을 구성하는 기본 언어인 HTML, 자바스크립트, CSS 이 세 가지를 처음부터 다 외울 필요는 없다. 이제는 AI를 이용하면 된다. 내가 만들고 싶은 기능이 무엇인지 AI에게 설명하고 코드를 짜달라고 하면 된다.
AI가 내놓은 결과물을 보면서 이 코드가 어떤 역할을 하는지 하나씩 뜯어보는 방식으로 공부하는 것이 이론부터 배우는 것보다 훨씬 빠르고 효율적이다.
메모장 하나로 시작하는 코딩의 진짜 모습
코딩이라고 해서 꼭 대단한 장비나 전문 프로그램이 필요한 건 아니다. 우리에게 익숙한 메모장에 AI가 알려준 코드를 그대로 복사해서 붙여 넣고 저장할 때 확장자를 html 등으로 적절히 선택해주기만 하면 된다.
그 파일을 더블 클릭하는 순간 내가 만든 기능이 브라우저에서 실제로 돌아가는 것을 보게 될 것이다. AI로 html 등을 공부하다보면 자연스럽게 더 많은 코드를 작성하고 파일을 분할하는 과정을 알게 된다.
더 편한 작업을 위해 VS Code 설치하기
메모장으로 감을 잡았다면 이제 조금 더 편한 환경인 코드 편집기를 사용하면 좋다. 편집기는 다양하게 있지만 가장 익숙하게 많이 사용하는 것이 VS Code다.
이것을 다운받아 설치하면 글자 적기가 편해지는 것은 물론이고 다양한 확장 프로그램을 활용할 수 있다. 특히 AI 코딩 기능을 VS Code 프로그램 안에서도 직접 쓸 수 있게 되어 내가 상상하는 프로그램을 훨씬 더 빠르고 똑똑하게 완성할 수 있다.
ai와 대화하는 것도 vscode 확장 프로그램 안에서 해결하고 파일을 직접적으로 만들 수 있어서 더 효율적인 부분도 있다.
여기까지 바이브코딩을 쉽게 시작할 수 있는 방법을 이야기해봤다. 일단 내가 자주 보던 웹사이트의 디자인을 캡쳐해서 html 페이지로 디자인해달라는 요구부터 해보자. 생각보다 너무 쉽게 화면 디자인을 얻을 수 있을 것이다.
