효율적인 개발 워크플로우
Cursor AI를 활용하면 더 빠르고 효율적으로 개발할 수 있습니다. 이 페이지에서는 실전에서 바로 쓸 수 있는 개발 워크플로우를 소개합니다.
프로젝트 시작 전 체크리스트
섹션 제목: “프로젝트 시작 전 체크리스트”새 프로젝트를 시작할 때 AI에게 이렇게 요청하세요:
Cursor에게 요청:
웹사이트 프로젝트를 시작하려고 해.다음을 도와줘:
1. 기본 폴더 구조 만들기2. index.html 기본 템플릿3. CSS 리셋 파일4. 기본 JavaScript 파일5. .gitignore 파일
모든 파일에 주석으로 역할을 설명해줘.이렇게 하면 깔끔한 시작점을 만들 수 있습니다.
효율적인 작업 순서
섹션 제목: “효율적인 작업 순서”1. 큰 그림 먼저 잡기
섹션 제목: “1. 큰 그림 먼저 잡기”세부 코드를 작성하기 전에 전체 구조를 먼저 만드세요.
Cursor에게 요청:
제품 소개 페이지를 만들 거야.
먼저 HTML 구조만 만들어줘. 실제 내용은 나중에 채울 거야.
섹션:- 헤더 (네비게이션)- Hero 섹션- 제품 특징 (3개)- 가격표- FAQ- 푸터
각 섹션에 주석으로 "여기에 무엇을 넣을지" 설명해줘.2. 섹션별로 완성하기
섹션 제목: “2. 섹션별로 완성하기”한 섹션씩 완성하면서 진행하세요.
Cursor에게 요청:
Hero 섹션을 완성하고 싶어.
포함할 내용:- 큰 제목: "혁신적인 솔루션"- 부제목: 2줄 설명- CTA 버튼 2개: "시작하기", "더 알아보기"- 배경 이미지 (그라디언트 오버레이)
CSS까지 완성해줘.3. 반응형은 나중에
섹션 제목: “3. 반응형은 나중에”먼저 데스크톱 버전을 완성한 후 반응형을 추가하세요.
Cursor에게 요청:
지금까지 만든 페이지를 반응형으로 만들어줘.
브레이크포인트:- 태블릿: 768px- 모바일: 480px
각 디바이스에서:- 폰트 크기 조정- 레이아웃 변경- 불필요한 요소 숨기기Cursor 작업 환경 최적화
섹션 제목: “Cursor 작업 환경 최적화”필수 설정
섹션 제목: “필수 설정”1. 자동 저장 켜기
File > Auto Save 활성화
2. 포맷팅 자동화
Cursor에게 요청:
이 프로젝트에 Prettier 설정 파일 만들어줘.
규칙:- 들여쓰기: 2칸- 세미콜론: 사용- 따옴표: 작은따옴표- 한 줄 최대 길이: 100자3. 단축키 활용
자주 쓰는 작업:
Ctrl + L: AI 채팅Ctrl + K: AI 인라인 편집Ctrl + Shift + P: 명령 팔레트Alt + ↑/↓: 줄 이동Ctrl + D: 같은 단어 선택
작업 공간 분할
섹션 제목: “작업 공간 분할”여러 파일을 동시에 보면서 작업하기:
1. HTML 파일 열기2. 탭을 우클릭 > "Split Right"3. CSS 파일 열기4. 양쪽 화면 보면서 작업AI 활용 패턴
섹션 제목: “AI 활용 패턴”패턴 1: 점진적 개선
섹션 제목: “패턴 1: 점진적 개선”한 번에 완벽하게 만들려고 하지 말고, 단계적으로 개선하세요.
1단계:"간단한 네비게이션 바 만들어줘"
2단계:"네비게이션에 드롭다운 메뉴 추가해줘"
3단계:"모바일에서 햄버거 메뉴로 바꿔줘"
4단계:"스크롤 시 네비게이션 배경색이 바뀌게 해줘"패턴 2: 예시 제공
섹션 제목: “패턴 2: 예시 제공”원하는 것을 말로 설명하기 어려우면 예시를 보여주세요.
Cursor에게 요청:
https://example.com 이 사이트의 헤더처럼 만들어줘.
특징:- 투명 배경 (스크롤 시 불투명)- 중앙 정렬 로고- 양쪽에 메뉴- 부드러운 애니메이션패턴 3: 문제 상황 공유
섹션 제목: “패턴 3: 문제 상황 공유”에러가 발생하면 에러 메시지를 그대로 복사해서 물어보세요.
Cursor에게 요청:
다음 에러가 발생했어:[에러 메시지 붙여넣기]
무엇이 문제인지 설명하고 수정해줘.반복 작업 자동화
섹션 제목: “반복 작업 자동화”컴포넌트 재사용
섹션 제목: “컴포넌트 재사용”비슷한 구조가 반복되면 함수로 만드세요.
Cursor에게 요청:
제품 카드를 여러 개 만들어야 해.
카드 구조:- 이미지- 제목- 설명- 가격- "구매하기" 버튼
JavaScript 함수로 만들어서,데이터만 바꿔서 여러 카드를 생성할 수 있게 해줘.
예시 데이터 3개도 만들어줘.템플릿 활용
섹션 제목: “템플릿 활용”자주 쓰는 패턴을 저장해두세요.
Cursor에게 요청:
다음 스니펫을 만들어줘:
1. 반응형 그리드 레이아웃2. 센터 정렬된 카드3. 이미지 + 텍스트 섹션4. 연락처 폼
각각 HTML + CSS 완성본으로.나중에 복사해서 쓸 수 있게.코드 정리 루틴
섹션 제목: “코드 정리 루틴”작업 중간중간 코드를 정리하세요.
매일 작업 종료 전
섹션 제목: “매일 작업 종료 전”Cursor에게 요청:
오늘 작성한 코드를 점검해줘:
1. 사용하지 않는 CSS 제거2. 중복된 코드 통합3. 변수명 개선4. 주석 추가 (필요한 곳만)5. 코드 포맷팅
변경 사항을 요약해줘.기능 완성 후
섹션 제목: “기능 완성 후”Cursor에게 요청:
방금 만든 기능을 리뷰해줘:
체크 사항:- 코드 품질- 성능- 접근성 (a11y)- 크로스 브라우저 호환성- 보안 (XSS, injection 등)
문제가 있으면 수정 방법도 알려줘.협업 워크플로우
섹션 제목: “협업 워크플로우”코드 인수인계
섹션 제목: “코드 인수인계”다른 사람에게 코드를 넘길 때:
Cursor에게 요청:
이 프로젝트에 대한 README.md를 만들어줘.
포함할 내용:1. 프로젝트 설명2. 폴더 구조 설명3. 로컬에서 실행하는 방법4. 주요 파일 역할5. 자주 수정하는 부분 (색상, 텍스트 등)6. 배포 방법
초보자도 이해할 수 있게 쉽게 써줘.변경 사항 문서화
섹션 제목: “변경 사항 문서화”Cursor에게 요청:
오늘 작업 내용을 CHANGELOG.md에 추가해줘.
변경 사항:- 네비게이션 드롭다운 메뉴 추가- 모바일 반응형 개선- 제품 카드 레이아웃 수정- 버그 수정: 이미지가 안 보이던 문제
날짜와 함께 정리해줘.생산성 팁
섹션 제목: “생산성 팁”1. 컨텍스트 제공
섹션 제목: “1. 컨텍스트 제공”AI에게 충분한 정보를 주세요.
❌ 나쁜 요청:"버튼 만들어줘"
✅ 좋은 요청:"회사 소개 페이지의 Hero 섹션에 들어갈 CTA 버튼 만들어줘.텍스트: '무료 체험 시작'스타일: 파란색 배경, 흰색 텍스트, 둥근 모서리호버 시: 약간 어두워지고 위로 살짝 올라감현재 CSS 파일: styles/main.css"2. 한 번에 하나씩
섹션 제목: “2. 한 번에 하나씩”여러 요청을 한꺼번에 하지 말고 순서대로 하세요.
1. "헤더 만들어줘" → 결과 확인
2. "헤더에 로고 추가해줘" → 결과 확인
3. "헤더를 sticky로 만들어줘" → 결과 확인3. 버전 저장
섹션 제목: “3. 버전 저장”중요한 변경 전에는 파일을 복사해두세요.
Cursor에게 요청:
큰 리팩토링을 하기 전에:
1. 현재 main.js를 main.backup.js로 복사2. 현재 style.css를 style.backup.css로 복사3. 백업 파일에 날짜 주석 추가
그 다음 리팩토링 시작해줘.실전 워크플로우 예시
섹션 제목: “실전 워크플로우 예시”실제 프로젝트를 어떻게 진행하는지 단계별로 보여드립니다.
회사 소개 페이지 만들기 (전체 과정)
섹션 제목: “회사 소개 페이지 만들기 (전체 과정)”1단계: 프로젝트 세팅 (5분)
Cursor에게 요청:
회사 소개 페이지 프로젝트를 시작할 거야.
폴더 구조:company-website/├── index.html├── css/│ └── style.css├── js/│ └── main.js├── images/└── data/
기본 파일들을 만들고,index.html에 기본 템플릿 작성해줘.2단계: HTML 구조 (10분)
Cursor에게 요청:
index.html에 다음 섹션 구조를 만들어줘:
- Header (네비게이션)- Hero (메인 배너)- About (회사 소개)- Services (서비스 3개)- Team (팀원 4명)- Contact (연락처 폼)- Footer
각 섹션은 비어있어도 돼. 구조만 잡아줘.3단계: 스타일링 (20분)
1. "전체 페이지 기본 스타일 적용해줘"2. "Hero 섹션 스타일링해줘 (배경 이미지, 큰 제목)"3. "Services 섹션 카드 레이아웃으로 만들어줘"4. "Contact 폼 디자인해줘"4단계: 인터랙션 추가 (15분)
1. "네비게이션 스크롤 이벤트 추가해줘"2. "Services 카드에 호버 효과 추가해줘"3. "Contact 폼 검증 추가해줘"5단계: 반응형 (10분)
Cursor에게 요청:
전체 페이지를 반응형으로 만들어줘.모바일에서 네비게이션은 햄버거 메뉴로.6단계: 최종 점검 (10분)
Cursor에게 요청:
전체 코드를 점검하고:1. 불필요한 코드 제거2. 주석 추가3. 성능 최적화4. 접근성 체크
개선 사항 목록 보여줘.총 소요 시간: 약 70분
자주 쓰는 명령어 모음
섹션 제목: “자주 쓰는 명령어 모음”복사해서 바로 쓸 수 있는 명령어들:
프로젝트 시작
섹션 제목: “프로젝트 시작”기본 웹사이트 폴더 구조와 파일들을 만들어줘.index.html, CSS, JavaScript 기본 템플릿 포함.레이아웃
섹션 제목: “레이아웃”3단 그리드 레이아웃 만들어줘.각 칸은 카드 형태, 반응형으로.컴포넌트
섹션 제목: “컴포넌트”재사용 가능한 [컴포넌트명] 컴포넌트 만들어줘.HTML, CSS, JavaScript 모두 포함.[요소]의 [속성]을 [값]으로 바꿔줘.디버깅
섹션 제목: “디버깅”이 코드가 작동하지 않아:[코드 붙여넣기]
무엇이 문제인지 찾아서 수정해줘.최적화
섹션 제목: “최적화”이 [파일/코드]를 최적화해줘:- 성능 개선- 코드 정리- 베스트 프랙티스 적용문서화
섹션 제목: “문서화”이 프로젝트의 README.md를 만들어줘.초보자도 이해할 수 있게.시간 절약 꿀팁
섹션 제목: “시간 절약 꿀팁”1. 멀티 파일 수정
섹션 제목: “1. 멀티 파일 수정”Cursor에게 요청:
파란색을 초록색으로 바꾸고 싶어.
다음 파일들을 모두 수정해줘:- index.html- style.css- about.html
색상 코드:#007bff → #28a7452. 배치 작업
섹션 제목: “2. 배치 작업”Cursor에게 요청:
images 폴더의 모든 이미지에 대해:
1. alt 텍스트가 없으면 추가2. loading="lazy" 속성 추가3. width, height 속성 추가
모든 HTML 파일을 확인하고 수정해줘.3. 스타일 가이드 적용
섹션 제목: “3. 스타일 가이드 적용”Cursor에게 요청:
이 프로젝트의 모든 버튼을 통일하고 싶어.
버튼 스타일:- 기본: 파란색 배경, 흰색 텍스트- 호버: 어두운 파란색- 크기: 패딩 12px 24px- 모서리: 5px 둥글게
모든 HTML 파일의 버튼을 찾아서 이 스타일로 통일해줘.CSS는 button.css 파일로 분리해줘.다음 단계
섹션 제목: “다음 단계”효율적인 워크플로우를 배웠습니다. 이제 코드를 더 나은 품질로 개선하는 방법을 알아봅시다.