Colophon

1 · 무엇으로 만들었나What it is built with

이 사이트는 서버와 DB가 존재하지 않는 완전한 정적 사이트입니다.It is a static site. There is no server runtime. Every page is finalized to HTML at build time, and the visitor receives that HTML plus a minimal amount of script.

• 빌드 도구는 Astro 7을 사용했으며, 페이지는 .astro 컴포넌트, 글은 마크다운으로 구성되어 있습니다.The build tool is Astro 7. Pages are .astro components; posts are Markdown.
• UI 프레임워크는 쓰지 않기에 상호작용이 필요한 곳(테마 토글, 언어 토글, 커맨드 팔레트, 목록 필터)은 작은 바닐라 스크립트로 구성했습니다.No UI framework. There is no React or Vue runtime, and therefore no hydration cost. The few interactive parts (theme toggle, language toggle, command palette, list filters) are small vanilla scripts.
• 스타일은 순수 CSS로 구성했습니다. Tailwind를 쓰지 않는 이유는 소스의 가독성을 위해서입니다.Styling is plain CSS. Tailwind is not used, for the sake of source readability. Color, spacing, and the type scale live in one place as CSS custom properties (design tokens).
• 폰트는 자체 호스팅합니다. 본문은 Pretendard, 메타, 코드, 라벨은 JetBrains Mono를 씁니다.Fonts are self-hosted. Body text is Pretendard (dynamically subset, so only the needed glyph chunks are requested); metadata, code, and labels use JetBrains Mono (latin woff2). No dependency on the Google Fonts CDN.
• 마크다운은 unified 파이프라인으로 처리하게 만들었습니다. 수식은 remark-math + KaTeX, 코드는 Shiki 듀얼 테마를 이용했고, headings에는 자동 앵커가 붙습니다.Markdown runs through a unified pipeline. Math is remark-math + KaTeX (HTML output), code is Shiki with a dual theme (github-light / github-dark-dimmed), and headings get automatic anchors.
• 페이지 전환은 Astro의 ClientRouter를 사용합니다. 약 16KB. 150ms 페이드 한 번으로 구성해서 최소한의 이펙트만을 남겼습니다.Page transitions use Astro's ClientRouter (View Transitions), about 16KB. One 150ms fade, and no other transition motion.

2 · 디자인 시스템The design system

실험실 노트에서 감명을 받아, 그것을 바탕으로 만들었습니다. 종이색 배경, hairline 구분선, 그림자와 둥근 카드 없음, 메타데이터는 모노스페이스, 위계는 타이포그래피로만 만듭니다.The direction is fixed: a lab notebook. Warm paper background, hairline rules, no shadows or rounded cards, monospace metadata, hierarchy built from typography alone.

• 포인트 컬러는 파랑(라이트 #2952D6 / 다크 #7AA0FF)입니다.One accent color: blue (light #2952D6 / dark #7AA0FF). Used only for links, the active nav item, dates, and the one emphasized word in the motto.
• 라이트, 다크 모두 1급 객체입니다. 기본은 시스템 설정(prefers-color-scheme), 명시적 토글이 그것을 이기게 설계했습니다. 페인트 전에 인라인 스크립트로 테마를 적용해 플래시를 없앱니다.Light and dark are both first-class. The default follows the system setting (prefers-color-scheme); an explicit toggle overrides it. An inline script applies the theme before paint to avoid a flash.
• 레이아웃은 중앙 1컬럼, 최대폭 약 720px입니다. 고정 px 폭을 피하고 clamp()·ch·fr로 유동적으로 짰습니다. body 가로 스크롤은 없습니다.Layout is a single centered column, max width about 720px. Fixed pixel widths are avoided in favor of clamp(), ch, and fr. The body never scrolls horizontally.
• 모션은 절제합니다. prefers-reduced-motion을 전역에서 존중하고, 그 설정이 켜지면 전환, 애니메이션 시간을 0으로 만듭니다.Motion is restrained. prefers-reduced-motion is respected globally; when it is set, transition and animation durations collapse to zero.
• 즉, 화면이 요구하는 것은 읽기입니다. 장식은 그 다음입니다.In short, what the screen asks for is reading. Decoration comes after that.

3 · 변경 이력Changelog

이 사이트에 생긴 굵직한 변화만 적습니다. /lab 자체의 변경은 lab 가이드 안에 따로 있습니다.Only the notable changes to this site. The lab keeps its own changelog inside its guide.