Opacity

불투명도 단계 토큰과 사용 규칙

불투명도(opacity)는 정해진 단계 토큰으로 지정합니다.

개요

토큰 이름은 불투명도를 퍼센트로 나타냅니다.
10부터 100까지 10 단위 단계로 구성되며, 100은 완전 불투명, 50은 반투명, 10에 가까울수록 투명해집니다. 여기에 비활성 요소 전용인 disable(0.38)이 더해집니다. disable은 숫자 스케일에 없는 별도 값으로, 비활성 상태의 흐림 정도를 통일합니다.

스케일

토큰	값	미리보기
10	0.1
20	0.2
30	0.3
40	0.4
50	0.5
60	0.6
70	0.7
80	0.8
90	0.9
100	1
disable	0.38

사용법

앱에서 직접 지정할 때는 opacity 토큰을 CSS 변수로 참조합니다.

css

.overlay {
  opacity: var(--ids-opacity-50);
}

.disabled {
  opacity: var(--ids-opacity-disable);
}

mildang-frontend 저장소에서 DS 소스를 직접 사용하는 경우에는 shorthand opacity="50"도 사용할 수 있습니다.

권장 사항

구분	내용
권장	비활성(disabled) 요소에는 `disable`(0.38)을 사용합니다.
권장	그 외 흐림·오버레이에는 `10`~`100` 숫자 단계를 사용합니다.
지양	스케일에 없는 raw 값(`0.55` 등)을 하드코딩하지 않습니다.
지양	텍스트를 흐리게 할 때는 대비가 떨어지는 `opacity` 대신 흐린 색 토큰(`neutral.text.low` 등)을 사용합니다.
지양	배경만 반투명하게 할 때는 자식까지 흐려지는 컨테이너 `opacity` 대신 alpha 색 토큰을 사용합니다.