folionote가 지금 무엇을 하는지 정리한 목록입니다. 리포의
README.md 기능 표와 docs/feature-parity.md를 그대로 따랐습니다. 아직 없는 기능은 적지 않았습니다.Notion에서 정적 사이트로
Next.js의 SSG와 ISR로 돌아갑니다. 본문은 첫 요청이 들어올 때 만드는 지연 SSG라서, 페이지가 수백 장이어도 배포 시간이 길어지지 않습니다. Notion에서 글을 고치면 10분 주기로 사이트에 반영됩니다.
Pretty URL
/about이나 /posts/my-post처럼 경로를 직접 정합니다. 32자 Notion ID가 주소에 노출되지 않습니다. 이 데모 사이트의 /features, /start, /examples, /blog가 그 예입니다.커스텀 도메인
Vercel 프로젝트에 도메인을 붙이고 DNS 레코드 둘을 넣으면 끝입니다. Cloudflare를 쓴다면 프록시를 꺼야 리다이렉트 루프를 피합니다. 도메인을 붙인 뒤에는 한 번 재배포해야 canonical URL과 공유 이미지가 새 주소를 가리킵니다.
다크모드와 커스텀 색상
system, dark, light 3-state입니다.
system은 OS 설정을 따라가고 헤더에 토글이 나옵니다. 한쪽으로 고정하거나 배경색과 글자색을 직접 지정하면 토글은 사라집니다.상단 네비게이션
테마별 로고, 메뉴 링크, 780px 이하에서 햄버거와 우측 사이드 드로어를 씁니다. 메뉴 개수에 제한을 두지 않았습니다. 좁은 화면에서는 하단 탭바를 따로 켤 수 있습니다.
SEO
sitemap.xml, RSS 피드, robots.txt를 자동으로 만듭니다. 페이지마다 제목, 설명, 공유 이미지, noindex를 덮어쓸 수 있습니다. Notion 블록 커버가 있으면 그것을 공유 이미지로 먼저 씁니다.설정 화면
/admin에서 폼으로 설정을 고치고 미리보기를 봅니다. 로컬에서는 site.config.ts 파일에 저장하고, 배포본에서는 GitHub 로그인 후 커밋합니다. 환경변수 셋을 넣지 않으면 의도적으로 404가 되는 선택 기능입니다.위젯
설정만으로 붙는 화면 요소가 다섯 가지입니다.
위젯 | 설정 키 |
스크롤 진행률 바 | scrollProgressBar |
맨 위로 버튼 | backToTop |
팝업 | popups |
CTA 버튼 | cta |
모바일 하단 탭바 | bottomNavigation |
폰트
한국어, 영어, 일본어를 따로 지정하고 고정폭 폰트도 별도로 받습니다. 기본 목록은 22종이고 고른 폰트만 내려받습니다. 세 폰트를 font-family 스택으로 합치면 브라우저가 글자마다 그 글자를 가진 폰트를 골라 씁니다.
컬렉션 검색과 공유 버튼
데이터베이스 안에서 제목뿐 아니라 태그와 날짜까지 매칭합니다. 뷰가 여러 개면 헤더에 뷰 전환 탭을 노출할 수 있습니다. 현재 페이지 공유 버튼은 헤더와 모바일 드로어에 함께 나옵니다.
커스텀 코드 주입
분석 스크립트, 채팅 위젯, 색 보정 CSS를 설정으로 붙입니다.
<body> 시작 직후와 종료 직전 두 자리를 받고, CSS는 사이트 스타일 뒤에 들어가서 같은 특이도라면 사용자 쪽이 이깁니다. 검색엔진 인증용 메타 태그는 구조화된 형태로 받아 <head>에 서버 렌더링합니다.상용 서비스 설정 화면과 항목별로 대조한 표는 리포의
docs/feature-parity.md에 있습니다.