Cursor 2.2 Visual Editor가 바꾸는 웹 개발 워크플로우

여러분, Cursor 2.2 업데이트에서 가장 눈에 띄는 기능이 바로 Visual Editor입니다. 그동안 AI 코딩 에디터는 코드 편집기와 채팅 패널을 중심으로 돌아갔죠. 그런데 웹 개발에서는 코드만 봐서는 부족합니다. 화면에서 요소가 어떻게 보이는지, 버튼과 폼이 어떻게 배치되는지, 수정한 코드가 실제 UI에 어떤 영향을 주는지를 계속 눈으로 확인해야 하니까요.

Visual Editor는 바로 이 지점을 직접 건드립니다. Cursor의 에이전트 채팅, 자체 브라우저, 시각 편집 도구를 하나의 환경에 통합해서 코드와 화면 사이의 거리를 좁혔습니다. 개발자는 브라우저 미리 보기에서 요소를 선택하고 편집 방향을 잡고, AI는 그 변경을 코드베이스에 반영합니다. 이 흐름이 한 화면 안에서 이어진다는 게 핵심입니다.

핵심 요약

• Cursor 2.2의 Visual Editor는 브라우저 미리 보기, 코드베이스, 시각 편집기, AI 채팅 패널을 한 화면에 묶는 기능입니다.
• 웹 UI 개발에서 반복되던 “코드 수정 → 브라우저 확인 → 다시 코드 수정” 흐름을 더 짧게 만들 수 있습니다.
• 디자이너와 개발자가 같은 Cursor 환경에서 UI 변경 의도를 공유할 가능성을 엽니다.
• Visual Editor는 Cursor 자체 브라우저와 결합되어 실제 화면을 기준으로 작업하게 해 줍니다.
• AI가 코드만 추론하는 것이 아니라 시각적 결과를 보고 수정하는 방향으로 개발 워크플로우가 이동하고 있습니다.

Visual Editor가 중요한 이유

웹 개발의 병목은 화면과 코드 사이에 있다

웹 개발자는 코드를 작성하면서 동시에 화면을 봅니다. CSS 클래스 하나를 바꿔도 실제 레이아웃이 어떻게 달라지는지 확인해야 하고, 컴포넌트 구조가 맞아도 버튼 간격이나 문구 줄바꿈이 어색하면 다시 수정해야 합니다. 기존 AI 코딩 도구는 이 과정을 일부 도와줬지만, 대부분은 코드 텍스트를 기준으로 작업했습니다.

Visual Editor는 코드와 화면을 분리하지 않습니다. 브라우저 미리 보기와 AI 채팅 패널이 같은 작업 흐름 안에 있기 때문에, “이 영역의 여백을 줄여줘”, “이 버튼 그룹을 더 명확하게 정리해줘” 같은 시각 기반 요청이 더 자연스러워집니다.

개발자뿐 아니라 디자이너도 참여할 수 있다

제가 보기에 Visual Editor는 개발자뿐 아니라 디자이너도 Cursor 환경 안에서 함께 작업할 수 있는 출발점이 됩니다. 디자이너가 코드 전체를 이해하지 못해도 화면 요소를 기준으로 변경 의도를 전달하고, AI가 그 의도를 코드 변경으로 연결해주기 때문이죠.

물론 이것이 디자인 도구를 완전히 대체한다는 의미는 아닙니다. 다만 웹서비스를 실제 코드 위에서 다듬는 단계에서는 디자인과 구현 사이의 간격을 줄이는 효과가 큽니다. 특히 이미 구현된 화면을 세밀하게 조정할 때 Visual Editor는 큰 생산성 향상을 만들 수 있습니다.

Cursor의 성장과 제품 방향

AI 코딩 에디터 경쟁이 기능 통합으로 이동한다

2025년 12월 기준 Cursor는 출시 2년 만에 연간 반복 매출(ARR) 10억 달러 규모에 도달했습니다. 같은 매출 규모에 Slack은 약 4년, Zoom은 약 5년이 걸렸다고 하니 굉장히 이례적인 속도죠. 1년 전만 해도 50명 수준이던 팀은 투자를 받으며 빠르게 늘어나 300명이 넘는 엔지니어가 일하는 조직이 됐고, Composer라는 자체 LLM 모델도 개발했습니다.

Cursor는 빠른 성장과 함께 자체 모델, 브라우저 기능, Visual Editor 같은 기능을 계속 붙이고 있습니다. Anthropic의 Claude, OpenAI의 Codex, Google의 Antigravity 같은 흐름에 대응하기 위해 기능을 공격적으로 확장하고 있다고 봅니다.

이 경쟁의 방향은 단순히 “더 좋은 코드 생성”에 머물지 않습니다. 이제 AI 코딩 도구는 코드 작성, 브라우저 확인, 디버깅, 시각 편집, 에이전트 실행을 하나의 작업 환경으로 묶으려 합니다. Visual Editor는 그 방향을 보여주는 기능입니다.

코드 편집기에서 개발 운영 환경으로

Cursor가 Visual Editor를 추가했다는 것은 AI 에디터가 단순한 텍스트 편집기에서 벗어나고 있다는 뜻입니다. 개발자는 IDE 안에서 코드를 수정하고, 브라우저를 확인하고, AI에게 지시하고, 다시 결과를 검토합니다. 이 과정이 하나의 화면 안에서 자연스럽게 연결될수록 컨텍스트 스위칭이 줄어듭니다.

실무에서 기대할 수 있는 활용

UI 수정 요청을 더 구체화할 수 있다

AI에게 “디자인을 예쁘게 해줘”라고 던지면 결과가 들쭉날쭉합니다. 그런데 Visual Editor가 있으면 화면의 특정 영역을 기준으로 훨씬 좁은 요청을 할 수 있죠. 예를 들어 “이 카드의 제목과 설명 간격을 줄이고, CTA 버튼을 오른쪽 아래에 고정해줘”처럼 구체적으로 지시할 수 있습니다.

이 방식은 특히 마케팅 사이트, SaaS 대시보드, 폼 화면, 랜딩 페이지처럼 시각 품질이 중요한 화면에서 효과적입니다. 코드만 보고는 놓치기 쉬운 여백, 정렬, 반응형 문제를 실제 화면 기준으로 다룰 수 있습니다.

브라우저 기반 검증과 결합된다

Cursor의 브라우저 기능과 Visual Editor가 함께 쓰이면, AI가 변경 후 화면을 직접 확인하는 흐름이 만들어집니다. 사용자는 단순히 코드 diff만 보는 것이 아니라 실제 렌더링 결과를 기준으로 수정 품질을 판단할 수 있습니다.

제가 더 중요하게 보는 건 이 지점입니다. AI 코딩의 품질 기준 자체가 바뀝니다. “코드가 컴파일되는가”에서 “사용자가 보는 화면이 의도대로 동작하고 보이는가”로 검증 기준이 넓어지는 거죠.

Visual Editor 핵심 기능 따라 해보기

이제 실제로 어떤 조작이 가능한지 간단한 랜딩 페이지를 예로 하나씩 보겠습니다. 결론부터 말하면, 프론트엔드에서 하는 대부분의 시각 작업을 화면을 보면서 바로 할 수 있습니다.

드래그 앤 드롭으로 섹션 순서 바꾸기

상단의 레이아웃 선택 도구를 누르고 마우스를 올리면 컴포넌트 단위로 요소가 선택됩니다. 예를 들어 전문가 소개 섹션을 선택해 고객 후기 섹션 위로 끌어다 놓으면 화면에서 위치가 그대로 바뀝니다. 이때 몇 개의 변경 사항이 있는지 표시되고, Apply를 누르면 에이전트가 DOM 순서를 파악해 실제 코드에서 컴포넌트 순서를 바꿔 줍니다.

예전에는 코드를 직접 고치거나, 에이전트에게 “어떤 섹션을 어디로 옮겨 달라”고 말로 명확하게 설명해야 했습니다. 이제는 눈으로 먼저 확인하고 마음에 들 때만 코드에 반영하면 됩니다.

그리드와 크기 조절

그리드 레이아웃도 UI에서 직관적으로 바꿀 수 있습니다. 레이아웃 흐름은 자유 배치(freeform), 컬럼 방향, 로우 방향, 그리드 중에서 고를 수 있고, 3×2 그리드를 2×3으로 바꾸는 것도 클릭 몇 번이면 됩니다. 너비 역시 콘텐츠에 맞추기(fit content)나 컨테이너 채우기(fill container) 같은 옵션으로 조정합니다. 이 변경도 Apply를 누르면 에이전트가 관련 파일을 찾아 빠르게 수정합니다.

타이포그래피 조정

제목 같은 텍스트 요소는 폰트, 굵기, 글자 크기, 자간, 행 높이, 정렬(왼쪽, 가운데, 오른쪽)을 바로 바꿔 보며 확인할 수 있습니다. 원래 이런 작업은 디자인 툴에서 끝낸 뒤 코드 에디터로 옮겨와 이어서 구현해야 했는데, 이제 하나의 도구 안에서 흐름이 끝납니다.

Point and Prompt로 세부 요청하기

시각 편집 도구에 없는 기능을 넣고 싶을 때는 Point and Prompt를 씁니다. 버튼을 누르고 수정할 요소를 선택하면, 선택한 영역의 컨텍스트가 AI 채팅 패널에 바로 반영됩니다.

예를 들어 고객 후기 카드 세 개가 나란히 있는 영역을 선택하고 “해당 영역의 카드를 가로 자동 스크롤 형태로 바꾸고, 스크롤할 수 있도록 고객 데이터도 추가해줘”라고 요청할 수 있습니다. 프롬프트에는 “해당 영역”이라고만 썼지만, 에이전트는 Visual Editor가 넣어 준 컨텍스트로 정확히 어떤 코드인지 파악해 수정합니다. 제가 말하고 싶은 건, 위치를 말로 설명하는 수고가 사라진다는 점입니다.

디자이너와 개발자 협업은 어떻게 바뀌나

기존 핸드오프 방식과 비교

지금까지 디자이너와 개발자의 협업은 디자이너가 디자인하고 스펙을 문서화하면, 개발자가 구현하고, 피드백을 받아 다시 수정하는 과정의 반복이었습니다. 그 사이에 Figma, Zeplin, InVision, Abstract 같은 협업 도구가 끼고, 개발자는 Cursor, Claude Code, Codex 같은 코딩 도구에서 따로 작업했죠. 보는 관점이 다르다 보니 “내가 의도한 결과가 아닌데”라는 상황이 자주 생기고, 커뮤니케이션 비용과 일정 지연, 팀 간 마찰로 이어졌습니다.

구분	기존 핸드오프	Visual Editor 도입 후
작업 도구	디자인 툴과 코딩 도구가 분리	Cursor 하나에서 디자인과 코드 수정
간단한 UI 수정	개발자에게 요청, 개발자가 수정 후 배포	디자이너·PM이 직접 수정, 개발자는 코드 리뷰 후 배포
피드백 루프	문서와 시안을 오가며 반복	화면에서 즉시 확인하고 반영
소요 시간	며칠씩 걸리기도 함	하루 안에 끝날 수 있음

버튼 위치 같은 단순한 변경은 디자이너나 PM이 Cursor 에이전트로 바로 수정하고, 개발자는 리뷰만 거쳐 배포하는 식입니다. 디자인한 사람이 프로덕션 결과물까지 직접 내보낼 수 있게 되면서 역할 자체가 재정의되는 거죠. 최근 디자인과 기본적인 코드 구현을 함께 하는 디자인 엔지니어 같은 직군이 생기는 흐름과도 맞닿아 있다고 봅니다.

경쟁 도구에 주는 영향

Figma는 디자인 시안을 공유하고 개발자가 해석해 구현하는 핸드오프의 중심에 있었습니다. 간단한 디자인 수정을 Cursor 안에서 바로 처리할 수 있다면, 이 역할의 중요성은 상대적으로 낮아질 수 있습니다. Webflow나 Framer 같은 노코드 도구도 마찬가지입니다. 노코드 도구는 시각적으로 만든 페이지를 코드로 변환하지만, Visual Editor는 실제 코드베이스 위에서 동작하기 때문에 개발자가 직접 짠 코드와 같은 선상에서 작업할 수 있습니다.

Cursor는 VS Code를 포크한 코딩 도구로 시작했지만, 이제는 소프트웨어 제작의 중심 플랫폼으로 가려는 것 같습니다. 개발자, 디자이너, PM이 같은 컨텍스트를 보고 일하는 환경이죠. Claude Code나 Codex 같은 터미널 기반 에이전트와 달리 Cursor는 UI가 있는 IDE라서, 직군별 기능을 통합하는 방향에서 확실한 경쟁력을 가질 수 있다고 봅니다.

주의할 점

Visual Editor가 아무리 강력해도 프로젝트의 디자인 시스템과 컴포넌트 규칙은 여전히 중요합니다. AI가 화면을 보고 수정할 수 있다고 해서 임의의 스타일을 계속 덧붙이면 코드베이스가 금세 산만해집니다. 그래서 기존 컴포넌트, 토큰, 레이아웃 규칙을 우선 쓰도록 지시하는 게 좋습니다.

또 하나, Visual Editor는 2025년 12월 기준 나온 지 얼마 되지 않은 기능입니다. 조금 복잡한 작업을 시키면 아직 오류가 꽤 있고, 복잡한 상호작용이나 비즈니스 로직까지 여기서 처리하기에는 한계가 분명합니다. 핵심 애플리케이션 로직, 퍼포먼스 튜닝, 데이터베이스 작업은 여전히 개발자의 영역이고, Visual Editor는 프론트엔드의 시각적이고 표면적인 부분에 특화된 도구로 보는 게 맞습니다.

그리고 시각 편집은 결과가 바로 눈에 보이다 보니 과도한 미세 조정에 빠지기 쉽습니다. 먼저 정보 구조와 사용자 흐름을 확정하고, 그다음에 Visual Editor로 세부 UI 품질을 끌어올리는 순서를 추천합니다.

마무리

한마디로 요약하면, Visual Editor는 디자인과 코드 사이의 계층을 제거한 첫 시작점이라고 봅니다. 디자이너가 원하는 결과물을 바로 코드로 구현하고, 개발자가 짠 코드가 즉각 화면에 반영되는 직접적인 연결이 만들어졌으니까요.

실무에서는 UI 수정, 반응형 검증, 디자이너와 개발자의 협업, 브라우저 기반 피드백 루프에서 특히 강합니다. 제가 말하고 싶은 건, 앞으로 AI 개발 도구의 경쟁은 모델 성능만으로 결정되지 않는다는 겁니다. 개발자가 하루 종일 머무는 작업 환경을 얼마나 잘 통합하느냐, 거기서 승부가 갈릴 것 같습니다. 이 기능은 Cursor를 업데이트하면 바로 써볼 수 있으니, 한 번씩 만져보면 좋겠습니다.

---

관련 영상

이 글과 연결된 영상은 개발동생 유튜브 채널에서 보기에서 확인할 수 있습니다.