데이터 탐색 용어집

일반적으로 웹 브라우저에서 데이터를 탐색할 때 다양한 요소들을 만나게 됩니다. 원하는 데이터에 접근하기까지 어떤 요소들을 통과해야 하는지 확인하고, 그에 맞는 템플릿을 찾는데 활용해보세요 :)

INDEX

1. 웹 브라우저 & 웹사이트 구성

① 주소표시줄

주소표시줄은 현재 위치를 나타내는 URL(주소)이 표시되는 입력란입니다. 보통 창 윗부분에 위치해 있으며, 대부분의 웹페이지에서 창이 이동할 때 마다 URL이 변경됩니다.

② 확장프로그램 (Extensions)

크롬(Chrome), 엣지(Edge), 웨일(Whale)과 같은 웹 브라우저에서는 기능을 추가하는 확장프로그램을 설치할 수 있습니다. 리스틀리또한 웹 브라우저를 통해 표시되는 웹페이지 속 데이터를 추출해내는 기능을 가진 확장 프로그램입니다. 브라우저에 추가되는 확장프로그램은 사용자가 별도로 설치를 진행해야하며, 설치된 확장프로그램들은 아이콘의 형태로 오른쪽 상단에 위치하게됩니다.

③ 헤더 (Header)

페이지 상단의 구간을 말합니다. 주로 로고를 중심으로 메뉴(내비게이션)와 검색창 등이 위치해있습니다.

④ 섹션 (Section)

웹 문서의 콘텐츠 영역을 말합니다. 웹페이지 속 대부분의 데이터가 이 영역 안에 속해있습니다.

⑤ 사이드 (Aside)

웹 문서에서 왼쪽이나 오른쪽 또는 하단에 표시되는 사이드 영역으로, aside 구간은 필수 구성요소가 아닙니다. 광고나 일반적인 링크 모음처럼 문서의 메인 내용에 영향을 미치지 않는 내용을 넣을때 사용합니다.

⑥ 아이프레임 (iframe)

웹 문서 안에 다른 외부 문서를 불러와 보여주는 방식입니다. 육안으로 바로 구분할 수 없으나, 데이터 추출을 위해 리스틀리 아이콘을 클릭했을 때 검게 표시되어 인식할 수 있습니다. 별도의 추출과정이 필요한 구간입니다.

⑦ 푸터 (Footer)

웹 문서 하단의 저작권 표시, 사이트 이용정책, 사이트맵, 연락처 정보 등을 표시하는 위치입니다. 웹 페이지를 이동해도 표시되는 정보가 바뀌지 않으며, 경우에 따라 푸터가 보이지 않는 웹페이지도 있습니다.

2. 마우스 동작

① 클릭

화면상의 어떤 객체를 선택하기 위해 버튼을 누르는 동작. 왼쪽 버튼을 누르는 것을 클릭, 오른쪽 버튼을 누르는 것을 우클릭이라고 합니다. 일반적인 정보는 클릭을 통해 접근하며, 특정 버튼의 소스 코드 등 보이지 않는 속성을 확인하기 위해서는 우클릭을 사용합니다.

② 스크롤

마우스의 휠을 아래 위로 굴리는 동작을 말합니다. 이 문서 내에서는 휠을 아래쪽으로 굴리는 것(Scroll-down)만 언급됩니다.

③ 롤오버, 마우스오버

객체 위에 마우스 포인터를 올리면 표시되는 이미지가 바뀌거나 새로운 텍스트 정보가 나타는 효과를 말합니다. 클릭하지 않아도 작동합니다.

3. 정보 불러오기(Load) 방식

① 무한 스크롤

준비된 정보의 끝에 다다랐을 때 다음 정보를 불러오는 방식의 정보 로드 방식입니다. 스크롤을 아무리 내려도 다음 페이지로 이동하는 버튼이나 페이지 번호가 보이지 않는 경우, 무한스크롤 방식으로 정보를 불러오는 사이트임을 알 수 있습니다.

⚠️ 이와 같은 웹페이지에서 스크롤을 하지 않은채로 추출을 진행하면 정보를 불러오지 못한 상태이기 때문에 충분한 데이터가 추출되지 않습니다. 리스틀리 데이터보드의 ‘Setting’에서 자동 스크롤 설정을 통해 데이터를 더욱 편리하게 추출할 수 있습니다.

② 더보기 버튼

‘더보기 버튼’은 추가로 정보를 로드할 때 하단의 버튼을 클릭하는 방식입니다. 이러한 페이지에서 데이터를 추출할 때에는 리스틀리 데이터보드의 ‘Setting’ 의 자동클릭 설정에서 더보기 버튼이 가지고 있는 고유 속성값을 입력하여 자동으로 데이터를 불러올 수 있습니다.

③ 페이지네이션 (Pagination)

‘페이지네이션’이란 새로운 항목을 로드하기 위해 가장 많이 사용하는 방법입니다. 정보목록의 하단에 숫자로 표시된 페이지 버튼이 구성되어있고, 다음 페이지로 이동하기 위해 숫자 혹은 화살표 버튼을 클릭하는 방식입니다.

페이지네이션은 크게 두 가지 종류로 나뉘어집니다.

A. 고정형(Static Type) : 숫자 목록의 위치가 고정되어 있는 형태로, 제시된 숫자들의 그룹단위로 페이지를 이동할 수 있습니다.

B. 이동형(Dynamic Type) : 현재 페이지가 항상 숫자목록 중앙으로 위치하게되는 형태입니다. 페이지를 이동할 때마다 숫자 목록이 한칸씩 옆으로 이동합니다.

위 두가지 페이지네이션 방식에 따라 각 웹페이지의 연속 추출을 위해 사용해야하는 액션 템플릿이 달라지므로, 탐색중인 웹페이지의 페이지네이션 방식을 체크해보세요 🙂

4. UI 컴포넌트

① 버튼 (Button)

작업을 수행하기 위해 클릭하는 가장 일반적인 요소입니다. 디자인은 매우 다양합니다.

② 토글 (Toggle) / 스위치 (Switches)

On/Off와 같이 어떤 설정을 켜거나 끌 때, 혹은 두 가지 옵션 사항 중 한 가지만 선택할 때 쓰입니다.

③ 라디오 버튼 (Radio Button)

여러개의 요소 중 단 한개의 항목만 선택할 수 있는 버튼입니다.

④ 체크박스 (Checkbox)

동시에 여러 항목을 선택할 수 있는 요소입니다.

⑤ 스텝퍼, 스피너 (Stepper, Spinner)

대표적인 숫자 입력 UI요소입니다. 위 아래(혹은 좌우) 버튼으로 수치 변경이 가능한 것이 특징이며, 숫자를 직접 입력하는 형태도 있습니다.

쇼핑몰에서 옵션을 표시할 때 가장 많이 채택하는 방식입니다. 박스의 화살표 버튼을 누르면 숨어있던 다른 항목들이 나타나며, 항목을 선택하거나 드롭다운 리스트 외부를 클릭하면 항목이 닫힙니다.

⑦ 링크 (Link)

클릭하면 현재 페이지의 다른 부분, 혹은 전혀 다른 페이지로 이동하게 해주는 텍스트, 이미지, 아이콘 등을 말합니다. 대부분의 링크는 문서 내에서 밑줄이 그어져있거나 나머지 부분과 다른 색으로 표시됩니다.

⑧ 캘린더 (Calendar) / 데이트 피커(Date Pickers)

날짜 또는 날짜 범위를 선택하는 UI요소입니다.

5. 메뉴

메뉴란 콘텐츠를 카테고리별로 분류하는 가장 대표적인 방식으로, 웹페이지 안의 위치나 제시 방식에 따라 명칭을 분류하고있습니다.

웹페이지에 표시되는 하이퍼링크들의 집합 영역을 말합니다. 쉽게말해 웹사이트에서 항상 표시되는 메뉴로 ‘탑메뉴’, ‘메인메뉴’라고도 불립니다. 주로 웹사이트의 상단 혹은 좌측에 고정으로 위치합니다.

서브메뉴라고도 불리며 웹사이트의 좌측에 주로 위치합니다. 위치는 고정되어 제공되나 항목은 진입하는 메뉴에 따라 다르게 제공됩니다.

③ 탭 (Tab)

사용자가 클릭하면 아래나 옆의 영역에 관련 내용의 페이지가 열리는 버튼입니다. 보통 문서 파일 폴더의 탭처럼 생겼으며, 여러 탭이 일렬로 있습니다.

사용자가 현재 선택한 항목에 관한 메뉴를 팝업 형식으로 제공하는 것을 말합니다. 특정 요소를 클릭 혹은 우클릭했을 때 호출됩니다.

6. 중첩 페이지

사용자의 진행을 잠시 멈추도록 등장하는 창을 말합니다. 현재 열려있는 브라우저 페이지에 또 다른 브라우저 페이지가 뜨는 방식으로, 보통 공지사항이나 프로모션, 안내문 등을 소개하기 위해 등장합니다. 사용자의 의도나 목적과 상관없이 등장하는 경우가 많습니다.

팝업창의 경우 브라우저의 옵션을 통해 열지 않도록 강제할 수 있습니다.

모달창은 기존의 브라우저 페이지 위에 새로운 윈도우창이 아닌 레이어를 까는 것을 말합니다. 굳이 모달창에서 닫기 버튼을 클릭하지 않아도 페이지를 이동하거나, 주위 영역을 클릭하면 사라집니다. 보통 사용자의 특정 행동에 의해 등장합니다.

PreviousAbout Listly Next리스틀리 공식 블로그

Last updated 16 days ago

Was this helpful?

데이터 탐색 용어집