027 Design Studio — 디자인 시스템 포트폴리오

01 — LIVE THEME ENGINE

실시간 리테마링

9개 레퍼런스 디자인 언어를
버튼 하나로 입어본다

왼쪽 프리셋을 누르면 오른쪽 실제 제품 UI가 그 레퍼런스의 색·폰트·라운드·그림자로 즉시 바뀝니다. 아래 믹서보드에서 여러 테마를 비율로 섞어 나만의 테마를 만들 수도 있어요. CSS도 그대로 복사하세요.

Acme

대시보드프로젝트설정

새로 만들기

오늘도 좋은 하루,
3개의 작업이 기다려요

이 패널 전체가 선택한 레퍼런스의 디자인 토큰으로 실시간 렌더링됩니다.

시작하기둘러보기

2,481

방문자

94%

완료율

+18%

성장

🎛️ 테마 믹서보드

세 채널의 비율을 섞어 합계 100%로 맞추면, 각 테마가 기여한 만큼 색·라운드·폰트가 혼합되어 완전히 새로운 테마가 즉석에서 만들어집니다. 위 미리보기에 실시간 반영돼요.

—합계 100%

02 — COLOR SYSTEM

색상 시스템

레퍼런스 합의로 도출한
색 토큰 시스템

칩을 클릭하면 HEX가 복사됩니다. 아래 대비 검사기로 어떤 조합이 접근성 기준을 통과하는지 즉시 확인하세요.

Brand · 블루 (9개 중 5개 레퍼런스 합의)50 → 950

Neutral · 중립 그레이50 → 950

Semantic · 의미 색상success / warning / danger / info

♿ WCAG 대비 검사기

실제 명도 대비비를 계산합니다 — 전경/배경 색을 바꿔보세요

큰 텍스트 Aa

본문 텍스트는 이렇게 보입니다

전경

배경

—

CSS Variables

:root {
  /* Brand — 블루 합의 */
  --brand-50:#eff5ff; --brand-100:#dbe8fe; --brand-300:#93b4fd;
  --brand-500:#4d8dff; --brand-600:#246bfe; /* ← 메인 */
  --brand-700:#1a52d4; --brand-900:#1e3a8a;
  /* Semantic */
  --success:#0ea671; --warning:#d97706;
  --danger:#e54848;  --info:#7c5cff;
  /* Neutral */
  --gray-50:#fafbfc; --gray-200:#e6e9f0; --gray-500:#697186;
  --gray-700:#3d4759; --gray-900:#0c1018;
}

03 — TYPOGRAPHY

타이포그래피

역할이 분명한 3단 폰트 체계

디스플레이 · 본문 · 모노. 각 행에 클릭 복사 가능한 스펙이 붙어 있습니다.

아름다운 제품

Display
52px · 800 · -0.045em
line-height 1.0
SF Pro Display

일관성이 팀의 속도를 만든다

Heading H2
32px · 740 · -0.03em
line-height 1.15

서브 헤딩은 위계를 잇는다

Heading H3
21px · 680 · -0.02em

디자인 토큰을 변수로 정의하면 색·간격·타이포를 코드 한 줄로 전역 변경할 수 있습니다. 유지보수 비용이 줄고 팀 전체가 같은 언어로 소통합니다.

Body
16px · 400 · line-height 1.7
Pretendard / SF Pro Text

const theme = {
primary: "#246bfe",
radius: "13px"
};

Mono / Code
14px · line-height 1.7
SF Mono / JetBrains Mono

📐 8px 그리드 간격 스케일

CSS

:root {
  --sp-1:4px;  --sp-2:8px;
  --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px;
  --sp-7:48px; --sp-8:64px;
  /* radius */
  --r-sm:9px; --r:13px;
  --r-lg:18px; --r-full:999px;
}
/* 반응형 — 4단계 그리드 */
@media(min-width:640px){/* sm: 2열 */}
@media(min-width:768px){/* md: 3열 */}
@media(min-width:1024px){/* lg: 4열 */}
@media(min-width:1280px){/* xl */}

04 — COMPONENTS

살아있는 컴포넌트

진짜 작동하는 컴포넌트 24종

모두 실제로 클릭·입력·열림이 됩니다. 카드의 </>를 누르면 복사용 코드가 나옵니다.

05 — MOTION

모션 랩

목적이 분명한 모션 8종

카드를 클릭하면 재생됩니다. 절제된 모션이 제품을 고급스럽게 만듭니다.

CSS — 전체 키프레임 (복붙 완성)

@keyframes fade-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes bounce{0%,100%{transform:translateY(0);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:translateY(-14px);animation-timing-function:cubic-bezier(0,0,.2,1)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ping{0%{transform:scale(1);opacity:1}75%,100%{transform:scale(1.9);opacity:0}}
@keyframes toast-in{from{opacity:0;transform:translateY(-16px) scale(.95)}}

/* 전역 트랜지션 토큰 — 모든 인터랙션 기본값 */
:root{ --ease:cubic-bezier(.32,.72,0,1); --t:.25s var(--ease) }
.btn{ transition:all var(--t) }
.btn:hover{ transform:translateY(-2px) } /* Toss식 물리감 */

06 — PATTERNS

구현 패턴

레퍼런스에서 배운 실전 패턴

무허가 AI 연구동아리 학습페이지 + 5개 레퍼런스에서 추출한, 새 프로젝트 체크리스트.

07 — KOREAN FONTS

한글 폰트 아카이브

스타일이 다른 한글 폰트 8종

고딕·명조·블랙·바탕·테크·개성체까지. 각 카드에서 CSS를 복사하면 즉시 적용됩니다. 모두 Google Fonts 무료 라이선스.

같은 문장으로 비교하기 「아름다운 제품을 빠르게 만들다」

HTML — Google Fonts 한번에 로드

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?
  family=Noto+Serif+KR:wght@400;600;900&
  family=Black+Han+Sans&
  family=Song+Myung&
  family=Do+Hyeon&
  family=Jua&
  family=Nanum+Pen+Script&
  family=Gaegu:wght@400;700&display=swap"
  rel="stylesheet">
<!-- Pretendard (가장 추천) -->
<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css">

9개 레퍼런스 디자인 언어를버튼 하나로 입어본다

오늘도 좋은 하루,3개의 작업이 기다려요

레퍼런스 합의로 도출한색 토큰 시스템