자동클릭 설정하는 법 — 더 많은 데이터 불러오기 위해 클릭 반복

[초간단 따라하기]

  1. 언제 필요한가?
  2. 데이터 추출
  3. 자동클릭 설정 추가
  4. 자동클릭할 요소의 CSS Selector 입력
  5. 데이터 재추출(Refresh)
  6. 엑셀 파일 다운로드

1. 언제 필요한가?

아래 동영상을 확인해 보시죠. 만약 추출하려는 페이지에서 더 많은 상품 정보를 보기 위해 버튼을 계속 눌러야 한다면, 어떻게 하시겠습니까? Listly는 자동클릭 설정을 통해 원하는 요소의 클릭을 자동으로 반복할 수 있습니다.

2. 데이터 추출

먼저 데이터 추출을 해야 합니다. 원하는 페이지로 가서, LIST/Y WHOLE 또는 LIST/Y PART 중 하나를 실행합니다. (LIST/Y PART 를 사용하면 LIST/Y WHOLE 보다 훨씬 빠르고 정확한 결과를 얻을 수 있습니다)

이 글에서는 https://www.indiegogo.com/ 을 예제로 사용합니다. 해당 페이지에 처음 방문하면 총 12개의 상품 목록들이 나타납니다.

3. 자동클릭 설정 추가

Databoard로 이동합니다. 그리고 설정(Setting) 아이콘을 클릭합니다.

이제 자동클릭한 요소들에 대한 정보를 입력합니다. 먼저, 자동으로 클릭할 요소의 CSS Selector 를 적습니다. 그리고 다음의 옵션들을 선택합니다.

  • 반복할 횟수: 클릭을 몇 번 반복할 것인가?
  • 클릭 후 대기: 클릭할 때마다 몇 초씩 잠시 대기할 것인가?

혹시 CSS Selector가 무엇인지 모르신다면, 다음 지시 사항 (4. 자동클릭할 요소의 CSS Selector … ) 을 따라하십시오.

4. 자동클릭할 요소의 CSS Selector 입력

“CSS Selector란?”
웹 문서 안에 있는 HTML 요소들의 위치를 나타내는 문자 표현입니다. 버튼, 이미지, 텍스트, 아이콘, 그리고 영역과 같은 모든 요소들 CSS Selector 로 선택할 수 있습니다.

CSS Selector 를 찾는 방법은 매우 간단합니다. (이 방법은 크롬, 파이어폭스, 사파리, 엣지 등 모든 브라우저에서 가능합니다.)

1) 클릭할 요소 위로 마우스를 가져갑니다.

2) 그 상태로 오른쪽 클릭 → 검사 (요소검사, Inspect)를 클릭

3) 오른쪽에 패널이 나타납니다. 그 안에 클릭할 요소의 HTML 소스가 있습니다. 그 HTML 소스 위로 마우스를 가져갑니다.

4) 그 상태로 오른쪽 클릭 → Copy → Copy Selector 클릭

이제 다시 자동클릭 설정 화면으로 돌아가서, 복사한 CSS Selector 를 입력란에 붙여넣습니다. 그리고 OK 버튼 클릭.

5. 데이터 재추출(Refresh)

이제 거의 끝났습니다. 자동클릭 설정이 적용된 상태로 데이터를 다시 추출합니다. 데이터 재추출(Refresh) 아이콘을 클릭.

6. 엑셀 파일 다운로드

추출 작업이 완료되면, 결과를 확인해 봅시다. 총 72 개의 카드가 추출된 것을 볼 수 있습니다. 우리가 처음 자동클릭 설정없이 데이터를 추출하였을 때는 총 12개의 카드만 있었습니다. 예제 페이지(Indiegogo.com)는 처음에 12개의 상품 정보를 보여주고, “SHOW MORE” 버튼을 누를 때마다 추가로 12개의 카드를 더 보여줍니다.

  • 12 개의 카드 (처음) + 5 회 클릭 반복 (설정값) x 12 개의 추가 카드 (클릭당) = 총 72개의 카드

다음은 또 다른 예제(TechCrunch.com)을 이용한 데모 영상입니다.