버튼/링크와 인터랙션
링크는 이동, 버튼은 행동! Primary/Secondary 버튼, CTA 배치, hover/focus/active 상태까지 인터랙션 디자인을 배웁니다.
링크 vs 버튼 — 언제 뭘 쓸까?
이동은 <a>, 행동은 <button>. 혼동하면 접근성이 깨져요.
<a> 링크 — 이동
- →페이지 이동: 다른 페이지로 이동
- →외부 링크: 외부 사이트로 이동
- →앵커 이동: 같은 페이지 내 섹션으로 스크롤
<button> 버튼 — 행동
- →폼 제출: 데이터를 서버로 전송
- →모달 열기: 팝업/모달 창을 띄움
- →토글/접기: UI 상태를 전환
각 시나리오에서 링크 / 버튼 중 맞는 것을 골라보세요
장바구니 페이지로 이동
장바구니에 상품 추가
블로그 글 읽기
좋아요 누르기
FAQ 섹션으로 스크롤
모달 닫기
바이브코딩 팁
AI에게 "이동은 <a> 태그, 행동은 <button> 태그를 써줘. <div onClick>은 쓰지 마"
버튼 종류 — Primary / Secondary / Ghost / Destructive
한 화면에 Primary는 1개만. 중요도에 따라 버튼 등급을 부여하세요.
가장 중요한 행동을 나타내는 버튼이에요. 한 화면에 1개만 써야 사용자의 시선이 분산되지 않아요. "지금 시작하기", "결제하기" 같은 핵심 CTA에 사용합니다.
bg-primary text-primary-foreground실전 배치 예시 — 결제 화면
바이브코딩 팁
AI에게 "CTA 버튼은 Primary 스타일로 1개만, 나머지는 Secondary나 Ghost로 해줘"
인터랙션 상태 — hover / focus / active / disabled
5가지 상태가 모두 있어야 완성된 버튼이에요.
평상시 모습
기본 (Default)
아무 조작도 하지 않은 평상시 상태예요. 버튼의 기본 모습입니다.
background-color, colorbg-primary text-primary-foreground기본 상태가 깔끔해야 나머지 상태도 자연스러워요
focus 링도 없고 active 피드백도 없어요
hover, focus, active 모두 있어요
바이브코딩 팁
AI에게 "버튼에 hover, focus, active, disabled 상태를 모두 넣어줘. focus는 키보드 사용자에게 필수야"
CTA 배치 규칙
CTA는 사용자 시선 끝에 배치. 모바일은 Thumb Zone (하단)에 놓으세요.
바이브코딩 팁
AI에게 "CTA 버튼을 섹션 하단 가운데에 배치하고, 모바일에서는 하단 고정으로 해줘"
접근성 체크리스트
키보드 Tab으로 이동 가능 + focus-visible 표시 + aria-label.
아래 버튼들에 Tab 키를 눌러 이동해보세요
바이브코딩 팁
AI에게 "모든 버튼에 focus-visible 스타일을 넣고, 아이콘만 있는 버튼은 aria-label을 추가해줘"