Components · 액션
Button (버튼)
브랜드 1차 액션 컴포넌트. 5변형 = arch(주 CTA) · navy · outline · light · teal(보조 CTA) — 홈페이지 실측 정본(design.md §7, 2026-07-26 대표 승인). 전 변형이 완전 원형(--button-radius = full) 이고, 높이는 40/48/56 3단 스케일이다.
정의
사용자가 누르면 즉시 액션이 실행되는 컴포넌트다. 사각 버튼은 이 브랜드에 없다 — 필(pill) 형태가 "누르는 것"의 시그니처이며, 인풋(12px 모서리)과 형태로 구분된다.
Anatomy
| 부위 | 토큰 |
|---|---|
| ① 컨테이너 | 모서리 --button-radius(full 고정) · 높이 --button-height-sm/md/lg(40/48/56px) · 좌우 --button-pad-x-sm/md/lg(20/24/28px) |
| ② 라벨 | --font-family-sans · 크기 --font-size-base(15px) · 굵기 --font-weight-semibold(600) · 줄바꿈 금지 |
| ③ 아이콘(선택) | 라인 SVG, 라벨과 간격 --button-gap, stroke="currentColor" |
변형
| 변형 | 용도 |
|---|---|
| arch | 화면의 주 CTA(한 화면 1개) — 아치 그라디언트 필 + 흰 라벨 + 컬러 그림자 |
| navy | 보조 액션 기본 — 네이비 필 + 흰 라벨, 호버 시 청록으로 전환 |
| outline | 3차 액션 — 흰 배경 + 헤어라인 보더, 호버 시 청록 보더·라벨 |
| light | 진한 면(네이비 밴드·아치 밴드) 위 전용 — 흰 필 + 네이비 라벨 |
| teal | 보조 CTA(외부·별도 목적지) — primary-strong(#0B6C7D) 필. 네이비 반전 밴드가 있는 페이지에서 navy 대신 쓴다: 버튼과 밴드가 같은 네이비면 버튼이 그 섹션으로 가는 링크처럼 읽힌다(2026-07-26 대표 지적) |
라임 단색 CTA는 웹 금지(design.md §8 — 라임·노랑은 구조를 칠하지 않는다). 인쇄 뒷표지의 라임 필은 paged.css 관할로 별개.
상태
| 상태 | arch | navy | outline | light | teal |
|---|---|---|---|---|---|
| Default | bg --button-arch-bg / fg --button-arch-fg / shadow --button-arch-shadow | bg --button-navy-bg / fg --button-navy-fg | border --button-outline-border / fg --button-outline-fg | bg --button-light-bg / fg --button-light-fg | bg --button-teal-bg / fg --button-teal-fg |
| Hover | translateY(-2px) + brightness(1.05) | bg --button-navy-bg-hover + translateY(-2px) | border --button-outline-border-hover / fg --button-outline-fg-hover | bg --button-light-bg-hover | bg --button-teal-bg-hover + translateY(-2px) |
| Focus | box-shadow: var(--focus-ring) (5변형 공통) | 동일 | 동일 | 동일 | 동일 |
| Disabled | opacity: var(--button-disabled-opacity) + cursor: not-allowed (5변형 공통) | 동일 | 동일 | 동일 | 동일 |
Do / Don't
Do
- 한 화면에 arch는 1개만 — 주 액션이 무엇인지 시선이 바로 가게 한다.
- 헤더 우측 = navy(주) + outline 또는 teal(보조), 높이 40px(
--button-height-sm). - 같은 대상을 히어로와 헤더 양쪽에 둘 때는 두 곳의 강조를 일치시킨다 — 한쪽만 튀면 어색하다(2026-07-26).
- 아이콘을 쓰면 라벨과 함께 쓴다(아이콘 단독 버튼은
aria-label필수 + Tooltip 참조).
Don't
- arch를 여러 개 나란히 두지 말 것 — 위계가 무너진다.
- 라임·노랑 단색으로 버튼을 칠하지 말 것(웹) — 제품 지시·아치 내부 전용 색이다.
- 모서리를 full 외의 값으로 바꾸지 말 것 — 버튼/인풋 형태 구분이 사라진다.
- 링크로 이동하는 요소를 버튼처럼 꾸미지 말 것 — 이동은 Link, 실행은 Button. (단 앵커가 CTA 역할이면 버튼 스타일 허용 — 홈 실측 관례)
콘텐츠 규칙
- 라벨은 동사형으로 끝낸다: "견적 요청하기", "카탈로그 받기" (명사 단독 "견적" ✗).
- 길이는 2~4어절, 줄바꿈 없이 한 줄(
white-space: nowrap). 말줄임표(…) 금지. - 이중 부정 금지("취소 안 함" ✗ → "유지하기").
- 조사 오류·띄어쓰기는 발행 전 점검(전역 규칙:
../guidelines/ux-writing.md).
키보드 인터랙션
| 키 | 동작 |
|---|---|
Tab | 버튼으로 포커스 이동(포커스 링 표시) |
Enter / Space | 버튼 실행 |
접근성
- 네이티브
<button>요소를 쓴다(<div role="button">지양) — 키보드·스크린리더 기본 지원. - 대비: 흰 라벨 대비는 navy(≈14:1)·teal(#0B6C7D ≈4.9:1, AA) 충분. arch는 라임 시작부에서 대비가 약하므로 라벨을 그라디언트의 청록 쪽(중앙~우측)에 걸치게 하고 600 이상 굵기를 유지한다. AA가 필수인 화면(폼 제출 등)은 teal 변형을 쓴다.
- 포커스 링 제거 금지(
:focus-visible+--focus-ring) — 밝은 면·네이비 면·아치 면 셋 다에서 판독돼야 한다. - 히트영역: 시각 높이 40px(
sm)일 때도 패딩·마진으로 44px(--target-min) 히트영역을 확보한다(웹 실측 40px — design.md Known Gaps #3, 시각 규격은 유지하되 터치 영역으로 보완). - 비활성은
disabled속성(스타일만 흐리게 하지 말 것). 기준:../guidelines/accessibility.md. prefers-reduced-motion: reduce에서translateY호버 모션을 끈다.
코드
html
<button class="pi-button pi-button--arch" type="button">견적 요청하기</button>
<button class="pi-button pi-button--navy" type="button">상담 신청하기</button>
<button class="pi-button pi-button--outline" type="button">카탈로그 받기</button>
<button class="pi-button pi-button--light" type="button">자세히 보기</button>
<button class="pi-button pi-button--teal" type="button">퍼블릭아이디 월드 보기</button>
<button class="pi-button pi-button--arch" type="button" disabled>견적 요청하기</button>css
.pi-button {
display: inline-flex; align-items: center; justify-content: center;
gap: var(--button-gap);
height: var(--button-height-md);
padding: 0 var(--button-pad-x-md);
border: 0;
border-radius: var(--button-radius);
font-family: var(--font-family-sans);
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
line-height: var(--font-lh-normal);
letter-spacing: var(--font-ls-normal);
white-space: nowrap;
cursor: pointer;
transition: background var(--duration-base) var(--easing-out),
color var(--duration-base) var(--easing-out),
border-color var(--duration-base) var(--easing-out),
transform var(--duration-base) var(--easing-out),
filter var(--duration-base) var(--easing-out);
}
.pi-button--sm { height: var(--button-height-sm); padding: 0 var(--button-pad-x-sm); font-size: var(--font-size-sm); }
.pi-button--lg { height: var(--button-height-lg); padding: 0 var(--button-pad-x-lg); }
.pi-button--arch {
background: var(--button-arch-bg);
color: var(--button-arch-fg);
box-shadow: var(--button-arch-shadow);
}
.pi-button--arch:hover { transform: translateY(-2px); filter: brightness(1.05); }
.pi-button--navy { background: var(--button-navy-bg); color: var(--button-navy-fg); }
.pi-button--navy:hover { background: var(--button-navy-bg-hover); transform: translateY(-2px); }
.pi-button--outline {
background: transparent;
border: var(--border-thin) solid var(--button-outline-border);
color: var(--button-outline-fg);
}
.pi-button--outline:hover { border-color: var(--button-outline-border-hover); color: var(--button-outline-fg-hover); }
.pi-button--light { background: var(--button-light-bg); color: var(--button-light-fg); }
.pi-button--light:hover { background: var(--button-light-bg-hover); }
.pi-button--teal { background: var(--button-teal-bg); color: var(--button-teal-fg); }
.pi-button--teal:hover { background: var(--button-teal-bg-hover); transform: translateY(-2px); }
.pi-button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pi-button:disabled { opacity: var(--button-disabled-opacity); cursor: not-allowed; transform: none; }
@media (prefers-reduced-motion: reduce) {
.pi-button { transition: none; }
.pi-button:hover { transform: none; }
}Changelog
| 날짜 | 변경 |
|---|---|
| 2026-07-26 | design.md 정렬 — 변형을 Primary·Secondary·Ghost·CTA(라임) → arch·navy·outline·light·teal 5종으로 교체(홈페이지 실측 + 대표 승인). radius full 고정, 높이 40/48/56 스케일, 라벨 15px/600, 라임 CTA 웹 금지, 히어로↔헤더 강조 일치 규칙 |
| 2026-07-15 | 문서 계약(10섹션) 적용 — Anatomy 도해·콘텐츠 규칙·키보드·코드 신설 |