Design System
Devendency
KRDS(한국형 디자인 시스템)의 3계층 토큰 구조를 참고하여 구성된 디자인 가이드입니다. 사이트에서 사용하는 모든 컴포넌트가 여기에 매핑되어 있습니다.
Color Palette
KRDS의 13단계 명도 체계를 참고한 색상 팔레트입니다. 50을 기준색으로, 접근성 대비율(WCAG AA)을 준수합니다.
Primary
Gray
System
Success
#22c55e
Warning
#f59e0b
Danger
#ef4444
Info
#3b82f6
Semantic Tokens
Primitive 토큰을 참조하는 의미 기반 토큰입니다. 라이트/다크 모드에 따라 값이 전환됩니다.
Typography
KRDS의 Display-Heading-Body 계층을 참고한 타이포그래피 시스템입니다. Pretendard 서체를 기본으로, 코드에는 Fira Code를 사용합니다.
Display
2.5rem · 800 · 1.2
페이지 대제목
Heading L
2rem · 700 · 1.3
섹션 제목
Heading M
1.5rem · 700 · 1.35
서브섹션 제목
Heading S
1.25rem · 600 · 1.4
소제목
Body L
1.0625rem · 400 · 1.75
본문 (17px)
Body M
1rem · 400 · 1.75
기본 본문
Body S
0.875rem · 400 · 1.5
보조 텍스트
Caption
0.75rem · 400 · 1.5
캡션/라벨
Code
0.85rem · 400 · 1.65
코드 블록
Sans (본문)
Pretendard
가나다라마바사 아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
Mono (코드)
Fira Code
=> !== === :: ... #[] <> 0x1F
function() { return true; }
ABCDEFG abcdefg 0123456789
Spacing
4px 기반의 간격 시스템입니다. 일관된 여백과 패딩을 위해 토큰화된 간격 스케일을 사용합니다.
Border Radius
KRDS의 Small-Medium-Large-XLarge 4단계 체계를 참고한 모서리 둥글기 스케일입니다.
Small
radius-sm
4px
Medium
radius-md
8px
Large
radius-lg
12px
XLarge
radius-xl
16px
Full
radius-full
9999px
Shadows & Effects
깊이와 계층을 표현하는 그림자 및 효과 토큰입니다.
shadow-sm
버튼, 아바타
shadow-lg
드롭다운, 카드
shadow-2xl
모달, 라이트박스
backdrop-blur
헤더, 오버레이
Icons
Google Material Symbols Outlined 아이콘을 사용합니다. fontVariationSettings로 크기와 굵기를 제어합니다.
light_mode
dark_mode
routine
search
edit
delete
favorite
visibility
share
link
arrow_back
arrow_forward
expand_more
expand_less
check
close
add
remove
person
settings
logout
photo_camera
content_copy
lock
menu
Buttons
사이트 전체에서 사용하는 버튼 변형입니다. Header, Post, Auth, Admin 등에서 사용됩니다.
기본 버튼
상태 버튼
Pill / Round 버튼 (Header, Follow)
아이콘 버튼
Form Controls
Auth, Settings, Admin, Editor 등에서 사용하는 폼 컨트롤입니다.
Text Input
도움말 텍스트가 여기에 표시됩니다.
Textarea
Select
Checkbox · Radio · Toggle
Checkbox
Radio
Toggle Switch
Theme Toggle
3-way 토글 (Light / Auto / Dark). Material Symbols Outlined 아이콘을 사용합니다.
현재 사이트 스타일 (Header)
Avatar
사용자 프로필 이미지 또는 이니셜 뱃지입니다. 다양한 크기로 사용됩니다.
size-5
20px (post meta)
size-8
32px (comment)
size-9
36px (header menu)
size-20
80px (settings)
upload
settings hover
Badges & Tags
포스트 태그, 역할 뱃지, 상태 인디케이터 등에 사용됩니다.
컬러 뱃지
Admin 역할 뱃지
상태 인디케이터
포스트 태그
Cards
포스트 카드, 설정 카드, 정보 카드 등 콘텐츠 그룹화에 사용됩니다.
Post Card
Next.js 16에서 달라진 것들
App Router의 새로운 기능과 변경 사항을 정리했습니다.
Settings Card
프로필 설정
Alert / Notice
Series Nav Card
Navigation
탭 네비게이션, 사이드바, 페이지네이션, 목차 등 탐색 관련 컴포넌트입니다.
Feed Tabs
Admin Tabs (Underline)
Sidebar Nav
Pagination
Table of Contents (TOC)
목차
Scroll Progress
포스트 읽기 진행률 (상단 고정)
Modals & Overlays
확인 대화상자, 검색 모달, 이미지 라이트박스 등의 오버레이 컴포넌트입니다.
Confirm Modal
삭제 확인
이 작업은 되돌릴 수 없습니다.
확인을 위해 아래 텍스트를 입력하세요
삭제합니다
Search Modal
Dropdown Menu
Context Menu (YouTube)
Comments
댓글 작성 폼과 스레드형 댓글 목록입니다.
Comment Thread
좋은 글이네요! 많은 도움이 되었습니다.
저도 동의합니다!
Table
관리자 패널의 데이터 테이블 스타일입니다.
Admin Table
| 제목 | 상태 | 액션 |
|---|---|---|
| React Hooks 완벽 가이드 | 공개 | |
| TypeScript 제네릭 이해하기 | 비공개 |
States
로딩, 빈 상태, 에러, 스켈레톤 등 상태별 UI입니다.
Loading Spinner
Skeleton
Empty State
아직 작성된 글이 없습니다
Scroll to Top
Code Block
highlight.js 기반의 코드 블록입니다. 라이트/다크 테마를 각각 제공합니다.
코드 블록 (다크)
const greeting = "Hello, World!";Content Styles
블로그 콘텐츠에 적용되는 Obsidian 스타일 마크다운 렌더링입니다.
Inline Code
변수를 선언할 때는 const 키워드를 사용합니다.
Blockquote
좋은 코드는 그 자체로 최고의 문서이다.
Link
Obsidian 스타일의 보라색 링크Emphasis
Bold 텍스트, Italic 텍스트, Strikethrough
Task List
Table
| 이름 | 설명 |
|---|---|
| Props | 컴포넌트 속성 |
| State | 내부 상태 |
Layout & Grid
반응형 레이아웃 시스템입니다. max-width: 1200px 컨테이너와 Tailwind 브레이크포인트를 사용합니다.