Daniel

3 분 소요

들어가며

웹 개발을 하다 보면 다음과 같은 상황을 자주 마주칩니다:

  • 개발한 기능을 브라우저에서 직접 테스트해야 할 때
  • 접근성(Accessibility) 문제를 찾아 수정해야 할 때
  • 디자인 목업을 보고 코드로 구현해야 할 때
  • 반복적인 테스트 작업을 자동화하고 싶을 때

Cursor AI의 브라우저(Browser) 기능은 에이전트가 웹 브라우저를 제어하여 애플리케이션을 테스트하고, 레이아웃과 스타일을 시각적으로 편집하며, 접근성을 감사하고, 디자인을 코드로 변환하는 등 다양한 작업을 수행할 수 있게 해줍니다1.

브라우저 기능이란?

Cursor AI에서 브라우저 사용하는 화면

브라우저 기능 개요

기본 개념

브라우저 기능은 Cursor AI 에이전트가 웹 브라우저를 직접 제어할 수 있게 해주는 기능입니다. 브라우저를 통해 웹 페이지를 탐색하고, 버튼을 클릭하고, 폼을 작성하며, 콘솔 로그와 네트워크 트래픽을 모니터링할 수 있습니다.

주요 특징

  1. 네이티브 통합: 별도의 도구 설치나 설정 없이 바로 사용 가능
  2. 시각적 피드백: 스크린샷을 통해 브라우저 상태를 이미지로 확인
  3. 효율적인 로그 처리: 브라우저 로그를 파일로 저장하고 필요한 부분만 선택적으로 읽기
  4. 개발 서버 인식: 실행 중인 개발 서버를 자동으로 감지하여 올바른 포트 사용

브라우저 기능

다음과 같은 브라우저 도구에 접근할 수 있습니다:

URL을 방문하고 웹 페이지를 탐색할 수 있습니다. URL을 방문하고, 링크를 따라가며, 브라우저 히스토리에서 뒤로/앞으로 이동하고, 페이지를 새로고침할 수 있습니다.

Click (클릭)

버튼, 링크, 폼 요소와 상호작용할 수 있습니다. 페이지 요소를 식별하고 클릭, 더블 클릭, 우클릭, 호버 등의 동작을 수행할 수 있습니다.

Type (입력)

입력 필드와 폼에 텍스트를 입력할 수 있습니다. 폼을 작성하고, 데이터를 제출하며, 검색 상자와 텍스트 영역과 상호작용할 수 있습니다.

Scroll (스크롤)

긴 페이지와 콘텐츠를 탐색할 수 있습니다. 스크롤하여 추가 콘텐츠를 표시하고, 특정 요소를 찾으며, 긴 문서를 탐색할 수 있습니다.

Screenshot (스크린샷)

웹 페이지의 시각적 표현을 캡처할 수 있습니다. 스크린샷은 에이전트가 페이지 레이아웃을 이해하고, 시각적 요소를 확인하며, 브라우저 동작에 대한 확인을 제공하는 데 도움이 됩니다.

Console Output (콘솔 출력)

브라우저 콘솔 메시지, 오류, 로그를 읽을 수 있습니다. JavaScript 오류, 디버깅 출력, 네트워크 경고를 모니터링하여 문제를 해결하고 페이지 동작을 확인할 수 있습니다.

Network Traffic (네트워크 트래픽)

페이지가 만든 HTTP 요청과 응답을 모니터링할 수 있습니다. API 호출을 추적하고, 요청 페이로드를 분석하며, 응답 상태 코드를 확인하고, 네트워크 관련 문제를 진단할 수 있습니다. 현재는 에이전트 패널에서만 사용 가능하며, 레이아웃에서는 곧 제공될 예정입니다.

디자인 사이드바

브라우저에는 사이트를 Cursor에서 직접 수정할 수 있는 디자인 사이드바가 포함되어 있습니다. 실시간 시각적 조정과 함께 디자인과 코드를 동시에 작업할 수 있습니다.

시각적 편집 기능

사이드바는 강력한 시각적 편집 컨트롤을 제공합니다:

  • 위치 및 레이아웃: 페이지에서 요소를 이동하고 재배치. flex 방향, 정렬, 그리드 레이아웃 변경
  • 크기: 픽셀 값으로 너비, 높이, 패딩, 마진 조정
  • 색상: 디자인 시스템의 색상을 업데이트하거나 새로운 그라디언트 추가. 시각적 색상 선택기를 통해 색상 토큰 접근
  • 외관: 시각적 슬라이더를 사용하여 그림자, 투명도, 테두리 반경 실험
  • 테마 테스트: 밝은 테마와 어두운 테마에서 디자인을 즉시 테스트

변경사항 적용

시각적 조정이 원하는 대로 되면 적용 버튼을 클릭하여 코드베이스를 업데이트하는 에이전트를 트리거합니다. 시각적 변경사항을 적절한 코드 수정으로 변환합니다.

사이트 전체에서 여러 요소를 선택하고 텍스트로 변경사항을 설명할 수도 있습니다. 에이전트가 병렬로 시작되며, 변경사항은 핫 리로드 후 페이지에 실시간으로 표시됩니다.

세션 지속성

브라우저 상태는 워크스페이스 기반으로 에이전트 세션 간에 지속됩니다. 이는 다음을 의미합니다:

  • 쿠키: 인증 쿠키와 세션 데이터가 브라우저 세션 간에 사용 가능
  • Local Storage: localStorage와 sessionStorage에 저장된 데이터가 지속됨
  • IndexedDB: 데이터베이스 콘텐츠가 세션 간에 유지됨

브라우저 컨텍스트는 워크스페이스별로 격리되어 있어, 다른 프로젝트가 별도의 저장소와 쿠키 상태를 유지합니다.

사용 사례

웹 개발 워크플로우

브라우저는 Figma와 Linear 같은 도구와 함께 웹 개발 워크플로우에 통합됩니다. 디자인 시스템, 프로젝트 관리 도구, 컴포넌트 라이브러리와 함께 브라우저를 사용하는 방법에 대한 전체 가이드는 Web Development cookbook을 참고할 수 있습니다.

접근성 개선

웹 접근성을 감사하고 개선하여 WCAG 준수 표준을 충족시킬 수 있습니다.

WCAG(Web Content Accessibility Guidelines)는 웹 콘텐츠 접근성 가이드라인으로, 장애인을 포함한 모든 사용자가 웹 콘텐츠에 접근할 수 있도록 하는 국제 표준입니다.

예시 프롬프트:

@browser 색상 대비 비율 확인, 시맨틱 HTML과 ARIA 레이블 검증, 키보드 탐색 테스트, 누락된 alt 텍스트 식별

자동화된 테스트

포괄적인 테스트 스위트를 실행하고 시각적 회귀 테스트를 위한 스크린샷을 캡처할 수 있습니다.

예시 프롬프트:

@browser 테스트 데이터로 폼 작성, 워크플로우 클릭, 반응형 디자인 테스트, 오류 메시지 검증, JavaScript 오류 모니터링

디자인을 코드로 변환

디자인을 반응형 레이아웃이 있는 작동하는 코드로 변환할 수 있습니다.

예시 프롬프트:

@browser 이 디자인 목업을 분석하고, 색상과 타이포그래피를 추출하여 픽셀 퍼펙트한 HTML과 CSS 코드 생성

스크린샷에서 UI 디자인 조정

시각적 불일치를 식별하고 컴포넌트 스타일을 업데이트하여 기존 인터페이스를 개선할 수 있습니다.

예시 프롬프트:

@browser 현재 UI를 이 디자인 스크린샷과 비교하고, 간격, 색상, 타이포그래피를 조정하여 일치시키기

권장 모델

최상의 성능을 위해 Sonnet 4.5, GPT-5, Auto를 권장합니다.

마무리

Cursor AI의 브라우저 기능을 효과적으로 활용하면:

  1. 웹 애플리케이션 테스트: 자동화된 테스트와 시각적 회귀 테스트 수행
  2. 접근성 개선: WCAG 준수를 위한 접근성 감사 및 개선
  3. 디자인 구현: 디자인 목업을 코드로 변환하고 UI 조정
  4. 개발 효율성: 반복적인 테스트 작업 자동화로 개발 시간 절약

브라우저 기능은 웹 개발 워크플로우를 크게 향상시킬 수 있는 강력한 도구입니다. 다양한 사용 사례를 활용하면 개발 생산성을 크게 향상시킬 수 있습니다.

참고 자료:

  1. Cursor AI Browser 공식 문서 - 브라우저 기능의 전체 가이드와 예시 ↩

카테고리:

업데이트:

댓글남기기

참고

Cursor AI 공식문서 훑어보기: 병렬 에이전트

5 분 소요

Cursor AI의 병렬 에이전트 기능을 완벽하게 이해하고 활용하는 방법을 알아봅니다. Git worktree를 활용한 병렬 작업, Best-of-N 기능, 초기화 스크립트 설정까지 실전 예시와 함께 설명합니다.

Cursor AI 공식문서 훑어보기: Rules

7 분 소요

Cursor AI의 Rules 기능을 완벽하게 이해하고 활용하는 방법을 알아봅니다. Project Rules, Team Rules, User Rules, AGENTS.md까지 모든 규칙 타입을 실전 예시와 함께 설명합니다.