바로 03 커서 브라우저로 크롤링 쉽게 해보기

박현규16 / 35절읽는 시간 약 3분

이번에는 커서의 브라우저 기능을 소개하며 크롤링을 간단히 해보겠습니다. 여기서는 크롤링을 배우기보다는 커서의 브라우저가 얼마나 강력한 컨텍스트 도구인지 확인해봅니다.

빈 폴더를 만들고 커서의 브라우저를 열어봅니다. 상단 메뉴의 [View → Appearance → Open Browser]를 누르면 됩니다. 커서의 내장 브라우저는 웹브라우저처럼 원하는 웹페이지를 열어서 볼 수 있습니다.

NOTE

커서의 업데이트가 매우 잦은 편이라 메뉴 이름은 달라질 수 있지만 뉘앙스는 유지될 겁니다. 센스 있게 버튼을 찾아 누릅시다.

크롤링할 사이트를 아무 데나 들어가봅시다. 저는 뉴스 기사를 크롤링하겠습니다. 커서 브라우저에 다음 주소를 입력해서 구글 뉴스에 들어가봅니다.

구글 뉴스 : news.google.com

이제 커서 브라우저의 특별한 기능을 사용해볼 겁니다. 바로 웹페이지의 요소를 구체적으로 짚어주는 요소 선택 기능입니다. 오른쪽 위의 [ Select Element] 버튼을 누른 후 사이트의 이곳저곳에 마우스를 올려보세요.

그러면 사각형으로 화면 요소를 포커싱합니다. 이때 해당 요소를 클릭해보세요. 그럼 [

]과 같이 화면 요소가 채팅 창에 컨텍스트로 추가됩니다. 이렇게 요소를 추가하면 ‘여기 이 화면 이렇게~’라는 말을 하지 않아도 커서에게 원하는 화면 요소를 지칭할 수 있습니다. 화면 오른쪽에는 선택한 요소 크기나 여백 등 형태 정보를 알려주는 창이 생깁니다. 지금은 내용에만 집중하겠습니다.

NOTE
는 컴퓨터가 화면 요소를 지칭하는 말이라고 생각하면 됩니다. 뒤의 히 알아볼 겁니다.

NOTE

에서 자세

NOTE

만약 화면이 잘 보이지 않으면 토글 버튼을 눌러 파일 창 탭을 닫고 다시 보세요.

커서에 선택한 요소의 텍스트를 크롤링하라고 요청합니다. 따로 계획을 세울 필요가 없기 때문에 [Agent] 모드로 부탁하면 됩니다.

프롬프트

선택한 요소의 텍스트를 크롤링하는 파이썬 코드를 실행해서 결과 내용을 바로 읽어줘.

AI 답변

먼저 워크스페이스 구조를 확인하고 크롤링 코드를 작성하겠습니다. ...생략... 이제 스크립트를 실행하겠습니다.

프롬프트

결과를 보면 제대로 크롤링해준 것을 볼 수 있습니다. 구글 뉴스 사이트는 매번 페이지를 띄울 때마다 해당 영역의 기사가 조금씩 달라지므로 집필하는 지금 크롤링 정보와 여러분이 실습하는 시점의 정보가 다를 수 있습니다. 하지만 6개의 기사 헤드라인이 수집된 것을 보면 제대로 크롤링한 것 같습니다.

이처럼 커서의 편의 기능을 활용하면 다양한 작업을 편리하게 진행할 수 있습니다. 여러분이 지금까지 해본 것들은 튜토리얼에 불과합니다. 이제 본격적인 지식을 공부하면서 바이브 코딩을 해봅시다.