일러스트레이션
면, 디테일, 외곽선, 그림자 역할로 테마에 대응하는 벡터와 아이소매트릭을 만들어요.
목적에 따라 역할 선택하기
일러스트레이션 색상은 팔레트 단계가 아니라 도형의 역할을 설명해요. 라이트와 다크 테마에서 같은 역할을 사용하세요. Tinyrack이 시각적 위계를 유지하면서 실제 값을 바꿔요.
| 역할 | 용도 |
|---|---|
illustrationFillPrimary | 가장 밝게 빛을 받는 면이나 주요 대상 |
illustrationFillSecondary | 상단 면과 보조 도형 |
illustrationFillTertiary | 측면과 안쪽으로 물러난 구조 |
illustrationDetail | 패널, 비활성 표시등, 점, 작은 하드웨어 |
illustrationStroke | 실루엣과 면 사이 경계 |
illustrationShadow | 바닥 그림자와 시각적으로 물러난 구조 |
- 주요 면
- 보조 면
- 세 번째 면
- 디테일
- 외곽선
- 그림자
아이소매트릭에서는 장면 전체에 하나의 광원 방향을 유지하세요. 왼쪽 위에서 빛이 온다면 전면이나 빛을 받는 면은 primary, 상단은 secondary, 어두운 측면은 tertiary에 연결하세요. 관계없는 배경 위에 opacity를 겹치지 말고 불투명한 면 색상을 사용하세요.
Web 구현
core.css를 불러온 다음 CSS 변수나 생성된 Tailwind 색상 유틸리티를 사용하세요.
<svg aria-hidden="true" viewBox="0 0 120 96">
<path className="fill-tinyrack-illustration-fill-primary stroke-tinyrack-illustration-stroke" d="…" />
<path className="fill-tinyrack-illustration-fill-secondary stroke-tinyrack-illustration-stroke" d="…" />
<path className="fill-tinyrack-illustration-fill-tertiary stroke-tinyrack-illustration-stroke" d="…" />
</svg>.server-detail {
fill: var(--tinyrack-illustration-detail);
}
.server-shadow {
fill: var(--tinyrack-illustration-shadow);
}Flutter 구현
painter나 위젯에서 전용 extension을 읽으세요. TinyrackTheme.light()와 TinyrackTheme.dark()가 모두 이 extension을 설치해요.
final illustration = context.tinyrackIllustrationTheme;
canvas.drawPath(front, Paint()..color = illustration.fillPrimary);
canvas.drawPath(top, Paint()..color = illustration.fillSecondary);
canvas.drawPath(side, Paint()..color = illustration.fillTertiary);의미, 모션, 접근성
- 상태 색상은 의미가 있을 때만 사용하세요. 녹색 LED는
success를 사용할 수 있지만 장식용 녹색 강조에는 사용할 수 없어요. illustrationDetail,illustrationStroke,illustrationShadow를 이름에 맞는 용도로 사용하세요. text, border, control, focus 역할을 빌리지 마세요.- 장식 SVG에는
aria-hidden="true"를 지정하세요. 의미가 있는 SVG에는role="img"와 접근 가능한 이름을 제공하세요. prefers-reduced-motion이 활성화되면 최종 상태는 유지하고 장식 이동은 제거하세요.
tinyrack-ui-check는 원시 SVG 색상, opacity로 만든 면, 역할을 벗어난 fill과 stroke를 보고해요. 구조적 좌표에 리터럴이 필요하다면 해당 줄만 구체적인 사유와 함께 억제하세요.
피해야 할 사용법
border를 어두운 면으로 쓰거나textMuted를 측면 채우기로 쓰지 마세요. 현재 값이 비슷해도 의미를 바꿔 쓸 수는 없어요.- 라이트 일러스트를 반전하거나 반투명한 검정과 흰색을 겹쳐 다크 일러스트를 만들지 마세요.
- 한 장면 안의 오브젝트마다 광원 방향을 바꾸지 마세요.
- 중립적인 일러스트를 꾸미기 위해 상태 색상을 사용하지 마세요.