AI 기술을 누구나 쉽게 활용할 수 있도록 실전 가이드를 작성합니다. ChatGPT, Claude, AI 자동화, SEO 분야를 전문으로 다룹니다.
Cursor 3가 4월 2일 출시하면서 Design Mode를 정식 도입했어요. IDE 안에서 React·Vue·Svelte UI를 클릭·드래그로 시각 수정하고 그 변경이 곧바로 JSX·CSS·Tailwind 코드에 반영되는 구조. 5월 1일부터 5월 14일까지 첫 2주 7가지 실전 작업을 돌리면서 Figma 대체 가능 분기점·여전히 Figma가 필요한 영역·한국 1인 개발자 본전 패턴을 정리했어요.
핵심 변화 3가지. (1) 시각 편집·코드 동기화 — 시각 변경이 곧바로 코드에 반영, 디자인-개발 핸드오프 갭 해소. (2) Composer 2 의도 추론 — 시각 편집 결과를 코드 의도로 번역, JSX 트리·Tailwind 클래스·props 자동 정리. (3) IDE 통합 — Figma·v0·bolt.new 같은 별도 도구 안 떠나고 IDE 안에서 디자인·개발 동시 진행. Pro $20에 모든 기능 포함이라 진입 장벽 낮아요.
이번 글은 첫 2주 7가지 실전 작업에서 어디서 Figma 대체 가능하고 어디서 여전히 Figma 필요한지, 한국 1인 개발자가 어떤 시나리오에 본전 큰지 정리. 모든 수치는 5월 14일까지 직접 측정한 본인 데이터 기반이에요.
가장 본전 큰 시나리오. SaaS 랜딩 페이지 헤드라인·CTA·색상·여백을 A/B 테스트용으로 반복 수정하는 작업. 시각 편집으로 1분에 5번 반복 가능. Figma 거쳐서 디자인 → 코드 옮기는 흐름은 10분+ 걸리는 작업.
본인 첫 2주 측정 — 랜딩 페이지 시안 12개 반복 만들었는데 평균 1시안당 8분 소요. Figma 워크플로 거쳤다면 시안 1개당 25~30분. 약 3배 빠른 페이스. Pro $20 quota도 컴포넌트 단순 수정은 거의 안 까먹어서 무과금 본전 큼.
본인 노하우 — (1) 랜딩 페이지 시안 시작 전 shadcn/ui·Tailwind UI 컴포넌트 채택, (2) Design Mode로 시각 반복 수정, (3) 마음에 드는 시안 git branch 분리, (4) 4개 시안 가지 만든 후 Cursor 3 Agents Window에서 4개 동시 빌드·배포, (5) A/B 테스트 결과로 최종 시안 결정.
Design Mode가 반응형 미리보기를 동시에 3개 화면(데스크탑 1440·태블릿 768·모바일 375)으로 띄울 수 있어요. 한 화면에 변경 가하면 다른 2개 화면에도 즉시 반영. Tailwind sm·md·lg 브레이크포인트 클래스 자동 조정.
본인 실측 — 반응형 디자인 점검·조정 작업이 평균 작업당 15분에서 5분으로 단축. 3개 화면 동시 보면서 깨지는 레이아웃 즉시 발견 + Composer 2가 sm·md·lg 클래스 자동 추가. 모바일 우선 사용자(70%+ 트래픽) 입장에서 본전 큰 작업이에요.
본인 노하우 — (1) 데스크탑 1440·태블릿 iPad 768·모바일 iPhone 14 Pro 393 세 화면 띄우고 시작, (2) 모바일 화면부터 디자인 후 데스크탑으로 확장(mobile-first 흐름), (3) Composer 2가 sm·md·lg 클래스 자동 추가하는지 확인, (4) 잘못된 자동 변경은 즉시 Undo + 재요청.
Tailwind config 색상 팔레트·spacing 토큰·폰트 사이즈를 조정하면 그 토큰을 쓰는 모든 컴포넌트가 동시에 변경. Design Mode가 영향 받는 컴포넌트 일괄 미리보기 제공. 디자인 시스템 마이크로 튜닝이 본전 큰 작업이에요.
본인 실측 — primary 색상 hex 코드 1개 변경했을 때 영향 받는 컴포넌트가 17개. Design Mode가 17개 컴포넌트 시각 일괄 비교 가능. 의도하지 않은 색상 변경 즉시 발견 + Composer 2가 색상 갈등 자동 해소. 일반 IDE라면 빌드 후 페이지 일일이 클릭하면서 점검해야 할 작업이에요.
본인 노하우 — (1) 디자인 시스템 토큰 변경 전 git commit + branch 분리, (2) 변경 후 Design Mode 일괄 미리보기 확인, (3) 영향 받는 컴포넌트 17개 화면 일괄 캡처해서 팀·고객 공유, (4) 승인 받은 후 main branch 머지.
가장 분기 명확한 영역. Design Mode는 기존 컴포넌트 반복 수정에는 강하지만 빈 캔버스에서 신규 디자인 from-scratch 작업은 Figma가 여전히 본전. 캔버스·자유 그리기·디자인 영감·디자이너 협업 다 Figma가 우월.
본인 실측 — 신규 모달 컴포넌트 디자인 시도했을 때 Design Mode 단독으로는 30분+ 소요. Figma에서 시작 → 시각 영감 → 대략적 시안 → Cursor 3에서 코드 변환 흐름이 15분. Figma 50% + Design Mode 50% 혼합이 본전 큰 패턴. 신규 디자인은 Figma, 반복 수정은 Design Mode 분기.
본인 노하우 — (1) 신규 컴포넌트 디자인은 Figma에서 와이어프레임 시작, (2) 영감·색상·레이아웃 결정되면 Cursor 3에 Figma 스크린샷 첨부 + Composer 2에 자연어 요청 — "이 디자인을 React+Tailwind+shadcn/ui로 재현해줘", (3) Composer 2가 코드 생성하면 Design Mode로 마이크로 튜닝, (4) 마지막 시각 반복으로 완성.
본인 가장 자주 쓰는 패턴 4가지 중 하나. 사용자가 보낸 버그 스크린샷 보면서 Design Mode 안에서 동일 화면 재현 + 즉시 수정 + 검증. 일반 IDE 흐름(로컬 빌드 → 화면 띄우기 → 화면 따라가기 → 수정 → 재빌드) 단계가 다 사라져요.
본인 실측 — 버그 리포트 1건 평균 처리 시간 30분에서 8분으로 단축. 사용자 스크린샷 → Design Mode에 화면 첨부 → 동일 컴포넌트 시각 비교 → Composer 2가 차이점 분석 → 수정 코드 생성 → 즉시 시각 검증. 1인 SaaS 운영자에게 본전 큰 워크플로예요.
본인 노하우 — (1) 사용자 버그 리포트 받으면 스크린샷·브라우저·OS·해상도 정보 동시 요청, (2) Design Mode에 동일 해상도 미리보기 띄우기, (3) Composer 2에게 스크린샷 첨부 + "이 화면에서 버튼이 이렇게 깨져 보이는데 원인이 뭐고 어떻게 수정해야 해?" 요청, (4) 수정 코드 채택 + 동일 해상도 시각 검증, (5) 사용자에게 수정 화면 캡처 회신.
디자이너 따로 있는 팀은 Figma 단독 폐기 불가. Figma Variables·Auto Layout·Comments·Branching·Dev Mode 같은 협업 기능이 Design Mode 미구현. 디자이너가 Figma에서 작업 → 개발자가 Cursor 3 Design Mode에서 구현·반복 수정 흐름이 본전이에요.
본인 추정 본전 워크플로 — (1) 디자이너 Figma 시안 완성, (2) Figma Dev Mode 활성화 + Tailwind·CSS 토큰 export, (3) 개발자 Cursor 3에 Figma 스크린샷 + Dev Mode 토큰 첨부, (4) Composer 2에 React+Tailwind 재현 요청, (5) Design Mode에서 마이크로 튜닝, (6) 결과 화면을 Figma에 다시 첨부 + 디자이너 피드백, (7) 피드백 받은 후 Design Mode에서 즉시 수정. Figma 50% + Design Mode 50% 혼합이 본전 큰 협업 패턴.
본인 노하우 — (1) Figma·Cursor 3 양쪽 다 사용 가능한 디자이너·개발자 구조 권장, (2) 디자이너 시안 완성 후 핸드오프 시 Figma Dev Mode 토큰 동시 export, (3) 개발자 구현 후 결과 화면 Figma 다시 첨부 + 비교 시각 피드백, (4) 반복 사이클 2~3회 후 완성.
별도 시각 UI 빌더 도구 3가지 비교. (1) v0 (Vercel) — Tailwind UI 기반 컴포넌트 생성, shadcn/ui 통합, GitHub 연동, 월 $20. 강점은 from-scratch 컴포넌트 생성·빠른 프로토타이핑. 약점은 기존 코드 베이스 통합 약함·IDE 전환 필수. (2) bolt.new (StackBlitz) — 풀스택 앱 from-scratch, Astro·Next.js·Svelte 지원, 무료 + 유료 $20. 강점은 처음부터 끝까지 풀 앱 생성. 약점은 기존 앱 수정 약함·코드 품질 낮음. (3) Lovable — 풀스택 SaaS 빠른 생성, GitHub 연동, 월 $20. 강점은 1인 SaaS MVP 1주 안에 완성. 약점은 디자인 마이크로 튜닝 약함.
본인 분기 매핑 — (1) 신규 SaaS MVP from-scratch — Lovable·bolt.new 본전, Design Mode 보완. (2) 컴포넌트 prototype — v0 본전, Design Mode 코드 마이크로 튜닝. (3) 기존 앱 디자인 반복 수정 — Design Mode 단독 본전, v0·bolt.new 미필요. (4) 풀스택 코드 + 디자인 통합 — Design Mode 단독 본전 vs Lovable 분기 분석 필요. 본인 추천 — 1인 SaaS 운영자는 Cursor 3 Pro $20 + v0 무료 plan + Lovable 무료 plan 조합이 본전. 도구별 강점 활용 + 핸드오프 최소화.
가장 큰 본전 영역. 한국 1인 개발자·인디 해커가 디자인·개발 다 하는 경우 Design Mode 단독 충분. Figma 구독 $15/월 + Figma 학습 시간 + Figma-코드 핸드오프 흐름 다 생략 가능. Cursor 3 Pro $20 단독으로 디자인·개발 워크플로 통합.
본인 실측 본전 매핑 — (1) 1인 개발자 디자인 중심 — Design Mode 단독, Pro $20 단독, Figma 구독 해지 가능, 월 $15 절약. (2) 1인 개발자 코드 중심 — Design Mode 보조, Figma 영감 단계만 사용, Figma Free 플랜 충분. (3) 소규모 팀(개발자 2~3 + 디자이너 1) — Figma·Cursor 3 병행 필수, 디자이너 Figma + 개발자 Design Mode 분기. (4) 중규모 팀(디자이너 다수) — Figma 중심, Design Mode 보조, 디자인 시스템·협업 기능 필요.
본인 추천 — 1인 풀스택 개발자는 Cursor 3 Pro $20 + Figma Free 조합이 본전. Figma Pro $15 해지 + Design Mode 단독으로 디자인 워크플로 통합. 월 $15 절약 + 도구 전환 시간 절약 + 핸드오프 갭 해소. 인디 해커·SaaS 1인 운영자에게 본전 큰 매핑이에요.
본인 2주 실측에서 부딪힌 한계 4가지. (1) 복잡 애니메이션 시각 편집 미지원 — Framer Motion·GSAP·CSS keyframes 같은 애니메이션은 시각 편집 어려움. 코드 직접 작성 + 미리보기로 검증 흐름이 본전. (2) 3D·Canvas·WebGL 컴포넌트 미지원 — Three.js·React Three Fiber·Pixi.js 같은 3D 그래픽 컴포넌트는 Design Mode 캔버스에서 빈 화면으로 표시. 별도 도구 필요. (3) 대형 컴포넌트(500줄+) 렌더링 느림 — Composer 2가 의도 추론할 때 큰 컴포넌트는 응답 시간 5초+ 소요. 컴포넌트 분할 권장. (4) CSS-in-JS(styled-components·Emotion) 시각 편집 약함 — Tailwind·CSS Modules는 본전 좋은데 styled-components는 시각 편집 결과가 자주 잘못 변환됨. Tailwind 전환 권장 또는 코드 직접 편집.
본인 추정 — 5월 25일 시점 한계 4가지 중 (1)·(3)은 6월~8월 사이 개선 가능성, (2)·(4)는 더 늦게 풀릴 가능성. Cursor 3 Roadmap 페이지에서 분기 갱신 추적 가능. 한계 영역은 일반 IDE 흐름으로 회피하면서 강점 영역에서 본전 뽑는 분기 매핑이 본전이에요.
Cursor 3 가격 티어 3가지. (1) Pro $20 — Design Mode·Agents Window·Composer 2 모든 기능 포함, 월 약 500 작업(Composer·Agents 호출 quota). 1인 개발자 본전. (2) Teams $40/seat — Pro 모든 기능 + 팀 협업·SSO·관리자 콘솔, 월 약 1,500 작업. 소규모 팀 본전. (3) Max $200 — 무제한 작업(fair use), 우선순위 처리, 풀타임 개발자·작은 팀 본전.
본인 본전 분기 — (1) 사이드 프로젝트·주말 코딩 1인 개발자 — Pro $20 충분. Design Mode 마이크로 튜닝 + 단순 컴포넌트 작업은 quota 거의 안 까먹어요. (2) 풀타임 1인 SaaS 운영자 — Pro $20 유지 가능 vs Max $200 분기 분석 필요. 일일 Agents Window 호출 50회+이면 Max 본전, 그 미만이면 Pro 유지. (3) 풀타임 코딩 + 디자인 다수 반복 — Max $200 분기 적극 검토. Composer 2가 Design Mode 시각 편집 처리할 때 quota 소비 큼.
본인 5월 실측 — 본인은 1인 SaaS 풀타임 운영, 일 Agents Window 호출 평균 35회, Design Mode 시각 편집 약 80회. Pro $20 quota 5월 한 달 약 73% 소비. Max $200 분기 아직 안 옴. 일 호출 50회+ 도달 후 Max 전환 분기 결정 예정. Pro $20에서 Max $200 전환 비용 약 $180 추가 — quota 부족·우선순위 처리 필요 시점이 분기 결정 기준이에요.
(1) Cursor 3 Pro $20 14일 무료 체험 등록. 카드 등록 없이 14일 풀 체험 가능. Design Mode 기능 본전 확인. (2) 본인 가장 자주 수정하는 컴포넌트 5개 선택 — 버튼·카드·폼·모달·테이블 같은 컴포넌트 Design Mode로 시각 수정 시도. 1주 안에 1분에 5번 반복 익숙해짐. (3) Figma 구독 점검 — 1인 풀스택 개발자라면 Figma Pro $15 해지 + Free 다운그레이드 + Design Mode 단독 전환 분기 결정. 월 $15 절약 + 디자인 워크플로 통합. 5월 14일 기준 본인 실측 7가지 패턴 중 가장 본전 큰 시나리오 3개부터 시작 추천이에요.
Cursor 3가 4월 2일 출시한 시각 UI 편집 모드예요. IDE 안에서 React·Vue·Svelte 컴포넌트를 클릭·드래그로 수정 — 예를 들어 버튼을 끌어서 위치 옮기거나, 텍스트 박스에 색상 피커로 색 바꾸거나, 패딩·마진을 슬라이더로 조정 — 그 변경이 곧바로 JSX·CSS·Tailwind 클래스에 반영. Composer 2가 변경 의도를 읽고 코드 최적화. Figma처럼 시각 편집하면서 동시에 코드 베이스가 살아 있는 구조. 디자인-개발 핸드오프 사이의 갭이 사라지는 게 핵심이에요.
5월 시점 본인 2주 실측 결론 — (1) **대체 가능 영역** 4가지. 단순 컴포넌트 반복(버튼·카드·폼·테이블 디자인 조정), 기존 UI 마이크로 튜닝(여백·색상·폰트 사이즈), 반응형 브레이크포인트 조정(모바일·태블릿·데스크탑 분기), 디자인 시스템 토큰 적용. (2) **여전히 Figma 필요 영역** 4가지. 신규 디자인 from-scratch(빈 캔버스에서 와이어프레임·목업 시작), 디자이너 협업(여러 명이 동시 편집·코멘트·버전 관리), 디자인 시스템 컴포넌트 라이브러리 구축(Figma Variables·Auto Layout), 비개발자 디자이너 참여(코드 베이스 접근 필요 없는 디자인 작업). 한국 1인 개발자가 디자인·개발 다 하는 경우는 Cursor 3 Design Mode 단독 충분. 디자이너 따로 있는 경우는 Figma 병행 필수.
시각 편집 결과를 코드로 변환할 때 의도 추론·코드 최적화 담당. 예를 들어 버튼을 끌어서 옆 카드 안으로 옮기면 (1) JSX 트리 구조 재배치(부모 컴포넌트 변경), (2) Tailwind 클래스 자동 갱신(flex·gap·padding 조정), (3) 인접 컴포넌트 props 영향 분석(타입 에러 사전 방지), (4) 이름 충돌·중복 클래스 정리 — 이 4가지를 Composer 2가 자동 처리. 일반 IDE라면 사용자가 직접 JSX·CSS 손봐야 할 작업. Composer 2가 시각 편집을 코드 의도로 번역해주는 게 핵심이에요. Cursor 3 Pro $20 사용자 quota에 포함.
본인 5월 실측 본전 시나리오 — (1) **SaaS 랜딩 페이지 반복 수정** — A/B 테스트용 카피·CTA 위치·색상 조정. 시각 편집으로 1분에 5번 반복 가능. Figma 거치면 10분+. (2) **반응형 디자인 점검** — 데스크탑·태블릿·모바일 브레이크포인트 동시 보면서 조정. (3) **디자인 시스템 마이크로 튜닝** — Tailwind 토큰·색상 팔레트·spacing 조정 후 영향 받는 컴포넌트 일괄 시각 확인. (4) **신규 컴포넌트 prototype** — 새 카드·모달·드롭다운 디자인 시도 후 마음에 들면 코드 채택. (5) **버그 리포트 시각 재현** — 사용자가 보낸 스크린샷 보면서 IDE 안에서 동일 화면 재현 + 즉시 수정 + 검증.
직접 Figma→Cursor 3 import는 아직 미지원(5월 25일 시점). 단 우회 경로 3가지 — (1) **Figma to Code 플러그인** 사용. Figma Anima·Builder.io 같은 플러그인으로 Figma 디자인을 React·Tailwind 코드로 export 후 Cursor 3에서 열기. (2) **Composer 2에게 Figma 스크린샷 보여주기** — 이미지 첨부 + 자연어로 '이 디자인 React로 재현해줘' 요청. Vision 처리로 코드 생성. (3) **Tailwind UI·shadcn/ui 시작점 채택** — Figma에서 영감 받은 다음 Cursor 3 안에서 shadcn/ui 컴포넌트로 시작 + Design Mode로 반복 수정. 본인 경험 — (2)와 (3) 조합이 가장 빠름. (1)은 결과 코드가 지저분해서 정리 시간 더 들 때 많아요.
Windsurf는 5월 25일 시점 Design Mode 동급 기능 미발표. Cascade Hooks·SWE-1.5 같은 코드 중심 기능이 강점이지 시각 UI 편집은 미구현. v0(Vercel)·bolt.new(StackBlitz)·Lovable 같은 별도 시각 UI 빌더는 있지만 IDE 통합 아님. Cursor 3 Design Mode가 IDE 안에 시각 편집을 정식 통합한 첫 사례. 본인 추정 — 6월~8월 사이 Windsurf·Codeium도 유사 기능 발표 가능성. 단 5월 시점은 Cursor 3 단독. 시각 편집 본전 보려면 Cursor 3 Pro $20부터 시작이 정답이에요.
본인 2주 실측 — (1) **첫 1일** — UI 위치 익히기 + 시각 편집·코드 편집 모드 전환 핸들 파악. Composer 2 호출 단축키 학습. (2) **2~3일** — 단순 컴포넌트(버튼·카드) 시각 편집 익숙. 1분에 5번 반복 가능. (3) **1주** — 반응형 브레이크포인트 조정·Tailwind 토큰 활용 능숙. (4) **2주** — Figma 대체 가능 분기 판단 가능. Composer 2 의도 추론 패턴 익숙. 학습 곡선 가파르지 않고 IDE 사용 경험 있는 개발자는 1주 안에 본전. 디자이너 경험 없는 백엔드 개발자도 시각 편집 본전 큼 — 직접 디자인 시도 가능.
Perplexity Comet 브라우저가 3월 18일 유료 페이월 폐지 후 무료 전환되면서 iOS·안드로이드·Mac·Windows 전 플랫폼 글로벌 무료로 풀렸어요. Pro $20에서는 Deep Research가 Claude Opus 4.5로 업그레이드되고 Voice Mode는 OpenAI GPT Realtime 1.5로 안정성 25% 개선. Comet Plus $5 publisher 애드온까지. 한국 1인 사업자가 무료 전환 첫 2주 7가지 작업을 실측해 어디까지 무료로 본전이고 어디서 Pro·Max로 올라가는지 정리.
Cursor가 5월 18일 Composer 2.5(Kimi K2.5 베이스, SWE-Bench Multilingual 79.8%, $0.50/$2.50)를 출시하면서 Windsurf SWE-1.5(950 tok/s Cerebras, $20 Pro 무과금)와 정면 충돌. 본인이 5/19~5/23 7가지 작업으로 두 자체 모델 직접 비교. 한국 1인 개발자가 어느 쪽 본전인지 실측 결론.
구글이 5월 19일 I/O에서 Gemini 3.5 Flash를 정식 출시하면서 가격 $1.50/$9, 출력 속도 289 tok/s, Terminal-Bench 76.2%로 작년 Pro급 성능을 Flash 가격으로 풀었어요. 3.1 Pro $2/$12 대비 25% 절감, GPT-5.5 $15/$30 대비 90% 절감. 한국 1인 개발자가 어디서 본전이고 어디서 Opus 4.7·GPT-5.5를 불러야 하는지 실측 7가지 패턴 정리.
Microsoft가 5월 4일 Power Apps MCP Server를 정식 출시. Power Automate Agent feed가 비즈니스 앱 안에서 에이전트 활동을 일괄 감독하는 통합 콘솔로 결합. Power Apps·Power Automate·Copilot Studio 3종이 MCP 표준으로 연결되면서 한국 기업 RPA 자동화·AI 에이전트 분기점이 본격 도래. 본인 5월 실측 7가지 비즈니스 활용 패턴 + Zapier·n8n 대비 본전 분기 정리.
Google이 5월 19일 I/O 2026에서 Antigravity 2.0를 출시. VS Code 포크 + Gemini 3.5 Flash 기반 에이전트 우선 IDE + 데스크탑 앱·CLI·SDK + 최대 5개 에이전트 병렬 디스패치. 첫 1주 5개 실전 빌드(React 대시보드·Python 데이터 ETL·Astro 블로그·Node API 서버·Chrome Extension) 돌리면서 Cursor 3·Antigravity 분기점 + 한국 1인 개발자 본전 패턴 정리.