아무도 고칠 수 없던 연구실 사이트
연구실의 옛 WordPress 사이트는 수정에 개발자가 필요해 점점 낡아 갔습니다. 논문, 구성원, 소식, 모집 공고는 매달 바뀌고, 그 내용을 아는 사람은 교수님입니다.
CMS는 Notion, 폴백은 코드
구성원, 논문, 소식, 갤러리, 프로젝트, 모집, FAQ 등 모든 콘텐츠 유형이 교수님이 직접 편집하는 Notion 표입니다. 사이트는 타입이 지정된 getter 모듈 하나를 통해서만 읽고, 페이지가 Notion을 직접 호출하는 일은 없습니다. 매시간 재검증으로 최신 상태를 유지하고, 토큰으로 보호된 갱신 엔드포인트로 즉시 반영할 수 있습니다.
Notion이 비었거나 죽어도 사이트는 내장 데이터로 렌더링됩니다. 한국어와 영어는 함께 렌더링한 뒤 속성 하나로 전환하므로, 빠진 번역이 조용히 숨지 않고 눈에 보입니다.
배경
TUPA 랩 웹사이트는 연구실을 더 이상 반영하지 못하고 있었습니다. 구성원, 논문, 소식은 매달 바뀌고, 그 내용을 아는 유일한 사람은 교수님인데, 목록 하나를 고치려고 개발자가 필요해서는 안 됩니다.
연구실 첫 출근 2주 전에 재구축을 시작해 여름 동안 공개했습니다. 가장 중요했던 설계 결정은 시각적인 것이 아니었습니다. 콘텐츠는 교수님이 이미 쓰는 Notion 표에 살고, 사이트는 Notion이 비어 있거나 죽어도 살아남습니다.
교수님이 Notion에서 행 하나를 고친다
새 논문이 Publications 표에 들어갑니다. 코드도, 배포도, 개발자도 없이.
Notion 데이터베이스 11개: 구성원, 논문, 소식, 갤러리, 프로젝트, 연구 분야, 여정, 모집, FAQ, 설정, 페이지 문구
getter가 주기적으로 가져온다
모든 페이지는 getter 19개가 든 타입 지정 모듈 하나를 통해 읽습니다. 각 요청은 1시간 캐시되고 태그가 붙어, 사이트 전체가 함께 재검증됩니다.
lib/content.ts · 4,017줄 · 타입 22개 · revalidate 3600 · 태그 notion · SDK 없이 Notion REST
페이지가 두 언어로 렌더링된다
한국어와 영어가 같은 HTML에 함께 렌더링되고 속성 하나로 전환되므로, 빠진 번역이 조용히 숨지 않고 눈에 보입니다.
html[data-lang] · .ko-only / .en-only · 페이지 13개, 동적 4개 · [locale] 세그먼트 없음
급할 땐 즉시 갱신
시급한 변경에는 토큰으로 보호된 엔드포인트가 태그와 레이아웃을 즉시 재검증합니다.
GET /api/refresh?token=… → revalidateTag + revalidatePath(/, layout)
Notion이 죽어도 사이트는 산다
모든 getter는 Notion 우선이되 내장 폴백을 갖습니다. 옛 WordPress 내보내기에서 이전한 아카이브입니다. Notion이 비었거나 닿지 않아도 페이지는 렌더링됩니다.
폴백 데이터: 구성원 약 52 · 논문 약 153 · 소식 47 · 프로젝트 17 · 모집 5
Vercel에서 운영
가능한 곳은 정적으로, 매시간 재검증하며, 분석 도구와 Notion의 만료되는 이미지 링크를 위한 사진 프록시를 갖췄습니다.
inhi.kim · 75 커밋, 2026년 7월 2일 – 9월 1일 · /api/photo가 Notion S3 URL을 프록시
- prof
- KAIST 조천식모빌리티대학원 김인희 교수 연구실 · Notion을 직접 편집
- notion
- 데이터베이스 11개 · Notion-Version 2022-06-28 · 2026년 7월 21일 교수님 계정 워크스페이스로 이전
- getters
- 비동기 getter 19개, 각각 Notion 우선 + 정적 폴백 · 페이지는 Notion을 직접 호출하지 않음
- pages
- 연구 · 논문 · 구성원 · 소식 · 갤러리 · 프로젝트 · 입학 안내 · 연락처 + 동적 라우트 4개
- vercel
- 매시간 ISR · @vercel/analytics · 이후 연구실에서 GA4 추가
- isr
- fetch revalidate 3600, 태그 notion · 사이트 전체가 함께 갱신
- refresh
- 토큰 보호 · revalidateTag + revalidatePath · 급한 수정 후 사용
- fallback
- WordPress WXR 내보내기에서 정리한 TS 상수와 JSON
2026년 9월 공개
페이지 13개(동적 4개), 4K로 업스케일한 히어로 영상, 기존 WordPress 아카이브 이전 스크립트, 연구실용 짧은 사용 가이드. 디자인 시스템 Daylight Atlas는 연구실 고유의 것입니다.
단일 콘텐츠 계층
코드베이스를 정돈된 상태로 지켜 준 규칙 하나. 페이지는 lib/content.ts에서만 읽는다. 타입 22개, getter 19개, 각각 Notion 우선에 정적 폴백. Notion은 SDK 대신 REST로 직접 호출하고 데이터베이스 ID는 환경 변수로 덮어쓸 수 있어, 7월에 교수님 워크스페이스로 옮기는 일이 설정 변경으로 끝났습니다.
WordPress에서 표로
옛 사이트의 WordPress 내보내기는 정리된 TypeScript 상수와 JSON이 되었고, 다시 Notion 데이터베이스의 시드 데이터가 되었습니다. 구성원 51명, 논문 73편과 이후 추가된 저널, 소식 100건 이상, 갤러리 앨범 44개, 프로젝트 17개. 같은 데이터가 폴백 역할도 하므로 사이트가 빈 채로 나가는 일은 없습니다.
Daylight Atlas
연구실의 디자인 시스템입니다. 종이 같은 흰색, 코발트, 안전 주황색 강조, Overpass에 IBM Plex Mono 라벨, 한국어는 Pretendard. 히어로는 TUPA 글자를 도시 블록으로 만든 9초 루프 영상으로, 생성하고 움직이고 4K로 업스케일한 뒤 2MB 미만의 1920p로 인코딩했습니다.
관례가 아닌 테스트로서의 대응
TUPA의 이중 언어 대응은 구조적입니다. 두 언어가 같은 레코드에서 렌더링되지만, 한국어 필드를 비워 둬도 실패하지 않습니다. 다음 버전은 이 사이트와 같은 종류의 테스트를 갖게 될 것입니다. 번역되지 않은 문자열이 있으면 빌드가 거부하는.
- 스택
- Next.js 14 App Router · TypeScript · Tailwind · framer-motion · Notion REST API · Vercel
- 콘텐츠
- Notion 데이터베이스 11개 · getter 19개 · 타입 22개 · 모두 정적 폴백 보유
- 페이지
- 정적 9 + 동적 4 라우트 · API 라우트 2 (갱신, 사진 프록시)
- 신선도
- 60분마다 ISR · 즉시 갱신 엔드포인트
- 언어
- 한국어와 영어를 함께 렌더링, 클라이언트에서 전환
- 기간
- 2026년 7월 2일 – 9월 1일 · 75 커밋
- 역할
- 연구실 인턴으로 설계·구축 · 주 개발자
- 운영
- inhi.kim
