Cursor의 Browser 기능 (AI가 직접 브라우저를 제어하는 세상)

[kwag93]

Cursor 의 새로운 Brower 기능들을 모두 써보셨나요?

이전에는 다양한 mcp 를 통해서 브라우저 제어를 AI 에 맡겨왔지만, 이제는 Cursor 에서 공식적으로 Browser 기능을 제공합니다.

공식 문서에는 다양한 사용 방법이 있는데요

대표 사례가 있습니다

1. 접근성 점검하기

WCAG 기준에 따라 접근성 테스트 하기

@browser Check color contrast ratios, verify semantic HTML and ARIA labels

2. 자동 테스트 해보기

@browser Fill out forms with test data and capture screenshots for visual regression testing

3. 디자인을 코드로 변환하기

@browser Analyze this design mockup and generate pixel-perfect HTML/CSS

4. UI 개선해보기

@browser Compare UI against this design screenshot and adjust styles

해당 Browser 는 이전과 다르게 알아서 개발 서버를 인식하고, 이미지를 기반으로 명확히 파악하며 콘솔로그와 네트워크 부분까지 모두 가져오게 됩니다.

특이한 점은 공식적으로 소넷을 추천한다는 점이네요

We recommend using Sonnet 4.5 for browser use for the best performance. Auto and GPT-5 are also good options.

직접 사용해본 결과 가장 크게 느껴지는 부분은

1. 디자인 시안과 비교하여 문제가 되는 부분을 브라우저를 통해 확인하게 할 경우 더 명확하게 파악한다. 예를 들어 내가 생각한 값과 다르게 결과값이 나올때 - select 선택시 색상이 삐져나온다던지. 이미지를 통해 확실히 파악하고 고쳐주려고 한다
2. 완성된 코드에 대해서 플로우 테스트가 더 명확하다. 어떤 버튼을 누르고 진행했을때 어떤 동작이 나와야 하는지를 더 명확히 이해하고 동작시킨다
3. figma mcp 와 연동해서 사용시 이미지와 실제 브라우저를 켜서 비교한 이미지의 차이도 잘 이해한다.
4. 문제가 생겼을때 네트워크 트래픽을 분석하거나 콘솔 로그를 따로 주지 않아도 바로 파악이 가능하다

이를 통해 우리는 AI 에게 더 많은 정보를 효과적으로 줄 수 있게 되었고 빠르게 답변을 받을 수 있다.

cursor 를 사용하는 유저 중에서 browser 가 생긴지 얼마 안되어 사용하고 있지 않은 프론트엔드 개발자가 있다면 꼭 추천하고 싶은 기능

[al-bur]

figma mcp 와 연동해서 사용시 이미지와 실제 브라우저를 켜서 비교한 이미지의 차이도 잘 이해한다.

오 이거 잘되던가요!?!?.. 대박인데요 이러면 figma에 있는 디자인만 잘 알려주면 UI 구현도를 측정하기도 쉽겠군용

[Henry-Hong]

고마워요! 이번주말에 꼭 써보려구요 ㅎㅎ