디자인 시스템 미학 스킬
디자인 시스템 미학 스킬은 웹사이트의 시각적 정체성을 다듬기 위한 체계적인 접근 방식입니다. 이 스킬은 디자인 시스템을 정의하는 타이포그래피, 색상, 간격, 모션 토큰에 대해 일관된 결정을 내릴 수 있도록 도와줍니다.
디자인 시스템 미학이란 무엇인가요?
디자인 시스템 미학은 다음 항목들을 다루는 구조화된 스킬입니다:
- 타이포그래피(Typography): 글꼴 패밀리, 크기, 굵기, 줄 높이
- 색상(Color): 기본(Primary), 보조(Secondary), 강조(Accent), 중립(Neutral) 팔레트
- 간격(Spacing): 패딩, 마진, 간격 스케일
- 테두리(Borders): 반경(Radius) 및 너비 토큰
- 그림자(Shadows): 높이(Elevation) 및 깊이 토큰
- 모션(Motion): 애니메이션 및 전환 효과
이러한 결정들은 테마의 theme.json 파일에 기록되어 통일성 있는 시각 시스템을 만듭니다.
디자인 시스템 미학을 사용해야 하는 이유
일관성 (Consistency)
디자인 시스템은 다음을 보장합니다:
- 모든 텍스트가 동일한 타이포그래피 스케일을 사용합니다.
- 색상이 사이트 전반에 걸쳐 일관되게 사용됩니다.
- 간격이 예측 가능한 패턴을 따릅니다.
- 애니메이션이 통일된 느낌을 줍니다.
효율성 (Efficiency)
페이지별로 디자인 결정을 내리는 대신, 다음을 수행할 수 있습니다:
- 토큰을 한 번 정의합니다.
- 모든 곳에 적용합니다.
- 하나의 값만 변경하여 전역적으로 업데이트합니다.
유연성 (Flexibility)
다음과 같은 작업을 할 수 있습니다:
- 전체 디자인 시스템을 빠르게 조정할 수 있습니다.
- 다양한 미학을 실험해 볼 수 있습니다.
- 진화하면서도 브랜드 일관성을 유지할 수 있습니다.
디자인 시스템 미학 스킬 실행하기
수동 활성화
언제든지 이 스킬을 시작할 수 있습니다:
"디자인 시스템을 다듬는 것을 도와주세요"
또는
"사이트의 미학을 개선해 봅시다"
또는
"디자인 시스템 결정 과정을 안내해 주세요"
자동 제안
다음과 같은 상황에서 에이전트가 이 스킬 사용을 제안할 수 있습니다:
- 디자인 변경을 요청할 때
- "현대적인" 또는 "전문적인" 재디자인을 요청할 때
- 시각적 일관성을 개선하고 싶을 때
- 사이트 출시를 준비할 때
디자인 시스템 미학 프로세스
1단계: 타이포그래피
에이전트가 글꼴 선택에 대해 질문합니다:
선호하는 타이포그래피 스타일은 무엇인가요?
- 세리프(Serif, 전통적, 우아함)
- 산세리프(Sans-serif, 현대적, 깔끔함)
- 모노스페이스(Monospace, 기술적, 코드 중심)
제목 글꼴에 대해:
- 눈에 띄는 제목 글꼴을 원하시나요, 아니면 본문 텍스트와 동일한 것을 사용하시겠어요?
- 선호하는 느낌: 굵은, 우아한, 재미있는, 미니멀한?
본문 글꼴에 대해:
- 가독성이 핵심입니다. 다음 중 어떤 것을 선호하시나요?
- 더 크고 여유로운 텍스트
- 간결하고 효율적인 텍스트
- 표준 크기
이후 에이전트는 다음을 정의합니다:
- 제목 글꼴(Heading font): 제목과 헤딩의 기본 글꼴
- 본문 글꼴(Body font): 단락 및 본문 텍스트용 글꼴
- 모노스페이스 글꼴(Monospace font): 코드 및 기술 콘텐츠용 글꼴
- 크기 스케일(Size scale): 미리 정의된 크기 (small, base, large, XL 등)
- 굵기 스케일(Weight scale): 글꼴 굵기 (regular, medium, bold 등)
- 줄 높이(Line height): 가독성을 위한 줄 간격
2단계: 색상 팔레트
색상 팔레트를 정의해 봅시다.
기본 색상 (브랜드 색상):
- 현재: [기존 색상 표시]
- 변경할 색상: [색상 선택기 또는 헥스 코드]
보조 색상 (지원 색상):
- 현재: [기존 색상 표시]
- 변경할 색상: [색상 선택기 또는 헥스 코드]
강조 색상 (하이라이트 및 CTA):
- 현재: [기존 색상 표시]
- 변경할 색상: [색상 선택기 또는 헥스 코드]
중립 팔레트 (텍스트, 테두리, 배경용 회색):
- 밝은(Light): [색상]
- 중간(Medium): [색상]
- 어두운(Dark): [색상]
에이전트는 다음을 포함하는 전체 팔레트를 생성합니다:
- 기본, 보조, 강조 색상
- 중립 회색 (밝음, 중간, 어두움)
- 의미론적 색상 (성공, 경고, 오류)
- 호버 및 활성 상태
3단계: 간격
얼마나 많은 여백을 원하시나요?
간격 스케일 선호도:
- 컴팩트(Compact, 촘촘하고 효율적인 레이아웃)
- 일반(Normal, 균형 잡힌 간격)
- 여유로움(Spacious, 넉넉한 여백)
이는 다음 요소에 영향을 줍니다:
- 버튼과 카드 내부의 패딩
- 섹션 간의 마진
- 그리드 항목 간의 간격
에이전트는 간격 토큰을 정의합니다:
- 기본 단위 (일반적으로 4px 또는 8px)
- 스케일: xs, sm, md, lg, xl, 2xl
- 패딩, 마진, 간격에 대한 특정 값
4단계: 테두리 및 그림자
시각적 깊이와 정의:
테두리 반경 선호도:
- 날카로운(Sharp, 둥글림 없음)
- 은은한(Subtle, 작은 반경)
- 둥근(Rounded, 중간 반경)
- 매우 둥근(Very rounded, 큰 반경)
그림자 깊이:
- 평평한(Flat, 그림자 없음)
- 은은한(Subtle, 가벼운 그림자)
- 두드러진(Pronounced, 강한 그림자)
에이전트는 다음을 생성합니다:
- 테두리 반경 토큰 (버튼, 카드, 입력 필드용)
- 높이 레벨에 대한 그림자 토큰
- 테두리 너비 토큰
5단계: 모션 및 애니메이션
사이트가 상호작용할 때 어떤 느낌이어야 할까요?
애니메이션 선호도:
- 최소화(Minimal, 애니메이션 없음)
- 은은한(Subtle, 부드러운 전환 효과)
- 재미있는(Playful, 눈에 띄는 애니메이션)
특정 애니메이션:
- 페이지 전환: 페이드, 슬라이드, 또는 없음?
- 버튼 호버: 스케일, 색상 변경, 또는 둘 다?
- 로딩 상태: 스피너, 스켈레톤, 또는 진행률 표시줄?
에이전트는 다음을 정의합니다:
- 전환 지속 시간 (빠름, 보통, 느림)
- 이징 함수 (ease-in, ease-out, ease-in-out)
- 일반적인 상호작용을 위한 애니메이션 키프레임
디자인 시스템 미학 적용하기
자동 적용
스킬을 완료하면 에이전트가 다음을 수행합니다:
- 테마의
theme.json에 모든 토큰을 업데이트합니다. - 활성 테마에 디자인 시스템을 적용합니다.
- 새로운 시스템에 맞게 블록 스타일을 재생성합니다.
- 업데이트된 테마를 활성화합니다.
수동 적용
theme.json을 직접 편집할 수도 있습니다:
{
"version": 3,
"settings": {
"color": {
"palette": [
{
"color": "#0066CC",
"name": "Primary",
"slug": "primary"
}
]
},
"typography": {
"fontFamilies": [
{
"fontFamily": "Inter, sans-serif",
"name": "Body",
"slug": "body"
}
]
},
"spacing": {
"spacingSizes": [
{
"size": "0.5rem",
"name": "Small",
"slug": "sm"
}
]
}
}
}
디자인 시스템 보기
에이전트에게 요청하기
"내 디자인 시스템을 보여주세요"
또는
"현재 디자인 토큰은 무엇인가요?"
에이전트는 타이포그래피, 색상, 간격 및 기타 토큰을 표시합니다.
theme.json 보기
텍스트 편집기에서 /wp-content/themes/[theme-name]/theme.json을 열어 원시 토큰 정의를 확인하세요.
디자인 시스템 업데이트하기
빠른 업데이트
에이전트에게 특정 변경 사항을 요청하세요:
"기본 색상을 더 어둡게 해주세요"
또는
"간격 스케일을 20% 늘려주세요"
또는
"제목 글꼴을 세리프로 변경해주세요"
전체 재디자인
디자인 시스템 미학 스킬을 다시 실행합니다:
"전체 디자인 시스템을 재디자인해 봅시다"
이것은 현재 값을 시작으로 모든 결정 과정을 다시 안내합니다.
부분 업데이트
특정 측면만 업데이트합니다:
"색상 팔레트만 업데이트하고 나머지는 그대로 유지해주세요"
디자인 시스템 모범 사례
일관성
- 모든 곳에서 동일한 토큰을 사용하세요.
- 일회성 색상이나 크기를 만들지 마세요.
- 값을 하드코딩하는 대신 토큰을 참조하세요.
명명 규칙 (Naming)
명확하고 의미론적인 이름을 사용하세요:
-
✓
primary,secondary,accent -
✗
blue,color-1,main -
✓
heading-lg,body-sm -
✗
font-size-24,text-large
확장성 (Scalability)
확장할 수 있도록 시스템을 설계하세요:
- 픽셀 대신 상대 단위(rem, em)를 사용하세요.
- 임의의 값 대신 스케일(xs, sm, md, lg, xl)을 만드세요.
- 미래의 추가 사항을 계획하세요.
문서화 (Documentation)
디자인 시스템을 문서화하세요:
- 특정 색상을 선택한 이유
- 각 토큰을 언제 사용해야 하는지
- 예외 사항 및 엣지 케이스
일반적인 디자인 시스템 패턴
모던 미니멀리스트 (Modern Minimalist)
- 산세리프 타이포그래피 (Inter, Helvetica)
- 제한된 색상 팔레트 (2~3가지 색상)
- 여유로운 간격
- 은은한 그림자
- 부드럽고 빠른 애니메이션
따뜻하고 친근함 (Warm and Friendly)
- 세리프와 산세리프의 혼합
- 따뜻한 색상 팔레트 (주황색, 따뜻한 회색)
- 둥근 모서리
- 부드러운 그림자
- 재미있는 애니메이션
전문적인 기업용 (Professional Corporate)
- 깔끔한 산세리프 (Roboto, Open Sans)
- 강조 색상이 있는 중립 팔레트
- 구조화된 간격
- 최소한의 그림자
- 은은한 전환 효과
창의적이고 대담함 (Creative and Bold)
- 개성 있는 타이포그래피
- 대담한 색상 팔레트
- 다양한 간격
- 강한 그림자
- 눈에 띄는 애니메이션
문제 해결 (Troubleshooting)
디자인 시스템 변경 사항이 보이지 않아요
- 브라우저 캐시를 지우세요.
- 정적 생성기를 사용하는 경우 사이트를 다시 빌드하세요.
theme.json이 유효한 JSON인지 확인하세요.- 테마가 활성화되어 있는지 확인하세요.
페이지마다 색상이 다르게 보여요
- 플러그인에서 충돌하는 CSS가 있는지 확인하세요.
- 모든 페이지가 동일한 테마를 사용하는지 확인하세요.
- 캐싱 플러그인을 지우세요.
이전 디자인 시스템으로 되돌리고 싶어요
- 에이전트에게 요청하세요: "내 디자인 시스템 기록을 보여주세요"
theme.json을 수동으로 이전 값으로 편집하세요.- 다른 선택 사항으로 스킬을 다시 실행하세요.
다음 단계
디자인 시스템을 정의한 후:
- 사이트 검토: 사이트를 방문하여 새로운 디자인 을 확인하세요.
- 추가 개선: 스킬을 다시 사용하여 조정을 진행하세요.
- 템플릿 생성: 디자인 토큰을 사용하여 사용자 지정 블록 템플릿을 만드세요.
- 문서화: 팀원들과 디자인 시스템을 공유하세요.