Single surface
배경은 하나다. 섹션마다 배경색을 바꾸지 않는다. 구분은 border-top: 1px solid var(--border-dim) 하나로 충분하다.
This site is a design system.
이 사이트는 저의 또 하나의 프로덕트입니다. 아래는 이 사이트가 따르는 설계 기준입니다.
Working Principles
Typography does the work
박스, 그림자, 배경색 없이 — 크기, 굵기, 색상만으로 위계를 만든다.
Color = meaning
--accent는 클릭 가능한 것에만 쓴다. 헤딩, 라벨, 번호에는 금지.
Borders, not shadows
box-shadow는 모달처럼 실제로 떠있는 레이어에만 허용. 섹션 구분, 카드, 이미지 컨테이너는 얇은 border만.
Density with breathing room
정보는 밀도 있게. 하지만 섹션 사이 여백은 충분히. 내용 안은 촘촘하게, 섹션 밖은 넉넉하게.
Motion only when it orients
스크롤 트리거 fade-in 등 "예쁜" 애니메이션은 방해가 된다. 현재 있는 hero 텍스트 전환, 사이드바 active 상태 정도로 충분.
Tokens
Color
--bg-base | 흰 배경 (#ffffff / dark: #0d0d0d) |
|---|---|
--bg-card | 카드·서브 배경 (#f9f9f9) |
--text-pure | 최상위 텍스트, 헤딩 (#1a1a1a) |
--text-secondary | 본문 (#444) |
--text-muted | 레이블, 메타, 부가 설명 (#888) |
--border-dim | 구분선, 이미지 테두리 (rgba 0,0,0,0.08) |
--accent | 링크, 버튼, 인터랙션 전용 |
Typography
--font-display | Space Grotesk · 헤더 이름, 네비, h1, h2, 섹션 라벨, 프로젝트 제목 |
|---|---|
--font-mono | IBM Plex Mono · 인덱스 번호, 연도, 회사, 역할, 칩 |
--font-body | Pretendard · 한글 본문과 설명 |
h1 | hero, 페이지 타이틀 · clamp(40px, 6vw, 64px) |
.project-page-title | 케이스 제목 · clamp(28px, 4vw, 48px) |
.section-heading | 섹션 라벨 · 11px, uppercase, --text-muted |
.section-heading-main | 섹션 메인 제목 · 38px, bold |
.subsection-heading | 소제목 · 22–24px, 600 |
.case-sub-label | 번호/분류 · 11px, uppercase, --text-muted |
.case-text | 본문 · 16–18px, --text-secondary |
Anti-patterns
- 이모지 사용 금지 UI 어디에도 이모지 없음. 아이콘이 필요하면 SVG나 텍스트 기반 레이블로 대체.
- 카드 상단/좌측 컬러 accent 라인 금지 카드 구분은
border: 1px solid var(--border-dim)하나로 충분. - 그라디언트 배경 금지 섹션 배경에 그라디언트 쓰지 않음. 배경은
--bg-base단일. - "pill" 배지 남발 금지 기술 스택, 태그 등을 알록달록 badge로 표현하지 않음.
- 헤딩에
--accent색상 사용 금지 강조 색은 클릭 가능한 요소에만. 헤딩, 섹션 번호, 레이블에 절대 사용 안 함.