WordPress

왼쪽 패턴 축소판·파란 블록 선택선과 큰 페이지 캔버스가 만나는 흰 편집기

서양생산성크리에이티브 도구중립modern-minimalhumanism고딕compactsharpflat라이트공식한글 지원출시 2015개정 2026

갤러리에서 열기 — 적용 예시 · 가이드 다운로드

Brand DNA

브랜드 DNA

브랜드명: WordPress(워드프레스).
한 줄 정체성: 글·이미지·레이아웃을 블록으로 조립하고, 화면에서 바로 다듬어 발행하는 공개 웹 제작 도구.
공식 디자인 철학: Automattic Design System은 테마 토큰, UI 기본 요소, 아이콘, 데이터 보기 패키지를 함께 쓰는 구조를 설명한다. WordPress에서는 이 공통 기반과 블록 편집기 조작부를 구분해서 살핀다. 패턴은 여러 블록을 묶은 배치로, 넣은 뒤 콘텐츠를 바꿀 수 있다.
시그니처 요소 1개: 블록 삽입 도구에서 여는 왼쪽 패턴 축소판과 페이지 캔버스의 연결. 패턴은 완성된 콘텐츠 조각으로 보이고, 선택한 이미지에는 작은 블록 도구막대와 파란 조절점이 붙는다.
문서의 범위: WordPress.org의 Gutenberg 체험 편집기와 패턴 삽입창을 중심으로 정리했다. 서비스 화면의 흰 조작부와, 사용자가 편집 중인 페이지의 색·서체를 구별한다.
패키지의 현재 관계: 새 공통 계층은 테마 토큰·UI 기본 요소·아이콘·데이터 보기로 나뉜다. 기존 @wordpress/components는 계속 지원되며 블록 편집기에 사용된다. 새 @wordpress/ui로 전부 교체되었다고 보지 않는다.
연도 기준: 출시 연도로 적은 2015년은 서체 핸드북 첫 게시일(2015-03-12)에서 가져온 값이다(추정). 디자인 시스템 출시일을 확인한 값은 아니다. 최근 주요 개편 연도는 패키지 전환 안내의 첫 게시일(2026-08-20)과 갱신일(2026-10-29)에 따라 2026년으로 분류했다(추정). 특정 WordPress 버전에 새 패키지가 모두 적용되었다는 뜻은 아니다.
지원 테마: 이 문서는 확인한 라이트 편집 화면을 다룬다. 새 테마 공급자는 배경색을 받아 색 단계를 생성하지만 고정된 라이트·다크 모드 자체를 제공하지 않는다. 이 기능만으로 편집기 전체의 다크 전환을 가정하지 않는다.

Tone & Mood

톤 & 무드

핵심 키워드 3개: 실용적인 · 개방적인 · 정돈된.
무드 설명: 조작부는 작은 시스템 글자와 회색 경계로 물러나고, 사용자가 만드는 페이지가 화면의 가장 큰 면을 차지한다. 파랑은 삽입·게시·선택 상태를 알려 준다. 패턴 미리보기는 이름뿐 아니라 실제 글과 그림의 배치를 보여 준다.
비주얼 스타일: 모던 미니멀 · 휴머니즘. 편집 도구는 절제하지만 콘텐츠에 허용되는 표현은 넓다.
밀도: Compact. 13px UI 글자와 8px 기본 간격으로 명령을 모은다. 페이지 안의 넓은 여백은 사용자가 고른 테마의 표현이다.
모서리 성향: Sharp, 기본 조작부 2px. 컨테이너에 4px·8px를 쓸 수 있지만 버튼마다 크게 둥근 모양을 적용하지 않는다.
평면성: Flat. 패널은 1px 선으로 나누고, 떠 있는 블록 도구막대와 팝오버에만 얕은 그림자를 쓴다.
예시의 표현 범위: 아래 가상 행사 페이지의 크림색·건축 그림·세리프 제목은 콘텐츠 테마의 선택이다(추정). WordPress UI의 고유 색이나 기본 테마 값으로 읽지 않는다.

Color System

컬러 시스템

현재 테마 패키지의 기본 강조색은 #3858E9, 기본 배경 seed는 #FCFCFC다. 실제 편집기 조작면에는 흰색이 넓게 쓰인다. 디자인 핸드북의 #0073AA는 전통적인 WordPress 블루이며 현재 편집기의 버튼색과 구별한다.

아래 변수 이름은 이 문서에서 재사용하기 위한 별칭이다. 회색과 상태 원색은 Gutenberg 소스 값이다. 강조색의 500 이외 단계, 상태 배경 혼합비, 역할별 연결은 예시용 매핑이다(추정). 새 테마 패키지를 실제 사용한다면 직접 만든 단계보다 패키지가 제공하는 의미별 토큰을 우선한다.

:root {
  --color-primary-50: color-mix(in srgb, #3858e9 5%, white); /* 연한 선택 배경 (추정) */
  --color-primary-100: color-mix(in srgb, #3858e9 10%, white); /* hover 배경 (추정) */
  --color-primary-200: color-mix(in srgb, #3858e9 22%, white); /* 약한 경계 (추정) */
  --color-primary-300: color-mix(in srgb, #3858e9 45%, white); /* 보조 강조 (추정) */
  --color-primary-400: color-mix(in srgb, #3858e9 75%, white); /* 중간 강조 (추정) */
  --color-primary-500: #3858e9; /* theme 기본 seed: 삽입·게시 */
  --color-primary-600: color-mix(in srgb, #3858e9 90%, black); /* hover (추정) */
  --color-primary-700: color-mix(in srgb, #3858e9 78%, black); /* active (추정) */
  --color-primary-800: color-mix(in srgb, #3858e9 65%, black); /* 진한 강조 (추정) */
  --color-primary-900: color-mix(in srgb, #3858e9 50%, black); /* 가장 진한 단계 (추정) */
  --color-secondary-500: #0073aa; /* 옛 브랜드 블루, 현재 버튼에 혼용하지 않음 */
  --color-neutral-0: #fff;
  --color-neutral-50: #fcfcfc;
  --color-neutral-100: #f0f0f0;
  --color-neutral-200: #e0e0e0;
  --color-neutral-300: #ddd;
  --color-neutral-400: #ccc;
  --color-neutral-600: #949494;
  --color-neutral-700: #757575;
  --color-neutral-800: #2f2f2f;
  --color-neutral-900: #1e1e1e;
  --color-neutral-1000: #000;
  --color-success-fg: #4ab866; /* alert-green: 상태 표시용 */
  --color-success-bg: color-mix(in srgb, #4ab866 10%, white); /* (추정) */
  --color-warning-fg: #f0b849; /* alert-yellow: 상태 표시용 */
  --color-warning-bg: color-mix(in srgb, #f0b849 15%, white); /* (추정) */
  --color-error-fg: #cc1818; /* alert-red: 오류·삭제 */
  --color-error-bg: color-mix(in srgb, #cc1818 6%, white); /* (추정) */
  --color-info-fg: var(--color-primary-500);
  --color-info-bg: var(--color-primary-50);
  --bg-base: var(--color-neutral-0); /* 편집기 바탕 */
  --bg-subtle: var(--color-neutral-100); /* 검색·비활성 면 */
  --bg-elevated: var(--color-neutral-0); /* 떠 있는 도구막대 */
  --bg-overlay: var(--color-neutral-0); /* 팝오버 */
  --text-primary: var(--color-neutral-900);
  --text-secondary: var(--color-neutral-700);
  --text-tertiary: var(--color-neutral-700); /* 작은 글자의 대비 유지 */
  --text-on-primary: var(--color-neutral-0);
  --text-disabled: var(--color-neutral-600);
  --border-default: var(--color-neutral-300);
  --border-subtle: var(--color-neutral-200);
  --border-strong: var(--color-neutral-700);
  --border-focus: var(--color-primary-500);
  --font-ui: -apple-system, 'Segoe UI', system-ui, Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  --font-mono: Menlo, Consolas, monaco, monospace;
}

흰 조작면 → 연회색 검색 영역 → 흰 콘텐츠라는 위계를 경계선으로 나눈다. 파란 면을 패널 전체에 채우지 않는다.
초록·노랑은 작은 상태 표시용이다. 밝은 상태색을 흰 바탕의 작은 본문 글자색으로 사용하지 않는다. 상태 문장은 기본 글자색을 유지한다.
파란 선택선은 콘텐츠의 색과 독립적이다. 페이지 테마가 초록이어도 편집 조작점까지 초록으로 바꾸지 않는다.

Typography

타이포그래피

브랜드 웹사이트: 최신 WordPress.org 안내는 Inter와 E.B. Garamond의 조합이다. 같은 핸드북에 남은 Open Sans 300·400·600 안내는 이전 체계로 구분한다.
로고용 서체: Mrs Eaves Small Caps와 Dalliance는 로고의 글자 형태를 설명하는 이름이다. 편집기 제목이나 버튼의 폰트로 사용하지 않는다.
예시의 UI 스택: Windows에서는 Segoe UI, Apple 환경에서는 시스템 서체를 쓴다. 위 CSS는 공식 소스에 있는 서체로 구성하되 대체 순서를 조정한 예시다(추정). 브랜드 웹 서체와 편집기 UI 서체를 한 역할로 합치지 않는다.
실제 편집기 UI: Gutenberg의 본문·제목 스택은 운영체제 글꼴이다. macOS의 시스템 서체, Windows의 Segoe UI 등 환경에 따라 달라진다. 기본 UI 크기는 13px, 줄높이는 1.4다.
한글: 별도 한글 브랜드 서체는 확인되지 않았다. 운영체제의 한글 대체 글꼴을 따른다. 맑은 고딕·Apple SD Gothic Neo 등의 실제 선택은 실행 환경에 달렸다(추정).
페이지 캔버스: 사용자가 선택한 테마의 서체를 따른다. 아래 예시의 Georgia 대체 세리프는 가상 행사 페이지용이다(추정). 외부 웹폰트를 불러오지 않는다.
코드·수식: Menlo, Consolas, monaco, monospace. 코드와 글꼴 메뉴를 제외한 조작부까지 고정폭으로 바꾸지 않는다.

크기 단계 11·12·13·15·20·32px와 줄높이 단계 16·20·24·28·32·40px는 공개 소스에서 확인했다. 다음 이름·굵기·자간의 조합은 문서 예시용 위계다(추정).

Display: 32px / 600 / 40px / -0.02em. 편집기 안 큰 안내 제목.
H1: 24px / 600 / 32px / -0.01em. 24px 크기는 예시용 보간이다(추정).
H2: 20px / 600 / 28px / -0.01em. 대화창 제목.
H3: 15px / 600 / 24px / 0. 패널 소제목.
Body Large: 15px / 400 / 24px / 0. 설명이 긴 도움말.
Body: 13px / 400 / 20px / 0. 설정·검색·버튼.
Body Small: 12px / 400 / 16px / 0. 패턴 보조 정보.
Caption: 11px / 400 / 16px / 0. 저장 상태·경로.

Spacing

스페이싱

기본 격자는 8px이고 반 단계는 4px다. 공개 소스의 도구막대 64px, 패널 머리 48px, 편집기 사이드바 280px, 탐색 사이드바 300px를 기준으로 한다. 아래 데모는 900px 창에 맞춰 도구막대 48px·패턴 창 216px로 압축했다(추정). 페이지 전체를 비율로 축소한 값은 아니다.

:root {
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --editor-header-height: 64px;
  --editor-sidebar-width: 280px;
  --editor-content-width: 840px;
  --editor-wide-width: 1100px;
  --editor-canvas-padding: 16px;
  --editor-block-gap: 28px;
}

컨테이너: 기본 콘텐츠 폭 840px, 넓은 정렬 폭 1100px는 소스의 기본값이다. 실제 글 너비는 활성 테마가 바꿀 수 있다.
패널: 검색·탭·범주·미리보기 순서로 붙인다. 내부 16px, 작은 조작부 사이 8px가 출발점이다.
반응형: 좁아지면 문서 이름·일부 도구를 접고, 페이지는 한 열로 바꾼다. 예시에서는 열린 패턴을 상단 두 열 미리보기로 압축했다(추정). 375px 폭에서 고정 280px 사이드바를 남겨 캔버스를 밀어내지 않는다.

Border Radius

Gutenberg는 작은 컨트롤의 2px와 컨테이너의 4px·8px를 구분한다. 블록 안 사진의 모서리는 콘텐츠 스타일에 따른다. 이 예시의 사진은 직각이다.

:root {
  --radius-none: 0;
  --radius-xs: 1px;
  --radius-sm: 2px; /* 버튼·입력창 */
  --radius-md: 4px; /* 작은 컨테이너 */
  --radius-lg: 8px; /* 큰 컨테이너 */
  --radius-full: 9999px;
  --radius-circle: 50%; /* 블록 조절점 */
}

Shadow / Elevation

소스의 네 그림자 단계를 그대로 옮겼다. 패턴 타일과 일반 편집 패널은 그림자 없이 선으로 구분한다. 각 단계에 붙인 사용 예시는 이 문서의 매핑이다(추정).

:root {
  --shadow-none: none;
  --shadow-xs: 0 1px 1px rgba(0,0,0,.03), 0 1px 2px rgba(0,0,0,.02), 0 3px 3px rgba(0,0,0,.02), 0 4px 4px rgba(0,0,0,.01);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05), 0 2px 3px rgba(0,0,0,.04), 0 6px 6px rgba(0,0,0,.03), 0 8px 8px rgba(0,0,0,.02);
  --shadow-md: 0 2px 3px rgba(0,0,0,.05), 0 4px 5px rgba(0,0,0,.04), 0 12px 12px rgba(0,0,0,.03), 0 16px 16px rgba(0,0,0,.02);
  --shadow-lg: 0 5px 15px rgba(0,0,0,.08), 0 15px 27px rgba(0,0,0,.07), 0 30px 36px rgba(0,0,0,.04), 0 50px 43px rgba(0,0,0,.02);
}

없음: 사이드바, 탭, 패턴 목록. 넓은 면 사이에 그림자를 반복하지 않는다.
XS·SM: 선택 블록의 떠 있는 조작부, 작은 메뉴.
MD: 캔버스 위에 열린 팝오버.
LG: 별도 대화창. 이 예시에는 대화창을 억지로 추가하지 않는다.

Iconography

스타일: 채움과 윤곽의 혼합. 선으로만 통일하기보다 각 WordPress 아이콘의 픽셀 형태를 따른다.
기준 크기: 공개 소스의 기본 아이콘은 24px. 36px 버튼 안에 배치하고, 작은 버튼은 24px·압축형은 32px를 쓴다. 소스에는 40px 버튼으로 옮겨 가는 값도 함께 있다.
선·모서리: UI 관찰 기준 1.5~2px 상당의 선, 단정한 직각과 짧은 곡선이 섞인다(추정). 더하기·목록·패널 아이콘은 작게 줄여도 실루엣이 남아야 한다.
사용 계열: @wordpress/icons. 오래된 관리 화면의 Dashicons를 새 편집기 아이콘 체계의 기준으로 삼지 않는다.
마크: 공식 WordPress.org 페이지의 원형 W SVG 경로를 사용한다. 카드와 데모에서 같은 실제 경로를 크기만 바꿨다.
예시 그림: 스튜디오와 여섯 활동 그림은 가상 페이지의 콘텐츠다. 작은 UI 아이콘의 기능과 혼동하지 않도록 이미지 블록 안에 둔다.

Component Guide

컴포넌트 가이드

클래스는 이 문서의 예시용 이름이다. 색·간격·모서리 변수는 앞 절을 재사용한다. 버튼은 작은 직사각형이며, 선택 탭은 아래 선으로 표시한다. 아래 상태 CSS의 혼합색·연결 방식은 실제 화면 관찰에 따른 재구성이다(추정).

버튼: Primary는 게시·삽입, Secondary는 덜 강한 명령, Ghost는 도구막대, Danger는 삭제다. Hover는 명도, Active는 더 짙은 면으로 구별한다. 비활성에는 눌림 반응이 없고, 처리 중에는 문구와 진행 표시를 함께 둔다.

.wpd-btn {
  --button-bg: var(--color-primary-500);
  --button-fg: var(--text-on-primary);
  --button-hover: var(--color-primary-600);
  --button-active: var(--color-primary-700);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 36px; padding: 6px var(--space-sm); border: 1px solid transparent;
  border-radius: var(--radius-sm); background: var(--button-bg); color: var(--button-fg);
  font: 500 13px/20px var(--font-ui); cursor: pointer;
}
.wpd-btn:hover { background: var(--button-hover); }
.wpd-btn:active { background: var(--button-active); }
.wpd-btn:focus-visible, .wpd-tab:focus-visible, .wpd-pattern:focus-visible {
  outline: 2px solid var(--border-focus); outline-offset: 2px;
}
.wpd-btn.secondary {
  --button-bg: var(--bg-base); --button-fg: var(--color-primary-500);
  --button-hover: var(--color-primary-50); --button-active: var(--color-primary-100);
  border-color: var(--color-primary-500);
}
.wpd-btn.ghost {
  --button-bg: transparent; --button-fg: var(--text-primary);
  --button-hover: var(--bg-subtle); --button-active: var(--color-neutral-200);
}
.wpd-btn.danger {
  --button-bg: var(--color-error-fg); --button-fg: var(--text-on-primary);
  --button-hover: color-mix(in srgb, var(--color-error-fg) 88%, black);
  --button-active: color-mix(in srgb, var(--color-error-fg) 74%, black);
}
.wpd-btn:disabled, .wpd-btn[aria-disabled="true"] {
  background: var(--bg-subtle); color: var(--text-disabled); border-color: var(--border-subtle);
  cursor: default; pointer-events: none;
}
.wpd-btn[aria-busy="true"] { cursor: progress; pointer-events: none; }
.wpd-btn[aria-busy="true"]::before {
  content: ''; width: 12px; height: 12px; border: 2px solid currentColor;
  border-right-color: transparent; border-radius: var(--radius-circle);
  animation: wordpress-progress 900ms linear infinite;
}

입력창: 기본은 1px 경계, 포커스는 2px 파란 외곽선이다. 오류는 붉은 선과 별도 문장으로 설명한다. 검색은 연회색 바탕을 사용할 수 있다.

.wpd-input {
  width: 100%; min-width: 0; min-height: 36px; padding: 7px var(--space-sm);
  background: var(--bg-base); color: var(--text-primary); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); font: 13px/20px var(--font-ui);
}
.wpd-input:focus { outline: 2px solid var(--border-focus); outline-offset: 1px; }
.wpd-input[aria-invalid="true"] { border-color: var(--color-error-fg); }
.wpd-input-error { color: var(--color-error-fg); font: 12px/16px var(--font-ui); }
.wpd-input:disabled { background: var(--bg-subtle); color: var(--text-disabled); border-color: var(--border-default); }
.wpd-input.search { border-color: transparent; background: var(--bg-subtle); }

패턴 카드: 그림과 이름이 한 묶음이다. 기본형은 흰 면, 강조형은 파란 선, Outlined는 회색 선을 쓴다. 과장된 부양 효과를 붙이지 않는다.

.wpd-pattern { padding: var(--space-xs); background: var(--bg-base); border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--text-primary); }
.wpd-pattern.outlined { border-color: var(--border-default); }
.wpd-pattern.selected { border-color: var(--border-focus); background: var(--color-primary-50); }
.wpd-pattern:hover { border-color: var(--border-strong); }
.wpd-pattern.selected:hover { border-color: var(--border-focus); }
.wpd-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border: 1px solid transparent; border-radius: var(--radius-sm); font: 11px/16px var(--font-ui); }
.wpd-badge.solid { background: var(--color-primary-500); color: var(--text-on-primary); }
.wpd-badge.subtle { background: var(--bg-subtle); color: var(--text-secondary); }
.wpd-badge.outline { border-color: var(--border-default); color: var(--text-secondary); }
.wpd-tabs { display: flex; border-bottom: 1px solid var(--border-default); }
.wpd-tab { background: transparent; color: var(--text-primary); border: 0; border-bottom: 2px solid transparent; padding: 12px 10px; font: 500 13px/20px var(--font-ui); }
.wpd-tab[aria-selected="true"] { border-bottom-color: var(--color-primary-500); color: var(--color-primary-500); }

탐색: Blocks → Patterns → Media의 순서를 유지한다. 범주를 고른 뒤 실제 미리보기로 이어지고, Explore all patterns로 더 넓은 선택창을 연다. 열린 삽입창의 닫기는 검은 정사각형, 게시 버튼과 블록 선택선은 파랑으로 구분한다. 이 예시에서는 Featured 범주를 연 상태를 압축해 보여 준다(추정).

Motion

공식 Theme 토큰 문서는 --wpds-motion-duration-xs부터 xl까지의 시간 단계와 subtle·balanced·expressive easing을 구분한다. sm은 포커스·상태 변화, md는 메뉴·팝오버, lg는 슬라이드·나타내기에 대응한다. 숫자와 곡선의 현재 기본값은 이 조사에서 확정하지 않았으므로 아래 정적 예시의 수치만 추정으로 남긴다. 실제 패키지를 쓸 때는 해당 버전의 semantic 토큰을 참조한다. 편집 중인 글이나 그림을 장식 목적으로 계속 움직이지 않는다.

:root {
  --duration-fast: 100ms; /* hover (추정) */
  --duration-base: 150ms; /* 선택 상태 (추정) */
  --duration-slow: 200ms; /* 패널 전환 (추정) */
  --ease-out: cubic-bezier(.2, 0, 0, 1); /* (추정) */
  --ease-in-out: cubic-bezier(.4, 0, .2, 1); /* (추정) */
}
.wpd-btn, .wpd-pattern, .wpd-tab {
  transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
@keyframes wordpress-progress { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .wpd-btn, .wpd-pattern, .wpd-tab { transition: none; }
  .wpd-btn[aria-busy="true"]::before { animation: none; }
}

Anti-patterns

피해야 할 패턴

1. 브랜드 웹 서체를 조작부 전체에 적용하기: 웹사이트의 Inter·E.B. Garamond 조합과 편집기의 운영체제 UI 스택을 구분한다. 로고용 서체로 버튼을 만들지 않는다. 2. 옛 브랜드 블루와 현재 버튼색 섞기: #0073AA와 #3858E9를 같은 역할에 번갈아 쓰면 선택 상태가 흐려진다. 3. 페이지 테마를 편집기 테마로 오해하기: 크림색 사진 페이지를 편집해도 바깥 도구막대와 패턴 창은 흰색·회색 UI를 유지한다. 4. 오른쪽 설정창만 크게 보여 주기: 이 장면의 핵심은 왼쪽 패턴 선택에서 블록을 넣는 흐름이다. 이름만 있는 빈 사각형 대신 콘텐츠 축소판을 보여 준다. 5. 모든 패널에 큰 곡면·그림자 붙이기: 작은 모서리와 1px 경계, 활성 탭의 밑줄을 살린다. 좁은 화면에서는 도구를 접고 글을 재배치하며 전체 화면을 작게 축소하지 않는다.

Sources

출처

WordPress 이름과 로고는 각 권리자의 상표입니다.