버튼 누름, 항목 선택, 키보드 초점은 서로 다른 상태이다. 모두 같은 밝은 외곽선으로 표시하면 사용자가 의미를 추측해야 한다.
피드백은 일어난 일을 알려 주고, 앞선 동작이 끝나기 전에도 다음 입력을 받아야 한다. 조작 범위와 상태를 구분한 뒤 전환과 전후 식별을 다듬는다.
이 글은 원문을 재구성하고 확장했다. 표본의 수치는 해당 조건의 값이며 모든 화면에 적용하는 규격이 아니다. 시리즈의 맥락과 도구는 다음 글에서 확인할 수 있다: 총론.
조작과 상태
눌러도 내용은 움직이지 않게
지속되는 선택과 짧은 누름 상태(pressed state)는 역할이 다르다. 선택은 현재 위치를, 누름은 지금의 동작을 알려 준다. 도해는 눌렀을 때 바깥 깊이를 연한 안쪽 그림자로 바꾸고 흰색을 #F5F5F5로 조금 낮춘다. Ring과 아이콘, 글자, 요소 전체의 크기는 바꾸지 않는다.
작은 아이콘에도 누르기 쉬운 범위를
보이는 아이콘 크기와 클릭 영역(hit area)은 따로 정할 수 있다. 도해의 닫기 기호는 16 × 16 px를 유지하지만 버튼 영역은 44 × 44 px여서 손가락과 포인터가 닿을 공간을 마련한다. 보조 상자는 도해에만 표시한다.
44 px는 이 시편의 선택이다. 조밀한 도구 모음에 넣을 때는 이웃 조작과의 간격과 클릭 영역이 서로 겹치지 않는지도 함께 봐야 한다. 아이콘은 작아도 주위에는 합리적인 조작 공간이 필요하다.
조용한 표면에서도 초점은 드러나게
키보드 초점(keyboard focus)은 지금 조작할 요소를 알려 주므로 알아볼 만큼 분명해야 한다. 양쪽 버튼의 ring과 채움, 크기는 유지하고 오른쪽에는 버튼과 3 px 떨어진 2 px 윤곽을 추가했다. 표면의 가는 선은 계속 형태를 설명하고 초점은 위치를 분명하게 가리킨다.
나는 절제된 표면을 좋아하지만 조작 위치도 한눈에 보이길 바란다. 초점 윤곽은 주위 바탕색과 함께 확인하고 패널의 클리핑과 이웃 컨트롤도 살펴야 한다. 선택과 누름, 초점은 각자 역할이 있으므로 동시에 성립할 수 있다.
시각적 단서의 의미를 일관되게 유지한다
선택은 지속되는 결정을, 초점은 키보드 위치를, 오류는 수정할 내용을 나타내며 동시에 성립할 수 있다. 그림은 채움과 체크로 선택을, 바깥 윤곽으로 초점을, 명확한 글자로 오류를 표시한다. 선택된 항목이 초점을 받아도 두 단서를 모두 유지한다.
이 대응을 화면 전체에 적용하고 색을 제거해도 알아볼 수 있는지 확인한다. 중요한 정보를 빨강과 초록에만 의존해서는 안 된다는 점은 W3C 색 사용 지침에도 나온다. 사용할 수 없다면 투명도만 낮추지 말고 이유를 설명한다.
연속된 동작 연결
상태가 바뀌면 아이콘도 부드럽게 연결하기
저장에서 저장 완료로 바뀌면 아이콘과 글자가 함께 결과를 알려 준다. 이 교차 페이드(cross-fade)는 같은 칸에 놓인 두 아이콘의 불투명도만 바꾸고 버튼 너비와 글자 위치는 고정한다. 왼쪽은 즉시 교체하고 오른쪽은 150 ms ease-out으로 연결한다. 어느 예시 버튼을 눌러도 양쪽은 같은 상태로 바뀐다.
나는 이런 작은 동작을 가끔 일어나는 상태 변화에 남겨 둔다. 자주 바꾸는 탭이나 각 행의 반복 조작에는 더 직접적인 반응이 필요하다. 글자와 아이콘 자체도 현재 상태를 명확하게 나타내야 한다. 누름 피드백에는 앞의 표면 명암과 그림자를 쓰고 내용은 제자리에 둔다.
동작이 끝나기 전에도 다음 입력 받기
패널이 다 열리기도 전에 손은 닫기를 누를 수 있다. 중단 가능한 전환(interruptible transition)은 현재 위치에서 새 상태로 방향을 바꿔 연속 조작을 더 매끄럽게 만든다. 아래 양쪽의 거리와 200 ms 시간, 이징은 같다. 왼쪽은 매번 지정된 출발점에서 다시 재생하고, 오른쪽은 현재 위치에서 새 도착점으로 이어진다.
진행 중에 빠르게 바꿔 패널이 갑자기 위치를 옮기는지 살펴볼 수 있다. 이 시편은 CSS transition으로 상태를 따른다. 타임라인 애니메이션도 별도의 재생 제어로 중단을 처리할 수 있다. 핵심은 실제 조작이 이어지는지다. 동작을 끄면 상태 글자와 정적인 전후 비교는 그대로 남는다.
등장과 퇴장은 사용 시점에 맞추기
처음 나타날 때는 제목과 설명, 조작을 묶어 읽는 순서를 조금씩 펼칠 수 있다. 나갈 때는 이동과 시간의 무게를 낮추고 다음 콘텐츠에 주의를 넘긴다. 나는 이런 리듬을 잠시 멈춰 볼 만한 순간에 남겨 두고, 일상적인 여닫기와 반복 조작은 직접적으로 유지한다.
동작 줄이기 설정을 켜면 이동은 거두고 상태는 분명하게 남긴다. 두 예시는 모두 조작으로 시작하며 처음 불러올 때는 초기 상태에 멈춰 있다. 읽는 동안 언제 비교할지 직접 정할 수 있다.
상태가 바뀌어도 식별 단서는 남긴다
파일이 대기에서 업로드 중, 완료로 바뀔 때 나는 이름, 위치와 행 구조를 유지하고 상태 영역만 바꾼다. 같은 파일임을 계속 알 수 있어 다른 성공 카드에서 다시 찾지 않고 변화를 비교할 수 있다.
안정적이라는 말이 전혀 움직이지 않는다는 뜻은 아니다. 정렬은 순서를 바꾸고 삭제는 항목을 없애므로 원인과 결과를 분명히 알려야 한다. 배경 업데이트만으로 초점을 옮기거나 읽고 있는 항목을 재정렬하지는 않는다.
현재 상태를 알아보고 다음 조작으로 이어 갈 수 있어야 피드백이 완성된다. 누름부터 비동기 갱신까지 대상의 정체성과 초점, 중단의 단서를 유지해야 한다. 움직임은 이를 전하는 방법 중 하나다.