[코딩자율학습] 커서(Cursor) x AI로 완성하는 나만의 웹서비스 – 2주차 학습 후기

[코딩자율학습] 커서(Cursor) x AI로 완성하는 나만의 웹서비스 – 2주차 학습 후기

지난주에 이어[코딩자율학습] 커서(Cursor) x AI 2주차 학습을 마쳤습니다. 1주차에 커서의 기본 사용법과 맛보기를 진행했다면, 2주차는 본격적으로 실전 프로젝트에 돌입하며 ‘AI 기반 개발’의 진수를 맛볼 수 있는 시간이었습니다.

1. 감성 분석 서비스 완성 (Gemini API 연동)

2주차의 시작은 지난 시간에 이어 ‘감성 분석 화면’을 마무리하는 것이었습니다.

• UI 구성: Shadcn/ui를 활용해 깔끔한 입력창과 결과창을 뚝딱 만들었습니다.

• Gemini API 연동: 이번 학습의 핵심 중 하나였는데요. Google의 Gemini API를 연결해 사용자가 입력한 텍스트의 감정을 AI가 분석하도록 구현했습니다.

• 학습 포인트: 단순히 코드를 복사하는 게 아니라, 커서(Cursor)를 통해 API 연동 로직을 어떻게 요청하고, 에러가 났을 때 어떻게 수정하는지(Composer 기능 활용)를 깊이 있게 배울 수 있었습니다.

2. Part 2 시작: AI 할 일 관리(Todo) 웹 서비스 만들기

드디어 책의 메인 프로젝트인 ‘AI 기반 할 일 관리 웹 서비스’ 제작에 들어갔습니다. 6장부터 8장까지 진행되었는데, 단순한 코딩 그 이상의 ‘기획과 설계’ 과정을 경험했습니다.

6장. 환경 설정 및 규칙(Rules) 정의

본격적인 개발 전, Next.js 프로젝트를 생성하고 AI SDK를 설치했습니다. 특히 인상 깊었던 점은 ‘프로젝트 규칙(Cursor Rules)’ 설정이었습니다.

• AI가 내 코딩 스타일이나 프로젝트 구조를 이해하도록 미리 규칙을 정의하니, 이후 코드 생성 퀄리티가 훨씬 높아지는 것을 체감했습니다.

7장. PRD(제품 요구사항 문서) 작성

개발자에게 가장 어려운 것 중 하나가 기획이죠? 이번에는 AI와 함께 PRD를 작성했습니다.

• 프로젝트의 핵심 기능과 시나리오를 AI에게 제안받고, 이를 문서화해서 커서가 참조하게 만들었습니다.

• 커서 연동 팁: 작성한 PRD를 .md 파일로 저장하고 커서에서 @로 참조하니, AI가 전체 맥락을 파악하고 코드를 짜줘서 훨씬 정확했습니다.

8장. 디자인 시스템과 화면 구성

본격적으로 눈에 보이는 화면을 만드는 단계였습니다.

• 브랜드 컬러 정의: 브랜드만의 개성 있는 컬러를 설정하고 디자인 시스템을 구축했습니다.

• 로그인/회원가입 화면: 복잡한 폼 구성을 AI와 대화하며 순식간에 완성했습니다. Shadcn/ui와의 궁합이 정말 환상적이더군요!

2주차 학습을 마치며

1주차에는 “와, 신기하다!” 정도였다면, 2주차는 “이게 진짜 실무형 개발이구나”라는 감탄의 연속이었습니다.

• 기획의 자동화: PRD를 AI와 함께 짜고 그걸 바탕으로 개발을 진행하니, 중간에 방향을 잃지 않아서 좋았습니다.

• 생산성의 비약적 향상: 예전 같으면 한참 걸렸을 로그인 페이지 UI와 API 연동 로직이 커서와 함께라면 불과 몇 분 만에 뼈대가 잡힙니다.

• 학습의 즐거움: 복잡한 환경 설정이나 반복적인 코드 작성을 AI에게 맡기고, 저는 ‘구조’와 ‘기능’에 더 집중할 수 있어 학습 효율이 극대화되었습니다.