AI 기술을 누구나 쉽게 활용할 수 있도록 실전 가이드를 작성합니다. ChatGPT, Claude, AI 자동화, SEO 분야를 전문으로 다룹니다.
Cursor 3가 Design Mode를 정식 도입했어요. IDE 안에서 React·Vue·Svelte UI를 클릭·드래그로 시각 수정하고 그 변경이 곧바로 JSX·CSS·Tailwind 코드에 반영되는 구조. 이 글은 7가지 실전 작업 유형을 기준으로 Figma 대체 가능 분기점·여전히 Figma가 필요한 영역·한국 1인 개발자 본전 패턴을 정리했어요.
핵심 변화 3가지. (1) 시각 편집·코드 동기화 — 시각 변경이 곧바로 코드에 반영, 디자인-개발 핸드오프 갭 해소. (2) Composer 2 의도 추론 — 시각 편집 결과를 코드 의도로 번역, JSX 트리·Tailwind 클래스·props 자동 정리. (3) IDE 통합 — Figma·v0·bolt.new 같은 별도 도구 안 떠나고 IDE 안에서 디자인·개발 동시 진행. Pro $20에 모든 기능 포함이라 진입 장벽 낮아요.
이번 글은 7가지 실전 작업에서 어디까지 Figma 대체가 가능하고 어디부터 여전히 Figma가 필요한지, 한국 1인 개발자가 어떤 시나리오에 본전이 큰지 정리했어요. 작업 속도나 절약 폭은 프로젝트 규모·컴포넌트 구조·본인 숙련도에 따라 편차가 크니 숫자로 못 박기보다 방향으로 읽어주세요. 요금제와 지원 범위는 수시로 바뀌니 결제 전에는 Cursor 공식 문서를 꼭 확인하시고요.
가장 본전 큰 시나리오. SaaS 랜딩 페이지 헤드라인·CTA·색상·여백을 A/B 테스트용으로 반복 수정하는 작업이에요. 시각 편집이라 고치고 바로 확인하는 사이클이 짧고, Figma에서 디자인한 다음 코드로 옮기는 왕복 자체가 사라져요.
체감상 가장 크게 줄어드는 건 작업 시간보다 전환 비용이에요. 도구를 오가지 않으니 맥락이 끊기지 않고, 시안을 버리는 부담도 작아져서 더 과감하게 여러 안을 시도하게 됩니다. 다만 절약 폭은 페이지 구조와 컴포넌트 분리 상태에 따라 편차가 크니 본인 프로젝트에서 직접 재보는 게 정확해요.
본인 노하우 — (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 브레이크포인트 클래스 자동 조정.
체감 효과가 큰 이유는 단순해요. 3개 화면을 동시에 보니 깨지는 레이아웃을 그 자리에서 발견하고, sm·md·lg 클래스 추가는 Composer 2가 맡아요. 브라우저 창 크기를 줄였다 늘렸다 하며 확인하던 왕복이 통째로 빠지는 셈. 모바일 트래픽 비중이 큰 서비스일수록 본전이 큰 작업이에요.
본인 노하우 — (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 코드를 하나만 바꿔도 그 토큰을 쓰는 컴포넌트가 줄줄이 딸려 나와요. Design Mode는 영향 범위를 시각으로 한 번에 비교해주니 의도하지 않은 색상 변경을 바로 잡아낼 수 있고, 색상 충돌 정리는 Composer 2가 거들어요. 일반 IDE라면 빌드한 뒤 페이지를 일일이 클릭하면서 점검해야 할 작업이에요.
본인 노하우 — (1) 디자인 시스템 토큰 변경 전 git commit + branch 분리, (2) 변경 후 Design Mode 일괄 미리보기 확인, (3) 영향 받는 컴포넌트 화면 일괄 캡처해서 팀·고객 공유, (4) 승인 받은 후 main branch 머지.
가장 분기 명확한 영역. Design Mode는 기존 컴포넌트 반복 수정에는 강하지만 빈 캔버스에서 신규 디자인 from-scratch 작업은 Figma가 여전히 본전. 캔버스·자유 그리기·디자인 영감·디자이너 협업 다 Figma가 우월.
신규 모달처럼 참고할 기존 컴포넌트가 없는 작업을 Design Mode 단독으로 밀어붙이면 오히려 답답해요. 코드가 먼저 있어야 시각 편집이 걸리는 구조라, 빈 상태에서 형태를 찾는 단계에는 손이 잘 안 붙습니다. Figma에서 영감·색상·레이아웃을 먼저 잡고 대략적 시안이 나온 다음 Cursor 3에서 코드로 옮기는 흐름이 훨씬 매끄러워요. 신규 디자인은 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 흐름(로컬 빌드 → 화면 띄우기 → 화면 따라가기 → 수정 → 재빌드) 단계가 다 사라져요.
흐름은 이래요. 사용자 스크린샷 → Design Mode에 화면 첨부 → 동일 컴포넌트 시각 비교 → Composer 2가 차이점 분석 → 수정 코드 생성 → 즉시 시각 검증. 재현 환경을 따로 세팅하는 단계가 빠지니 리포트 1건을 붙잡고 있는 시간이 눈에 띄게 줄어요. 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) 대형 컴포넌트 렌더링 느림 — 한 파일에 길게 쌓인 컴포넌트일수록 Composer 2가 의도를 추론하는 데 기다리는 체감이 커져요. 컴포넌트 분할 권장. (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 소비 큼.
티어 선택은 숫자로 미리 정하기보다 한 달 써보고 결정하는 쪽이 정확해요. Cursor 설정의 사용량 화면에서 quota 소진 속도를 확인할 수 있으니, 월 중반에 얼마나 남았는지 한 번 보고 판단하면 됩니다. 판단 기준은 두 가지뿐이에요. 월말 전에 quota가 바닥나서 작업이 막히는지, 응답 대기가 길어져 우선순위 처리가 필요한지. 둘 다 아니라면 상위 티어 전환은 미뤄도 괜찮아요. 참고로 요금과 quota 정책은 자주 바뀌니 결제 전 공식 요금 페이지를 확인하는 걸 권해요.
(1) Cursor 3 Pro $20 14일 무료 체험 등록. 카드 등록 없이 14일 풀 체험 가능. Design Mode 기능 본전 확인. (2) 본인 가장 자주 수정하는 컴포넌트 5개 선택 — 버튼·카드·폼·모달·테이블 같은 컴포넌트를 Design Mode로 시각 수정해보세요. 며칠만 만져봐도 고치고 바로 확인하는 사이클이 손에 붙어요. (3) Figma 구독 점검 — 1인 풀스택 개발자라면 Figma 유료 플랜을 해지하고 무료 플랜으로 내린 뒤 Design Mode 단독으로 갈지 결정. 구독비 절약과 디자인 워크플로 통합을 동시에 노릴 수 있어요. 위 7가지 패턴 중 본인 작업에 가장 가까운 시나리오 3개부터 시작하는 걸 추천해요.
한 가지만 덧붙이면, 이 도구를 처음 잡는 사람이 가장 자주 하는 실수는 세 가지예요. 첫째, 컴포넌트를 쪼개지 않은 채로 시각 편집을 시작하는 것. 한 파일에 화면 전체가 들어 있으면 어디를 고쳐도 영향 범위가 넓어져서 되돌리기 어려워요. 둘째, 브랜치를 안 따고 토큰부터 건드리는 것. 디자인 시스템 변경은 되돌릴 일이 잦으니 커밋을 먼저 찍어두세요. 셋째, 시각 편집이 만들어낸 코드를 읽지 않고 넘어가는 것. Composer 2가 클래스를 정리해주긴 하지만 의도와 다르게 붙는 경우가 있어서, 커밋 전 diff는 반드시 눈으로 확인하는 습관이 안전해요.
Cursor 3에 들어간 시각 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에 포함.
본전 큰 시나리오 — (1) SaaS 랜딩 페이지 반복 수정 — A/B 테스트용 카피·CTA 위치·색상 조정. 시각 편집이라 한 자리에서 계속 고쳐볼 수 있고, Figma를 거쳐 코드로 옮기는 왕복이 통째로 빠져요. (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부터 시작이 정답이에요.
체감 진입 순서는 대체로 이래요 — (1) 첫날 — UI 위치 익히기 + 시각 편집·코드 편집 모드 전환 핸들 파악. Composer 2 호출 단축키 학습. (2) 며칠 안 — 단순 컴포넌트(버튼·카드) 시각 편집이 손에 붙고 수정·확인 사이클이 짧아져요. (3) 1주 — 반응형 브레이크포인트 조정·Tailwind 토큰 활용 능숙. (4) 2주 — Figma 대체 가능 분기 판단 가능. Composer 2 의도 추론 패턴 익숙. 학습 곡선 가파르지 않고 IDE 사용 경험 있는 개발자는 1주 안에 본전. 디자이너 경험 없는 백엔드 개발자도 시각 편집 본전 큼 — 직접 디자인 시도 가능.
홈브루가 공개하는 집계 주소를 직접 불러서 최근 30일 캐스크 설치 1,889,149건을 세어 봤어요. 1위가 codex로 122,607건, 2위가 claude-code로 51,469건이었고, 설치 건수 상위 100개 중 최소 14개가 AI 도구였어요. 조회 시각은 2026년 9월 11일 오전 11시 38분부터 11시 45분까지(한국 시각)예요.
VS Code 마켓플레이스 공개 조회 창구에 AI 카테고리 조건을 걸어 정렬 네 가지로 네 번 전부 받아 합쳤더니 서로 다른 확장 4,253개가 나왔어요. 그중 249개는 검색 결과에 설치 수까지 남아 있는데 상품 페이지는 전수 확인 결과 249개 모두 없는 페이지였어요. 조회 시각은 2026년 9월 9일 오전 10시 38분부터 11시 20분까지(한국 시각)예요.
애플이 공개한 검색 API에 「인공지능」과 「AI」를 각각 넣어 받은 목록을 전수로 셌어요. 176개와 172개가 왔는데 겹치는 건 16개였고, 마지막 버전 날짜가 1년을 넘긴 것은 34개 대 4개였어요. 다만 두 목록은 검색어가 만든 서로 다른 표본이에요.
Civitai 공개 조회 창구에서 다운로드 상위 체크포인트 500개와 로라 500개, 합계 1,000개를 받아 제작자가 설정해 둔 이용권한 항목을 전수로 셌어요. 모델 페이지에 「No commercial use」 배지가 붙는 모델이 300개로 30.0퍼센트였고, 그 모델로 만든 이미지를 팔 수 있는 모델은 698개였어요. 제작자 표기를 요구하는 모델이 333개, 병합을 막아 둔 모델이 241개예요. 조회 시각은 2026년 9월 12일 오후 1시 10분부터 1시 15분까지(한국 시각)예요.
AI를 직접 돌릴 때 쓰는 도커 이미지 저장소 40개를 도커 허브 공개 API로 조회했어요. 이 40개 중 latest 태그가 있는 건 33개, 없는 건 7개였고, latest가 있는 33개 중 arm64 매니페스트가 붙은 건 26개예요. latest의 amd64 압축 크기는 71 MB에서 27.47 GB까지 398배 벌어졌고 중앙값은 747 MB였어요. 조회 일시는 2026년 9월 8일 오전 10시 24분에서 10시 31분 사이(한국 시각)예요.