> ## Content Index > Fetch the complete content index at: https://sudormrf.run/llms.txt > Use this file to discover other available public pages before exploring further. # Web-scraping with Chrome extension - URL: https://sudormrf.run/2016/11/15/web-scraping-with-chrome-extension/ - Published: 2016-11-15T07:47:54.000Z - Updated: 2016-11-15T07:47:54.000Z - Author: Junho Cho - Tags: dev, scraping, #Import 2026-10-24 03:36 Crawling, Scraping 비슷한 뜻이며 내가 원하는 데이터를 웹에서 수집함을 의미한다. [Design Seeds](https://www.design-seeds.com/?ref=sudormrf.run) 라는 웹사이트를 연구의 목적으로 크롤링을 했다. 이 웹사이트는 색감에서 영감을 받아, 아름다운 이미지에서 주요 색상을 color palette로 나타내준다. *실제 해결한 방법은 *해결* 이란 아래 헤더를 참고* ![](https://www.dropbox.com/s/uza1mz61itf2y4i/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7%202016-11-15%2016.43.31.png?raw=1) 이 웹사이트를 크롤링하기 위해 가장 먼저 생각한 방법은 [이 웹사이트의 Instagram 계정](https://www.instagram.com/designseeds/?ref=sudormrf.run) 크롤링이다. 허나 이 방법은 Instagram API를 사용하여야했다. 그래서 Instagram Developer에 앱을 등록하고 client-id, client-secret 등을 통해서 access-token 까지 얻었지만, 방법이 복잡하고 사용했던 [python code](https://github.com/facebookarchive/python-instagram?ref=sudormrf.run)가 유지보수가 안되어있다. 이 [blog post](https://gilynh.com/archives/414?ref=sudormrf.run)를 통해서 access-token을 얻었다. 무엇보다도 내가 직접 웹사이트를 크롤링하는 것이 아니어서 포기했다. 그 다음은 웹사이트의 pinterest를 크롤링하는 것인데, 이 방법은 Chrome의 Extention에서 [PinDown](https://chrome.google.com/webstore/detail/pindown-free/hojoabneemdhaakgfkmiaeafjjlcaebp?ref=sudormrf.run)이라는 앱을 사용했다. 그리고 design seeds, palette 검색의로 나오는 핀들을 다운받아봤는데 속도도 빠르고 좋은데 무료버전은 갯수 제한이 있다. 유료 버전 결제를 하려했는데 리뷰를 보니 버그가 있는 것 같아서 접었다. ## 해결 다음으로는 크롬 extention에서 [Web scraper](http://webscraper.io/?ref=sudormrf.run)를 사용해서 웹사이트를 직접 크롤링해 보았다. 생각보다 사용법을 자세히 설명해놓았고 이해가 쉽다. [Youtube : Web Scraper Intro](https://www.youtube.com/watch?v=y00t5NpW7pY&ref=sudormrf.run). [pagination](https://www.youtube.com/watch?v=y%5Fn2IsZlLds&ref=sudormrf.run) 두개만 참고해서 웹사이트 크롤링에 성공하였다.[\[1\]](#fn1) 생각보다 웹사이트 크롤링이 매우 쉬워서 놀랐다. 나는 Python script로 일일이 요소검사해서 crawling해야 할줄 알았는데 편리한 chrome extention으로 수고를 아주 쉽게 덜었다. 또한 Chrome을 사용하므로 어떤 OS를 사용하던 상관없다. ```json {"startUrl":"https://www.design-seeds.com/blog/","selectors":[{"parentSelectors":["_root","nextpage"],"type":"SelectorLink","multiple":true,"id":"nextpage","selector":"div.nav-previous a","delay":""},{"parentSelectors":["_root","nextpage"],"type":"SelectorElement","multiple":true,"id":"element","selector":"article.parker-posts","delay":""},{"parentSelectors":["element"],"type":"SelectorText","multiple":false,"id":"collection_name","selector":"h4.entry-meta a","regex":"","delay":""},{"parentSelectors":["element"],"type":"SelectorImage","multiple":false,"id":"img_url","selector":"img.attachment-full","downloadImage":false,"delay":""},{"parentSelectors":["element"],"type":"SelectorText","multiple":false,"id":"title","selector":"h1.entry-title a","regex":"","delay":""},{"parentSelectors":["element"],"type":"SelectorText","multiple":false,"id":"date","selector":"time.entry-date","regex":"","delay":""},{"parentSelectors":["element"],"type":"SelectorText","multiple":false,"id":"owner","selector":"p a","regex":"","delay":""}],"_id":"designseeds"} ``` 위 스크립트를 직접 코딩하는 방식이 아니고 graph를 만들어서 필요한 요소를 클릭하고 node끼리 연결만 해주면 되니까 매우 쉽다. 생각보다 크롤링이 쉬워지면서 연구에 필요한 user data를 쉽게 취득할 방법을 알아내서 계속 도움이 많이 될 것 같다. 결과를 csv로 다운링크를 걸어주므로 다운받으면 끝. 그리고 간단한 python, shell script로 image들을 다 받을 수 있었다. --- --- 1. (영상 설명도 쉽게 잘해서 난 좋았는데 음향이 작고 뭔소린지 모르겠다는 유투브 댓글이 많았다. 이정도면 감사히 받아먹어야지.) [↩︎](#fnref1)