[바이브 코딩] 01. 느좋 코딩 - 간단한 포트폴리오 사이트, 사과게임 만들어보기, 커서 활용 방법

느낌이 좋은 코딩, 느좋 코딩. 바이브 코딩

정확한 의미가 있는 것은 아니지만 코드를 직접 한 줄 한 줄 작성하고, 실행하고, 오류를 수정하는 작업을 AI에게 맡기는 것을 의미한다. 즉 AI가 작성하는 프로그램을 제대로 작동되는지 확인하는 작업만 하는 코딩방법.

어떻게 바이브 코딩을 하는가.

AI에게 프로그램을 만들어달라 요청하고, AI가 만든 프로그램을 실행해 보고, 마음에 들면 완성. 마음에 들지 않다면 다시 요청, 오류가 발생한다면 오류를 보내 수정하라 하면 완성인 것이다. 마치 하청을 부리는 느낌

 

커서

AI가 탑재된 IDE. 코드작성부터 터미널 기능까지 제공한다. 인공지능 모델을 탑재하고 있으며 운영체제에 명령도 내릴 수 있다.

 

https://cursor.com/

Cursor: The best way to code with AI

위 사이트에서 가입과 구독을 관리할 수 있다. 학생 계정인증이 안되는거같다. 1주일 무료체험이 가능해서 무료체험을 먼저 해본다. 구독 후 운영체제에 맞는 프로그램 설치.

 

설치 후 로그인하면 언어 설정도 할 수 있는데 한국어를 지원하니 한국어로 선택한다.

드디어 만나게 된 기본화면

간단한 포트폴리오 사이트 만들기

실행에 앞서 우측 상단에서 채팅, 터미널, 탐색기 창을 활성화한다. 편의를 위해 채팅창을 오른쪽으로 옮겼다.

open project를 클릭하여 cursorstudy 폴더를 만들어 열었다. 그리고 사이드바에서 폴더를 우클릭하여 test.html파일을 생성한다.

그리고 채딩창에 `@`를 입력하면 파일을 추가할 수 있게 된다.

이 상태가 되면 채팅창에서 파일의 상태를 파악하고 작업을 할 수 있다. 파일에 대해 물어보니 비어있다고 답해주는 모습

이제 제대로 커서를 사용해 본다. 채팅창에 '간단한 신인 개발자 포트폴리오 페이지 만들어줘'를 보내보았다. 300줄의 코드가 1분도 안되어 완성되었다. 에디터에는 Undo와 Keep이라는 버튼이 생기는데, Undo를 누르면 거절, Keep은 수락이다. Keep을 눌러 수락해 준다.

그리고 파일을 그대로 열어본다면 페이지가 완성되어 있다. 하지만 해당 페이지는 초안에 가깝다. 사진을 등록해 보자.

우선 인터넷에서 마음에 드는 사진을 찾아본다. 구글에서 이미지를 골라 우클릭하면 이미지의 주소를 복사할 수 있다. 주소를 복사하여 채팅창에 입력하면 이미지로 뜬다. 해당 이미지를 프로필 사진으로 적용해 달라 해보았다. 코드가 변경되면 Keep을 누르고 확인해 보면 제대로 반영이 된 것을 확인할 수 있다. 

 

사과게임 만들기

새로 채팅방을 만들고 사과게임을 만들어달라 해 보았다.

훌륭한 게임을 만들어 주었지만 원하는 사과게임은 숫자의 합을 10으로 만드는 얼마 전 유행했던 게임이다. 또한 하나에 파일에 css와 스크립트까지 전부 작성이 되어있었다. 원하는 프로젝트를 만들려면 좀 더 구체적인 요청을 해야 한다.

사과게임을 만들어줘. HTML, CSS, 자바스크립트 기술로만 만들고, 규칙은 아래와 같아. - 게임 화면에는 1에서 9사이의 자연수가 적힌 사과들이 직사각형 배열로 늘어져있어. 플레이어는 드래그하여 범위로 사과를 선택할 수 있고, 이때 사과에 적힌 숫자의 합이 10이 되면 드래그 된 사과의 수만큼 점수를 획득하고 범위 안에 있던 사과들은 사라져. 최대한 많은 점수를 획득하는 것이 목표인 게임이야.

최대한 구체적으로 작성하여 요청을 해 보았더니 아래처럼 비슷한 게임을 만들어주긴 하였지만 원하는 형태로 동작하지는 않았다. 

더 자세하게  요청을 해봐야 한다. 더 자세한 요청을 해보았다. 

마우스로 드래그 한 범위가 보여야해. 범위 안에 속한 사과들이 선택이 되는거고. 합이 10이 돼서 없어져도 기존의 사과들은 원래 위치한 곳에 그대로 있어야돼. 게임은 시작 버튼을 눌러 시작하고, 100초의 제한이 있어. 100초 안에 높은 점수를 획득해야돼.

하지만 실행하지 않아도 보이는 글에 사라진 사과 위치에 새로운 사과를 만든다고 되어있다. 이를 수정하게 다시 프롬포터를 보내었다.

그리고 드디어 완성된 원하는 모습의 사과 게임. 기존에 알고 있던 사과게임과 같은 모습으로 동작되는 게임을 만들 수 있게 됐다.

구체적인 요청의 중요성을 알게 되었다.

 

커서 활용하기

커서는 터미털 활용이 가능하다. 지저분하게 남겨져있는 다운로드 속 파일들을 정리해 보았다. 커서는 터미널 명령어를 작성하고 실행할지 물어본다.

그리고 실행하고 나면 

기똥차다. 알아서 정리하도록 하였지만 좀 더 구체적으로 요청한다면 나의 기준으로 정리도 할 수 있을 것이다. 아주 똑똑하고 신기하다.

 

본 글은 '요즘 바이브 코딩 커서 AI 30가지 프로그램 만들기'를 참고하여 작성하였습니다.

요즘 바이브 코딩 커서 AI 30가지 프로그램 만들기 | 박현규 - 교보문고