무료로 노션 사이트 만들기 & 도메인 연결하기

노션 페이지로 사이트 구축하기

노션으로 사이트를 만드는 것 자체는 매우 간단합니다. 노션에서 작성한 페이지 중 사이트로 제작하고자 원하는 페이지를 선택하여 ‘Share’ 버튼을 누른 후 ‘Share to web’을 활성화만 해 주면 됩니다. 그러면 URL 생성과 함께 외부에서 접속할 수 있는 사이트가 구축됩니다.

사이트 제작 자체는 ‘Share to web’만으로 제작 가능

노션 사이트에 도메인(커스텀 도메인) 연결하기

다만 도메인을 연결하지 않으면 사이트가 다소 아마추어틱하게 보일 수 있고 URL의 주소가 시멘틱하지 못하며, 길어진다는 한계점이 있습니다. 이를 보완하기 위해서는 별도의 도메인을 연결시킬 수 있습니다. 커스텀 도메인을 연결하는 이 과정은 노션에서 공식적으로 제공하는 기능은 아니지만, 클라우드플레어를 통한 HTTP 통신 핸들러 설정을 통해서 연결이 가능합니다.

Frution(노션 웹사이트 빌딩 툴킷) 활용하기

특히 Stephen이라는 엔지니어가 만든 Fruition이라는 오픈소스 노션 웹사이트 빌딩 툴킷을 활용하면 보다 효율적으로 노션 웹사이트 빌딩 및 커스텀 도메인 연결이 가능합니다. Super.so와 같이 유료 서비스로서 자동으로 빌딩과 도메인 연결, 그리고 부가적인 기능을 제공해 주는 서비스도 존재하지만, 여기서는 무료로 이용 가능한 Frution을 활용하도록 합니다.

Fruition은 노션을 통한 웹사이트 빌딩과 커스텀 도메인 연결을 지원하는 오픈소스 툴킷

Super.so는 유료로 이용 가능한 웹사이트 빌딩 서비스

Fruition Step 1 : 클라우드플레어 기본설정 하기

1. 네임서버를 클라우드플레어로 변경

Fruition은 별도의 서비스나 소프트웨어가 아닌 툴킷 형태로 노션 웹사이트를 빌딩하는 데에 필요한 도구를 제공합니다. 첫번 째로 클라우드플레어 설정 가이드를 제공합니다. 클라우드플레어 웹사이트(https://dash.cloudflare.com/sign-up)에 접속하여 회원가입을 진행합니다. 그 다음으로는 연결하고자 하는 도메인의 네임서버를 클라우드플레얼로 변경해야 합니다. 네임서버 변경은 도메인 호스트 사이트를 통해서 가능한데, 가비아에서 샀으면 가비아에서 후이즈에서 샀으면 후이즈에서 네임서버 변경 기능을 통해서 진행이 가능합니다.

도메인 호스트 사이트에서 1차, 2차 네임서버를 위와 같이 변경

2. 클라우드플레어에서 DNS 설정

네임서버 변경이 완료되면 클라우드플레어의 DNS 메뉴를 통해서 DNS 설정이 가능해집니다. 루트(@)와 www의 값을 A와 AAAA 레코드를 통해 변경하도록 합니다. A 레코드의 경우 1.1.1.1(오류 발생 시에는 192.0.2.1)로 설정합니다. AAAA의 경우 100::을 값으로 설정합니다. 모든 DNS 설정은 Proxy 설정을 함께 활성화해 줍니다. 총 네개의 DNS가 설정되도록 합니다.

3. 클라우드플레어에서 SSL 설정

Fruition Step 1 : 클라우드플레어 Worker로 HTTP Handle 설정하기