# 설정 - 페이지네이션 템플릿

## 페이지네이션 템플릿이란?

<figure><img src="/files/2i0gBxG0ZaqldvJlvhUd" alt=""><figcaption></figcaption></figure>

* 마우스, 키보드 동작을 재현할 수 있는 기능입니다.
* 사용자가 몇 개의 값만 설정하면, 모든 사이트에서 동작합니다.
* 계속해서 새로운 템플릿이 추가될 예정입니다.

{% hint style="success" %}

## 페이지네이션이란?

다음 페이지의 데이터를 불러오는 가장 대표적인 방법입니다. 숫자(혹은 문자)로 표시된 페이지 버튼들로 구성되어있으며, 다음 페이지로 이동하기 위해 숫자 혹은 특정 버튼을 클릭하는 방식입니다.

각 페이지마다 독립된 URL로 바로 접근할 수 있다면 [**그룹추출**](/docs/ko/getting-started/result-page-features/group-extraction.md) 기능을 활용하시면 됩니다. 그러나,

<mark style="color:red;">**1. 페이지를 이동해도 URL이 변하지 않는 경우**</mark>&#x20;

<mark style="color:red;">**2. 특정 페이지의 URL로 접근해도 첫 번째 페이지로 자동 이동하는 경우**</mark>&#x20;

위와 같은 환경에서는 **페이지네이션 템플릿**으로 문제를 해결해보세요 🙂
{% endhint %}

{% hint style="warning" %}
페이지네이션 템플릿은 개별 태스크에 적용할 수 있는 설정으로, **개별 태스크에는 약 10분의 수집 시간 제한**이 있습니다. \
이 제한 때문에 입력한 페이지의 양이 너무 많을 경우 중간까지만 추출될 수 있습니다. 또한 페이지네이션으로 수집시간 내 추출이 가능한 페이지의 개수는 페이지당 포함된 데이터 양에 따라 차이가 발생합니다.

* 예를 들어, 이미지가 많이 포함된 A 사이트에서는 실행시간 내에 24페이지까지만 추출되었습니다.
* 반대로 텍스트 위주의 B 사이트에서는 110페이지까지도 정상적으로 추출되었습니다.

즉, 페이지당 데이터 용량과 구조에 따라 추출 가능한 범위가 달라진다는 점을 꼭 참고하세요. 보통은 100페이지 내외의 규모라면 페이지네이션 템플릿을 활용하기 적합합니다.

[**Q. 수집시간 10분 제한은 왜 있나요?**](/docs/ko/support/faq/features/10.md)
{% endhint %}

***

## 사용방법&#x20;

{% stepper %}
{% step %}

### 페이지네이션 타입 확인하기

아래의 타입 분류를 참고하여 추출하고자 하는 웹페이지의 페이지네이션 성격을 확인해주세요.

화살표(▶️)나 ‘다음’ ‘Next’ 등으로 표현되는 ‘다음페이지로 이동’ 버튼의 존재 유무와 해당 버튼 클릭 시 페이지가 어떻게 이동하는지를 확인해보시면 됩니다. 디자인이 아닌 기능으로 확인하세요!

***

<div align="left"><figure><img src="/files/ihw7t0uhb9o4WJSt4qJn" alt=""><figcaption></figcaption></figure></div>

TYPE 1. 클릭 시 **바로 다음 페이지로 이동(1→2)하는 버튼 존재**&#x20;

<div align="left"><figure><img src="/files/JmrL0OGaODbrcSyzvfCK" alt=""><figcaption></figcaption></figure></div>

TYPE 2. 클릭 시 바로 다음 페이지로 이동하는 버튼이 **없고**, **다음 그룹으로(1→N) 이동** 버튼만 존재

<div align="left"><figure><img src="/files/tUhAzMyBVZYrNfR7Saxt" alt=""><figcaption></figcaption></figure></div>

TYPE 3. **페이지 넘버 외**에는 다음 페이지나 그룹으로 이동하는 버튼 부재&#x20;

<div align="left"><figure><img src="/files/NfvDahwFRwSUIDCzwU8x" alt=""><figcaption></figcaption></figure></div>

TYPE 4. 페이지 넘버 없이 **이전/다음 페이지로 이동하는 버튼만** 존재

***

**A 쇼핑 사이트를 예제로 단계를 확인해보겠습니다.**

<figure><img src="/files/uqpmpXnkqlbTIhDCTtp4" alt=""><figcaption></figcaption></figure>

페이지 하단의 페이지네이션에서 ‘다음’ 버튼을 클릭하니 1페이지에서 바로 11페이지로, 즉 다음 그룹으로 이동했습니다. 이 페이지는 위의 항목 중 <mark style="background-color:$success;">**TYPE 2**</mark>에 해당한다는 것을 파악할 수 있습니다.
{% endstep %}

{% step %}

### 첫 번째 페이지 추출하기

<figure><img src="/files/Zp1bt510Tqyk8xtfIxpD" alt=""><figcaption></figcaption></figure>

페이지네이션이 시작되는 1페이지를 추출해주세요.

{% hint style="success" %}
**여기서 한가지 팁!** 전체(WHOLE) / 부분(PART) 둘 중 어느 버튼을 선택해도 무방하나 여러 페이지를 한번에 추출할 경우 **‘부분(PART)**’을 선택하는 것이 정확도를 더 높일 수 있습니다. 🙂
{% endhint %}

{% endstep %}

{% step %}

### 작업 설정으로 이동하기&#x20;

<figure><img src="/files/RZ3GKaFHalAZi8k8RCvR" alt=""><figcaption></figcaption></figure>

결과 페이지에서 추출된 데이터를 확인합니다. A사이트의 한 페이지에는 80개의 데이터가 존재하고 있어요. 상단의 Browser Settings를 클릭하여 해당 태스크의 설정창으로 이동해주세요.&#x20;

{% endstep %}

{% step %}

### 템플릿 설정하기&#x20;

<figure><img src="/files/Vs3MUsDzfjqIE9G1o5RO" alt=""><figcaption></figcaption></figure>

<mark style="background-color:$success;">**A) 액션템플릿 추가**</mark> 설정의 가장 하단에 **ACTION TEMPLATE**에서 **+ADD** 버튼을 클릭합니다. \
해당 설정의 표현 및 디자인은 추후 변경될 수 있으나 적용 방식은 동일합니다.

<figure><img src="/files/YGMRht4IxPcmhtEwFlc2" alt=""><figcaption></figcaption></figure>

<mark style="background-color:$success;">**B) 페이지네이션 타입 선택**</mark> 1번 설명을 참고하여 적용할 템플릿을 선택합니다. A사이트의 케이스는 <mark style="background-color:red;">**Pagination Type2**</mark>였습니다.

<figure><img src="/files/E1HnW6bP4jreCE7iGDgk" alt=""><figcaption></figcaption></figure>

<mark style="background-color:$success;">**C) 변수입력**</mark> 이미지의 <mark style="background-color:red;">**①**</mark>**,&#x20;**<mark style="background-color:purple;">**②**</mark>**,&#x20;**<mark style="background-color:yellow;">**③**</mark>항목을 채워넣습니다.

<mark style="background-color:red;">**① 해당 템플릿의 액션을 몇 번 반복할 것인가**</mark>  5를 입력할경우 다음 페이지로 이동하는 동작을 5회 반복하기때문에 6페이지까지 추출이 됩니다. 만약 10페이지까지 추출하고 싶다면 9를 입력하시면 됩니다.

<mark style="background-color:purple;">**② 현재 페이지 넘버의 CSS셀렉터 값**</mark>  이미지에 표시된 부분과 같이 웹사이트 페이지네이션의 ‘현재 페이지’ 번호를 마우스 우클릭하여 선택하고 [CSS셀렉터 복사&붙여넣기](/docs/ko/getting-started/listly-basics/css-selector.md#a1) ← 이 링크를 참고하여 해당 값을 입력합니다.

<mark style="background-color:yellow;">**③ ‘다음’ 버튼의 CSS셀렉터 값**</mark>  이미지에 표시된 부분과 같이 웹사이트 페이지네이션의 ‘다음’ 버튼을 마우스 우클릭하여 선택하고 [CSS셀렉터 복사&붙여넣기](https://app.gitbook.com/o/Uu6AM3fgpZza0EpsJM4N/s/iKxoYELFf9WS8XCvYe6S/getting-started/listly-basics/css#a1) ← 이 링크를 참고하여 해당 값을 입력합니다.

모든 항목을 다 입력하셨다면  <mark style="color:red;">**`추가(Add)`**</mark>  →  <mark style="color:red;">**`저장(Save)`**</mark> 버튼을 클릭하여 설정을 저장합니다.

**다른 페이지네이션 타입도 적용 방식은 동일합니다. 각 상황에 맞추어 페이지네이션 타입을 확인하고, CSS셀렉터 값을 복사, 붙여넣기하시면 됩니다.**

{% endstep %}

{% step %}

### 재추출 클릭 및 데이터 확인하기&#x20;

<figure><img src="/files/wnwm9oks2iGtdSkEPnZ2" alt=""><figcaption></figcaption></figure>

설정을 저장했다면 <mark style="color:red;">**반드시 재추출 버튼을 클릭**</mark>해 적용한 설정으로 다시 추출을 진행해주세요.

<figure><img src="/files/WYh33xXGqABVyTo31Wco" alt=""><figcaption></figcaption></figure>

각 페이지에서 80개씩, 총 6페이지의 480개의 데이터가 추출되었습니다.

템플릿을 이용해 여러 페이지에 나뉘어진 정보도 효율적으로 추출해보세요 😊&#x20;
{% endstep %}
{% endstepper %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.listly.io/docs/ko/getting-started/databoard-features/settings-pagination-templates.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.