Feedback

사용자가 요소를 누르면, 인터페이스는 그 입력이 전달되었음을 즉시 알려주어야 합니다. 이 즉각적인 반응이 피드백입니다. State가 정의한 상태를 Motion의 언어로 드러내는 역할을 합니다.

피드백을 전달하는 방법은 하나가 아닙니다. 색상·축소·여백처럼 눈으로 보이는 방법이 있고, haptic처럼 손끝으로 느껴지는 방법도 있습니다. 요소마다 쓰는 조합이 다릅니다. Action Button은 색상과 축소를 쓰고, List Item은 세 가지를 모두 씁니다. 각 표현은 시간과 이징을 따로 정할 수 있어, 같은 누름 안에서도 서로 다른 속도로 움직입니다.

이 문서는 그중 축소를 정의합니다. 색상은 Color에서, 시간과 이징의 기준은 Motion에서 다룹니다.

Scale

누를 수 있는 요소는 눌린 동안 살짝 작아집니다. 이는 물리적인 버튼이 눌려 들어가는 감각을 차용한 것으로, 사용자가 손끝의 입력이 요소에 도달했음을 즉각적으로 인지하게 합니다.

이때 중요한 것은 모든 요소에서 눌린 느낌의 양이 동일하게 느껴지는 것입니다. SEED는 이를 위해 축소량을 배율이 아닌 거리로 정의합니다.

배율이 아니라 거리로 정의합니다

요소마다 고정된 배율(예: 0.97)을 지정하는 방식은 요소의 크기가 달라지면 실제로 움직이는 거리가 함께 달라진다는 한계가 있습니다.

같은 배율 0.98을 적용하더라도, 폭이 넓어질수록 가로로 움직이는 거리는 계속 커집니다.

세로로는 모두 똑같이 줄어들지만 가로로 줄어드는 양은 최대 9배까지 차이가 납니다. 좁은 버튼은 눌린 느낌이 거의 없고, 넓은 버튼은 가장자리가 눈에 띄게 안쪽으로 빨려 들어갑니다. 이 값에는 상한이 없기 때문에 화면이 커질수록 어색해집니다.

따라서 SEED는 눌렸을 때 요소가 정해진 거리만큼 줄어든다고 정의합니다. 배율은 미리 정하는 값이 아니라 요소의 실제 크기로부터 계산되는 결과값입니다.

계산 방식

축소량은 2px입니다. 이 거리를 어떤 길이에서 빼는지를 정하는 값을 기준 길이(basis) 라고 합니다.

basis = max(요소 높이, 요소 폭 ÷ 4, 24)
배율  = (basis - 2) ÷ basis

기준 길이는 기본적으로 요소의 높이입니다. 가로쓰기 환경에서는 누를 수 있는 대부분의 요소가 가로로 길기 때문에, 폭보다 높이가 요소의 덩치를 더 잘 대표합니다.

여기에 두 가지 보정을 더합니다.

• 요소 폭 ÷ 4 — 좌우로 길고 위아래로 짧은 요소를 보정합니다. List Item 처럼 폭이 높이보다 훨씬 큰 요소에서 높이만 기준으로 삼으면 가로로 지나치게 많이 움직입니다. 폭이 넓을수록 기준 길이를 키워, 같은 2px이 그만큼 작은 비율이 되도록 합니다.
• 최소 24 — 아주 작은 요소를 보정합니다. 원래 크기가 작으면 같은 2px이라도 축소 비율이 과도해집니다. 최소 기준 길이 24px은 축소 비율이 8.3%를 넘지 않도록 보장합니다.

기준 길이는 이 세 값 중 가장 큰 값을 사용합니다.

축소량 2, 폭 보정값 4, 최소 기준 길이 24는 SEED를 사용하는 모든 화면에 동일하게 적용되는 고정값입니다. 눌린 느낌의 양을 어디서나 같게 만드는 것이 목적이므로, 이 값들은 토큰으로 제공하지 않으며 개별 요소나 서비스 단위로 변경하지 않습니다.

적용 결과

좌우로 긴 요소는 세로 축소가 거의 사라집니다. 이런 요소에서는 좌우 가장자리의 움직임이 눌린 느낌을 대신 전달합니다.

축소의 기준점

축소는 항상 요소의 정가운데를 기준으로 일어납니다.

축소는 자리를 바꾸지 않습니다

축소는 요소가 차지하는 자리에 영향을 주지 않습니다. 눌린 요소가 작아져도 주변 요소는 움직이지 않고, 리스트에서 한 항목을 눌러도 위아래 항목의 위치는 그대로입니다.

적용 범위 결정하기

pressed 상태를 가지는 요소를 새로 만들 때는 다음 두 가지를 함께 결정합니다.

1. 축소를 적용할지 결정합니다

누를 수 있는 모든 요소가 축소되지는 않습니다. 두 가지를 확인합니다.

표면을 가지는가. 링크 텍스트처럼 배경 없이 텍스트 흐름 안에 놓인 요소에는 적용하지 않습니다. 줄어들 표면이 없어 축소가 글자 크기 변화처럼 읽힙니다.

단일 동작을 수행하는가. 요소 전체를 눌렀을 때 결과가 하나로 정해지는 요소에 적용합니다. List Item과 Select Box Item은 안에 Switch나 Checkbox 같은 요소를 포함하더라도 행 어디를 눌렀을 때의 결과가 하나로 수렴하므로 적용합니다.

반면 카드 탭·좋아요·저장·작성자 이동처럼 서로 대등한 동작이 한 요소 안에 나란히 놓인 경우에는 적용하지 않습니다. 전체가 줄어들면 그중 무엇이 눌린 것인지 모호해집니다. 이런 요소는 축소 대신 배경 표현으로 pressed를 나타냅니다.

2. 축소 대상이 전체인지 콘텐츠인지 결정합니다

판단 기준은 하나입니다. 요소 전체를 줄였을 때 정렬·여백·모서리가 어긋나 보이는가?

• 어긋나지 않는다 → Scale. 요소 전체가 함께 줄어듭니다. Action Button처럼 배경과 콘텐츠가 하나의 표면으로 인식되는 요소가 여기 해당합니다. 전체가 함께 줄어도 내부 관계가 그대로 유지됩니다.
• 어긋나 보인다 → Content Scale. 배경은 그대로 두고 안쪽 콘텐츠만 줄어듭니다. List Item, Accordion, Select Box Item처럼 배경이 화면 폭을 가득 채우고 그 안에 여러 요소가 정렬된 구조가 여기 해당합니다.

이런 구조를 통째로 줄이면 세 가지가 한꺼번에 어긋나 보입니다.

• 정렬 — 좌우 끝에 맞춰져 있던 요소가 안쪽으로 밀려 들어와, 위아래 항목과 시작선이 어긋납니다.
• 여백 — 화면 가장자리까지 닿아 있던 배경이 줄어들면서 원래 설계한 여백과 달라집니다.
• 모서리 — 모서리 반경까지 함께 줄어들어 주변 요소와 곡률이 맞지 않습니다.

그래서 배경과 콘텐츠를 나누어 처리합니다. 배경은 좌우 여백을 좁히고 모서리 반경을 키우는 방식으로 눌림을 표현하고, 콘텐츠는 축소로 표현합니다. 두 표현이 서로 다른 영역에서 일어나므로 간섭하지 않습니다.

다른 상태와 함께 있을 때

State에서 정의하듯 상호작용 상태와 옵션 상태는 함께 적용될 수 있습니다. 축소는 누르고 있는 동안에만 일어나므로, 다른 상태의 표현을 덮어쓰지 않고 그 위에 더해집니다.

• Selected — 선택된 요소도 누르면 축소됩니다. 선택 상태를 나타내는 색상 표현은 그대로 유지됩니다.
• Disabled — 축소하지 않습니다. 상호작용을 받지 않는 상태이므로 누름에 대한 반응도 일어나지 않습니다.
• Loading — 축소하지 않습니다. 이미 진행 중인 동작이 있어 추가 입력을 받지 않습니다.

Motion Token

축소 애니메이션의 시간과 이징은 토큰으로 정의되어 있습니다. 계산된 배율과 함께 아래 토큰을 사용합니다.

접근성

OS의 동작 줄이기(Reduce Motion) 설정이 켜져 있으면 배율은 항상 1로 계산되어 축소가 일어나지 않습니다. 이 경우 색상 변화 등 다른 상태 표현이 눌림을 전달합니다.

요소의 크기를 알 수 없는 상황에서도 배율은 1로 처리되어, 의도하지 않은 크기 변화가 발생하지 않도록 합니다.