Design Reference Lab

실무에서 바로 참고 가능한 카드, 버튼, 태그, 섹션 샘플을 모아둔 시각 실험실입니다.

클래식 리디자인 데모 열기

테마 팔레트 매핑

Core 12 + Extended 10 표준 팔레트와 사용처를 함께 정리했습니다.

Light Mode (Core 12)

Page BG--color-bg-page-light

Surface--color-surface-light

Surface Alt--color-surface-alt-light

Text--color-text-primary-light

Muted Text--color-text-muted-light

Border--color-border-default-light

Primary--color-primary-light

Primary Hover--color-primary-hover-light

Success--color-success-light

Warning--color-warning-light

Danger--color-danger-light

Focus Ring--color-focus-ring-light

Light Mode (Extended 10)

Surface Soft--color-surface-soft-light

Surface Raised--color-surface-raised-light

Primary Soft--color-primary-soft-light

Primary Strong--color-primary-strong-light

Success Soft--color-success-soft-light

Warning Soft--color-warning-soft-light

Danger Soft--color-danger-soft-light

Info--color-info-light

Code BG--color-code-bg-light

Overlay--color-overlay-light

Dark Mode (Core 12)

Page BG--color-bg-page-dark

Surface--color-surface-dark

Surface Alt--color-surface-alt-dark

Text--color-text-primary-dark

Muted Text--color-text-muted-dark

Border--color-border-default-dark

Primary--color-primary-dark

Primary Hover--color-primary-hover-dark

Success--color-success-dark

Warning--color-warning-dark

Danger--color-danger-dark

Focus Ring--color-focus-ring-dark

Dark Mode (Extended 10)

Surface Soft--color-surface-soft-dark

Surface Raised--color-surface-raised-dark

Primary Soft--color-primary-soft-dark

Primary Strong--color-primary-strong-dark

Success Soft--color-success-soft-dark

Warning Soft--color-warning-soft-dark

Danger Soft--color-danger-soft-dark

Info--color-info-dark

Code BG--color-code-bg-dark

Overlay--color-overlay-dark

사용처 표준 (요약)

surface/surface-soft/surface-raised: 카드, 팔레트 아이템, 패널 배경
primary/primary-hover/primary-strong: 주요 CTA, hover, 강조 텍스트
primary-soft: 칩, 보조 버튼, 선택 배경
success|warning|danger + *-soft: 상태 배지, 경고/오류 컨테이너
info: 정보성 아이콘/링크/보조 하이라이트
code-bg: 코드 블록 배경 전용
overlay: 모달/딤 레이어 전용

카드 디자인 샘플

정보량과 강조 방식이 다른 카드 스타일을 빠르게 비교합니다.

Soft

Note Card

은은한 배경과 낮은 대비로 목록형 데이터에 안정적입니다.

Outline

Library Card

테두리 중심 구성으로 카드 간 정보 분리를 깔끔하게 처리합니다.

컴포넌트 열기

Solid

Focus Card

강한 배경 대비를 사용해 하나의 핵심 메시지를 바로 전달합니다.

상세 패턴

Lift

Hover Card

호버 시 시선이 올라오는 구조로 대시보드 진입 카드에 적합합니다.

시나리오 보기

버튼 스타일 샘플

명령 우선순위와 문맥에 따라 버튼의 톤을 다르게 구성한 예시입니다.

태그, 배지, 리스트 스타일

상태 전달용 UI와 스캔 속도를 높이는 레이아웃 조합 예시입니다.

Stable Experimental Archive Card UI Button UI

밀도가 높은 정보는 카드 안에서 3줄 이하로 요약
버튼 그룹은 Primary 1개, Secondary 1~2개 구성이 기본
의미가 가벼운 링크 액션은 Ghost 버튼이나 텍스트 링크로 처리
카드와 버튼 모두 hover 시 깊이 변화는 최소한으로 유지

페이지네이션 디자인 샘플

목록/검색 결과 화면에서 자주 쓰는 페이지 이동 패턴 모음입니다.

Numbered Pagination

Jump Pagination

Compact Pagination

혼합 레이아웃 샘플

카드 + 버튼 + 보조 정보가 섞인 실제 화면형 패턴입니다.

Dashboard Module

활성

요약 지표 3개와 진입 버튼 2개를 같은 블록에 두는 운영 화면 패턴.

24Cards

11Buttons

7Labels

Archive Module

보관

사용 빈도는 낮지만 빠른 재사용을 위해 스타일 토큰을 남기는 패턴.

8Presets

3Themes

42Tokens

테스트: 액션 하단 고정 레이아웃

기존 샘플은 유지하고, 버튼 배치만 개선한 비교용 카드입니다.

Test Module A

활성

콘텐츠가 늘어나도 액션 버튼이 항상 하단에 정렬되도록 구성한 샘플입니다.

12Layouts

5Variants

19Actions

Test Module B

보관

좌측 보조 액션, 우측 주요 액션의 우선순위를 시각적으로 강제하는 구조입니다.

7Cards

14Buttons

3States

Test Module C (Full Click)

탐색형

카드 전체를 클릭 타겟으로 두고, 하단 길다란 버튼은 방향성을 보여주는 시각 요소로만 사용합니다.

1Main CTA

100%Card Click

0Sub Button

패턴 상세 보기

Test Module D (Card As Button)

직접 진입

하단 버튼을 완전히 제거하고 카드 전체를 단일 액션으로 처리한 패턴입니다. 카드 영역 어디를 눌러도 동일한 동작으로 연결됩니다.

0Bottom CTA

1Click Surface

100%Direct Entry

코드 스니펫 디자인 샘플

문서나 가이드 페이지에서 바로 사용할 수 있는 코드 블록 UI 패턴입니다.

API Fetch Pattern

JavaScript

const response = await fetch('/api/research/extract', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ query: keyword })
});

if (!response.ok) throw new Error('Request failed');
const data = await response.json();

가장 기본적인 요청/에러 처리 흐름을 보여주는 샘플입니다.

Card Layout Markup

HTML

<a href="/research/design-reference" class="dr-test-card dr-test-card-fullclick">
  <div class="dr-test-top">
    <h3>Card As Button</h3>
    <span class="dr-status">직접 진입</span>
  </div>
  <p>하단 버튼 없이 카드 전체를 클릭 타겟으로 처리합니다.</p>
</a>

카드 자체를 단일 CTA로 쓰는 구조를 그대로 복사해 쓸 수 있습니다.

쫀득한 탭 전환 샘플

인디케이터가 부드럽게 따라오고, 콘텐츠가 살짝 밀리며 바뀌는 탭 UI입니다.

Preview State

탭 라벨을 누르면 인디케이터가 스프링 느낌으로 이동하고, 패널은 짧게 페이드/슬라이드 됩니다.

Transition Recipe

transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
transition: opacity 220ms ease, translate 240ms ease;

검색창 디자인 샘플

목적에 따라 밀도와 보조 필터를 다르게 쓸 수 있는 검색 UI 예시입니다.

Classic Search

Filter Search

Notion Style Input

감기 두통

AI 챗봇 채팅창 샘플

메시지 말풍선, 상태 배지, 입력창 레이아웃을 포함한 기본 채팅 UI입니다.

실제 채팅 페이지 열기

Research Assistant Online

원문에서 "습담" 관련 구절을 우선 정리해드릴까요?

09:41

응. 처방 추출기 기준으로 정리해줘.

09:42

좋아요. 우선 동의보감/방약합편 순으로 후보 처방 5개를 보여드릴게요.