Component
Note
Beta글 안에서 별도 시선을 받는 보조 단락 (info, caution, issue).
01 Preview
실제 모습.
info
설명에 곁가지로 다는 보충 메모입니다.
caution
아직 검증되지 않은 가정이거나 잠시 멈춰서 봐야 할 부분.
issue
실패한 결정, 되돌린 변경, 또는 알려진 문제.
02 Rationale
왜 이렇게 만들었나.
- 흔한 좌측 막대 대신 로그 엔트리 스타일을 씁니다. Notion이나 GitHub alerts와 다른 인상.
- Variant는 info/caution/issue 셋으로 한정했습니다. Material의 6개 이상에서 의사결정을 줄였습니다.
- 컬러 dot과 모노 라벨을 함께 둡니다. 컬러블라인드도 텍스트로 의미를 봅니다.
- 아직 Beta입니다. aside 남용과 본문 흐름 침입 패턴을 더 봐야 합니다.
03 Anatomy
어떻게 구성되는가.
- 01 Container — grid 2열 (label 100px + body)
- 02 Mark — 컬러 dot + 모노스페이스 라벨 (대문자)
- 03 Body — slot으로 자유 콘텐츠
04 Props
속성.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "info" | "caution" | "issue" | info | 컬러: primary / warning / error |
label | string | — | 라벨 오버라이드 (기본: info/caution/issue) |
05 Usage
가져다 쓰기.
import Note from '@/components/Note.astro'; 06 Accessibility
접근성 체크리스트.
- <aside> 사용 (role="note"는 의도적으로 부여하지 않습니다 — SR 지원이 일관적이지 않고, <aside>의 암묵 역할로 충분합니다.)
- 컬러 외에 텍스트 라벨로 의미 보조 (컬러블라인드 대응)
- 본문 흐름에서 분리되어야 하므로 <aside> 사용
07 Decision
언제 쓰고, 언제 쓰지 않는가.
When to use
- 본문 흐름에서 잠시 떼어 강조할 보조 정보
- 주의 사항 또는 알려진 문제 명시
- 비기능적 메모 (TODO, NOTE)
When not to
- 에러 메시지 — Alert/Toast
- 폼 검증 — Field error
- 중요한 액션 차단 메시지 — Modal
08 Related