바이브 코딩. 모든것이 바뀌고있다.

말로만 듣던 바이브코딩(Vibe Coding). Vibe는 "느낌"이라는 뜻인데, "느낌 코딩"이란 번역은 무슨뜻인지 한번에 와 닫지가 않는다. "입 코딩"이나 "대화형 코딩"이 더 적절하다. 기존에는 앱 개발을 하기위해서 많은 부분을 직접 지시해야 했다. 코딩관련해서도 많은 부분을 알아야 했으며 앱개발자 입장에서는 디자인이 특히 어려웠다.

 

그런데 AI로 코딩을 하면서는 모든게 바뀌었다.

• 기획하는 부분은 챗지피티를 통해서 정리하고(아마 이것도 해주는 AI 서비스들 있을거다).
• 앱 디자인 하는 AI로 어떤 앱을 만들지 미리 그려보고.(uxpilot.ai 등 여러서비스들 있다)
• 코딩은 Cursor로 한다.

 

내가 직접 기획을 하고, 디자인을 그리고 코딩을 하는게 아니라, 어떤게 필요한지를 말하면 AI들이 만들어준다.

프롬프트를 잘쓰면 더 잘해주겠지만, 아래처럼 간단한 프롬프트도 이해를 한다.

 

디자인은 uxpilot.ai 에 회원가입해서 무료버전으로도 100포인트를 주는데 이걸로 아래처럼 다시 챗지피티에 디자인 프롬프트를 받아서 uxpilot.ai에 넘겨주었다.

 

 

아래같은 디자인 화면은 나같은 사람은 절대로 못만든다. 디자이너들한테 외주줘야하는 수준이다. 

다시 챗지피티에 저 이미지를 주면서 플러터 코드를 달라고 하니 기본적인 코드를 준다.

 

저건 단순히 알파벳을 화면에 뿌리는 수준이지만 겨우 두어시간만에 안드로이드 폰에 아래 화면을 띄웠다. AI없었으면 며칠이 걸렸을려나? 

 

 

이제는 Cursor를 열고 본격적인 코딩이 들어간다. 물론 내가 일일히 짜지 않는다. AI에게 시킨다.

 

AI준 코드를 일일히 살펴봐야하지만, 일단은 결과물이 제대로 나오는지 위주로 본다.

 

보내준 코Cursor에서 하다가 잘안되면 챗지피티를 열어서 물어보기도 한다.

 

main.dart하나에 코드가 다들어가 있는 상태라, 코드를 분리할려고 했다.

 

 나는 단순히 main이외에 다른 파일 한개를 생각했었는데, Cursor는 아래처럼 data, models, screens, utils등으로 구조를 잡아서 각각의 파일로 만들어준다.  커서를 쓰면 프로젝트구조를 이해하고 있기 때문에 이런게 특히 편하다.

 

이제 알파벳이 아니라, 단어를 배치하고 단어를 드래그해서 맞추면 하단에 단어와 뜻이 나오고, 맞춘 단어는 회색으로 표시하게 되었다.

 

 

 

 

기본적인 애니메이션이 적용된 화면이다.

 

여기까지 오는데 대략 4시간정도 걸렸다.

 

비용은 커서 1달 20불, 챗지피티는 무료버전, uxpilot.ai도 무료버전만 사용했다.

 

물론 더 해야할 부분도 많고, 전문적인 게임 개발자와 디자이너가 작업한것에 비하면 많이 부족하지만, 이정도가 어디인가. 그냥 감탄만 나온다.

 

---

PS. 요즘 AI가 대단하다고 생각하는게, 내가 지시하지는 않았지만, 이런것도 당연히 필요하겠지 해서 추가해준다. 

시간을 30초로 하고 이 화면이 열리거나 셔플로 다시 단어가 배치되면 자동으로 시간을 카운트 다운을 해.

그리고 시간이 만료되면 이쁜 팝업으로 총 몇개 단어중 몇개를 맞추었다고 팝을을 띄워줘. 팝업을 닫으면 다시 시간을 30초부터 카운트 다운을 해줘.

 

위처럼 프롬프트를 주니까, 아래처럼 하겠다고 한다. 10초이하이면 타이머 색상바뀐다는건 나도 생각하지 못했는데, 당연히 저런 기능은 들어가야겠지.

 

 

30초 타이머와 게임 결과 팝업 기능이 추가되었습니다. 주요 변경 내용을 설명드리겠습니다:

1. 타이머 기능:

• 게임 시작이나 셔플 시 자동으로 30초 타이머 시작

• 시간이 10초 이하로 남으면 타이머 색상이 빨간색으로 변경되고 굵게 표시됨

• 시간이 끝나면 결과 팝업이 자동으로 표시됨

1. 점수 시스템:

• 찾은 단어 수를 표시하는 카운터 추가

• 발견한 단어와 뜻을 목록으로 저장

1. 게임 종료 팝업:

• 깔끔하고 이쁜 디자인의 결과 다이얼로그

• 그라데이션 배경과 둥근 모서리

• 찾은 단어 수와 총 단어 수 표시

• 찾은 단어 목록 스크롤 가능한 리스트로 표시

• '다시 시작' 버튼으로 게임 재시작 가능

1. 게임 리셋 기능:

• 보드 재생성

• 타이머 리셋

• 점수 초기화

• 찾은 단어 목록 초기화

 

색상은 좀 마음에 안들지만, 내가 한거보다는 훨씬 좋다. 나중에 다른 깔끔한앱의 스크린샷을 올려주고, 해당 색상으로 바꾸어달라고 해야겠다.