[AI 활용] Cursor AI로 코딩 없이 웹사이트 만들기 part.7 - 프롬프트 기반으로 개발 시작하기 (효율적인 프롬프트 작성법)
[AI 활용] Cursor AI로 코딩 없이 웹사이트 만들기 part.7 - 프롬프트 기반으로 개발 시작하기 (효율적인 프롬프트 작성법)
🔗 Part.1 - 커서Cursor로 시작하는 개발과 웹 배포의 흐름
🔗 Part.2 - AI 없이 진행했던 개발 단계와 어려움
🔗 Part.3 - Cursor로 개선된 개발 과정과 기존 개발 방식 비교
🔗 Part.4,5 - Cursor 설치 및 초기 설정 방법(설치부터 규칙 설정까지)
🔗 Part.6 - 기술 스택 선정 및 프로젝트 구조 설계
이제 진짜 개발에 들어갑니다! 프롬프트 한 줄이면, 프로젝트 구조와 컴포넌트, API까지 한 번에 생성할 수 있어요. 효율적인 지시 방법을 알고 싶다면 꼭 읽어보세요.
안녕하세요! AI 기술 알려주는 아조씨, AIJOSSI입니다. 오늘은 Cursor를 활용해 효율적으로 프롬프트를 작성하고, 실제로 코드를 만들어내는 과정을 살펴보겠습니다. 이제 개발자는 직접 타이핑하는 대신, 마치 PM처럼 요구사항을 설명하면 되는 시대가 되었어요. Cursor의 AI가 얼마나 똑똑하게 반응하는지도 확인해보시죠.
목차
0. 프로젝트 시작하기
우선 Cursor를 켜볼까요? 천리 길도 한 걸음부터! 커서를 켜는 것부터 시작해봐야겠죠?. 그 전에, Desktop(바탕화면)에 "test-page"라는 폴더 하나를 만들어두세요!
이제 Cursor를 켠 다음 Open Project 버튼을 누릅니다. 그 다음에 바탕화면에 있는 "test-page"폴더에 들어가서 "Open" 버튼을 누르세요!
화면이 이렇게 뜨면 성공한 것입니다. 이제 실제로 이 안에 페이지들을 구현해볼까요?
1. 프로젝트 초기화 프롬프트
Cursor에서는 폴더 생성부터 package.json 구성, 초기 컴포넌트까지 모두 프롬프트 하나로 해결할 수 있습니다. 아래는 실제로 입력할 수 있는 예시 프롬프트입니다:
React + Vite 기반의 TypeScript 프론트엔드와 Express 기반의 TypeScript 백엔드 구조로 프로젝트를 초기화해주세요.
1. frontend와 backend 디렉토리를 생성하고 각각 package.json과 tsconfig.json 설정.
2. frontend에는 React, ReactDOM, Vite, TailwindCSS 등을 설정하고, 간단한 App.tsx 컴포넌트와 index.html을 생성.
3. backend에는 Express 서버 셋업 (포트 3000, `/api/contact` POST 라우트 등 기본 구현) 파일 생성.
각 파일의 내용을 작성해줘.
이 프롬프트를 Cursor 에디터 내 채팅창(Ctrl+L 또는 Cmd+L)에 입력하면, Composer 기능이 실행되며 다수의 파일을 자동 생성합니다. (똑같이 따라하지 않고 여러분이 만들고 싶은 것을 집어넣으셔도 되지만, 이번엔 테스트하는 겸 그대로 따라와주심을 추천드려요!, 아래쪽의 설정은 "Agent", "Auto"로 맞추셔도 되고 / "Agent", "claude-3.7-sonnet"으로 맞추셔도 됩니다!)
"Accept All" 버튼만 클릭하면 프론트엔드, 백엔드 설정 파일들이 한 번에 생성되며, 손수 설정할 때보다 훨씬 빠르고 실수도 줄어듭니다.
여러분이 하실 일은 Cursor가 뭔가 만들었을 때 열심히 "Accept" 또는 "Run Command" 버튼을 눌러주는 것 뿐이에요!
생성이 완료되고 나면 코드 대신 텍스트로 설명하는 부분이 나온답니다. 그럼 한 번의 생성이 완료된거에요!
어떻게 생성되었는지 보고싶으시죠? 그럼 채팅창에 이렇게 명령해보세요.
npm install을 프론트엔드와 백엔드 모두에 적용해주고, 다 인스톨되었을때 한 번에 실행되게 해줄래? 프리뷰로 보고싶어.
이후엔 똑같이 Cursor가 내 컴퓨터에 해당 패키지들을 설치하게 허용해주고 기다립니다. 여러분이 하실 일은 "Accept"와 "Run Command"를 누르는 것 뿐이에요!
다 설치되면 "npm run dev" 해볼래? 라고 여러분에게 물어볼거에요. "Open terminal"을 꾸욱 눌러주세요.
그러면 위와 같이 텍스트들이 뜰거에요. 거기 적힌 프론트엔드 주소를 복사해서 내 Chrome 브라우저에 입력해보세요!
자, 이제 진짜 프론트엔드 컴포넌트들을 작성해볼까요?
2. 프론트엔드 컴포넌트 작성 예시
프로젝트 뼈대가 생성되었다면 이제 실제 UI 컴포넌트를 만들 차례입니다. 예를 들어 홈페이지 상단에 Hero 섹션을 넣고 싶다면, 다음과 같이 프롬프트를 작성해볼 수 있습니다:
지금 만든 프로젝트에 심플한 Hero 섹션 컴포넌트를 만들어줘.
회사 이름 "My Company"와 한 줄 소개 문구 "우리 회사는 다 잘합니다."를 가운데 정렬한 큰 텍스트로 표시하고,
'Contact Me' 버튼을 Tailwind CSS로 디자인해서 추가해줘.
모바일에서는 반응형으로 자동으로 사이즈가 줄어들게 작업해줘.
이 프롬프트를 채팅창에 입력하면, Cursor는 해당 TSX 컴포넌트를 자동으로 생성해줍니다. Tailwind 클래스를 포함하고, 반응형까지 고려한 구조로 코드를 작성하죠.
또 다시 Cursor에게 모든 것을 맡기고 우리는 승인만 하면 됩니다.
이후 다시 프리뷰로 볼래? 라는 알림이 뜰거에요? (기존에 localhost를 실행 중이라면 "Ctr + c"를 눌러 서버를 종료해주신 후에 npm run dev를 실행해주세요!
필요한 경우 이어서 "배경을 어두운 색 그라데이션으로 해줘" 같은 추가 지시도 가능하며, 기존 코드 중 특정 줄을 선택해 "여기에 애니메이션 효과 추가"라고 명령하면 선택 부분만 변경되기도 합니다.
위의 텍스트처럼 입력하면 다시 작업이 시작되구요.
서버에서 확인해보면 디자인이 밸류있게 변해있는 것을 보실 수 있을 거에요!
이제 백엔드 API를 만져볼까요?!
3. 백엔드 API 구현 프롬프트
프론트엔드 구성 다음은 서버입니다. 이번 예시는 연락처 폼 데이터를 처리하는 API를 만드는 과정입니다. Cursor의 채팅창에 다음과 같이 입력해 보세요:
contact.ts 파일을 생성하고 연락처 폼 데이터를 받아 처리하는 Express 라우터를 작성해줘.
- POST /api/contact 엔드포인트 만들기
- req.body에 name, email, message가 온다고 가정
- Nodemailer로 admin@example.com에게 이메일 보내는 로직 (SMTP 설정은 가정, 실제 전송 없이 콘솔 출력도 OK)
- 성공 시 { success: true }, 실패 시 { success: false, error: '...' } 반환
Cursor는 이 프롬프트에 따라 Express.Router() 모듈, nodemailer 설정, async/await 로직까지 포함한 코드를 자동 생성해줍니다.
만약 nodemailer 패키지가 설치되지 않은 상태라면 Cursor가 // TODO 주석을 추가하거나, 패키지 설치 안내도 해줄 수 있어요. 추가로 “package.json에 nodemailer 추가해줘”라고 요청하거나 수동 설치 후 Cursor에게 인식시켜도 됩니다.
이번에도 똑같이 딸깍 딸깍을 해주신 후에 "Open terminal"을 눌러주세요! 기존에 띄운 서버는 모두 종료해주시고 진행해주세요! 컨트롤 C!
엇? 그런데 오류가 발생했어요!
이럴땐 당황하지 말고, 오류 메시지를 전부 복사해서 Cursor에게 주면 됩니다! 그리고 아래와 같이 입력해주세요!
이러면 Cursor는 해당 오류를 해결하는 방법을 알려주거나, 직접 해결해줘요. 쉽죠?
순서대로 하나씩 실행을 해봅니다. 그리고 다시 서버를 돌려볼까요?
해당 명령어대로 갔을때, 현재 내가 위치한 폴더가(터미널 상에 떠있는 최종 디렉토리 명을 확인) 내가 처음 만든 폴더가 아니라면 내 폴더로 즉시 돌아가서 실행을 하면 좋습니다. 우리가 처음 만든 폴더의 이름은 "test-page"였죠? 지금 본인의 위치가 거기인지 확인하세요!
저의 경우는 최종 디렉토리가 "backend"로 가있어서 "cd .."을 입력하여 원래 폴더로 돌아왔습니다.
1) 내가 지금 있는 폴더가 기본 폴더보다 상위폴더(예를들면 Desktop 폴더)일때는 : "cd test-page"를 입력
2) 내가 지금 있는 폴더가 기본 폴더보다 하위폴더(예를 들면 test-page/backend)일때 : "cd .." 입력.
이렇게 해서 다시 "test-page" 폴더로 돌아갔다면 위의 이미지처럼 "npm run dev"를 해보세요!
다시 잘 돌아가죠?
다시 https://localhost:5173 으로 접속해볼까요?
연락하기가 구현되었고,
클릭해서 폼을 입력하면 콘솔에 내가 문의한 내용이 뜨는 걸 볼 수 있어요. 백엔드의 API 엔드포인트가 제대로 작동한다는 증거죠?
어때요? 직접 만들어보니 참 쉽죠?
제가 예시를 프론트엔드와 백엔드 모두를 활용하는 프로젝트로 잡아서 어려워보일 수 있지만, "기능 하나만 존재하는" 심플한 서비스를 만들어본다고 생각하면 이것보다 더 쉽게 하실 수 있을 거에요!
4. 코드 검토 및 수정
AI가 작성해준 코드는 반드시 개발자가 직접 검토해야 합니다. Cursor는 코드 변경사항을 diff 형태로 보여주며, 사용자는 그 내용을 확인하고 Accept 여부를 결정할 수 있습니다.
수정이 필요한 부분이 있다면 다시 프롬프트를 쓰거나, 직접 코드를 손봐도 전혀 문제 없습니다. Cursor는 일반적인 코드 편집 기능도 완전히 제공하니까요. 추가 지시가 필요한 경우에는 특정 라인을 선택한 뒤 "이 부분에서 조건문 추가해줘" 같은 부분 프롬프트도 가능합니다.
5. 효율적인 프롬프트 작성 팁 요약
- 명확성: 단계별, 번호 형태로 지시하면 AI가 구조적으로 이해함
- 맥락 제공: 관련 파일명, 위치 등을 명시하면 정확도 향상
- 검토 습관: 자동 생성된 코드라도 항상 논리적 오류가 없는지 체크
- 작게 나누기: 한번에 너무 많은 요구보다 기능 단위로 분할 지시
이러한 팁들을 적용하면 Cursor를 훨씬 더 강력하게 사용할 수 있습니다. 단순 코드 작성기가 아닌, AI 개발 파트너로 활용해보세요!
오늘은 Cursor의 진짜 매력을 보여드렸습니다. 이제 프로젝트 뼈대를 완성했으니, 다음 편에서는 직접 로컬에서 테스트하고 실행하는 방법을 다룰 예정이에요. 프론트엔드는 빌드하고, 백엔드는 실행하며 API를 호출하는 과정까지! 기대해주세요 :)
더 많은 정보를 받고 싶다면 : AI조씨 카카오톡 채널에 가입하세요! https://pf.kakao.com/_Mxlgwn