Scale
누르는 동안 정해진 거리만큼 작아진다 — 배율은 요소 크기에서 계산한다
누를 수 있는 요소는 누르는 동안 살짝 작아진다. 어느 요소에서나 눌린 느낌의 양이 같도록 축소량을 배율이 아닌 거리로 정한다.
물리적인 버튼이 눌려 들어가는 감각을 빌린 것으로, 손끝의 입력이 요소에 닿았음을 바로 알게 한다.
중요한 것은 모든 요소에서 눌린 느낌의 양이 같게 느껴지는 것이다. 요소마다 고정된 배율을 주면, 요소의 크기가 달라질 때 실제로 움직이는 거리도 함께 달라진다.
| 요소 (폭 × 높이) | 고정 배율 | 가로 축소 | 세로 축소 |
|---|---|---|---|
| 짧은 버튼 80 × 48 | 0.958 | 3.33px | 2px |
| 버튼 160 × 48 | 0.958 | 6.67px | 2px |
| 휴대폰 전체 폭 327 × 48 | 0.958 | 13.62px | 2px |
| 태블릿 전체 폭 704 × 48 | 0.958 | 29.33px | 2px |
고정 배율 0.958 은 높이 48 버튼이 세로로 2px 줄도록 맞춘 값이다. 이 배율을 모든 요소에 똑같이 주면 세로로는 모두 같게 줄지만 가로로 줄어드는 양은 9배까지 벌어지고, 화면이 넓을수록 커진다.
그래서 눌리면 요소가 정해진 거리만큼 줄어든다고 정한다. 배율은 미리 정하는 값이 아니라 요소의 실제 크기에서 계산되는 결과다. 요소가 크든 작든 움직이는 거리가 같아, 어느 화면에서 무엇을 누르든 눌린 느낌이 비슷하다.
계산 방식
요소는 눌리면 세로로 축소량만큼 줄어든다. 이 거리를 어떤 길이에서 빼는지를 정하는 값이 기준 길이다.
기준 길이 = max(요소 높이, 요소 폭 ÷ 4, 24)
배율 = (기준 길이 − 2) ÷ 기준 길이기준 길이는 기본적으로 요소의 높이다. 가로로 쓰는 화면에서는 누를 수 있는 요소가 대부분 가로로 길어서, 폭보다 높이가 요소의 덩치를 더 잘 나타낸다. 여기에 두 가지 보정을 더해, 셋 가운데 가장 큰 값을 기준 길이로 쓴다.
| 값 | 크기 | 뜻 |
|---|---|---|
| 축소량 | 2px | 세로로 줄어드는 거리 |
| 폭 보정 | 폭 ÷ 4 | 가로로 긴 요소(목록 줄)가 지나치게 움직이지 않게 |
| 최소 기준 길이 | 24px | 아주 작은 요소의 축소 비율 상한(8.3%) |
- 폭 보정 — 좌우로 길고 위아래로 짧은 요소를 보정한다. 목록 줄처럼 폭이 높이보다 훨씬 큰 요소에서 높이만 기준으로 삼으면 가로로 지나치게 많이 움직인다. 폭이 넓을수록 기준 길이를 키워 같은 거리가 그만큼 작은 비율이 되게 한다.
- 최소 기준 길이 — 아주 작은 요소를 보정한다. 원래 크기가 작으면 같은 거리라도 줄어드는 비율이 지나치게 커진다.
- 세 값은 모든 화면에 같게 쓰는 고정값이다. 눌린 느낌의 양을 어디서나 같게 만드는 것이 목적이라, 요소나 서비스마다 바꾸지 않는다.
적용 결과
| 요소 | 크기 (폭 × 높이) | 기준 길이 | 배율 | 실제 축소 |
|---|---|---|---|---|
| 아이콘 버튼 | 40 × 40 | 높이 40 | 0.950 | 가로 2px, 세로 2px |
| 버튼 | 88 × 36 | 높이 36 | 0.944 | 가로 4.89px, 세로 2px |
| 가로로 긴 버튼 | 327 × 48 | 폭 ÷ 4 81.8 | 0.976 | 가로 8px, 세로 1.17px |
| 목록 줄 | 375 × 56 | 폭 ÷ 4 93.8 | 0.979 | 가로 8px, 세로 1.19px |
| 체크박스 | 20 × 20 | 최소 24 24 | 0.917 | 가로 1.67px, 세로 1.67px |
세로로 축소량만큼 다 주는 것은 기준 길이가 높이일 때다. 폭 보정이나 최소 기준 길이가 적용되면 기준 길이가 커져 세로로는 그보다 덜 준다. 좌우로 긴 요소는 세로 축소가 거의 사라지고, 좌우 끝의 움직임이 눌린 느낌을 전한다.
축소의 기준점
축소는 자리를 바꾸지 않는다
축소는 요소가 차지하는 자리에 영향을 주지 않는다. 눌린 요소가 작아져도 주변 요소는 움직이지 않고, 목록에서 한 줄을 눌러도 위아래 줄의 위치는 그대로다.
직접 만드는 요소에 적용할 때
제공하지 않는 컴포넌트에 축소를 적용할 때는 세 가지를 차례로 확인한다.
1. 적용할지 확인하기
누를 수 있는 모든 요소가 줄지는 않는다.
줄어들 영역이 하나의 면으로 잡히는가. 기본 상태에 배경이 보이지 않아도 괜찮다 — ghost 버튼이나 탭은 평소 배경이 없지만 여백과 최소 높이로 영역이 잡혀 있어 준다. 반대로 문장 안에 놓인 링크는 줄바꿈되면 영역이 여러 줄로 나뉘고 경계도 드러나지 않아, 줄여도 무엇이 줄었는지 읽히지 않는다.
카드 결제일은 설정에서 바꿀 수 있어요. 바꾸면 다음 달부터 적용돼요.
안의 동작이 요소 전체와 대등한가. 요소 안에 여러 동작이 있어도, 안의 동작이 요소가 나타내는 일에 딸려 있으면 요소 전체가 준다. 목록 줄 안의 스위치는 그 줄의 설정을 바꾸므로 줄에 딸려 있다 — 어디를 누르든 같은 대상을 다뤄 줄 전체가 줄어도 모호하지 않다. 반면 열기 · 저장 · 닫기처럼 대등한 동작이 나란하면 요소 전체를 줄이지 않고, 사용자가 실제로 누른 버튼만 반응한다.
고정 지출을 한 번 더 확인해요
2. 무엇이 줄어들지 정하기
요소 전체를 줄였을 때 정렬 · 여백 · 모서리가 어긋나 보이는지로 가른다.
- 어긋나지 않는다 → Root Scale. 요소 전체가 함께 준다. 버튼처럼 배경과 안이 하나의 면으로 보이는 요소다.
- 어긋난다 → Content Scale. 배경은 그대로 두고 안쪽만 준다. 목록 줄 · 아코디언처럼 배경이 화면 폭을 채우고 그 안에 여러 요소가 정렬된 짜임이다. 통째로 줄이면 시작선이 위아래 줄과 어긋나고, 화면 끝까지 닿던 배경의 여백이 달라지고, 모서리 반경까지 함께 줄어 주변과 곡률이 맞지 않는다.
3. 겹치는지 확인하기
이미 줄어드는 요소 안에 놓인다면 안쪽 요소의 축소를 끈다. 두 축소가 겹치면 배율이 곱해져 안쪽 요소만 지나치게 작아진다. 목록 줄 안의 체크 표시는 줄 전체가 눌릴 때 콘텐츠의 일부로 함께 줄 뿐, 따로 줄지 않는다.
적용 도구
웹 · 앱에서 이 공식을 직접 짜지 않게 공용 도구를 둔다 — 아직 없고, 앱 적용 단계에서 웹(React) · 앱(Flutter)에 하나씩 만든다. Content Scale 은 배율을 콘텐츠 쪽에만 준다.
다른 상태와 함께 있을 때
요소는 눌림과 다른 상태를 함께 가질 수 있다. 축소는 누르고 있는 동안에만 일어나므로, 원래 상태의 표현은 그대로 두고 잠시 더해진다.
- 선택됨 — 선택된 요소도 누르면 준다. 선택을 나타내는 색은 그대로다.
- 불러오는 중 — 줄지 않는다. 이미 진행 중인 동작이 있어 입력을 더 받지 않는다.
- 비활성 — 줄지 않는다. 상호작용을 받지 않으므로 누름에도 반응하지 않는다.
눌러 보기
접근성
기기의 동작 줄이기가 켜져 있으면 배율은 늘 1 이 되어 줄지 않는다. 이때는 색 전환 같은 다른 표현이 누름을 알린다 — 모션 줄이기.
구성과 일부 설명은 당근 SEED Design 의 Foundations 문서(Apache-2.0)를 바탕으로 했다. 값과 그림은 groo 것이다.