DevDesign

미니멀 다크모드 디자인 시스템 만들기

2026.04.03

왜 다크모드인가

다크모드를 기본으로 선택한 이유는 단순하다. 개발자는 대부분 다크모드를 쓴다. IDE도, 터미널도, GitHub도 다크모드로 쓰는 사람이 많다. 내 블로그를 방문할 사람들도 비슷할 거라고 생각했다.

디자인 방향: 세 가지 선택지

디자인 톤을 정할 때 세 가지를 놓고 고민했다.

  1. 퓨어 블랙 — 순수 검은 배경, 고대비. Vercel이나 Linear 같은 느낌.
  2. 다크 네이비 — 짙은 남색 배경, 부드러운 느낌. 그라데이션 포인트.
  3. 다크 + 액센트 컬러 — 짙은 그레이에 그린이나 블루 포인트. GitHub이나 Spotify 느낌.

퓨어 블랙을 선택했다. 가장 깔끔하고, 콘텐츠에 집중할 수 있다. 액센트 컬러 없이 흑백 위주로 가면 디자인이 시간이 지나도 질리지 않는다.

컬러 팔레트

최소한의 색상만 정의했다. 7가지면 충분하다.

배경           #0a0a0a    — 순수한 검정에 가까운 배경
카드 배경      #111111    — 배경보다 살짝 밝은 카드
보더           #222222    — 미묘한 경계선
텍스트 primary #ededed    — 메인 텍스트, 순백보다 살짝 부드럽게
텍스트 secondary #888888  — 보조 텍스트
텍스트 muted   #666666    — 날짜, 설명 등 덜 중요한 텍스트
태그 배경      #1a1a1a    — 태그나 코드 배경

순수한 #000000 대신 #0a0a0a를 쓴 이유는, 순흑에 순백 텍스트를 올리면 눈이 피로하기 때문이다. 약간의 차이지만 장시간 읽을 때 체감된다.

마찬가지로 텍스트도 #ffffff 대신 #ededed를 썼다. 대비를 살짝 낮춰서 부드럽게 만들었다.

타이포그래피

  • 제목: Pretendard 700 (Bold)
  • 본문: Pretendard 400-500 (Regular~Medium)
  • 라벨: Pretendard 600, 11px, uppercase

라벨에 uppercase와 작은 글씨를 쓴 건 Vercel 디자인에서 영감을 받았다. "FEATURED PROJECTS", "RECENT POSTS" 같은 섹션 헤더가 깔끔하게 보인다.

컴포넌트 디자인 규칙

일관성을 위해 몇 가지 규칙을 정했다.

  • 카드: border 1px #222, border-radius 8px, padding 20px
  • 태그 pill: bg #1a1a1a, font-size 10px, border-radius 4px
  • 호버: 보더 색이 밝아지거나 배경이 카드 색으로 변하는 정도. 과하지 않게.
  • 애니메이션: transition-colors만. 번쩍이거나 튀는 효과는 없다.

미니멀의 핵심은 빼는 것이다. 그림자 없음, 그라데이션 없음, 화려한 호버 효과 없음. 콘텐츠가 주인공이 되어야 한다.

레이아웃

max-width: 768px (max-w-3xl) 단일 컬럼. 사이드바 없이 본문에 집중하는 구조다. 네비게이션은 상단 고정, 좌측에 로고 "JK", 우측에 페이지 링크.

블로그 글을 읽을 때 시선이 좌우로 왔다갔다 하지 않도록 좁은 폭을 유지했다. 이건 Medium이나 Substack 같은 읽기 전용 플랫폼에서 검증된 패턴이다.