네이버 검색 플러그인 Naver Search Plugin

중요 공지

“버블박스”가 “노코더스”라는 이름으로 변경됐어요

현재 사이트는 더 이상 운영하지 않으니 노코더스 사이트로 이동해주세요

노코더스 ㅣ 노코드 툴, 버블 시작하기

개발 없이 나만의 서비스를 만드는 방법! 노코드 툴, 버블을 노코더스에서 차근차근 시작하세요.

https://nocoders.kr/

한 줄 요약

네이버 API를 활용해 네이버 검색 결과를 호출하는 플러그인입니다.

컨택 및 제안

bubbleboxerofficial@gmail.com

노코드 마스터로 거듭나기

버블박스를 운영하는 페임리가 궁금하다면? If you're curious about FameLee?

페임리 알아보기 (Who is Famelee?)

인스타 팔로우하기 (Follow Instagram)

Intro

1. ChangeLog

1.0.0

•

네이버 블로그 데이터 검색

•

네이버 뉴스 데이터 검색

•

네이버 책 데이터 검색

•

네이버 백과사전 데이터 검색

•

네이버 카페글 데이터 검색

•

네이버 지식IN 데이터 검색

•

네이버 지역 데이터 검색

•

네이버 웹문서 데이터 검색

•

네이버 이미지 데이터 검색

•

네이버 쇼핑 데이터 검색

•

네이버 전문자료 데이터 검색

Core

1. Instruction

해당 플러그인을 사용하려면, 네이버 API가 필요합니다. 아래의 [튜토리얼] 섹션에서 확인할 수 있습니다,

2. Related Docu

플러그인 페이지

Bubble plugins

See all the plugins in the Bubble Ecosystem. Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

https://bubble.io/plugin/naver-search-네이버-검색-1712840499660x340847694745436160

데모 링크

Bubble - Visual Programming

Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

https://bubblebox-64217.bubbleapps.io/version-test/plugin_naver_search

에디터 링크

Bubble Editor - bubblebox

Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

https://bubble.io/page?type=page&name=plugin_naver_search&id=bubblebox-64217&tab=tabs-1

3. Naver search

유저가 액션 이벤트를 실행시키면 특정 유형의 네이버 검색 데이터를 불러옵니다.

검색 대상에 따라서 추가 입력 변수(ex. sort, filter, exclude)가 있을 수 있습니다.

또한, 검색 대상에 따라서 반환되는 데이터 타입이 다릅니다.

블로그 검색

Input

field	type	Required	설명
query	str		검색어를 입력합니다.
display	Int		한 번에 표시할 검색 결과를 입력합니다. 최대값은 100입니다.
start	Int		검색 시작 위치를 입력합니다. 최대값은 100입니다.
sort	str		검색 결과 정렬 방식을 선택합니다. - sim : 정확도순으로 내림차순 - date : 날짜순으로 내림차순

return

•

type : 블로그 검색

field	type	설명
lastBuildDate	date	검색 결과를 생성한 시간
total	Int	총 검색 결과 개수
start	Int	검색 시작 위치
display	int	한 번에 표시할 검색 결과 개수
items	list of 검색 item	오브젝트 형식으로 표현된 개별 검색 결과의 리스트

•

type : 블로그 검색 item

field	type	설명
title	str	블로그 포스트의 제목. 제목에서 검색어와 일치하는 부분은 <b> 태그로 감싸져 있습니다.
link	str	블로그 포스트의 URL
description	str	블로그 포스트의 내용을 요약한 패시지 정보. 패시지 정보에서 검색어와 일치하는 부분은 <b> 태그로 감싸져 있습니다.
bloggername	str	블로그 포스트가 있는 블로그의 이름
bloggerlink	str	블로그 포스트가 있는 블로그의 주소
postdate	str	블로그 포스트가 작성된 날짜

뉴스 검색

Input

field	type	Required	설명
query	str		검색어를 입력합니다.
display	Int		한 번에 표시할 검색 결과를 입력합니다. 최대값은 100입니다.
start	Int		검색 시작 위치를 입력합니다. 최대값은 100입니다.
sort	str		검색 결과 정렬 방식을 선택합니다. - sim : 정확도순으로 내림차순 - date : 날짜순으로 내림차순

return

•

type : 뉴스 검색

field	type	설명
lastBuildDate	date	검색 결과를 생성한 시간
total	Int	총 검색 결과 개수
start	Int	검색 시작 위치
display	int	한 번에 표시할 검색 결과 개수
items	list of 검색 item	오브젝트 형식으로 표현된 개별 검색 결과의 리스트

•

type : 뉴스 검색 item

field	type	설명
title	str	뉴스 기사의 제목. 제목에서 검색어와 일치하는 부분은 <b> 태그로 감싸져 있습니다.
link	str	뉴스 기사의 네이버 뉴스 URL. 네이버에 제공되지 않은 기사라면 기사 원문의 URL을 반환합니다.
originallink	str	뉴스 기사 원문의 URL
description	str	뉴스 기사의 내용을 요약한 패시지 정보. 패시지 정보에서 검색어와 일치하는 부분은 <b> 태그로 감싸져 있습니다.
pubDate	date	뉴스 기사가 네이버에 제공된 시간. 네이버에 제공되지 않은 기사라면 기사 원문이 제공된 시간을 반환합니다.

책 검색

Input

field	type	Required	설명
query	str		검색어를 입력합니다.
display	Int		한 번에 표시할 검색 결과를 입력합니다. 최대값은 100입니다.
start	Int		검색 시작 위치를 입력합니다. 최대값은 100입니다.
sort	str		검색 결과 정렬 방식을 선택합니다. - sim : 정확도순으로 내림차순 - date : 날짜순으로 내림차순

return

•

type : 책 검색

field	type	설명
lastBuildDate	date	검색 결과를 생성한 시간
total	Int	총 검색 결과 개수
start	Int	검색 시작 위치
display	int	한 번에 표시할 검색 결과 개수
items	list of 검색 item	오브젝트 형식으로 표현된 개별 검색 결과의 리스트

return

•

type : 책 검색 item

field	type	설명
title	str	책 제목
link	str	네이버 도서 정보 URL
image	str	섬네일 이미지의 URL
author	str	저자 이름
discount	int	판매 가격. 절판 등의 이유로 가격이 없으면 값을 반환하지 않습니다.
publisher	str	출판사
isbn	int	ISBN
description	str	네이버 도서의 책 소개
pubdate	str	출간일

백과사전 검색

Input

field	type	Required	설명
query	str		검색어를 입력합니다.
display	Int		한 번에 표시할 검색 결과를 입력합니다. 최대값은 100입니다.
start	Int		검색 시작 위치를 입력합니다. 최대값은 100입니다.

return

•

type : 백과사전 검색

field	type	설명
lastBuildDate	date	검색 결과를 생성한 시간
total	Int	총 검색 결과 개수
start	Int	검색 시작 위치
display	int	한 번에 표시할 검색 결과 개수
items	list of 검색 item	오브젝트 형식으로 표현된 개별 검색 결과의 리스트

•

type : 백과사전 검색 item

field	type	설명
title	str	백과사전 표제어. 표제어에서 검색어와 일치하는 부분은 <b> 태그로 감싸져 있습니다.
link	str	백과사전 항목 설명의 URL
description	str	백과사전 항목 설명의 내용을 요약한 패시지 정보. 패시지 정보에서 검색어와 일치하는 부분은 <b> 태그로 감싸져 있습니다.
thumbnail	str	섬네일 이미지 URL

☕️ 카페글 검색

Input

field	type	Required	설명
query	str		검색어를 입력합니다.
display	Int		한 번에 표시할 검색 결과를 입력합니다. 최대값은 100입니다.
start	Int		검색 시작 위치를 입력합니다. 최대값은 100입니다.
sort	str		검색 결과 정렬 방식을 선택합니다. - sim : 정확도순으로 내림차순 - date : 날짜순으로 내림차순

return

•

type : 카페글 검색

field	type	설명
lastBuildDate	date	검색 결과를 생성한 시간
total	Int	총 검색 결과 개수
start	Int	검색 시작 위치
display	int	한 번에 표시할 검색 결과 개수
items	list of 검색 item	오브젝트 형식으로 표현된 개별 검색 결과의 리스트

•

type : 카페글 검색 item

field	type	설명
title	str	카페 게시글 제목. 제목에서 검색어와 일치하는 부분은 <b> 태그로 감싸져 있습니다.
link	str	카페 게시글 URL
description	str	카페 게시글의 내용을 요약한 패시지 정보. 패시지 정보에서 검색어와 일치하는 부분은 <b> 태그로 감싸져 있습니다.
cafename	str	게시글이 있는 카페의 이름
cafeurl	str	게시글이 있는 카페의 URL

지식IN 검색

Input

field	type	Required	설명
query	str		검색어를 입력합니다.
display	Int		한 번에 표시할 검색 결과를 입력합니다. 최대값은 100입니다.
start	Int		검색 시작 위치를 입력합니다. 최대값은 100입니다.
sort	str		검색 결과 정렬 방식을 선택합니다. - sim : 정확도순으로 내림차순 - date : 날짜순으로 내림차순

return

•

type : 지식IN 검색

field	type	설명
lastBuildDate	date	검색 결과를 생성한 시간
total	Int	총 검색 결과 개수
start	Int	검색 시작 위치
display	int	한 번에 표시할 검색 결과 개수
items	list of 검색 item	오브젝트 형식으로 표현된 개별 검색 결과의 리스트

•

type : 지식IN 검색 item

field	type	설명
title	str	카페 게시글 제목. 제목에서 검색어와 일치하는 부분은 <b> 태그로 감싸져 있습니다.
link	str	카페 게시글 URL
description	str	카페 게시글의 내용을 요약한 패시지 정보. 패시지 정보에서 검색어와 일치하는 부분은 <b> 태그로 감싸져 있습니다.

지역 검색

Input

field	type	Required	설명
query	str		검색어를 입력합니다.
display	Int		한 번에 표시할 검색 결과를 입력합니다. 최대값은 100입니다.
start	Int		검색 시작 위치를 입력합니다. 최대값은 100입니다.
sort	str		검색 결과 정렬 방식을 선택합니다. - sim : 정확도순으로 내림차순 - date : 날짜순으로 내림차순

return

•

type : 지역 검색

field	type	설명
lastBuildDate	date	검색 결과를 생성한 시간
total	Int	총 검색 결과 개수
start	Int	검색 시작 위치
display	int	한 번에 표시할 검색 결과 개수
items	list of 검색 item	오브젝트 형식으로 표현된 개별 검색 결과의 리스트

•

type : 지역 검색 item

field	type	설명
title	str	업체, 기관의 이름
link	str	업체, 기관의 상세 정보 URL
category	str	업체, 기관의 분류 정보
description	str	업체, 기관에 대한 설명
telephone	str	값을 반환하지 않는 요소. 하위 호환성을 유지하기 위해 있는 요소입니다.
address	str	업체, 기관명의 지번 주소
roadAddress	str	업체, 기관명의 도로명 주소
mapx	int	업체, 기관이 위치한 장소의 x 좌표(KATECH 좌표계 기준). 네이버 지도 API에서 사용할 수 있습니다.
mapy	int	업체, 기관이 위치한 장소의 y 좌표(KATECH 좌표계 기준). 네이버 지도 API에서 사용할 수 있습니다.

웹 문서 검색

Input

field	type	Required	설명
query	str		검색어를 입력합니다.
display	Int		한 번에 표시할 검색 결과를 입력합니다. 최대값은 100입니다.
start	Int		검색 시작 위치를 입력합니다. 최대값은 100입니다.

return

•

type : 웹 문서 검색

field	type	설명
lastBuildDate	date	검색 결과를 생성한 시간
total	Int	총 검색 결과 개수
start	Int	검색 시작 위치
display	int	한 번에 표시할 검색 결과 개수
items	list of 검색 item	오브젝트 형식으로 표현된 개별 검색 결과의 리스트

•

type : 웹 문서 검색 item

field	type	설명
title	str	웹 문서의 제목. 제목에서 검색어와 일치하는 부분은 <b> 태그로 감싸져 있습니다.
link	str	웹 문서의 URL
description	str	웹 문서의 내용을 요약한 패시지 정보. 패시지 정보에서 검색어와 일치하는 부분은 <b> 태그로 감싸져 있습니다.

이미지 검색

Input

field	type	Required	설명
query	str		검색어를 입력합니다.
display	Int		한 번에 표시할 검색 결과를 입력합니다. 최대값은 100입니다.
start	Int		검색 시작 위치를 입력합니다. 최대값은 100입니다.
sort	str		검색 결과 정렬 방식을 선택합니다. - sim : 정확도순으로 내림차순 - date : 날짜순으로 내림차순
filter	str		크기별 검색 결과 필터를 입력합니다. - all: 모든 이미지(기본값) - large: 큰 이미지 - medium: 중간 크기 이미지 - small: 작은 크기 이미지

return

•

type : 이미지 검색

field	type	설명
lastBuildDate	date	검색 결과를 생성한 시간
total	Int	총 검색 결과 개수
start	Int	검색 시작 위치
display	int	한 번에 표시할 검색 결과 개수
items	list of 검색 item	오브젝트 형식으로 표현된 개별 검색 결과의 리스트

•

type : 이미지 검색 item

field	type	설명
title	str	이미지가 검색된 문서의 제목
link	str	이미지의 URL
thumbnail	str	섬네일 이미지의 URL
sizeheight	int	이미지의 세로 크기(단위: 픽셀)
sizewidth	int	이미지의 가로 크기(단위: 픽셀)

쇼핑 검색

Input

field	type	Required	설명
query	str		검색어를 입력합니다.
display	Int		한 번에 표시할 검색 결과를 입력합니다. 최대값은 100입니다.
start	Int		검색 시작 위치를 입력합니다. 최대값은 100입니다.
sort	str		검색 결과 정렬 방식을 선택합니다. - sim : 정확도순으로 내림차순 - date : 날짜순으로 내림차순
filter	str		검색 결과에 포함할 상품 유형을 입력합니다. - 설정 안 함: 모든 상품(기본값) - naverpay: 네이버페이 연동 상품
exclude	str		검색 결과에서 제외할 상품 유형을 입력합니다. {option}:{option}:{option} 형태로 설정합니다 (예: exclude=used:cbshop). - used: 중고 - rental: 렌탈 - cbshop: 해외직구, 구매대행

return

•

type : 쇼핑 검색

field	type	설명
lastBuildDate	date	검색 결과를 생성한 시간
total	Int	총 검색 결과 개수
start	Int	검색 시작 위치
display	int	한 번에 표시할 검색 결과 개수
items	list of 검색 item	오브젝트 형식으로 표현된 개별 검색 결과의 리스트

•

type : 쇼핑 검색 item

field	type	설명
title	str	상품 이름. 이름에서 검색어와 일치하는 부분은 <b> 태그로 감싸져 있습니다.
link	str	상품 정보 URL
image	str	섬네일 이미지의 URL
lprice	int	최저가. 최저가 정보가 없으면 0을 반환합니다. 가격 비교 데이터가 없으면 상품 가격을 의미합니다.
hprice	int	최고가. 최고가 정보가 없거나 가격 비교 데이터가 없으면 0을 반환합니다.
mallName	str	상품을 판매하는 쇼핑몰. 쇼핑몰 정보가 없으면 네이버를 반환합니다.
productId	int	네이버 쇼핑의 상품 ID
productType	int	상품군과 상품 종류에 따른 상품 타입. 상품군과 상품 종류에 따른 상품 타입은 상품군 타입의 표를 참고합니다.
maker	str	제조사
brand	str	브랜드
category1	str	상품의 카테고리(대분류)
category2	str	상품의 카테고리(중분류)
category3	str	상품의 카테고리(소분류)
category4	str	상품의 카테고리(세분류)

전문자료 검색

Input

field	type	Required	설명
query	str		검색어를 입력합니다.
display	Int		한 번에 표시할 검색 결과를 입력합니다. 최대값은 100입니다.
start	Int		검색 시작 위치를 입력합니다. 최대값은 100입니다.

return

•

type : 전문자료 검색

field	type	설명
lastBuildDate	date	검색 결과를 생성한 시간
total	Int	총 검색 결과 개수
start	Int	검색 시작 위치
display	int	한 번에 표시할 검색 결과 개수
items	list of 검색 item	오브젝트 형식으로 표현된 개별 검색 결과의 리스트

•

type : 전문자료 검색 item

field	type	설명
title	str	문서의 제목. 제목에서 검색어와 일치하는 부분은 <b> 태그로 감싸져 있습니다.
link	str	문서의 URL
description	str	문서의 내용을 요약한 패시지 정보. 패시지 정보에서 검색어와 일치하는 부분은 <b> 태그로 감싸져 있습니다.

4. get data from search API

[get data from external API] 오퍼레이터를 활용해 데이터를 자동으로 불러옵니다.

모든 설정 값은 [naver search] 액션과 동일합니다.

[Naver search]는 유저가 워크플로우를 작동시켜야지 작동이 됩니다.

반면에 [get data from search API]를 활용하면 워크플로우 없이도 데이터를 불러옵니다.

(ex. 페이지 실행 시, 데이터를 불러오기)

튜토리얼

1. 환경 설정하기

해당 플러그인은 네이버 API를 기반으로 합니다. 이를 사용하기 위해 아래 조건을 모두 준비해야 합니다.

네이버 어플리케이션 등록 및 검색 API 신청

웹 환경 등록

client Key와 secret Key 설정

네이버 어플리케이션 등록 및 shortURL API 신청

네이버 개발자 계정에 들어가 네이버 API 계정을 등록하고, 어플리케이션을 등록합니다.

NAVER Developers

네이버 오픈 API들을 활용해 개발자들이 다양한 애플리케이션을 개발할 수 있도록 API 가이드와 SDK를 제공합니다. 제공중인 오픈 API에는 네이버 로그인, 검색, 단축URL, 캡차를 비롯 기계번역, 음성인식, 음성합성 등이 있습니다.

https://developers.naver.com/main/

애플리케이션 등록 시, [사용 API]에 검색을 선택해야 합니다.

웹 환경 등록

생성한 애플리케이션을 클릭하고 [API 설정] 탭에 들어갑니다.

[비로그인 오픈 API 서비스 환경] 섹션에서 [WEB 설정]을 추가하고, 버블로 만든 서비스의 URL을 입력합니다.

client Key와 secret Key 발급

생성한 애플리케이션을 클릭하고 [개요] 탭에 들어가면, client Id와 client Secret 을 확인할 수 있습니다.

각각의 값을 버블 에디터의 [플러그인] 탭에서 입력합니다.

•

[Client ID] → [X-Naver-Client-id]

•

[Client Secret] → [X-Naver-Client-Secret]

2. 유저가 직접 데이터 불러오기 (a.k.a naver search)

유저가 버튼 클릭 등을 트리거로 검색 데이터를 호출할 수 있습니다. 이때, 검색 대상을 선택해야 합니다. 검색 대상은 아래와 같으며, 각 검색 대상별로 맞는 액션 이벤트를 사용해야 합니다. 예를 들어, 블로그 검색 데이터를 활용하고 싶다면, [naver search - 블로그 검색]을 선택합니다.

•

검색 대상 : 블로그  / 뉴스 / 책 / 백과사전 / 카페글 / 지식IN / 지역 / 웹문서 / 이미지 / 쇼핑 / 전문자료

블로그 검색 액션이 성공적으로 완료되면, [블로그 검색] 타입의 데이터가 반환됩니다. 해당 타입은 검색 결과에 대한 정보를 저장하고 있으며, 아래와 같은 필드로 구성됩니다.

field	type	설명
lastBuildDate	date	검색 결과를 생성한 시간
total	Int	총 검색 결과 개수
start	Int	검색 시작 위치
display	int	한 번에 표시할 검색 결과 개수
items	list of 검색 item	오브젝트 형식으로 표현된 개별 검색 결과의 리스트

검색을 통한 개별 데이터는 [블로그 검색] 타입의 [items] 필드에서 확인할 수 있습니다. [items] 필드는 [블로그 검색 item] 타입입니다. [블로그 검색 item]은 아래와 같은 필드로 구성됩니다. 검색 데이터를 활용할 경우, [블로그 검색] 타입이 아니라, [블로그 검색 item] 타입을 사용해야 합니다.

field	type	설명
title	str	블로그 포스트의 제목. 제목에서 검색어와 일치하는 부분은 <b> 태그로 감싸져 있습니다.
link	str	블로그 포스트의 URL
description	str	블로그 포스트의 내용을 요약한 패시지 정보. 패시지 정보에서 검색어와 일치하는 부분은 <b> 태그로 감싸져 있습니다.
bloggername	str	블로그 포스트가 있는 블로그의 이름
bloggerlink	str	블로그 포스트가 있는 블로그의 주소
postdate	str	블로그 포스트가 작성된 날짜

3. 자동으로 데이터 불러오기 (get data from search API)

[Naver search]는 유저가 워크플로우를 작동시켜야지 작동이 됩니다. 반면에 [get data from search API]를 활용하면 워크플로우 없이도 데이터를 불러옵니다. 예를 들어, 페이지가 실행되자마자 네이버 검색 데이터를 불러와서 보여줘야 한다면, [get data from search API]를 사용하면 됩니다.

페이지가 실행될 때, 여러 블로그 데이터를 자동 노출하는 경우를 예시로 들겠습니다. 리피팅 그룹을 만들고, [Type of content]로 [블로그 검색 item] 타입을 선택합니다. 그리고 [Data source]에서 [get data from external API]를 선택합니다.