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

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

이번 주부터 4주간 진행되는 ‘커서(Cursor) x AI로 완성하는 나만의 웹서비스’ 자율학습 스터디에 참여하게 되었습니다. 1주차인 이번 주는 교재의 1장부터 5장(5.2절)까지 학습하며, AI 개발 환경의 기초를 다지고 프로젝트의 뼈대를 만드는 과정을 진행했습니다.

1. AI와 함께하는 개발의 시작, 커서(Cursor)란?

이번 학습의 핵심은 차세대 AI 코드 에디터인 ‘커서(Cursor)’를 이해하는 것이었습니다. 단순히 코드를 치는 도구를 넘어, AI가 프로젝트 전체의 맥락을 파악하고 코드를 제안하며 오류를 수정해 주는 경험은 매우 신선했습니다.

특히 웹서비스의 작동 구조를 다시 한번 정리할 수 있었는데요.

• 프론트엔드(Front-end): 사용자가 가장 먼저 마주하는 브라우저 화면.

• 백엔드(Back-end): AI 서비스, DB 등과 상호작용하며 데이터를 가공해 프론트엔드로 전달.

이러한 유기적인 흐름을 이해한 상태에서 AI를 활용하니, 어떤 부분을 자동화하고 어떤 명령을 내려야 할지 더 명확해지는 기분이었습니다.

2. 탄탄한 개발 환경 구축하기

나만의 웹서비스를 만들기 위해 가장 공을 들인 부분은 역시 환경 설정입니다. 실습을 위해 다음의 도구들을 차례로 설치하고 설정했습니다.

1. Node.js & npm: 자바스크립트 실행 환경과 패키지 관리를 위한 필수 관문.

2. Git: 버전 관리를 위해 npm을 통해 설치.

3. Cursor 설치: 메인 에디터로 사용할 커서를 설치하고 기본 인터페이스와 단축키 익히기.

3. 프로젝트의 뼈대 구성

단순한 페이지가 아닌 실제 서비스 가능한 수준의 결과물을 만들기 위해 현대적인 기술 스택을 도입했습니다.

• Next.js: 강력한 React 프레임워크.

• Tailwind CSS: 빠르고 직관적인 스타일링.

• Shadcn/ui: 완성도 높은 UI 컴포넌트 라이브러리.

• Supabase: 쉽고 빠른 데이터베이스 및 백엔드 서비스.

• AI SDK: AI 모델 연동을 위한 도구.

4. 실습 기록: AI 감성 분석(Sentiment Analyzer) 웹서비스 프로젝트 시작

터미널에서 직접 명령어를 입력하며 프로젝트의 초기 설정을 완료했습니다. Next.js 앱을 생성하고 필요한 UI 컴포넌트와 AI 관련 라이브러리를 설치하는 과정입니다.

[주요 설치 명령어]

# Next.js 프로젝트 생성
npx create-next-app@latest .

# UI 라이브러리(shadcn) 초기화 및 컴포넌트 추가
npx shadcn@latest init
npx shadcn@latest add button textarea card

# AI SDK 및 관련 라이브러리 설치
npm install ai @ai-sdk/react @ai-sdk/google zod

# Next.js 프로젝트 생성
npx create-next-app@latest .

# UI 라이브러리(shadcn) 초기화 및 컴포넌트 추가
npx shadcn@latest init
npx shadcn@latest add button textarea card

# AI SDK 및 관련 라이브러리 설치
npm install ai @ai-sdk/react @ai-sdk/google zod

설치 후 package.json 파일을 통해 Next.js 16.1.3, React 19.2.3, AI SDK 등이 정상적으로 설치된 것을 확인했습니다. 최신 버전의 라이브러리들을 보니 앞으로 구현할 기능들이 더욱 기대됩니다!

• * 의존성 확인

"dependencies": {
    "@ai-sdk/google": "^3.0.10",
    "@ai-sdk/react": "^3.0.41",
    "@radix-ui/react-slot": "^1.2.4",
    "ai": "^6.0.39",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "lucide-react": "^0.562.0",
    "next": "16.1.3",
    "react": "19.2.3",
    "react-dom": "19.2.3",
    "tailwind-merge": "^3.4.0",
    "zod": "^4.3.5"
  },

"dependencies": {
    "@ai-sdk/google": "^3.0.10",
    "@ai-sdk/react": "^3.0.41",
    "@radix-ui/react-slot": "^1.2.4",
    "ai": "^6.0.39",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "lucide-react": "^0.562.0",
    "next": "16.1.3",
    "react": "19.2.3",
    "react-dom": "19.2.3",
    "tailwind-merge": "^3.4.0",
    "zod": "^4.3.5"
  },

1주차 학습을 마치며

첫 주라 환경 설정과 개념 파악에 집중했는데, 커서(Cursor)라는 강력한 도구와 Next.js의 조합에 대해서 기대가 되며, AI와 함께라면 비전공자도, 초보 개발자도 나만의 웹서비스를 완성할 수 있다는 확신이 드는 한 주였습니다.