노션(Notion) API 연동 초간단 튜토리얼

많은 기업에서 웹사이트에 새로운 페이지를 추가하는 작업은 여러 팀 간의 조율이 필요하여 번거롭고 시간이 걸리는 과정일 수 있습니다. 그러나 노션(Notion)에서는 이러한 작업이 훨씬 간편해졌습니다. 노션을 활용하면 클릭 한 번으로 웹 페이지를 쉽게 생성하고 게시할 수 있는 기능을 제공합니다. 이번 포스팅에서는 노션 API를 이용한 페이지 게시 방법과 코딩 과정을 자세히 알아보겠습니다.

웹 페이지 생성하기

노션의 큰 장점은 개발자 없이도 매력적인 웹 페이지를 만들 수 있다는 것입니다. 각종 임베드 기능과 다양한 도구를 활용해 복잡한 콘텐츠 관리 시스템을 구축할 수 있으며, 사용자 인터페이스를 아름답게 디자인할 수 있습니다. 이제 노션을 통해 직접 페이지를 게시하는 방법을 알아보겠습니다.

페이지 게시 방법

노션에서 웹 페이지를 게시하는 과정은 매우 간단합니다. 아래의 절차를 따라 진행하시면 됩니다.

• 원하는 페이지를 선택합니다.
• 상단의 공유 버튼을 클릭합니다.
• 게시 탭으로 이동하여 ‘웹에 게시’ 옵션을 활성화합니다.

이렇게 하면 생성된 링크를 통해 누구나 해당 페이지에 접근할 수 있으며, 페이지를 수정할 경우 실시간으로 변경 사항이 반영됩니다. 이는 비즈니스 환경에서 큰 장점으로 작용할 수 있습니다.

템플릿 활용하기

노션에서는 다양한 템플릿을 제공하여 사용자가 빠르게 페이지를 설정할 수 있도록 돕습니다. 이러한 템플릿은 처음부터 페이지를 만드는 것이 부담스러운 사용자에게 큰 도움이 됩니다. 예를 들어, 채용 보드 템플릿을 사용하면 채용 공고와 회사 정보를 효과적으로 정리할 수 있습니다.

도움말 센터

고객 서비스에 필요한 질문과 답변을 정리한 도움말 센터를 만들 수 있습니다. 이를 통해 고객들은 자주 묻는 질문에 대한 답변을 쉽게 찾아볼 수 있습니다. 노션에서는 이러한 내용을 하위 페이지로 쉽게 분류할 수 있으며, 필요에 따라 업데이트가 가능합니다.

블로그 게시물

노션에서는 블로그 게시물도 간편하게 작성할 수 있습니다. 다양한 형식의 콘텐츠를 포함할 수 있으며, 텍스트, 이미지, 동영상 등을 쉽게 임베드할 수 있습니다. 이는 독자들이 지루해하지 않고 콘텐츠에 집중할 수 있도록 돕습니다.

로드맵

제품 개발 로드맵을 게시하여 고객들에게 제품의 기능 및 출시 일정을 명확히 전달할 수 있습니다. 이와 같은 기능은 고객의 피드백을 직접 받고 브랜드에 충성도를 높이는 데 기여할 수 있습니다.

Notion API와의 통합

Notion API를 통해 데이터베이스와의 연결이 가능하여 더욱 폭넓은 활용이 가능합니다. API 통합을 통해 데이터를 관리하거나 자동으로 생성할 수 있으며, 이는 개발자에게 매우 유용합니다. 다음은 API 통합을 설정하는 과정입니다.

API 통합 생성하기

노션 API를 사용하기 위해서는 먼저 API 통합을 생성해야 합니다. 노션 웹사이트의 통합 페이지에서 ‘새 API 통합 만들기’ 버튼을 클릭하면 됩니다. 여기서 API 이름과 연결할 워크스페이스를 설정하면 기본 설정이 완료됩니다.

데이터베이스 생성하기

API 통합 설정 후, 노션에서 사용할 데이터베이스를 생성해야 합니다. 새로운 페이지에서 ‘/데이터베이스’를 입력하면 데이터베이스를 쉽게 생성할 수 있습니다. 처음 빈 표가 생성되며, 필요한 정보를 입력하여 내용을 채워주면 됩니다.

Next.js에서 Notion API 활용하기

Next.js를 사용하여 노션 API와 통합하는 절차에 대해 알아보겠습니다. 노션 API는 @notionhq/client 라이브러리를 통해 쉽게 사용할 수 있습니다. 이를 통해 노션 데이터베이스와 상호작용하는 애플리케이션을 구축할 수 있습니다.

API 키 및 DB ID 설정하기

API 키는 노션에서 통합을 생성했을 때 제공되는 시크릿 키로, 이를 복사하여 저장해 둡니다. 데이터베이스 ID는 해당 데이터베이스의 링크에서 ‘www.notion.so/’ 뒤부터 ‘?v=’ 앞까지의 문자열을 추출하여 사용합니다. 이러한 정보를 .env 파일에 저장하여 프로젝트에서 쉽게 사용할 수 있도록 합니다.

API 요청 처리하기

다음으로는 API 요청을 처리하는 코드를 작성해야 합니다. src/app/api 폴더 내에 요청을 처리할 endpoint를 설정하여, 노션 API를 호출하고 필요한 데이터를 반환하도록 합니다.

예를 들어, 노션 데이터베이스에서 데이터를 쿼리하고 이를 JSON 형식으로 반환하는 간단한 GET 함수를 정의할 수 있습니다.

javascript
import { Client } from “@notionhq/client”;
const NOTION_API_KEY = process.env.NOTION_API_KEY;
const NOTION_DB_ID = process.env.NOTION_DB_ID;
const notion = new Client({ auth: NOTION_API_KEY });
export async function GET() {
try {
const response = await notion.databases.query({ database_id: NOTION_DB_ID });
return NextResponse.json(response);
} catch (error) {
console.error(error);
}
}

위의 코드에서 반환된 데이터는 복잡할 수 있기 때문에, 필요한 값들만 추출하여 가공하는 과정이 필요합니다. Postman과 같은 도구를 사용하여 노션 API로부터 받은 데이터를 확인하고, 이를 기반으로 필요한 인터페이스를 정의할 수 있습니다.

마무리

이렇게 노션을 활용하면 별도의 개발자 없이도 웹 페이지를 쉽게 게시하고, API를 통해 데이터를 효율적으로 관리할 수 있습니다. 이는 개인 및 기업의 생산성을 높이는 데 기여할 수 있습니다. 노션 API를 통해 다양한 아이디어를 실현해 보시기 바랍니다.

자주 물으시는 질문