코드 위치:
src/styles/globals.css(토큰),src/app/(main)/components/organisms/*(섹션),src/components/molecules/*(공유 조각). 전략·대상·안티레퍼런스는 PRODUCT.md.
채용 담당자가 낮에 사무실 모니터로 이력서 PDF와 이 사이트를 나란히 띄워놓고 본다. 주변은 밝고, 다른 지원자 자료와 번갈아 본다.
→ 화이트 기반. 다크는 이 씬에서 "읽는 문서"가 아니라 "구경하는 데모"로 읽힌다. 다크 토글은 유지하되 기본값은 라이트다.
전략: Restrained. 잉크 계열 뉴트럴 + 단일 액센트.
| 역할 | 값 | 비고 |
|---|---|---|
| 배경 | #ffffff |
순백. 크림·샌드 계열 금지 |
| 표면 | #f4f7fa |
섹션 교차 밴드, 카드 |
| 잉크 (본문) | #0e1622 |
대비 16:1 |
| 잉크 보조 | #48586c |
대비 7:1, 회색으로 흐리지 않는다 |
| 액센트 | #00aaff |
아래 3곳에만 |
| 경계 | #e2e8f0 |
1px |
- 히어로 마커 — "없으면 만든다"에 형광펜 스와이프
- 지금 만드는 것 — 현재 진행 중인 한 건의 강조
- 클로징 마커 — "그래서, 다음은"에 같은 형광펜 (수미상관)
내비게이션 hover, 링크, 포커스 링은 액센트를 쓰되 채도를 낮춰 위 3곳의 강조를 잡아먹지 않게 한다.
다크 모드는 토큰만 교체한다. 액센트 규칙은 동일.
| 역할 | 서체 | 비고 |
|---|---|---|
| 디스플레이 | Cafe24 Ssurround | 한글 포함 전 영역. 섹션 제목·히어로 |
| 본문 한글 | Pretendard 400/700 | KS X 1001 서브셋 |
| 본문 영문 | Cafe24 PRO Slim 300/400/700 | unicode-range로 라틴만 |
| 라벨·수치 | 시스템 모노 | 기간, 연도, 스택 |
- 디스플레이 스케일:
clamp(2.5rem, 6vw, 5.5rem). 상한 6rem 이하. - 자간 하한
-0.03em. 그 아래로 조이지 않는다. - 본문
max-width: 68ch,text-wrap: pretty. 제목은text-wrap: balance. - Cafe24 PRO Slim은 한글 본문에 쓰지 않는다 — 자소가 눌려 장문 가독성이 떨어진다.
한 화면을 스크롤로 훑는 대신 실제 라우트로 분기한다. 앵커 이동 메뉴는 두지 않는다 — 주소가 남지 않아 공유·북마크가 안 되고, 뒤로가기가 기대대로 동작하지 않는다. 홈만 예외다. 홈은 요약 문서가 아니라 한 편의 스크롤 경험이고, 그 안의 링크는 전부 실제 라우트로 나간다.
| 경로 | 화면 | 담는 것 |
|---|---|---|
/ |
홈 | "없으면 | 만든다" 분할 무대. 5막 스크롤 경험(§7). 문서형 페이지가 아니다 |
/work |
만든 것 | 전체 프로젝트(밴드 + 행) · 직접 만든 오픈소스 |
/career |
지나온 길 | 전체 경력 · 쓰는 기술 · 학력 |
/blog |
글 | 글 목록, /blog/[slug] 본문 |
/about |
소개 | 서사형 자기소개 |
각 항목의 전체는 해당 페이지가 맡는다. 홈은 도구 6건·화면 3건·걸린 시간 4건만 보여주고, 나머지는 /work·/career가 맡는다.
헤더·푸터는 (sub)·(blog) 레이아웃이 감싼다. 홈은 고정 바 없이 자기 chrome(가운데 선)을 쓴다.
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에서 전부 즉시 표시.
- 섹션마다 반복되는 번호·대문자 eyebrow 없음
- 그라데이션 텍스트 없음
- 동일 규격 카드 그리드 반복 없음
- 장식용 글래스모피즘 없음
-
$ whoami등 개발자 코스튬 모티프 없음 - 색 3원칙 위반(액센트 남용) 없음
- 세지 않은 수치 없음
홈은 scroll-craft 엔진 위에 지은 split stage다.
브리프·문법 결정·감정 곡선·검증 기록은 scrollcraft/builds/devxian96-home/BRIEF.md, 지문 등록부는
scrollcraft/FINGERPRINTS.md. 코드는 src/app/(main)/(organisms, home.css)와 src/hooks/useSplitChrome.ts.
| 지면 | 바탕 | 글자 | 보조 | 액센트 |
|---|---|---|---|---|
| 종이 (없으면) | #ffffff |
#0e1622 |
#48586c |
#0074b0 |
| 밤 (만든다) | #080c14 |
#e9f1f8 |
#8a99ac |
#33bcff |
액센트는 #00aaff 한 색을 지면마다 다른 밝기로 쓴다. 대비 때문이지 색을 둘 쓰는 게 아니다.
홈은 다크 토글을 따르지 않는다. 지면색이 곧 구조라서다.
- 가운데 선이 chrome이다. 고정 바 없음. 선 위에 양쪽 라벨, 진행 채움, 正 tally가 산다. 사이트 링크는 히어로 밤 쪽 상단과 결말 안에 같은 순서로 놓는다.
- 액센트 사용처는 홈에서 다섯 곳: ① 선의 진행 채움 ② "지금 만드는 것" 라벨 ③ CTA hover
④ 4막 숫자 밑줄과 5막 붕괴의 앞날 ⑤ 총합에 닿았을 때의 正 획. 전부
#00aaff계열 한 색. 히어로·클로징 마커(§2)는 홈에서 폐기했다. 두 단어 자체가 마커다. - 다섯 막, 전부 pin. 갈림(parallax 층) → 장부(쌍 cue) → 화면(reveal) → 시간(count) → 결말(붕괴). 같은 기기를 인접해 쓰지 않는다. 막을 추가하려면 BRIEF.md의 감정 곡선부터 고친다.
- 마지막 막이 페이지의 마지막 요소다. 그 뒤에 푸터를 두지 않는다. 결말이 흐려진다.
- 正 tally는 지나간 "만든 것"만 센다. 장부 6 + 화면 3 = 9. 항목을 늘리면
TALLY_GLYPHS도 늘린다. - 숫자는 이력서에 있는 것만. 카운터 목표값은
src/constants/home.ts에서만 바꾼다. - cue의 초기
opacity: 0은 홈에서만 허용한다. §6의 "이미 보이는 상태를 강화" 원칙의 예외다. 대신 히어로는 엔진이 뜨기 전(html:not(.sc-ready))에도 켜 두고,<noscript>가 전부를 켠다. - em dash를 화면에 쓰지 않는다. 기간은
~로 바꿔 렌더한다(HOME_SCREENS.period). - 엔진 파일은 고치지 않는다.
public/scrollcraft/scrollcraft.js,src/styles/scrollcraft.css는 원본 그대로. 프로젝트 고유 동작은home.css와useSplitChrome에서--sc-p를 읽어 만든다. - 검증은 하네스로. 바꾸면
pnpm build후scrollcraft/builds/devxian96-home/BRIEF.md하단 절차대로 데스크탑·폰·reduced motion 세 번 찍고 contact sheet를 눈으로 본다.