03 · Components · 아이덴티티
로고Logo
브랜드의 가장 작은 단위. 헤더·푸터·문서에서 반복적으로 등장하므로 최소 너비·여백·배경 대비 규칙을 정해두세요.
StableWCAG AA
기본 형태
tsx
<Link href="/" aria-label="주님의교회 PCL 홈으로">
<img src="/brand/pcl-logo.svg" alt="주님의교회 PCL" className="h-20 w-auto" />
</Link>미리보기
대안 레이아웃
tsx
<img src="/brand/pcl-logo-02.svg" alt="주님의교회 PCL" className="h-16 w-auto" />미리보기
다크 배경
tsx
<div className="bg-[color:var(--color-text)]">
<img src="/brand/pcl-logo-white.svg" alt="주님의교회 PCL" className="h-20 w-auto" />
</div>미리보기
사용 규칙
- 최소 높이: 헤더 로고는 64px 이상, 푸터·문서 로고는 40px 이상을 권장합니다.
- 클리어 스페이스: 로고 높이의 1/2 이상 주변 여백을 확보하세요.
- 홈 링크는 항상 로고에 연결.
aria-label로 목적지를 명시합니다. - 밝은 배경에는
pcl-logo.svg(브론즈), 어두운 배경에는pcl-logo-white.svg를 사용하세요. - 세로 공간이 좁을 때는 가로형 대안 레이아웃
pcl-logo-02.svg를 검토합니다. - 배경이 이미지이거나 로우 콘트라스트일 때는 단색 배경 칩을 받치세요.
로고 이미지에는 반드시 alt="주님의교회 PCL"을 부여합니다. 로고가 홈 링크를 감쌀 때는 링크에 aria-label="주님의교회 PCL 홈으로"를 추가해 목적지를 분명히 하세요.