Feedback

피드백은 사용자의 입력에 대한 즉각적인 반응입니다. 요소가 조작 가능하다는 사실과 입력이 전달되었다는 사실을 알려줍니다.

색은 눌림을 알리는 가장 기본적인 방법입니다. 표면 색이 바뀌는 것만으로 사용자는 자신이 누른 곳이 어디인지, 입력이 요소에 도달했는지를 즉시 알 수 있습니다.

기본 상태와 눌린 상태의 버튼 비교 — 눌린 쪽은 표면 색이 어두워져 어디를 눌렀는지 드러난다

색이 이 역할을 맡는 것은 어떤 환경에서도 일어나기 때문입니다. Scale은 OS의 동작 줄이기 설정에 따라 일어나지 않고 Haptic은 기기에 따라 전달되지 않지만, 색 전환은 설정의 영향을 받지 않습니다. 그래서 SEED는 색을 누를 수 있는 요소 전반에 적용하고, 다른 피드백 요소를 그 위에 더합니다.

눌린 색은 토큰으로 정의합니다

기본 상태와 눌린 상태의 버튼 비교 — 표면 색이 bg.brand-solid에서 bg.brand-solid-pressed로 바뀌고 라벨 색은 그대로다

SEED는 눌린 상태의 색을 토큰으로 정의합니다. 역할 기반 색상 체계 안에 -pressed가 붙은 토큰을 두고, 컴포넌트마다 눌렸을 때 쓸 토큰을 지정합니다. Action Button의 brandSolid는 기본 상태에서 $color.bg.brand-solid를, 눌린 동안 $color.bg.brand-solid-pressed를 씁니다.

색은 표면에서만 바뀝니다

Do — 메뉴 항목을 누르면 표면 색만 어두워지고 텍스트와 아이콘 색은 그대로다

Don't — 메뉴 항목을 누를 때 텍스트와 아이콘 색까지 함께 흐려진다

색 전환은 요소의 표면에서 일어납니다. 표면을 가진 요소에서는 그 위에 놓인 텍스트와 아이콘의 색이 눌림에 반응하지 않습니다. 표면과 글자 색이 함께 바뀌면 요소 전체가 다른 요소로 교체된 것처럼 읽힙니다. 전경에 사용하는 pressed 토큰은 제공하지 않습니다.

직접 만드는 요소에 적용할 때

SEED가 제공하지 않는 컴포넌트에 눌린 색을 정할 때는 세 가지를 차례로 확인합니다.

1. 기본 색에 대응하는 pressed 토큰 찾기

눌린 색은 새로 만들지 않고 이미 정의된 토큰에서 고릅니다. 기본 상태에 쓰는 토큰 이름 뒤에 -pressed가 붙은 토큰이 그 짝입니다. 배경이 $color.bg.neutral-weak라면 눌린 동안에는 $color.bg.neutral-weak-pressed를 사용합니다.

2. 기본 상태에 배경 색이 없을 경우

기본 상태와 눌린 상태의 ghost button 비교 — 평소에는 배경 토큰이 없고, 눌린 동안 bg.transparent-pressed 표면이 나타난다

기본 상태에서 배경색이 없는 요소도 눌린 동안에는 표면이 생깁니다. SEED에서는 Action Button의 ghost button이 여기 해당합니다. 평소에는 텍스트만 보이지만, 누르는 동안 배경이 나타나 눌린 영역을 드러냅니다.

이때 표면의 색은 $color.bg.transparent-pressed를 사용합니다. 알파 값이라 어떤 배경 위에 놓여도 그 아래 색과 겹쳐 보입니다. 다만 FAB이나 Action Sheet처럼 floating layer 위에 놓이는 컴포넌트에서는 $color.bg.layer-floating-pressed를 사용합니다.

모서리 반경은 공통 값을 제공하지 않으며 컴포넌트가 직접 정합니다.

3. 색을 쓰지 않는 경우인지 확인하기

Switch를 누르는 모습 — 축소만 일어나고 켜짐과 꺼짐을 나타내는 색은 그대로다

개별 탭을 누르는 모습 — 누르는 동안에는 축소만 일어나고, 선택을 나타내는 색은 손을 뗀 뒤에 바뀐다

색이 이미 그 요소의 상태를 나타내고 있다면 눌림에는 색을 쓰지 않습니다. Switch는 색으로 켜짐과 꺼짐을, 개별 탭은 선택과 비선택을 구분합니다. 이런 요소는 누르는 동안 색이 바뀌면 아직 손가락을 떼지 않았는데도 상태가 이미 바뀐 것처럼 보입니다. 그래서 색은 그대로 두고 축소만으로 눌림을 전달합니다.

Pressed Tokens

이름	값
$color.bg.brand-solid-pressed 브랜드와 관련된 요소들이 즉각적으로 인식될 수 있도록 돕습니다. 화면에서 가장 중요한 액션을 강조하는데 사용할 수 있습니다. (solid-pressed)	$color.palette.carrot-700
$color.bg.brand-weak-pressed 브랜드와 관련된 요소들이 즉각적으로 인식될 수 있도록 돕습니다. 화면에서 가장 중요한 액션을 강조하는데 사용할 수 있습니다. (weak-pressed)	$color.palette.carrot-200
$color.bg.critical-solid-pressed 오류, 경고 또는 중요한 문제를 나타내는 데 사용됩니다. (solid-pressed)	$color.palette.red-800
$color.bg.critical-weak-pressed 오류, 경고 또는 중요한 문제를 나타내는 데 사용됩니다. (weak-pressed)	$color.palette.red-200
$color.bg.informative-solid-pressed 사용자에게 유용한 정보를 제공하거나 상태를 설명할 때 사용됩니다. (solid-pressed)	$color.palette.blue-800
$color.bg.informative-weak-pressed 사용자에게 유용한 정보를 제공하거나 상태를 설명할 때 사용됩니다. (weak-pressed)	$color.palette.blue-200
$color.bg.layer-default-pressed basement 바로 위에 놓이는 기본 표면입니다. 대부분의 스크린 콘텐츠(List, TextField 등)가 이 레이어 위에서 표현됩니다. (pressed)	$color.palette.gray-100
$color.bg.layer-floating-pressed 화면의 모든 콘텐츠 위를 덮으며(floating) 나타나는 임시 레이어입니다. 사용자의 상호작용을 필요로 하는 모달(Modal)성 요소들이 여기에 속합니다. (pressed)	$color.palette.gray-100
$color.bg.neutral-inverted-pressed 일반적인 콘텐츠에 사용되는 기본 색상입니다. (inverted-pressed)	$color.palette.gray-800
$color.bg.neutral-solid-muted-pressed 일반적인 콘텐츠에 사용되는 기본 색상입니다. (solid-muted-pressed)	$color.palette.gray-900
$color.bg.neutral-weak-alpha-pressed 일반적인 콘텐츠에 사용되는 기본 색상입니다. (weak-alpha-pressed) `$color.layer.basement` 위에서 컴포넌트의 가시성을 보장하기 위해 사용됩니다.	$color.palette.static-black-alpha-300
$color.bg.neutral-weak-pressed 일반적인 콘텐츠에 사용되는 기본 색상입니다. (weak-pressed)	$color.palette.gray-300
$color.bg.positive-solid-pressed 성공적인 작업, 확인, 또는 긍정적인 상태를 나타내는 데 사용됩니다. (solid-pressed)	$color.palette.green-800
$color.bg.positive-weak-pressed 성공적인 작업, 확인, 또는 긍정적인 상태를 나타내는 데 사용됩니다. (weak-pressed)	$color.palette.green-200
$color.bg.transparent-pressed	$color.palette.static-black-alpha-100
$color.bg.transparent-selected-pressed	$color.palette.static-black-alpha-300
$color.bg.warning-solid-pressed 사용자의 주의가 필요한 경고 메시지나 안내 사항을 전달하는 데 사용됩니다. (solid-pressed)	$color.palette.yellow-400
$color.bg.warning-weak-pressed 사용자의 주의가 필요한 경고 메시지나 안내 사항을 전달하는 데 사용됩니다. (weak-pressed)	$color.palette.yellow-200