노션 페이지 자신의 도메인으로 연결하는 방법 (2021년 11월 기준)

노션 페이지를 자신의 도메인으로 연결하는 방법 – 에버노트 대신 노션으로 갈아타서 주요 노트앱으로 사용하시는 분들이 많은데요. 에버노트와는 다른 노션만의 장점이나 기능이 있죠. 메모장이라기 보다는 하나의 데이터베이스나 잘 꾸며진 페이지라고 볼 수 있기 때문에, 노션 페이지를 구인 구직 페이지나, 회사소개 페이지로 사용하는 경우도 많은데요. 

노션도 공유기능을 가지고 있지만, 여기에 만약 자신의 도메인으로 연결하면 좋지 않을까? 란 생각이 있었는데 이미 방법이 있더라구요. 그런데, 노션은 계속 서비스 개선을 하기 때문에 기존의 방법으로는 도메인 연결이 되지 않았고 클라우드 플레어 사이트 디자인도 바뀌어서 다른 웹사이트에 나온 것만 보고는 실패해서, 2021년 11월 기준으로 제가 성공한 방법을 정리해 보려고 합니다.

노션 페이지 자신의 도메인으로 연결하기 위한 준비물

• 자신의 도메인 (DNS 변경이 가능해야 함)
• 공유할 노션페이지

먼저 준비물이 있습니다. 공유할 노션페이지가 있어야겠죠. 그리고, 자신의 도메인이 있어야 합니다. DNS 변경이 가능해야 하는데요. 국내 또는 해외 사이트를 이용하여 도메인을 구입하셨을 경우 대부분 도메인 업체에서 DNS 설정을 변경할 수 있습니다. 자신의 도메인이 아닌 무료로 일부 업체에서 제공하는 서브 도메인으로는 설정이 불가능합니다.

챕터 1. 노션 페이지를 공유페이지로 만들기

1. 도메인에 연결할 노션 페이지를 보면 상단에 공유 버튼이 있습니다.
2. 웹에서 공유를 클릭합니다. 그러면 주소가 aaa.notion.site 식으로 나오는데요. 이 주소를 복사해서 메모장에 붙여 넣습니다. 또는 나중에 설정할때 다시 이 페이지에서 복사해도 됩니다.
3. 하단에 있는 링크 복사버튼을 누를 경우 주소가 살짝 달라서 불편하니, 위의 방법대로 복사합니다.

챕터 2. 클라우드 플레어 가입하기

사이트에 접속해서 가입 버튼을 클릭하고, 간단하게 이메일 주소와 비밀번호를 설정하면 가입이 완료 됩니다.

챕터 3. 클라우드 플레어의 DNS로 변경하기

1. 클라우드 플레어로 가입하게 되면 아래 화면처럼 사이트를 주소를 입력하라고 나오는데요. 설정할 도메인을 입력합니다. 만약 서브 도메인(test.bbb.com 의 형태)을 노션페이지에 연결하고 싶다더라도 아래 부분에는 bbb.com 과 같은 루트 도메인 형태로 입력합니다.

2. 하단으로 내리면 무료 플랜이 있습니다. 무료플랜을 선택합니다.

3. DNS를 변경하라고 나오는 데요. 
4. Add record 를 클릭합니다.
5. Type 은 CNAME 선택
6. Name 에는 bbb.com 입력시 노션페이지로 이동하고 싶다면 @ 를 입력 / test.bbb.com 입력시 노션페이지로 이동하고 싶다면 test 를 입력합니다. test대신 본인이 원하는 이름으로 하면 되겠죠. 이 후 설명에서는 test로 설명하겠습니다.
7. IPv4 address 에는 notion.so 를 입력하고 Save 버튼을 클릭합니다.

8. 현재 해당 도메인의 DNS가 보입니다. (제 경우에는 googledomains 라고 나오네요.) 이것을 클라우드 플레어 네임서버로 변경해 줘야 합니다.

9. 자신의 도메인 구입업체 사이트에서 DNS 설정을 바꿀 수 있습니다. 저는 구글도메인에서 구입했기 때문에 해당 페이지에서 클라우드플레어의 도메인 네임 서버 정보를 입력하였습니다.

10. 도메인 네임서버를 클라우드 플레어로 바꾸었다면 클라우드 플레어 사이트에서 Done 버튼을 클릭합니다.

챕터3. 클라우드 플레어 Workers 설정하기

1. 클라우드 플레어의 메뉴를 보면 Workers라는 부분이 있습니다. 해당 메뉴를 클릭하면 아래에 로드중이라는 부분이 나오는데요. 기다려도 활성화되지 않으니 위쪽에 Workers 관리라는 버튼을 클릭합니다.

2. 처음 Workers를 설정할 경우 아래의 화면이 나옵니다. 설정 버튼을 클릭합니다.

3. Workers 요금은 개인 사용 및 단순 응용 프로그램용 무료로 선택합니다.

4. 설정을 끝냈다면, Workers 페이지에서 Create a Service를 볼 수 있는데요.

5. 서비스 이름에는 notion 으로 적어보겠습니다. Select a starter에는 HTTP handler로 설정하고 Create Service 버튼을 클릭하겠습니다.

6. 축하합니다. 성공했다고 나오는데요. 빠른 버튼 편집을 클릭합니다.

7. 소스 입력창이 나오게 되는데요. 왼쪽 부분에 소스를 붙여넣어야 합니다. 붙여넣을 소스는 다음 챕터를 참고하세요.

챕터4. 만든 Workes에 소스 코드 붙여넣기

기존 글들이 현재는 되지 않는 것이 노션의 경우 계속 서비스 개선이 되고 있는데요. 기존에 잘 작동했던 소스가 현재로서는 에러가 나고 있습니다. 때문에 해외 프로그래머가 재능기부하는 사이트를 알려드리겠습니다. 매우 간단한 방법으로 소스코드를 가져올 수 있습니다.

1. Fruition 사이트에 접속합니다. (해당 사이트도 노션페이지로 되어있습니다.)
2. 페이지 중 Step 2에 자신의 도메인 (bbb.com 또는 test.bbb.com) 을 입력합니다.
3. 챕터1에서 복사한 노션 페이지 주소를 붙여넣습니다.
4. COPY THE CODE 를 클릭하면 클립보드에 소스가 복사됩니다.
5. 바로 전 챕터에서 했던 Workers 소스 부분에 현재 있는 짧은 소스를 모두 지운후 컨트롤 + V 하여 이 소스 코드를 붙여넣기 합니다.

챕터5 클라우드 플레어에서 루트 설정하기

1. 다시 클라우드 플레어 사이트에서 왼쪽 메뉴중 웹사이트 > 자신의 도메인을 클릭합니다.

2. 왼쪽 메뉴에서 Workers 를 선택하면, HTTP Routes에 경로추가버튼이 있습니다.

3. Route에는 bbb.com/* 또는 test.bbb.com/* 를 입력합니다 뒤에 /* 를 꼭 입력해야 합니다.
4. Service에 notion 을 선택합니다. 또는 자신이 설정한 Worker의 이름을 선택합니다.
5. Environment 에는 아무것도 선택하지 마세요. 선택하니 저는 에러가 났습니다.
6. 저장 버튼을 클릭합니다.

드디어 모든 설정이 끝났습니다. 설정한 도메인을 입력하면 자신이 설정한 노션페이지로 이동이 됩니다. 2021년 11월 26일 현재 저의 노션페이지는 위의 방법대로 잘 설정이 되었습니다. 도메인 설정 변경은 최대 24시간이 걸릴 수도 있으므로, 만약 잘 설정되었다면 좀 기다려 보세요. 또한, 노션은 계속 서비스개발을 하고 있기 때문에 소스코드가 현재는 잘 되고 있으나 차후에는 에러가 생길 수도 있습니다. 아직까지 외국 개발자가 변경사항에 대해서는 대응하는 것 같습니다. 

저는 개발자가 아니므로, 기술적 문제에 대해 질문을 하셔도 어떠한 사항도 추가적으로 알려드릴 부분이 없습니다. 설명을 최대한 자세히 해 놓았으니 따라서 해보시고, 만약 안될 경우 다시한번 찬찬히 살펴 보세요.

지금까지 안테나곰이었습니다.