[커서AI] 메모 앱(App) 만들기

 

요새 커서AI 써보면서 바이브 코딩 접하고 있는데 정말 놀랍습니다. (커서AI 설치 및 개발환경 구성은 여기로)

간단한 홈페이지 만들기나 간단한 게임 만들기는 딱히 코딩이라 부를 것도 없습니다.

html파일 하나 생성해서 간단한 기업 소개 웹사이트를 원 페이지로 구성해 줄래? 흔한 디자인이어도 상관없어.

 

에이전트 창에 요청 한 줄 날리면, 바로 _

요청 한 줄에 반응한 AI(좌) 결과물로 나온 홈페이지(우)

 

간단한 홈페이지는 뚝딱이고, 만약에 봐 둔 레퍼런스 디자인이 있다면, AI에게 보여주고 참조해서 만들어달라고 하면 됩니다.

HTML, CSS, JaveScript를 써서 인터넷 페이지 상에 간단한 기능(페이지, 앱, 게임 등)을 구현하거나

ReACT를 써서 SNS서비스처럼 보이는 화면을 만든다거나, 메모 앱을 만들 수도 있습니다.

---

CRA(Create React App)로 메모 앱을 만들어 줘. 새 메모(메모지를 새로 만들고, 해당 메모지를 수정하는 상태로 표시) 수정(다른 메모지를 수정모드로 전환), 저장(수정모드를 종료하면서 수정내용 저장), 삭제(메모지 삭제), 검색(메모 검색) 기능은 기본으로 있어야 해.

 

이런 식으로 내가 원하는 바를 AI에게 설명만 해 주면,

 

 

이렇게....자기가 해야하는 일을 Todolist까지 만들어서 한 단계씩 진행해가면서 기능을 구현하고 컴포넌트까지 만듭니다.

다 만든 뒤에는 자기가 구현한 기능과 UI/UX 설명, 구동 원리와 구성 요소 설명까지 해 줍니다...

 

이게 AI가 코딩을 하는 도중에 보고 있으면 정말 놀랍습니다.

비개발자이자 코알못(코드는 알지도 못하는 사람)이 보기에는 옆에 정말 개발자 한 명 두고 얘기하면서 만드는 느낌이 들었어요. 

심지어 실제 사람이라면 이렇게 빨리 결과물을 제게 주지는 못 했겠지요.

 

이렇게 뚝딱 만들어진 메모 앱은 아래와 같습니다.

 

 

'+ 새 메모' 버튼을 누르면 새 메모의 제목과 내용을 입력하는 창이 뜨고, 입력한 메모는 포스트잇을 벽에 붙여 놓은 것처럼 정렬됩니다. 각 메모에 마우스를 갖다대면 자연스러운 애니매이션과 함께

 

메모 편집과 삭제 버튼도 생겨납니다. 이렇게 세세하게 지시하지 않아도, AI가 알아서 일단 만들어주는거죠. 물론 이런 부분 중 맘에 안 드는 부분은 AI에게 수정 지시를 내리면 됩니다.

 

메모 검색도 너무 편한데요. 검색어 입력 후 엔터키를 누르지 않아도 한 자 한 자 타이핑 할 때마다 실시간으로 매칭되는 메모를 보여줍니다.

 

이 외에도 창 크기를 바꾸는 거에 따라 자동으로 디자인을 맞춰준다든지

세세한 부분들은 일단 AI가 알아서 정하고 만들어 줍니다... 

 

나는 정말 프로그래밍 하나도 모르겠고, ChatGPT가 코딩도 잘 한대서 시켜봤지만 걔가 주는 코드 조각을 난 어디서 실행하는지도 모르겠다. 하시는 (저와 같은) 분들께는 정말 문화충격이었습니다.

 

너무 재밌어서 이것저것 시켜보던 그 때..

 

이런.. 무료 사용량을 다 썼다네요.  저는 너무 재밌어서 조만간 결제를 해 볼 것 같습니다.

추석 연휴 지난 뒤에 결제하고, 서버, 데이터베이스, 크롤링 등 전에 샀던 책 따라서 알아 볼 생각입니다.