DESIGN.md — devxian96.github.io 디자인 시스템 & 서사 구조

코드 위치: src/styles/globals.css(토큰), src/app/(main)/components/organisms/*(섹션), src/components/molecules/*(공유 조각). 전략·대상·안티레퍼런스는 PRODUCT.md.

1. 씬(scene)

채용 담당자가 낮에 사무실 모니터로 이력서 PDF와 이 사이트를 나란히 띄워놓고 본다. 주변은 밝고, 다른 지원자 자료와 번갈아 본다.

→ 화이트 기반. 다크는 이 씬에서 "읽는 문서"가 아니라 "구경하는 데모"로 읽힌다. 다크 토글은 유지하되 기본값은 라이트다.

전략: Restrained. 잉크 계열 뉴트럴 + 단일 액센트.

내비게이션 hover, 링크, 포커스 링은 액센트를 쓰되 채도를 낮춰 위 3곳의 강조를 잡아먹지 않게 한다.

다크 모드는 토큰만 교체한다. 액센트 규칙은 동일.

한 화면을 스크롤로 훑는 대신 실제 라우트로 분기한다. 앵커 이동 메뉴는 두지 않는다 — 주소가 남지 않아 공유·북마크가 안 되고, 뒤로가기가 기대대로 동작하지 않는다.

경로	화면	담는 것
`/`	홈	주장(Hero) · 지금(Now) · 대표작 2건 · 현재 소속 2곳 · 최근 글 · 클로징
`/work`	만든 것	전체 프로젝트(밴드 + 행) · 직접 만든 오픈소스
`/career`	지나온 길	전체 경력 · 쓰는 기술 · 학력
`/blog`	글	글 목록, `/blog/[slug]` 본문
`/about`	소개	서사형 자기소개

홈은 요약이고 각 항목의 전체는 해당 페이지가 맡는다. 홈에서 각 섹션 끝의 링크가 그 페이지로 넘긴다.

CTA는 화면당 하나만 둔다(Hick). 히어로의 CTA는 메일 한 개다.

콘텐츠 폭 max-w-6xl(1152px). 히어로 이미지 밴드와 프로젝트 밴드는 full-bleed.
히어로 배경은 비운다. 격자·도트 같은 배경 패턴은 쓰지 않는다 — 여백 자체가 구조다.
섹션 간 clamp(5rem, 10vw, 9rem). 섹션 내부는 촘촘하게 — 여백은 구조에, 밀도는 내용에.
번호 eyebrow(01/02/03) 금지. 순서가 정보가 아니다. 섹션 제목만으로 위계를 만든다.
프로젝트는 동일 카드 그리드가 아니라 에디토리얼 리스트. 대표작 3건은 full-bleed 이미지 밴드로, 나머지는 텍스트 행으로 밀도를 준다.
사이드 레일 인덱스(데스크탑 ≥1280px)로 현재 위치를 표시한다.

커브 cubic-bezier(0.16, 1, 0.3, 1) (ease-out-expo).
진입은 transform + opacity만. 레이아웃 속성 애니메이션 금지.
모든 진입 모션은 이미 보이는 상태를 강화한다. 초기 opacity: 0을 클래스 토글로 걸지 않는다 — 헤드리스 렌더러와 백그라운드 탭에서 빈 화면으로 나간다.
히어로 마커는 폭 0 → 100% 스와이프. 클로징 마커도 동일 모션으로 짝을 맞춘다.
prefers-reduced-motion: reduce에서 전부 즉시 표시.