CSS에는 투명도(opacity)라는 속성이 있다. 단순한 속성이지만, 잘 활용하면 적은 코드로 많은 사용자 친화적 효과들을 구현할 수 있다.
투명도의 장점
- 최근의 필수 대응 중 하나인 다크모드에서 별도로 코드를 수정할 필요가 없다. 투명도를 이용한 스타일은 라이트모드와 다크모드에서 한 번에 유효하다.
- 전체적인 톤 앤 매너를 유지하기 위하여 세분화된 컬러 값의 수를 줄일 수 있다. 이를테면 주요색과 파생되는 다양한 밝기 값이 있을 때, 투명도를 활용하면 단순히 밝기 변화를 위한 색은 덜 써도 된다.
- 시각적 피드백을 위한 CSS 코드의 수가 줄어든다. 완벽한 작업을 위한 것은 아니지만, 투명도만으로도 떼울 수 있는 상황이 많다.
투명도의 활용
버튼의 활성 피드백
버튼은 사용자의 터치나 클릭, 혹은 마우스가 위치했을 때 활성화되는 피드백을 제공한다(:hover, :active 등). 보통은 조금 더 진한 색, 반전, 그림자 효과 등의 피드백을 준다. 투명도를 활용하여 보통 상태의 버튼에는 아주 미세한 투명도를 주고, 활성화 시 투명도를 없애는 방식이다.
요소의 비활성화(로딩중,삭제중,비활성화) 피드백
화면상의 요소가 동적으로 생기거나 사라지거나 비활성화될 때도 활용할 수 있다. 보통의 요소는 투명도를 가지고 있지 않지만, 상황에 따라 클래스를 가진 요소에만 투명도를 많이 주어서 이 요소가 비활성화된 느낌을 주면 된다.
※ 비활성화 상태시 요소가 아예 동작되지 않도록 하려면 pointer-events: none을 곁들여도 좋다.
페이지 이동시 피드백
로딩 중 처리와 비슷한 맥락인데, 특정 요소가 아닌 페이지 전체에도 적용할 수 있다. 서버 라우팅을 이용하는 보통의 웹페이지라면, 페이지 이동 링크를 눌렀을 때 바뀐 페이지가 뜨기까지 약간의 딜레이가 있다.
보통 브라우저에서 사용자의 명령이 인식되었으며, 이에 따라 새로운 페이지를 요청 중에 있다는 표시를 하기는 한다. 하지만 페이지 전체적으로(혹은 사용자의 명령이 수행된 지점을 포함한)까지 피드백을 보강한다면 더 좋을 것이다.
페이지가 이동되는 이벤트가 발생시, 최상위 요소(body 같은)에 투명도를 주면 된다.
정보의 위계 구분
기본 본문 텍스트에 아주 약간의 투명도를 주고(실제로 완전한 검정보다 예쁘다), 보다 중요한 제목에는 없애고, 완전히 부가적인 설명에는 많이 주면 시각적 위계가 강해진다.
