노션으로 다크모드 웹사이트 만드는 3가지 방법

 

노션(Notion)은 무료 버전으로도 충분히 많은 표현이 가능하기에 수많은 유저들이 이용중이다. 기본적으로는 노트툴이지만 외부에 공유를 한다면 웹페이지처럼 사용도 가능하다. 그런데 노션은 마크다운으로 작성이 된다. 마크다운은 레이아웃의 배경색을 변경하지 못한다. 물론 노션툴이나 앱에서는 다크모드를 제공하기에 검정색 배경의 테마를 이용할 수 있지만 외부에 공유되는 웹페이지는 마크다운만 옮겨지기 때문에 배경색이 하얀색으로 표현된다. 그렇다면 다크모드 공유를 포기해야 할까? 우회 방법이랄까. 방법이 있다. 외부 서비스를 이용한 2가지 방법과 직접 만드는 방법 1가지를 알려주겠다.

 

(왼쪽)맥용 노션앱의 다크모드와 (오른쪽)공유된 링크로 보게 되는 웹페이지

 

 

 

 

 

웹사이트를 만들어주는 Simple.ink

Simple.ink

Simple.ink는 노션을 바탕으로 정적 웹페이지를 만들어준다. 서비스 이름으로 도메인도 제공해줘서 노션의 긴 공유 링크보다 간단한 URL을 공유할 수 있다. 그 외에도 여러가지 기능을 제공하고 있지만 여기서는 다크모드만 다뤄보도록 하겠다. 위 이미지에 보이는 샘플용 노션 페이지를 Simple.ink에 적용해보겠다.

 

먼저 노션 페이지의 공유용 링크를 가지고 와야 한다. 'Share to web'을 체크하고 아래 Copy web link를 클릭으로 URL을 복사한다. 그 아래에 있는 Copy link와 헷갈리면 안된다.

 

 

이제 Simple.ink 홈페이지에서 아래가 선행되어야 한다.

• 회원가입 혹은 로그인을 한다
• 이메일을 통해 인증을 한다
• Build website 혹은 상단 Website에서 내가 만든 사이트에 접근한다
• Build website로 접근하는 경우, 원하는 subdomain을 입력한다

이제는 위에서 복사한 링크를 Simple.ink에 주입해줘야 할 차례이다. 'Copy the link to your Notion page' 혹은 'Link to the Notion page'에 복사한 노션 링크를 넣는다. 그 외 옵션은 자유롭게 입력한다. 마지막으로 Confirm 버튼을 클릭한다.

Simple.ink에 노션 링크를 입력하기

 

이제는 다크모드로 바꿀 차례. 상단 탭에서 Styling을 클릭하고 모드 선택란에서 Dark를 선택한다. 그리고 동일하게 Confirm을 클릭한다. 이렇게 샘플 페이지를 다크모드 웹페이지로 만들었다. subdomain으로 웹페이지에 들어가보면 다크모드가 된 모습을 볼 수 있다.

Simple.ink에서 다크모드로 변경하는 방법

 

Simple.ink로 만든 다크모드 웹페이지

 

 

 

 

 

Super

위에서 본 Simple.ink처럼 웹페이지를 만들어주는 서비스이다. Super도 간단한 도메인을 제공해주고 다크모드뿐만 아니라 여러 옵션을 제공해주기 때문에 여러 형태의 커스텀을 간단하게 하고 싶다면 사용해볼만하다. 다만 무료 도메인은 하나만 제공한다. 2개 이상의 도메인을 사용하려면 계정을 유료 업그레이드하면 된다. 이제 다크모드 웹페이지를 만들어보자. Simple.ink처럼 간단하게 만들 수 있다.

 

회원가입을 하고나면 'New Site' 버튼이 보인다. 해당 버튼을 누르면 아래와 같은 팝업을 볼 수 있다. Site name은 본인이 원하는 이름을 넣어주면 되고 Notion page URL은 Simple.ink에서 했던 것처럼 노션 페이지의 링크를 카피해서 입력하면 된다. 마지막으로 하단 Create 버튼을 클릭한다.

웹사이트 이름과 노션 페이지 링크를 입력해야 한다

 

 

이제부터는 너무 간단하다. 편집 화면의 왼쪽 메뉴에서 Design을 선택하고, Default color theme를 선택하고 마지막으로 Dart mode를 선택해서 Save를 하면 다크모드 웹페이지가 완성된다. 아래 이미지를 참고하자.

 

 

아래는 완성된 다크모드 웹페이지의 모습이다. 개인적인 생각으로는 Simple.ink보다 좀 더 노션의 디자인 테마가 유지되어 보인다. 디자인은 어느 것이 더 좋다라고 볼게 없어서 만드는 사람의 취향에 맞게 선택하면 된다.

 

 

 

 

 

GitHub Pages

만약 HTML과 CSS, JavaScript를 조금, 아주 조오오오금이라도 해본적이 있다면 GitHub Pages를 활용하는 방법이 있다. 도메인 제한도 없고, 무제한의 정적 페이지를 만들 수 있다. Github을 이용해본 사람이라면 Repository를 하나 만듦으로서 GitHub Pages 세팅을 완료할 수 있다. Repository 이름은 반드시 '깃헙 ID.github.io'로 만든다. 그 다음부터는 홈페이지 하단에 가이드되고 있는 부분을 따라서 git clone과 index.html을 생성하면 된다.

 

그럼 HTML과 CSS는 어떻게 만들면 될까? 노션에서 Export 기능을 활용보면 HTML 옵션을 찾을 수 있다. 이 옵션을 선택하고 Export하면 HTML 파일을 얻을 수 있다.

 

이제 얻어낸 HTML 파일에서 소스코드를 복사하여 깃헙에 있는 index.html에 붙여 넣는다. 소스코드를 정돈하는 beautifier를 하지 말고 그.대.로 복붙을 해야한다. 그래야 노션과 동일한 형태가 나타난다. 이제 백그라운드를 Black으로하고 텍스트를 White로 맞추자. style 태그 안에 있는 몇몇 태그의 옵션을 변경하면 된다. 사실 필자는 HTML과 CSS, JavaScript를 잘 몰라서 어거지로 시도해보면서 반영했다. 프론트엔드 개발 혹은 퍼블리싱 경험이 있는 분들이라면 더욱 유연하게 만들 수 있을 것이다.

html,
body {
	margin: 0;
	padding: 0;
	background-color: black;
}

h1,
h2,
h3 {
	letter-spacing: -0.01em;
	line-height: 1.2;
	font-weight: 600;
	color:white;
	margin-bottom: 0;
}

p {
	margin-top: 1.5em;
	margin-bottom: 0.5em;
	color:white;
}

 

이제 수정한 코드를 Commit & Push를 한다. 바로 웹페이지에 접근해도 변경되지 않은 것을 볼 수 있다. 깃헙 Repository 상단 Action 탭을 클릭해보면 페이지가 빌드되는 것을 볼 수 있다. Github Pages에서 제공되는 것으로 정적 페이지로서 빌드와 배포를 알아서 해준다. 이제 완료된 후 브라우저 URL에 '깃헙 ID.github.io'를 입력해서 접근해서 수정된 모습을 보자. 난이도는 좀 있지만 더 자유롭고 광고 등이 없는 다크모드를 만들 수 있다.

 

 

---

 

외부 서비스를 통해 간단하게 노션 페이지를 다크모드로 만드는 방법이 있었고 깃헙 페이지로 직접 코드를 만들면서 다크모드를 만드는 방법을 알아보았다. 다크모드가 여러 서비스에서 제공이 되는 것은 많은 사용자들이 다크모드의 매력과 가시적인 편안함을 느끼고 있어서라는 생각이 든다. 그런 니즈를 간단하게 반영하기 위해 정적 페이지를 만드려고 하는 분들이 노션을 활용할 때 이 포스팅이 도움이 되길 바래본다.

 

읽어주셔서 감사합니다