테마 기능 설명
이전 문서: 테마 기능 설명 게시일: 2023-6-27 마지막 편집: 2026-5-2 원래 분류: ⭐ 테마 매개변수 태그: NotionNext, 테마 요약: 테마는 main 브랜치의
themes디렉터리와 맞춰집니다. 기본값은simple이며, 위젯 내부 전환은conf/widget.config.js를 참고하세요.THEME수정과 온라인 미리보기 방법도 함께 설명합니다.
테마 기능 소개
NotionNext는 /themes 디렉터리 아래의 폴더를 스캔하고, 폴더 이름을 기준으로 테마를 생성합니다. 설정에서 현재 테마를 해당 폴더 이름으로 지정하면 됩니다. 테마 이름은 모두 소문자입니다.
테마 미리보기
내장 테마는 GitHub 저장소의 themes/ 디렉터리를 기준으로 합니다. 버전이 바뀌면서 추가되거나 제거될 수 있습니다. 현재 main 브랜치에서 자주 쓰는 테마는 simple(새 저장소 기본값, blog.config.js의 THEME 참고), next, medium, hexo, fukasawa, gitbook, matery, heo, nobelium, plog, landing, nav, starter, commerce, magzine, photo, movie, game, fuwari, claude, proxio, typography, example 등입니다.
용도별로 대략 고르면 GitBook은 문서 사이트에, Nav는 내비게이션/링크 모음에, Landing과 Starter는 랜딩 페이지에, Plog와 Photo는 이미지 모음에 적합합니다. 더 자세한 내용은 각 테마 하위 문서나 소스 코드의 해당 config.js를 참고하세요.
미리보기 사이트 왼쪽 아래 위젯을 클릭하면 온라인에서 테마를 전환해 볼 수 있습니다.
테마 디렉터리 구성
각 테마는 네 부분으로 구성됩니다. example 테마를 기준으로 보면 디렉터리 안에는 다음 요소가 있습니다.
components: 테마에서 사용하는 모든 컴포넌트를 담는 폴더입니다. 프로젝트는 React 구조를 사용하며, 버튼과 모듈은 개별 컴포넌트로 분리되어 있습니다.config.js: 현재 테마의 설정 파일입니다.index.js: 테마의 기본 레이아웃과 라우팅 관계를 담습니다.style.js: 사용자 정의 CSS 스타일을 담습니다.
기본 테마를 수정하는 방법
blog.config.js 설정의 THEME 값을 바꾸면 됩니다. 예시는 다음과 같습니다.
- 방법 1: GitHub의 소스 코드 수정
THEME: process.env.NEXT_PUBLIC_THEME || 'simple', // Keep the current repository default. Change to folder names like hexo or next as needed.- 방법 2: Vercel 대시보드에서 환경 변수
NEXT_PUBLIC_THEME추가
- 방법 3:
Notion_Config를 사용해 Notion 노트에서 기본 테마 설정
온라인 테마 전환
블로그 사이트처럼 페이지 위에 실시간 테마 전환 버튼을 켤 수 있습니다. 활성화하려면 main 저장소의 conf/widget.config.js를 조정하거나 배포 대시보드에서 환경 변수 NEXT_PUBLIC_THEME_SWITCH를 설정하세요.
THEME_SWITCH: process.env.NEXT_PUBLIC_THEME_SWITCH || false, // Whether to show the theme switch button. Preview sites usually keep it enabled.이 항목은 blog.config.js에서 위젯 설정으로 분리되었습니다. Notion Config 표에 같은 이름의 키를 작성해 덮어쓸 수도 있으며, 우선순위는 여전히 Notion Config, 환경 변수, 코드 기본값 순입니다.
활성화 후에는 웹 페이지에 드래그할 수 있는 패널이 항상 떠 있으며, 이 패널에서 테마를 전환할 수 있습니다.
테마 개인화
테마 미세 조정
- 각 테마가 지원하는 설정은 이 문서와 하위 테마 문서를 참고해 수정할 수 있습니다.
- 개발 가이드의 튜토리얼을 참고해 테마를 직접 커스터마이징할 수도 있습니다.
NotionNext 개발 시작하기 | NotionNext 도움말
NotionNext 다운로드, 실행, 변경 사항 제출 및 병합 방법을 다룹니다.
설정으로 NotionNext 스타일 조정하기 | NotionNext 도움말
React, Next.js, webpack, Tailwind CSS에 익숙하지 않아도 스타일을 조정하는 방법을 설명합니다.
나만의 테마 만들기
기존 테마를 복사한 뒤 이를 기반으로 2차 개발할 수 있습니다. 테마 생성과 개발 기능에 대한 자세한 내용은 개발 튜토리얼을 읽어 보세요.
NotionNext 자체 테마 만들기 | NotionNext 도움말
간단한 몇 단계로 자신만의 테마를 만들 수 있습니다.
직접 개발하고 디자인한 테마를 PR 방식으로 NotionNext 중앙 저장소에 제출해 다른 사이트 운영자들이 사용할 수 있게 하는 것도 환영합니다.
마무리
이 테마 설정 섹션에서는 각 테마의 설정을 하나씩 소개합니다. 테마별 개인 설정을 보기 전에 사이트 기본 설정 부분을 먼저 끝까지 읽는 것을 권장합니다.