《Do it! 커서로 시작하는 AI 코딩 입문》 5일 완독 챌린지 4일 차 후기!
🔥한 줄 평: 커서 덕분에 앱 개발의 전체 과정을 경험했습니다...
4일 차에는 무엇을 공부했는가?
어느덧 《Do it! 커서로 시작하는 AI 코딩 입문》 5일 완독 챌린지 4일 차가 되었네요. 여기까지 따라온 제가 신기하기도 하면서도 한편으로는 잘 할 줄 알았습니다. Do it! 시리즈의 최고 장점이 친절한 설명이란 걸 알고 있었거든요. 책만 따라 하면 어떻게든 결과물은 나올 거라 생각했습니다. 4일 차에는 커피 주문 앱 만들기 실습을 진행하였습니다. PRD 작성부터 UI 개발, 데이터베이스 저장 및 사용 방법, API로 프런트엔드와 백엔드 연결하기 그리고 배포까지! 정말로 개발의 전 과정을 경험했습니다. 어떤 과정으로 앱을 만들게 되었는지 해당 글에서 조금 더 자세히 소개해 보려고 합니다.
📖4일 차 커리큘럼
- 앱 구상하고 PRD 작성하기
- 앱 화면 만들기
- 데이터베이스 연결 및 프런트엔드와 백엔드 연동하기
- Render로 앱 배포하기
PRD 작성하기
PRD란?
가장 먼저, PRD를 작성하였습니다. PRD(Product Requirments Document)란 내가 만들고자 하는 앱이 무엇이고 누가 사용할지, 어떤 기능이 필요한지를 정리해 두는 일종의 기획서입니다. 처음 접했더라면 생소했을 텐데, 3일 차에서 이미 웹 개발 과정을 배웠던 터라 무리 없이 이해할 수 있었습니다.
이후 과정에서 PRD를 계속해서 수정 보완할 예정이라 우선 앱의 개요만 작성하였습니다.
앱 화면 만들기 - 프런트엔드
와이어프레임 그리기
다음으로 앱의 얼굴(?)인 화면을 만들었습니다. 완성된 화면을 상상하며 와이어프레임을 그려보면 좋습니다. 커서에게 와이어프레임 그림을 보여주고, 이렇게 만들어 달라고 하면 원하는 대로 잘 만들어주더라고요.
프런트엔드 PRD 작성
와이어프레임 이미지를 함께 넣고 아래 이미지와 같이 프롬프트를 입력했는데, 커서가 이전 단계에서 작성한 PRD 파일에 이어서가 아닌 새로운 PRD 파일을 만들어 줬습니다. 이전에 작성한 PRD 파일명을 알려주고, 이어서 작성해 달라고 하니 원하는 대로 작성할 수 있었습니다.
프런트엔드 개발 환경 만들기
본격적인 개발에 앞서 개발 환경을 만들었습니다. 리액트와 비트를 사용하는 개발 환경을 만들고 싶은데, 저는 Node.js를 설치한 적이 없었기 때문에 우선 Node.js부터 설치를 했습니다.
그리고 커서에게 프롬프트를 입력해서 이렇게 ui 폴더를 만들 수 있었네요.
화면 개발
프롬프트, 와이어프레임 이미지를 활용하여 커서와 아래와 같은 페이지를 만들었습니다. 그럴 듯합니다. 수정하고 싶은 부분이 있다면 커서에게 요청하면 됩니다. 최대한 구체적으로 프롬프트를 입력했을 때 커서도 결과물을 잘 만들어 주는 것 같습니다. 클릭도 잘 되고, 반응형으로 동작도 잘 되었습니다.
주문 처리하기 - 데이터베이스와 API
PRD 작성 및 개발 환경 만들기
역시나 가장 먼저 PRD 작성을 커서에게 요청하고 개발 환경을 만들었습니다.
데이터베이스 연결
그리고 나서 PostgreSQL 데이터베이스를 설치하고 데이터베이스 테이블을 연결했습니다. 이때 .env 파일이 필요한데요~ .env 파일은 환경변수 파일이라고 하는데, 여기에는 데이터베이스 이름뿐만 아니라 데이터베이스에 접속할 때 사용하는 비밀번호까지 중요한 정보가 담겨 있습니다. 커서는 .env 파일에 직접 접근할 수 없으므로 .env.example 또는 configure.env라는 파일 이름으로 만들어 놓습니다! .env로 바꿔 달라고 요청합니다.(코드에서도 .env로 고쳐 달라고 요청하기!)
데이터베이스까지 성공적으로 연결했습니다.
프런트엔드와 백엔드 연동
PRD.md 문서를 참고해서 API를 만들고 프런트엔드와 연동해 달라고 커서에게 요청했습니다. 여러번의 수정 끝에 원하는 모양새의 웹 앱이 만들어졌습니다.
깃허브 업로드까지 완!
앱 배포하기
render라는 서비스를 사용하여 앞에서 만든 커피 주문 앱을 배포했습니다. 배포 순서를 커서에게 묻고, 그 답변 내용을 바탕으로 배포를 진행하였습니다. 자꾸만 오류가 나서 살짝 어려웠습니다. 오류가 생겼을 때는 어떤 순서로 진행하다가 오류가 발생했는지 이해하기 쉽도록 배포 화면에 있는 메시지를 다 복사해서 커서에게 알려주는 것이 좋습니다.
아래 이미지는 커서가 알려준 배포 순서입니다.
책 속 이미지를 차근히 따라 한 덕분에 배포에 성공할 수 있었습니다. 배포 성공 시 뜨는 문구가 괜히 반가웠습니다.
your service is live🎉 (백엔드 배포 성공)
your site is live🎉 (프런트엔드 배포 성공)
이렇게 하나의 앱을 기획하고 배포하는 것까지 모든 과정을 커서와 함께 경험해 보았습니다. 커서가 코드 작성은 물론이고, PRD 작성 그리고 배포 방법까지 알려준 덕분에 할 수 있었던 일이 아닌가 싶습니다. 물론, 앞으로 더 퀄리티 있게 커서를 사용하려면 개발 기본기에 대한 공부를 계속해야 하겠지만! 이번 기회에 커서를 한번 써 봤다는 점이 굉장히 기뻤습니다. 코딩에 대한 관심도도 증가했고요. ㅎㅎ
5일 차에는 무엇을 하는가?
이제 마지막 진도만을 남겨두고 있습니다. 5일 차에는 《Do it! 커서로 시작하는 AI 코딩 입문》의 부록인 'MCP 서버 활용하기'와 '커서에서 노션 MCP 활용하기'를 읽고 공부하게 됩니다. 요즘 MCP가 무척 인기던데... 어서 MCP에 대해서도 조금 더 자세히 알아보고 싶네요. MCP서버를 직접 만들 수는 없겠지만, 다른 개발자가 만든 MCP 서버를 가져다 사용해서 AI를 폭넓게 활용해 보고 싶습니다.
