python

💡 Cursor AI 실전 활용기: Flask & CSS 예제 중심 리뷰

codingcampus 2025. 5. 6. 23:15
반응형
SMALL

✅ 뛰어난 자동완성과 맥락 인식 능력

Cursor AI는 코드 자동완성과 챗 기능 모두에서 뛰어난 성능을 보여줍니다. 특히 프로젝트 내의 코드 컨벤션과 클래스 구조를 잘 파악하여 일관된 코드 제안을 제공합니다.

또한 최신 언어 모델을 직접 선택하여 사용할 수 있습니다. GPT-4o, Claude, O1 Mini 등 상황에 따라 적합한 모델을 자유롭게 활용할 수 있는 점도 Cursor만의 장점입니다.

💬 생산성을 높이는 챗봇 기능

Cursor의 대화형 챗 기능은 단순한 문법 질문을 넘어서 프로젝트 맥락에 맞춘 실질적인 답변을 제공합니다. 예를 들어:

  • Ctrl + L을 눌러 선택한 코드 블록을 바로 대화에 삽입할 수 있으며,
  • AI가 제안한 코드를 Apply 버튼으로 에디터에 즉시 반영할 수 있습니다.

또한 Javadoc 자동 생성, 유닛 테스트 작성, 리팩토링 제안 등 실무에서 자주 필요한 작업들을 높은 품질로 수행합니다.

🧱 Composer 기능으로 대규모 코드 생성

🗓️ 2024-12-11 추가

Composer는 Cursor의 핵심 기능 중 하나로, 단일 컴포넌트가 아닌 프로젝트 전체 구조를 고려한 자동 코드 생성 도구입니다. 예를 들어:

  • LargeButton.tsx 파일 자동 생성
  • CSS 스타일 파일 자동 생성
  • 기존 파일(index.tsx 등) 수정 및 import 처리까지 자동 적용

이처럼 Composer는 복잡한 요구사항을 빠르게 반영하고 초기 개발 시간을 크게 단축시켜 줍니다.

⚠️ 단, 복잡한 구조의 경우 맥락을 충분히 반영하지 못하고 기존 흐름과 충돌하는 코드를 생성할 수 있으므로, 최종 코드는 반드시 검토가 필요합니다.

🧭 @ 참조 기능으로 특정 파일/디렉토리 기반 코드 생성하기 (+ CSS 예제 포함)

Cursor AI는 코드 작성 시 특정 파일이나 디렉토리를 @ 기호를 이용해 직접 참조할 수 있습니다. 이 기능은 Composer 또는 챗 기능을 사용할 때 특히 유용하며, 기존 코드베이스를 바탕으로 새 기능을 확장하거나 수정할 때 강력한 컨텍스트 기반 코드 생성을 도와줍니다.

🐍 Flask 예제: @utils.py를 참조한 코드 생성

예를 들어, 프로젝트 내 utils.py에 다음과 같은 유틸 함수가 있다고 가정해 보겠습니다:

def format_count_message(count):
    return f"현재 카운트는 {count}입니다."

이 상황에서 Cursor 챗에 다음과 같이 요청할 수 있습니다:

@utils.py 를 참조해서 /status 라우트를 추가해줘. 현재 카운트를 포맷된 메시지로 반환하는 API로 만들어줘.

그러면 Cursor는 다음과 같은 코드를 자동으로 제안할 수 있습니다:

from flask import Flask, render_template, request, jsonify
from utils import format_count_message

app = Flask(__name__)
count = 0

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/increment', methods=['POST'])
def increment():
    global count
    count += 1
    return jsonify({'count': count})

@app.route('/status')
def status():
    message = format_count_message(count)
    return jsonify({'message': message})

💡 이렇게 @utils.py처럼 파일명을 직접 지정하면, Cursor는 해당 파일의 내용을 컨텍스트로 자동 반영하여 관련 코드 작성에 활용합니다.

이를 통해 팀 내 공통 모듈이나 특정 디렉토리의 기반 코드와 일관된 방식으로 API 또는 기능을 확장할 수 있으며, 기존 코드베이스에 잘 맞는 코드를 빠르게 생성할 수 있다는 점이 큰 장점입니다.

이 기능은 특히 레거시 프로젝트나 대규모 코드베이스에서 매우 유용합니다.

🎨 CSS 디렉토리 참조 예제: @static/style.css로 스타일 조정하기

Cursor는 CSS 파일도 @경로를 통해 참조할 수 있어, 기존 스타일에 기반한 디자인 변경이 가능합니다.

예를 들어, 다음과 같이 요청할 수 있습니다:

@static/style.css 를 참조해서 버튼 색상을 파란색 계열로 바꿔줘. hover 시 연한 파란색으로 바뀌게 해줘.

Cursor는 기존 스타일을 고려하여 다음과 같은 코드 변경을 제안할 수 있습니다:

button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 5px;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #339CFF;
}

🖌️ Cursor는 CSS 문법뿐 아니라 기존 클래스의 구성도 함께 고려하여, 파일 내에서 어색하지 않은 스타일을 제안합니다.

이처럼 CSS 파일도 @static/style.css 식으로 지정하면, 기존 스타일을 기반으로 텍스트 색상, 배경, 마진, 폰트 크기 등 다양한 시각 요소를 수정하는 데 활용할 수 있습니다.

🌙 다크 모드 스타일 요청 예시

Cursor 챗에 다음과 같이 요청할 수 있습니다:

@static/style.css 를 참조해서 다크 모드 테마로 전체 스타일을 바꿔줘. 배경은 어두운 회색, 텍스트는 흰색 계열로.
body {
  font-family: sans-serif;
  text-align: center;
  margin-top: 100px;
  background-color: #1e1e1e;
  color: #ffffff;
}

.container {
  background: #2a2a2a;
  padding: 30px;
  border-radius: 10px;
  display: inline-block;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  background-color: #3c8dbc;
  color: white;
  border: none;
  border-radius: 5px;
}

button:hover {
  background-color: #5ba7d1;
}

🌗 이처럼 다크 모드 전환처럼 UI 전반을 변경하고자 할 때도, Cursor는 기존 스타일 파일을 기반으로 일관된 결과를 제공합니다.

 

 

반응형
LIST