내장 테마 전체 보기(25개)
themes/디렉터리 및conf/themeSwitch.manifest.js와 동기화됨 · 현재 버전 4.10.2
먼저 사이트 목적에 맞는 테마를 고른 뒤, 개별 테마 문서에서 설정을 확인하세요.
미리보기: https://preview.tangly1024.com/?theme=<id>(id는 아래 표의 소문자 테마 ID입니다).
전환 방법: NEXT_PUBLIC_THEME=<id>, Notion Config의 THEME, 또는 THEME_SWITCH 위젯 활성화.
상황별 테마 선택
| 만들고 싶은 사이트 | 우선 검토 | 대안 | 선택 이유 |
|---|---|---|---|
| 개인 블로그 / 일상 글쓰기 | simple, hexo | nobelium, typography | 구조가 명확하고 글 중심이며 설정 부담이 낮음 |
| 문서 / 지식베이스 / 튜토리얼 사이트 | gitbook, claude | thoughtlite | 사이드바, 목차, 연속 읽기 경험이 강함 |
| 포트폴리오 / 개인 브랜드 | proxio, starter | landing | 첫 화면 전달력이 강하고 정체성, 작업물, 서비스를 보여주기 좋음 |
| 제품 공식 사이트 / SaaS 랜딩 페이지 | starter, landing | commerce | 제품 소개, 기능 섹션, 가격, CTA 구조를 갖춤 |
| 이미지 / 사진 / 시각 콘텐츠 | photo, plog | magzine | 이미지 표시 밀도가 높아 시각적 탐색에 적합 |
| 내비게이션 사이트 / 리소스 모음 | nav | gitbook | 분류 진입점, 링크 모음, 리소스 내비게이션에 적합 |
| 잡지형 / 강한 시각적 홈페이지 | magzine, heo | fuwari | 홈페이지 표현력이 강해 콘텐츠 브랜딩에 적합 |
| 게임 / 인터랙티브 전시 | game | movie | 특수 콘텐츠 형식과 몰입형 전시에 적합 |
처음이라면 어떻게 고르나요?
아직 뚜렷한 선호가 없다면 아래 기준으로 선택하세요.
- 먼저 빠르게 실행해 보고 싶다면
simple을 선택하세요. - 전통적인 블로그를 만들고 싶다면
hexo또는next를 선택하세요. - 튜토리얼이나 지식베이스를 만들고 싶다면
gitbook을 선택하세요. - 개인 브랜드나 서비스를 보여주고 싶다면
proxio를 선택하세요. - 제품 랜딩 페이지를 만들고 싶다면
starter를 선택하세요. - 이미지를 강조하고 싶다면
photo를 선택하세요.
배포에 성공한 뒤에도 테마를 바꿀 수 있습니다. 테마 ID를 수정하고 다시 배포하면 됩니다.
테마 미리보기 이미지
테마 미리보기 이미지는 public/images/themes-preview/에 있습니다. 로컬 또는 온라인에서 미리보기 이미지가 보이지 않으면 먼저 해당 테마의 <id>.webp 또는 <id>.png 파일이 있는지 확인하세요.
자주 쓰는 링크:
전체 테마 표
| ID | 이름 | 포지션 | 설명 문서 |
|---|---|---|---|
simple | Simple | 기본 미니멀 텍스트 블로그 | simple.md |
hexo | Hexo | 클래식 2열 블로그 | hexo.md |
heo | Heo | 모듈형 홈페이지, 알림 바, 히어로 영역 | heo.md |
gitbook | GitBook | 문서/매뉴얼용 사이드바 목차 | gitbook.md |
next | Next | 2열 + 모바일 플로팅 목차 | next.md |
medium | Medium | Medium 스타일 읽기 경험 | medium.md |
matery | Matery | Material 카드 목록 | matery.md |
nobelium | Nobelium | 미니멀 | nobelium.md |
fukasawa | Fukasawa | 다중 열 고밀도 | fukasawa.md |
fuwari | Fuwari | 일본풍 2열 컬러 팔레트 | fuwari.md · FUWARI.md |
typography | Typography | 타이포그래피 우선 | typography.md |
nav | Nav | 내비게이션 사이트/모음 | nav.md |
plog | Plog | 이미지와 글 중심의 가벼운 블로그 | plog.md |
photo | Photo | 사진 앨범 | photo.md |
movie | Movie | 영화/영상 포스터 월 | movie.md |
game | Game | 게임 픽셀 스타일 | game.md |
landing | Landing | 단일 페이지 랜딩 | landing.md |
starter | Starter | 마케팅 랜딩 페이지 섹션 | starter.md |
proxio | Proxio | 포트폴리오/브랜드 사이트 | proxio.md |
commerce | Commerce | 상품 전시 | commerce.md |
magzine | Magazine | 잡지 표지 스타일(디렉터리명 magzine) | magzine.md |
claude | Claude | 문서 스타일 + 기여 히트맵 홈페이지 | claude.md · CLAUDE.md |
endspace | Endspace | 종말적 산업풍 로딩과 사이드바 | endspace.md · ENDSPACE.md |
example | Example | 테마 개발 골격 | example.md |
thoughtlite | ThoughtLite | 타임라인 홈페이지 + Latest 카드 | thoughtlite.md · THOUGHTLITE.md |
테마 전환 위젯
NEXT_PUBLIC_THEME_SWITCH=true일 때는 THEME_SWITCH_MANIFEST의 이름, 소개, public/images/themes-preview/<id>.png|webp를 사용합니다.
새 테마를 기여할 때는 미리보기 이미지를 제출하고 manifest를 업데이트해야 합니다. 자세한 내용은 THEME_MIGRATION_GUIDE.zh-CN.md를 참고하세요.
유지보수 설명
themes/<id>/config.js를 수정한 뒤 node scripts/generate-theme-user-docs.mjs를 실행하면 해당 docs/user-guide/themes/<id>.md의 설정 표를 갱신할 수 있습니다.
테마 메뉴 키(HEO 명명 잔재)
일부 테마(Proxio 포함)는 기본 상단 바 4개 항목을 제어할 때 HEO_MENU_ARCHIVE 등을 사용합니다. 이는 HEO 테마 사용 여부와 무관합니다. proxio.md를 참고하세요.