mengkko의 IT 블로그

 노션은 기본적으로 작성한 페이지를 링크로 생성해 다양한 사람들에게 공유를 할 수 있다. 노션은 공식적으로 커스텀 도메인 연결을 지원하지 않고 있으며 추후 지원할 예정이라고 한다. 하지만 아직은 지원하지 않는 게 현실이고 커스텀 도메인 연결 자체를 서비스로 제공하는 기업도 존재한다. 아래 글이 힘들고 적용이 잘 안된다면 마음 편하게 서비스를 제공하는 기업을 이용하는 것도 하나의 방법이다. 이 글은 자신이 보유한 도메인을 노션 페이지에 연동하는 방법을 소개하려 한다. 이 방법은 언제든 노션에서 제재를 가할 수 있으며 갑자기 작동하지 않아도 어쩔 수 없는 글임을 미리 알립니다.

1. 노션 페이지 공개하기

 첫 번째로 노션 페이지를 먼저 모두가 볼 수 있게 해줘야 한다.
노션 상단에 공유 버튼을 클릭 -> 웹에서 공유 토글을 활성화 -> 아래 복사 버튼을 눌러 URL 복사

아래와 같은 링크를 획득할 수 있다. 아래 링크는 개인 링크이며 예시로 공개한 링크입니다.

https://woooo.notion.site/a785b14c1dd4406da8287abf13997bc9

2. CloudFlare 회원 가입 및 도메인 연결

아래 CloudFlare라는 서비스에 회원가입을 합니다.

회원가입 이후 자신이 구매한 도메인을 cloudflare로 연결해줍니다.

ex) 본인이 가비아 등에서 도메인을 구입했다면 설정에 nameserver를 바꿔줄 수 있습니다. 아래 링크를 참조해서 바꿔줍니다.

https://wonderbout.tistory.com/119

3. Workers 등록

CloudFlare의 Workers는 어떤 URL에 접근 시 특정 행동을 해주는 서비스입니다. 예를 들어 저희와 같이 노션을 도메인과 연결을 해주고 싶다면 이 Workers를 통해서 해당 행동을 수행할 수 있습니다.

ex) https://domain.com 접속 => workers 작동 => 노션 페이지 수집 => 노션 페이지 출력

아래 이미지 순서에 맞게 새로운 workers를 생성해 주고 workers의 이름을 notion-worker로 변경해 줍니다.

성공적으로 workers를 만들었다면 이제 코드를 삽입해줄 차례입니다.

예시 코드 링크 https://woooo.notion.site/notion-workers-example-0b7c5e3b4fb844ce8ed98e259ea13867

위 링크에서 크게 봐야 할 건 1~6 LINE의 코드입니다. 아래 코드를 참조해 예제 코드에서 본인에 조건에 맞게 수정을 해준 뒤 이전에 만들었던 workers에 기입해주고 저장버튼을 눌러 저장해줍니다.

// 구매한 도메인 주소 
// ex) google.com
// 연결할 노션의 주소 
// ex) https://woooo.notion.site/a785b14c1dd4406da8287abf13997bc9

// 1. MY_DOMAIN 변수에 구매한 도메인 주소를 넣어줍니다. ex) google.com, naver.com ....
const MY_DOMAIN = 'google.com';

// 2. SLUG_TO_PAGE 변수에는 연결할 노션의 ID값을 넣어줍니다. 
// ex) https://woooo.notion.site/a785b14c1dd4406da8287abf13997bc9 에서는
// https://woooo.notion.site/ 이후 값 즉 a785b14c1dd4406da8287abf13997bc9 이 아이디 입니다.
const SLUG_TO_PAGE = {
  '': 'notionID',
};

// 3. PAGE_TITLE 변수는 크롬과 같은 브라우저 탭에 표시될 내용 입니다. 
const PAGE_TITLE = 'TITLE';

// 4. PAGE_DESCRIPTION 변수는 페이지의 설명을 뜻합니다.
const PAGE_DESCRIPTION = 'DESCRIPTION';

workers 저장 이후 다시 메인에 있는 workers 탭으로 이동한 뒤 아래 사진과 같이 경로 추가 버튼을 클릭합니다.

경로에 아래 이미지와 같이 입력해줍니다. worker에선 우리가 만들었던 notion-worker를 선택해 줍니다.

ex) 구매한 도메인/*, bridecode.kr/* ....

4. 연결 확인하기

 위 1,2,3 스텝을 통해 도메인 연결에 성공했고 가끔은 오류가 나서 코드를 몇 차례 수정해 주었긴 하지만 성공적으로 도메인과 노션 페이지를 연결했습니다.
참고로 저희가 도메인 구입에 사용했던 가비아는 name서버 변경에 하루 이상 소요가 될 수도 있다고 하니 참고하시어 지금 당장 안된다고 걱정하지 마시고 하루 이상 기다려 보는 게 좋습니다.

간단하게 웹서비스를 구축하는 것도 좋으나 공수가 많이 든다면 이렇게 노션을 통해 간단하게 회사 사이트를 구축하는것도 좋은 방법이라고 생각합니다. 하지만 이마저도 어렵거나 공수가 든다고 생각하시면 시중에 노션 페이지에 커스텀 도메인을 연결해주는 서비스도 존재하니 이용하시는 것도 추천드립니다.

5. 참조