a15714ab041eb360be3335622983746f14c3836e64e5d8ea40dc9ee42f6ce6d5e384e7dadb334119f3a7b32d


a15714ab041eb360be3335622983746f14c3836e64e5d8ea40dc99e32f6ce6d5fe3e0c32798ee9f8f96dc976



Puppeteer나 Playwright 쓰면서 불편했던 점이


- 웹 자동화 하나 하는데 설치하는 게 너무 많다 (puppeteer의 경우 module에 수천 개 파일)

- Puppeteer는 Xpath 지원을 안해서 selector가 자주 변하는 페이지는 힘들었다

- 코드 읽는게 불편하지는 않은데, 직관적으로 바꾸고 싶었다


그래서 짱구를 좀 굴렸다


1

어차피 puppeteer도 제어 도구일 뿐인데, 본체인 browser에서 API를 지원하지 않을까?

> 찾아보니 CDP 라는 게 있더라


2

Puppeteer도 사용자는 js 코드로 입력을 하지만, 결국 브라우저랑 통신을 할 때는 CDP로 변환을 하네?

> html 파일 하나로 제어가 가능하겠구나


3

chromium 바이너리를 살펴보니 --headless, --remote-debugging-port 옵션이 있더라

> 이걸 이용하면 브라우저랑 바로 통신을 할 수 있겠네


4

디버깅 포트를 열고 127.0.0.1/json을 접속하니 현재 열린 탭 정보들이 나오더라


5

이젠 기능 실험을 성공했으니 scratch처럼 드래그로 층을 쌓는 No-code 툴로 만들어보면 어떨까?




a15714ab041eb360be3335622983746f14c3836e64e5d8ea41d99fe32f6ce6d5624ec3c8ee410ba6f0d178

브라우저 제어하는데 사용된 파일 단 하나, 23.2KB