깊게 보기 · 03
버튼 하나를 그렸는데
왜 6개를 더 그려야 하나요?
기본 모양만 그려서 넘기면 나머지는 개발자가 임의로 만듭니다. 그리고 그 결과물을 보고 “시안이랑 다른데요”라고 말하게 됩니다. 직접 비교해봅시다.
상태가 있고 없고의 차이
두 버튼에 마우스를 올리고, 눌러보고, Tab 키로 이동해보세요.
상태 없음 ✗
눌러도 아무 반응이 없습니다. 사용자는 “안 눌렸나?” 하고 여러 번 누릅니다.
상태 있음 ✓
올리면 밝아지고, 누르면 내려가고, Tab으로 오면 테두리가 생깁니다.
실제로 일어나는 일: 결제 버튼에 눌림 반응이 없어서 사용자가 세 번 눌렀고, 주문이 세 건 들어갔습니다. 상태는 장식이 아니라 오작동 방지 장치입니다.
반응이 없는 UI는 고장 난 UI처럼 느껴집니다. 그리고 실제로 중복 실행 사고를 만듭니다.
무엇을 정의해야 하나
컴포넌트 하나마다 이 6개를 정해두면 개발이 헤매지 않습니다. 각각 눌러보세요.
평소 모습. 누를 수 있어 보여야 합니다.
마우스를 올렸을 때. 모바일에는 없습니다 — 호버로만 정보를 주면 모바일에서 못 봅니다.
키보드 Tab으로 도달했을 때. 지우면 안 됩니다. 마우스를 못 쓰는 사용자가 길을 잃습니다.
누르고 있는 그 순간. 손을 떼면 사라집니다. 중복 클릭을 막아줍니다.
선택되어 계속 유지되는 상태. 탭·필터 칩에 필요합니다. 눌림과 다릅니다.
지금은 쓸 수 없음. 왜 못 쓰는지 함께 알려줘야 사용자가 막히지 않습니다.
기본 · 호버 · 포커스 · 눌림 · 선택됨 · 비활성. 여기에 데이터를 기다리는 로딩까지 더하면 7개입니다. 시안에 이걸 함께 그려 넘기세요.
가장 자주 나는 사고
데스크톱에서 완벽하게 동작하던 메뉴가 모바일에서 아예 안 열립니다.
PC에서는 마우스를 올리면 하위 메뉴가 펼쳐집니다. 그런데 손가락에는 “올려두기”가 없습니다. 모바일 사용자는 이 메뉴를 영영 열 수 없거나, 한 번 탭했을 때 이상하게 동작합니다.
호버는 보조 수단으로만 쓰고, 클릭(탭)으로도 반드시 열리게 만듭니다. 툴팁에 중요한 정보를 담지 않습니다.
확인 방법 — 지금 이 페이지를 휴대폰으로 열고 아래 점선 글자를 눌러보세요. 아무 일도 안 일어난다면 그게 문제입니다.
결제 시 적립금이 함께 쌓입니다.
호버로만 도달 가능한 기능은 없어야 합니다. 모바일 사용자에게는 존재하지 않는 기능이 됩니다.
“왜 안 눌리죠?”
비활성 버튼은 이유를 말해주지 않으면 그냥 벽입니다. 두 방식을 비교해보세요.
이유 없음 ✗
사용자는 무엇이 부족한지 모른 채 화면을 떠납니다.
이유 표시 ✓
더 나은 방법도 있습니다 — 버튼을 아예 활성으로 두고, 누르면 부족한 항목을 짚어주는 것. 사용자가 “왜 안 되지?”를 겪지 않습니다.
이제 이렇게 요청하세요
버튼 컴포넌트를 만들어주세요. 기본·호버·포커스·눌림·비활성·로딩 6가지 상태를 모두 정의해주세요. 포커스는 :focus-visible로 키보드 이동 시에만 보이게 해주세요.
이 메뉴는 호버로만 열리지 않게 해주세요. 모바일에는 호버가 없으니 클릭(탭)으로도 반드시 열리게 해주세요.
제출 버튼을 누르면 로딩 상태로 바꾸고 중복 클릭을 막아주세요. 응답이 오면 원래 상태로 돌아오게 해주세요.
비활성 버튼 아래에 왜 비활성인지 안내 문구를 넣어주세요. 조건이 충족되면 문구는 사라지고 버튼이 활성화되게 해주세요.
포커스 링(키보드 이동 시 테두리)을 지우지 말아주세요. 디자인이 안 맞으면 브랜드 색으로 스타일만 바꿔주세요.
상태를 함께 넘기면 디자인 QA에서 잡을 항목이 절반으로 줄어듭니다.
WHY THIS MATTERS
기본 모양은
전체의 6분의 1입니다.
버튼 하나를 “다 그렸다”고 말하려면 6개를 그려야 합니다. 시안에 상태가 없으면 개발자는 추측으로 채우고, 그 결과는 디자인 QA에서 전부 되돌아옵니다.