코딩의 첫걸음: 도구와 프로젝트 구성
Cursor와 친해지기
Cursor란?
Cursor는 이 프로젝트의 핵심 도구로, 코딩을 처음 접하는 분들도 자연어로 쉽게 코드를 생성하고 수정할 수 있도록 설계된 강력한 AI 기반 코드 편집기입니다. Visual Studio Code를 기반으로 제작된 Cursor는 코드 작성, 디버깅, 파일 관리 등을 지원하며, 특히 자연어 프롬프트를 통해 AI와 대화하듯 코드를 생성할 수 있는 점이 특징입니다. 이 프로젝트에서는 Cursor를 사용해 복잡한 코딩 지식 없이도 스티커 메모 앱을 단계적으로 만들어 나갈 것입니다. AI가 코드 작성과 오류 수정을 도와주기 때문에, 초보자도 전문가 수준의 결과물을 얻을 수 있습니다.
왜 Cursor인가요?
초보자 친화적: 코딩 문법을 몰라도 자연어로 요청하면 AI가 코드를 생성해줍니다. 예를 들어, “버튼을 만들어줘”라고 요청하면 즉시 버튼 코드가 완성됩니다.
효율성: 코드 작성, 수정, 디버깅을 빠르게 처리해 개발 시간을 단축합니다.
창의성: 여러분의 아이디어를 코드로 구현할 수 있도록 돕습니다. “메모를 스티커처럼 꾸며줘” 같은 창의적인 요청도 가능합니다.
학습 지원: AI가 코드의 동작 원리를 설명하거나 개선 방법을 제안해, 코딩을 배우는 데 큰 도움이 됩니다.
Cursor 주요 기능
| 기능 | 설명 |
| 코드 생성 | 자연어 요청으로 코드를 생성합니다. 예: “버튼 만들기” 요청시 버튼 코드 생성 |
| 오류 수정 | 오류 메시지를 분석하고 수정 코드를 제안합니다. 예: “undefined 오류 고쳐줘” |
| 자동 완성 | 코드 작성중 자동으로 다음 코드를 제안합니다. 예: 태그 자동 완성 |
| 프롬프트 대화 | AI와 대화하며 요청을 처리합니다. 예: “코드 간소화해줘” 요청 기능 |
Cursor는 세 가지 핵심 영역으로 구성됩니다.
프로젝트 폴더 관리: 인터페이스 왼쪽에 위치하며, 프로젝트의 파일과 폴더를 탐색하고 관리할 수 있는 공간입니다. 여기서 파일을 열거나 새 파일을 생성할 수 있습니다.
코드 편집기: 가운데에 위치한 주요 작업 공간으로, 코드를 작성하고 수정하는 데 사용됩니다. 구문 강조와 자동 완성 기능이 포함되어 있어 코딩이 더 수월해집니다.
AI 채팅 창: 오른쪽 패널에 위치하며, AI와 실시간으로 대화할 수 있는 공간입니다. 이 창은 세 가지 탭으로 나뉩니다.
- Ask: 간단한 질문이나 요청을 입력해 빠르게 답변을 받을 수 있는 탭으로, “이 코드가 왜 안 돼?” 같은 질문을 처리합니다.
- Agent: 복잡한 작업이나 다중 파일 수정을 처리하는 탭으로, “모든 파일에서 버튼 색상을 파란색으로 바꿔줘” 같은 요청에 유용합니다.
- Manual: AI와의 대화를 수동으로 관리하며, 코드 개선 요청이나 특정 작업을 세밀하게 조정할 때 활용됩니다.
이 도구들을 활용하면 코딩이 처음인 분들도 쉽게 앱을 만들 수 있습니다. 이 글을 통해 AI와 소통하는 법을 익히고 나면, 코딩에 대한 자신감이 생길 거예요.
Cursor의 유료 vs 무료 플랜
Cursor는 무료와 유료 플랜을 제공합니다. 처음 시작할 때는 무료 플랜으로 충분히 사용하실 수 있습니다. 하지만 프로젝트를 진행하다 보면 Cursor의 요청 수 제한 때문에 더 많은 기능을 사용할 수 없습니다. 걱정하지 마세요! Cursor는 처음 설치 시 무료 플랜으로 시작하더라도 Pro 플랜의 2주 무료 체험(Two-Week Trial)을 제공합니다. 2주 동안 Pro 플랜의 모든 기능을 제한 없이 사용해 볼 수 있습니다.
2주 체험 기간 동안 Cursor의 강력한 기능을 마음껏 활용해보세요. 만약 2주 후에도 계속 사용하고 싶다면, 유료 플랜으로 전환할 수 있습니다. Cursor의 유료 플랜은 월 구독제로 제공되며, 부담 없이 시작할 수 있도록 합리적인 가격으로 설계되었습니다. “이 도구를 사용하면 정말 코딩이 쉬워진다!”라는 경험을 하시면, 구독료가 전혀 아깝지 않을 거예요. 저도 처음엔 망설였지만, 한 번 사용해보니 결제해서라도 배우고 싶다는 생각이 들더라고요! 혹시 구독을 원치 않으시면, 구독 기간 내 언제든지 취소할 수 있습니다.
공식 홈페이지의 계정 설정(Account Settings) 에서 "Cancel Subscription" 버튼을 클릭하면 간단히 구독을 취소할 수 있습니다. 더 자세한 정보는 공식 홈페이지에서 확인해보세요
이제 Cursor와의 첫걸음을 떼셨습니다. 다음 섹션으로 넘어가기 전에, 인터페이스를 잠깐 살펴보고 어떤 요청을 해보고 싶으신지 생각해보세요.
개발 도구 준비하기
앱을 만들기 위해 먼저 개발 환경을 준비해야 합니다. 초보자라면 설치 과정이 낯설 수 있지만, 천천히 따라오시면 어렵지 않게 설정할 수 있습니다. Windows와 macOS의 차이점도 함께 안내드릴게요.
Cursor 설치
Windows에 Cursor 설치하기
01단계 https://cursor.com으로 이동하세요. 홈페이지 상단 오른쪽에 "DOWNLOAD" 버튼이 보일 것입니다. 클릭하면 Windows용 설치 파일을 다운로드할 수 있습니다.
다운로드가 완료되면 파일이 보통 "Downloads" 폴더에 저장됩니다. 다운로드한 파일명은 운영 체제와 버전에 따라 다를 수 있습니다. (예: CursorUserSetup-x64-0.48.9.exe)
02단계 다운로드한 설치 파일을 더블클릭해 실행합니다. 설치 마법사가 나타나면 "다음"을 클릭해 진행하세요.
설치 과정에서 특별한 옵션 선택은 필요하지 않습니다. 기본 설정을 유지하며 "다음"을 클릭하면 설치가 완료됩니다. 설치 후 "종료"를 눌러 Cursor를 실행하면 AI와 대화할 준비가 됩니다.
macOS에 Cursor 설치하기
01단계 https://cursor.com에 접속하세요. 홈페이지에서 "DOWNLOAD" 버튼을 찾아 클릭하면 macOS용 설치 파일을 다운로드할 수 있습니다.
다운로드가 완료되면 파일은 일반적으로 "Downloads" 폴더에 저장됩니다. 다운로드한 파일명은 운영 체제와 버전에 따라 다를 수 있습니다. (예: Cursor-darwin-universal.dmg)
02단계 다운로드한 설치 파일을 더블클릭하면 다음 화면이 나옵니다. 나타나는 창에서 Cursor 아이콘을 Applications 폴더로 드래그하세요.
드래그 후 Applications 폴더에서 Cursor를 실행합니다. 최초 실행 시 macOS 보안 설정에서 “열기”을 클릭해야 할 수 있습니다. 이 과정을 완료하면 Cursor가 실행되며, AI와 대화할 준비가 됩니다.
Node.js 설치
Windows에 Node.js 설치하기
1단계 https://nodejs.org에 접속하세요. 홈페이지에서 LTS(Long Term Support) 최신 버전을 선택해 다운로드합니다. “Node.js 다운로드 (LTS)” 버튼이 눈에 띌 것입니다.
파일은 보통 "Downloads" 폴더에 저장됩니다. 다운로드한 파일명은 운영 체제와 버전에 따라 다를 수 있습니다. (예: node-v22.14.0-arm64.msi)
2단계 다운로드한 설치 파일을 더블클릭해 실행합니다. 설치 마법사가 나타나면 “Next”를 클릭해 진행하세요.
설치 과정에서 “Add to PATH” 옵션을 반드시 체크하세요. 이 옵션은 Node.js와 npm을 터미널에서 바로 사용할 수 있게 해줍니다. 이후 기본 설정을 유지하며 “Install”을 클릭해 설치를 완료합니다. 설치 후 터미널에서 node -v를 입력해 버전이 표시되는지 확인하세요.
macOS에서 Node.js 설치하기
1단계 https://nodejs.org로 이동하세요. 홈페이지에서 LTS 버전을 선택해 다운로드합니다. “Node.js 다운로드 (LTS)” 버튼이 눈에 띌 것입니다.
파일은 일반적으로 "Downloads" 폴더에 저장됩니다. 다운로드한 파일명은 운영 체제와 버전에 따라 다를 수 있습니다. (예: node-v22.14.0.pkg)
2단계 다운로드한 설치 파일을 더블클릭해 실행합니다. 설치 마법사가 나타나면 “계속”를 클릭해 진행하세요.
설치 과정에서 특별한 옵션 선택은 필요하지 않습니다. 기본 설정을 유지하며 “계속”을 클릭하면 설치가 완료됩니다. 설치 후 터미널에서 node -v와 npm -v를 입력해 Node.js와 npm이 제대로 설치되었는지 확인하세요.
프로젝트 생성 및 초기 설정
한걸음 더 : 이런 도구를 몰라도 괜찮아요!
혹시 Next.js, Tailwind CSS, Shadcn UI 같은 도구들이 낯설게 느껴지시나요? 걱정하지 마세요! 이 프로젝트는 이런 기술을 몰라도 단계별로 따라 하기만 하면 자연스럽게 배울 수 있도록 설계되었습니다. “내가 이런 것까지 알아야 하나?”라는 부담은 내려놓으세요. 지금은 이 도구들을 배우는 데 집중하지 않아도 됩니다. 이 프로젝트를 진행하면서 필요한 만큼 익히고, 나중에 더 깊이 알고 싶을 때 차근차근 배워가면 됩니다. 지금은 따라 하면서 코딩의 재미를 느껴보는 것이 목표예요!
단계 1: 프로젝트 생성
터미널을 열고 다음 명령어를 입력해 프로젝트를 생성합니다.
npx create-next-app@latest sticker-memo-app
명령어를 실행하면 몇 가지 옵션을 선택할 수 있는 프롬프트가 나타납니다. 이 옵션들은 프로젝트의 초기 설정을 결정하는 데 중요한 역할을 합니다. 아래는 선택 가능한 주요 옵션과 이 프로젝트에서 사용할 설정입니다.
Would you like to use TypeScript? (TypeScript를 사용할 건가요?)
옵션: Yes / No
선택: Yes (TypeScript를 사용하면 타입 안정성을 통해 코드의 안정성을 높일 수 있습니다.)
Would you like to use ESLint? (ESLint를 사용할 건가요?)
옵션: Yes / No
선택: Yes (코드 품질을 유지하고 잠재적인 오류를 줄이는 데 유용합니다. 권장 설정입니다.)
Would you like to use Tailwind CSS? (Tailwind CSS를 사용할 건가요?)
옵션: Yes / No
선택: Yes (이 프로젝트에서는 Tailwind CSS를 활용해 스타일링을 쉽게 할 예정입니다.)
Would you like to use src/ directory? (src/ 디렉토리를 사용할 건가요?)
옵션: Yes / No
선택: Yes (코드 구조를 더 깔끔하게 관리할 수 있습니다.)
Would you like to use App Router? (App Router를 사용할 건가요?)
옵션: Yes / No
선택: Yes (Next.js의 최신 라우팅 방식으로, 이 프로젝트에서 활용합니다.)
Would you like to use Turbopack for `next dev`? (next dev에 Turbopack을 사용할 건가요?)
옵션: Yes / No
선택: No (Turbopack은 Rust 기반의 고성능 번들러로, 빠른 개발 서버 시작과 코드 업데이트를
제공합니다. 이 프로젝트에서는 사용하지 않습니다.)
Would you like to customize the import alias? (기본 import alias를 커스터마이징할 건가요?)
옵션: Yes / No
선택: No (기본 설정인 @/*를 사용합니다.)
위 설정을 선택하면 sticker-memo-app 폴더가 생성되며, 기본 프로젝트 구조가 만들어집니다. TypeScript 기반으로 설정되었기 때문에
파일 확장자가 .ts 또는 .tsx로 생성됩니다. (예: app/page.tsx).
프로젝트 생성이 완료되면, 다음 명령어를 입력해 프로젝트 디렉토리로 이동하고 개발 서버를 실행합니다.
cd sticker-memo-app
npm run dev
브라우저에서 http://localhost:3000을 열어 기본 Next.js 화면이 표시되는지 확인하세요.
단계 2: Shadcn UI 설치
프로젝트가 생성되었으니, 이제 Shadcn UI를 설치해 UI 컴포넌트를 쉽게 활용할 수 있도록 설정합니다. Shadcn UI는 Tailwind CSS 기반으로 예쁘고 모던 컴포넌트를 제공하며, 이 프로젝트에서 메모 카드와 버튼 등을 스타일링하는 데 사용할 예정입니다. New York 스타일을 적용해 모던적이고 세련된 디자인을 구현해보겠습니다. 다음 명령어를 터미널에서 입력하세요.
npx shadcn-ui@latest init
명령어를 실행하면 초기 설정을 위한 몇 가지 옵션을 선택할 수 있는 프롬프트가 나타납니다. 아래는 주요 옵션과 이 프로젝트에서 사용할 설정입니다.
Which color would you like to use as base color? (기본 색상으로 어떤 색상을 사용할 건가요?)
옵션: Neutral / Gray / Zinc / Stone / Slate
선택: Slate (Shadcn UI의 색상 팔레트로, 깔끔한 회색 톤을 제공합니다. 이 프로젝트에 적합한 중립적인
색상입니다.)
How would you like to proceed? (색상에 CSS 변수를 사용할 건가요?)
옵션: Use –force / Use –legacy-peer-deps
선택: Use –force (--force 옵션은 종속성 충돌을 무시하고 설치를 강제로 진행합니다.
--legacy-peer-deps는 이전 npm 버전의 종속성 해결 방식을 사용하며, 더 보수적인 접근 방식으로
충돌을 최소화하려는 경우 유용합니다.)
설정이 완료되면 components/ui 폴더가 생성됩니다. 테마와 스타일링은 app/globals.css 파일에서 관리됩니다. Shadcn UI 설치 후 app/globals.css 파일에 자동으로 스타일이 추가되며, New York 스타일에 맞는 기본 테마가 적용됩니다. app/globals.css 파일을 열어 @layer 지시어와 관련된 스타일을 확인해보세요. 이 파일에서 테마 색상이나 스타일을 커스터마이징할 수 있습니다.
이제 개발 환경이 준비되었습니다.
Cursor 설치: 실행 후 "Welcome" 화면에서 기본 설정을 유지하세요.
Node.js 설치: npm이 포함되어 패키지 관리에 필수적입니다.
Next.js 프로젝트: sticker-memo-app 폴더에 앱의 기본 구조가 생성됩니다.
Shadcn UI: 예쁜 UI 컴포넌트를 쉽게 추가할 수 있습니다.
환경 설정은 코딩의 첫걸음입니다. http://localhost:3000에서 기본 화면이 보인다면, 이미 중요한 단계를 완료한 겁니다. 다음 섹션으로 넘어가기 전에 설정이 잘 됐는지 확인해보세요.
한걸음 더 : 더 알아보고 싶다면 - 공식 홈페이지
이 프로젝트에서 사용하는 주요 도구들의 공식 홈페이지를 통해 더 많은 정보를 얻을 수 있습니다.
Next.js: https://nextjs.org - React 기반의 풀스택 프레임워크로, 서버 사이드 렌더링과 정적 사이트 생성을 쉽게 할 수 있습니다.
Tailwind CSS: https://tailwindcss.com - 유틸리티 기반의 CSS 프레임워크로, 빠르고 직관적인 스타일링이 가능합니다.
Shadcn UI: https://ui.shadcn.com - Tailwind CSS 기반의 아름답고 접근성 높은 UI 컴포넌트 라이브러리입니다.
프롬프트 작성의 기술 익히기
프롬프트는 Cursor와 소통하는 핵심 도구로, 여러분의 생각과 아이디어를 코드로 바꾸는 마법의 열쇠입니다. 명확하고 구체적인 프롬프트는 원하는 코드를 빠르게 얻는 데 큰 역할을 하며, 코딩 과정을 훨씬 더 효율적이고 직관적으로 만들어줍니다. 단순히 "코드를 만들어줘"라는 요청에서부터 "특정 기능을 구현해줘" 또는 "오류를 해결해줘"까지, 프롬프트는 AI와의 대화를 통해 여러분의 의도를 정확히 전달하는 다리 역할을 합니다. 프롬프트 작성 기술을 익히면 코딩이 훨씬 더 재미있고 생산적인 여정이 될 거예요!
프롬프트 작성 팁
구체적으로: “버튼을 만들어줘”보다 “Shadcn UI로 파란색 '추가' 버튼을 추가해줘”가 더 명확합니다.
단계별로: 복잡한 요청은 작은 단계로 나누세요.
창의적으로: “메모를 추가할 때 색상이 랜덤으로 바뀌게 해줘”처럼 독창적인 아이디어를 요청해보세요.
피드백 제공: “이 코드는 너무 복잡해, 더 간단하게 바꿔줘”처럼 수정 요청을 명확히 하세요.
보강된 프롬프트 예시
기본: “메모 앱을 만들어줘.”
보강: “메모를 입력하고, 노란색 스티커처럼 보이게 표시하는 앱을 만들어줘. 입력창과 버튼은 Shadcn UI로 스타일링하고, 메모는 카드 형태로 보여줬으면 좋겠어.”
창의적: “메모를 추가할 때마다 무작위 색상이 적용되고, 추가 애니메이션이 들어가게 해줘.”
문제 해결: “이 코드는 오류가 나는데, 원인을 찾아서 고쳐줘: [오류 메시지].”
프롬프트 품질 비교
| 프롬프트 유형 | 예시 | 특징 |
| 나쁜 프롬프트 | “메모 앱을 만들어줘” | 모호하고 구체적이지 않음 |
| 좋은 프롬프트 | “메모 입력 앱 만들기” | 도구와 목적을 명확히 지정 |
| 창의적 프롬프트 | “메모마다 랜덤 색상 적용” | 창의적이고 구체적인 요청 |
채팅 창: 복잡한 요청이나 다중 파일 수정에 유용합니다.
프롬프트 연습: 간단한 요청부터 시작해 점차 창의적인 요청으로 확장하세요.
AI 피드백: AI의 응답이 기대와 다르다면 수정 요청을 구체적으로 전달하세요.
프롬프트 작성은 AI와의 대화에서 여러분의 의도를 명확히 전달하는 과정입니다. 위 팁을 적용해 몇 가지 요청을 시도해보세요. 예를 들어, “간단한 버튼을 만들어줘”라고 요청한 뒤 “색상을 파란색으로 바꿔줘”라고 수정 요청하면 AI가 어떻게 반응하는지 확인할 수 있습니다. 이 연습을 통해 AI와의 협업이 점점 자연스러워질 것입니다.
한걸음 더 : 프롬프트 작성의 심화 팁과 주의점
명확성 높이기: “버튼”은 모호합니다. “Shadcn UI로 파란색 버튼을 만들어줘”처럼 도구와 세부 사항을 명시하면 더 정확한 코드를 얻을 수 있습니다. 버튼 위치를 추가하려면 “입력창 오른쪽에 배치해줘”처럼 요청해보세요.
언어 선택: Cursor는 영어 프롬프트에 더 잘 반응할 때가 있습니다. 예를 들어, “Create a blue button using Shadcn UI”는 명확한 결과를 가져올 가능성이 높습니다. 한국어로는 간단한 문장이 효과적이며, 영어와 한국어를 섞어도 좋습니다.
피드백 루프: AI 응답이 기대와 다르면 수정 요청을 해보세요. “이 코드는 너무 길어, 더 간단하게 만들어줘” 또는 “버튼을 더 크게 해줘”처럼 구체적으로 말하면 원하는 방향으로 조정됩니다.
실제 사례: “버튼을 추가해줘”라고 요청해 HTML <button>이 생성되었다면, “Shadcn UI로 바꿔줘”라고 요청해 컴포넌트로 수정할 수 있습니다. 버튼 위치가 마음에 안 들면 “입력창 아래에 배치해줘”라고 추가 요청해보세요.
이제 프롬프트 작성의 기초를 익히셨습니다. 다음 챕터로 넘어가기 전에, 간단한 프롬프트를 작성해보고 AI의 응답을 확인해보세요. 어떤 요청을 시도해보고 싶으신가요?