기본 상태

시안에 그려져 있는 버튼 한 장은 대개 아무 조작도 없는 상태의 모습입니다. 이것이 여러 모습 가운데 하나라는 인식이 없으면, 넘기는 쪽도 받는 쪽도 그 한 장을 버튼의 전부로 읽습니다.

그러면 나머지는 만드는 사람이 그때그때 정하게 됩니다. 같은 제품 안에서 어떤 버튼은 포인터를 올릴 때 배경이 진해지고, 어떤 버튼은 테두리가 새로 생기고, 어떤 버튼은 아무 변화가 없습니다. 사용자는 어느 것이 눌리는 요소인지 매번 다시 배워야 합니다.

이 한 장에 이름을 붙이면 대화가 달라집니다. 기준이 되는 모습을 먼저 확정하고, 나머지는 그 모습에서 무엇이 달라지는지로 적을 수 있게 됩니다.

기본 상태에서 요소의 모든 값을 확정하고, 나머지 상태는 그 값에서 무엇을 얼마나 바꿀지의 규칙으로 적습니다.

기본 상태가 정하는 값은 배경색, 글자색, 테두리 굵기와 색, 안쪽 여백, 모서리 둥글기, 글자 크기입니다. 여섯 값이 정해지면 그 요소가 화면에서 어떤 무게로 보일지가 결정됩니다.

나머지 상태는 차이로만 적습니다. 호버는 포인터가 올라가 있는 동안이니 배경을 한 단계 진하게, 포커스는 키보드로 선택된 상태이니 바깥에 2픽셀 테두리를 추가, 액티브는 누르고 있는 동안이니 배경을 두 단계 진하게, 비활성은 쓸 수 없는 상태이니 투명도를 40퍼센트로 내린다는 식입니다.

이렇게 적어 두면 화면에 버튼이 스무 개 있어도 그려야 할 시안은 한 벌입니다. 스무 개가 같은 규칙을 따르니 사용자도 한 번만 배웁니다.

기본 상태를 잡을 때 걸리는 자리는 다른 상태와 겹쳐 보이는 경우입니다. 테두리 없이 연한 회색 배경만 있는 버튼은 흐려 둔 비활성 버튼과 구분되지 않습니다. 그러면 사용자는 눌러 보고서야 그것이 눌리는 버튼임을 알게 됩니다. 기본 상태는 나머지 넷과 모두 구분되어야 기준으로 쓸 수 있습니다.

"기본 상태만 그려 주셨는데 호버랑 비활성은 어떻게 할까요?"

기준 한 장만 받아서는 구현을 시작할 수 없다는 말입니다.

"이 버튼 기본 상태가 비활성처럼 보여요. 테두리를 넣거나 배경을 한 단계 진하게 하죠."

기준이 다른 상태와 겹치면 나머지가 다 흔들린다는 지적입니다.

"상태 규칙은 시스템에 한 번 적어 두고, 화면마다 기본 상태만 그립시다."

같은 규칙을 반복해 그리지 말자는 제안입니다.

페이지덱에서는 민서가 버튼과 입력칸과 메뉴 항목의 기본 상태를 한 벌 정하고, 상태별 변화 규칙을 그 옆에 글로 적어 두었습니다. 태오는 새 화면을 만들 때 기본 상태만 받아도 나머지 넷을 규칙대로 붙입니다. 덕분에 화면마다 같은 질문이 다시 올라오는 일이 줄었습니다.