Product Engineer
Example Studio
타임라인 엔트리. 왼쪽 period 컬럼, 오른쪽 제목·부제·설명.
Design.
sspzoa.io 토큰 스케일과 UI 프리미티브. Layer 2 semantic 토큰만 컴포넌트에서 사용하고, Layer 1 --solid-* 원시값은 CSS에서만 참조합니다. 테마는 prefers-color-scheme 기반이며 토글 UI는 없습니다. 코드 컨벤션은 Code Style.
Principles
에디토리얼 이력서 레이아웃. 장식용 스크롤 리빌 없이, 상태 변화(hover/focus/active)에만 모션을 둡니다.
- Tokens only — 간격·색·반경·타이포·모션은 토큰 스케일에서만.
- Semantic over primitive — Tailwind에는 Layer 2만 노출.
--solid-*직접 사용 금지. - Server by default — 인터랙션이 필요할 때만
"use client". - Named exports — Next.js 엔트리 제외 전부 export.
- a11y — skip link,
focus-visible링,prefers-reduced-motion존중.
Color
시맨틱 색. light/dark는 CSS 변수 오버라이드로 자동 전환됩니다.
Content · standard
The quick brown fox · 가나다라마바사
content-standard-primaryThe quick brown fox · 가나다라마바사
content-standard-secondaryThe quick brown fox · 가나다라마바사
content-standard-tertiaryThe quick brown fox · 가나다라마바사
content-standard-quaternaryContent · inverted
The quick brown fox · 가나다라마바사
content-inverted-primaryThe quick brown fox · 가나다라마바사
content-inverted-secondaryThe quick brown fox · 가나다라마바사
content-inverted-tertiaryThe quick brown fox · 가나다라마바사
content-inverted-quaternaryBackground
background-standard-primarybackground-standard-secondarybackground-inverted-primarybackground-inverted-secondaryComponents · fill standard
components-fill-standard-primarycomponents-fill-standard-secondarycomponents-fill-standard-tertiaryComponents · fill inverted
components-fill-inverted-primarycomponents-fill-inverted-secondarycomponents-fill-inverted-tertiaryComponents · interactive
components-interactive-hovercomponents-interactive-focusedcomponents-interactive-pressedComponents · translucent
components-translucent-primarycomponents-translucent-secondarycomponents-translucent-tertiaryCore accent
core-accentcore-accent-strongcore-accent-translucentaccent-strong은 밝은 배경 위 텍스트용. 본문 강조 링크 등에 사용.
Line
line-dividerline-outlineText on surface
primary — 제목, 본문 핵심
secondary — 설명 문단
tertiary — 메타, 보조 라벨
quaternary — 인덱스 번호, 희미한 chrome
core-accent — 포인트
core-accent-strong — 라이트 배경 링크
Typography
Wanted Sans Variable (본문) + system mono 스택. hero만 fluid clamp().
text-heroHero
text-titleTitle 24 / 34
text-headingHeading 20 / 28
text-bodyBody 16 / 27 — 본문 문단용. 한국어 가독성에 맞춘 줄간격.
text-labelLabel 14 / 22 — 보조 설명, 캡션 역할
text-footnoteFootnote 12 / 18
Tracking
- Product Engineer
tracking-label-wide0.22em - More
tracking-wider / tracking-widestTailwind built-in (intentional)
Font family
Sans — Wanted Sans Variable / system UI
Mono — SF Mono / JetBrains / Menlo
Spacing
p-spacing-*, gap-spacing-*, m-spacing-* 형태로 사용. 임의 px 금지.
spacing-502pxspacing-1004pxspacing-1506pxspacing-2008pxspacing-30012pxspacing-40016pxspacing-50020pxspacing-55024pxspacing-60028pxspacing-70032pxspacing-75036pxspacing-80040pxspacing-85048pxspacing-90064pxspacing-95072pxspacing-100080px
Radius
rounded-radius-{sm,md,lg,full}
radius-sm6pxradius-md12pxradius-lg20pxradius-full9999pxMotion
duration-{fast,base,slow} + ease-standard. prefers-reduced-motion 시 duration이 거의 0으로 강제됩니다.
duration-fast150msduration-base250msduration-slow400msease-standardcubic-bezier(0.2, 0, 0, 1)
Layout
읽기 열 max-w-content(720px). 데스크톱 사이드바 그리드 lg:grid-cols-[240px_minmax(0,1fr)].
max-w-content720px (--content-max)page shellmax-w-6xl + px-spacing-500/700/800sidebar240px sticky column @ lgsection gapgap-spacing-850 / md:gap-spacing-900
240
max-w-content · 720
Components
src/shared/ui 프리미티브. 실제 포트폴리오와 동일한 컴포넌트입니다.
Section
Section title
border-t + index/count mono chrome. 섹션 본문은 children.
Chip
ReactTypeScriptNext.js
Tag
TypeScriptSwiftFigma
Button
Description
마크다운 라이트 파서. 강조, 링크, 리스트를 지원합니다.
- 첫 번째 항목
- 두 번째 항목
Collapsible
포트폴리오 본문은 Notion CMS에서 내려오며, 볼드와 링크를 지원합니다.
- 리스트 항목 하나
- 리스트 항목 둘
- 리스트 항목 셋
Collapsible은 높이가 maxHeight를 넘을 때만 더보기/접기 토글을 노출합니다.
TimelineEntry
Frontend Engineer
Previous Co.
first 항목 이후 border-t로 구분됩니다.
RecordGroup · RecordRow
Awards
Example Award
Host Org
대상2025.11Another Record
Conference
2024.05