CSS 설계와 디자인 토큰

zenoPortfolio는 CSS Variables를 중심으로 디자인 시스템을 구성합니다.

핵심 파일:

css/common.css
css/main.css
components/*/*.css

CSS Variables

:root에 전역 변수를 정의합니다.

:root {
  --bg-primary: #ffffff;
  --text-primary: #18181b;
  --brand-primary: #2563eb;
  --sp-4: 24px;
  --r-full: 9999px;
}

이런 변수를 디자인 토큰이라고 볼 수 있습니다.

디자인 토큰이란?

디자인에서 반복해서 쓰는 값을 이름 붙여 관리하는 방식입니다.

예:

토큰	의미
--brand-primary	브랜드 메인 컬러
--text-primary	가장 강한 본문 색상
--sp-4	공통 간격
--r-md	중간 border-radius
--t-base	기본 transition 속도

장점은 한 곳만 바꿔도 전체 스타일이 함께 바뀐다는 것입니다.

모드별 색상

Dev 모드:

body[data-mode="dev"] {
  --brand-primary: #2563eb;
  --brand-secondary: #0ea5e9;
  --brand-soft: #eff6ff;
}

Design 모드:

body[data-mode="design"] {
  --brand-primary: #ec4899;
  --brand-secondary: #a855f7;
  --brand-soft: #fdf2f8;
}

JS는 body[data-mode]만 바꾸고, 색상 변경은 CSS가 처리합니다.

이 구조가 좋은 이유:

상태 변경은 JavaScript
표현 변경은 CSS

역할이 분리됩니다.

레이아웃 토큰

간격:

--sp-1: 4px;
--sp-2: 8px;
--sp-3: 16px;
--sp-4: 24px;

radius:

--r-sm: 6px;
--r-md: 10px;
--r-lg: 14px;
--r-full: 9999px;

z-index:

--z-sticky: 40;
--z-modal: 9999;

z-index도 숫자를 직접 흩뿌리지 않고 이름으로 관리하면 나중에 충돌을 줄일 수 있습니다.

inner 컨테이너

.inner {
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 64px);
}

clamp()는 최소, 선호, 최대값을 지정합니다.

clamp(20px, 4vw, 64px)

뜻:

최소 20px
화면에 따라 4vw
최대 64px

반응형

@media (max-width: 768px) {
  .works-grid {
    grid-template-columns: 1fr;
  }
}

화면이 768px 이하일 때 카드 그리드를 한 줄로 바꿉니다.

접근성 관련 CSS

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

사용자가 OS에서 애니메이션 줄이기를 켜둔 경우 애니메이션을 거의 없앱니다.
이건 접근성 측면에서 좋은 처리입니다.

개선 포인트

main.css가 헤더, 메뉴, 히어로, 카드, 푸터까지 많이 담당하고 있습니다.
이미 컴포넌트별 CSS가 있으므로, 장기적으로는 스타일도 컴포넌트 CSS로 더 분리하면 좋습니다.