Feedback

피드백은 사용자의 입력에 대한 즉각적인 반응이다. 요소를 누를 수 있다는 것과, 누른 입력이 요소에 닿았다는 것을 알린다.

사용자가 요소를 누르면 인터페이스는 입력이 닿았음을 바로 알려야 한다. 이 즉각적인 반응이 피드백이다 — 눌린(pressed) 상태를 눈과 손으로 알아챌 수 있게 드러낸다.

아직 제품에 들어가지 않았다. 지금 groo 버튼은 누르면 밝기를 낮추고 고정 배율로 준다(button.yaml) — 컴포넌트 단계에서 아래 규칙으로 옮긴다.

피드백 요소

기본눌림

색누르는 동안 표면 색이 바뀐다

눌림크기누르는 동안 정해진 거리만큼 작아진다

(())햅틱누른 순간 손끝에 진동이 온다 — 기준이 생기면 적는다

누름을 알리는 세 가지 — 색은 기본, 크기는 짜임이 허락할 때, 햅틱은 기준이 생기면

groo 는 셋을 함께 써서 누름을 알린다. 색은 누를 수 있는 모든 요소의 기본이고, 크기는 요소의 짜임이 허락할 때 더한다. 어떤 요소에 어떻게 적용하는지는 Color · Scale 에 있다. 햅틱은 기준이 생기면 이 문서에 적는다.

한 번의 입력에 여러 요소가 반응할 때, 사용자는 그것을 하나의 반응으로 느껴야 한다. 시작이나 속도가 다르면 반응이 둘로 나뉘어 읽히고, 요소가 잘못 움직이는 것처럼 보인다. 그래서 색 전환과 축소는 같은 시간을 쓴다.

토큰	값	쓰는 곳
`motion-duration-color-transition`	150ms	역할 — 색 전환(= d3)
`motion-duration-pressed-scale`	150ms	역할 — 눌림 축소(= d3)
`motion-ease-pressed-scale`	cubic-bezier(0, 0, 0.15, 1)	눌림 축소

사용자의 환경에 따라 일어나지 않는 요소가 있다. 크기는 기기의 동작 줄이기가 켜져 있으면 일어나지 않고, 햅틱은 기기나 설정에 따라 전해지지 않는다.

어떤 요소가 빠지더라도 눌렸다는 사실은 남아야 한다. 그래서 설정의 영향을 받지 않는 색 전환을 기본 요소로 두고, 나머지를 그 위에 더한다.

구성과 일부 설명은 당근 SEED Design 의 Foundations 문서(Apache-2.0)를 바탕으로 했다. 값과 그림은 groo 것이다.