널리

안녕하세요, 엔비전스입니다. 이번에는 조금 아쉬울 수도 있고 신선할 수도 있는 주제를 들고 찾아뵙습니다.

이번에 다루고자 하는 것은, Apple의 스마트 반전에 대한 것이며, 제목에서 알 수 있다시피 Apple 기기에서 지원하는 스마트 반전 기능을 Safari 브라우저 한정이지만 스마트 반전 효과를 CSS로 구현하는 방법에 대해 설명하고자 합니다.

 

스마트 반전? 반전과 무슨 차이가 있길래…?

Apple의 대표적인 운영체제인 macOS와 iPadOS, iOS에는 스마트반전이라는 기능이 존재합니다.

반전 기능은 다크모드가 대중화되기 이전에 검은 화면을 사용할 수 있는 대표적인 방법이었습니다. 하지만, 무시 못할 부작용이 존재합니다.

화면에 있는 모든 것, 디자이너의 의도, 사용자의 감성을 무시하고, 모든 것을 일괄적으로 반전해서 되려 눈이 아프거나, 평범한 사진이 무서운 사진으로, 평범한 사람도 스머프로 만드는 살 떨리게 무섭고도 웃긴 상황이 발생해요.

조금 진지하지 못하게 설명해 드린 것 같아서 심각한 말을 섞자면, 쇼핑을 즐길 때, 상품 이미지가 전부 반전돼 보이면, 쇼핑하기 위해, 반전을 꺼야 할 것입니다.

그리고 맛있는 음식 사진을 보더라도, 남들은 맛있겠다는 말할 때, 공감하지도 못할 것입니다. 오히려 식욕이 떨어지지 않을까요?

Apple의 스마트 반전은 이러한 아쉬운 단점을 해소하여 많은 사람이 반전 기능을 사용할 수 있게 하고자, 스마트 반전을 만들었습니다.

스마트 반전은 앱이나 웹에서 명확하게 이미지로 판단되는 요소를 반전하기 이전의 모습으로 보여줍니다.

여기서 눈여겨볼 말은 명확하게 이미지로 판단되는 요소입니다. 스마트 반전, 좋은 기능이지만, 이 부분이 매우 큰 맹점입니다.

위 말을 풀어서 얘기하자면, 애플이 정의한 이미지 요소가 아니라면 스마트 반전의 혜택을 받지 못한다는 말이 됩니다.

 

스마트 반전을 바보로 만드는 범인을 잡자

아주 대표적인 사례는 img 태그를 사용하지 않고, CSS만으로 이미지를 표시하는 요소들입니다. 그렇다고 이것이 잘못된 행동은 아닙니다.

페이지의 맥락을 위해 img 태그를 쓰는 것보다 배경과 텍스트를 섞는 방법을 쓰는 것이 더 깔끔하고, 이해하기 쉬우며, 세련된 모습일 수도 있기 때문입니다.

또한, img 태그만을 사용하여, 사용자에게 의미 있는 정보를 전달하기 위해서는 alt 속성을 사용해야 하는데, 이 alt 태그는 이미지에 접근했을 때, 한 번에 모든 정보를 스크린리더가 읽게 됩니다.

다시 말해서 사용자가 이미지의 정보를 여러 줄로 나눠 들을 수 없는 맹점이 존재합니다.

 

그래서 뭘 어떻게 해야 할까요?

Chrome이나 Firefox와 같이 Windows에서 대중적으로 널리 사용되고 있는 브라우저에서는 지원하지 않지만, Safari에서는 색상이 반전된 시스템 환경에 대한 CSS Media를 지원합니다. 그것은 바로 inverted-colors 입니다.

inverted-colors는 색상이 반전된 시스템 환경에 반응하는 미디어쿼리입니다. 이 미디어쿼리를 잘 활용하면 웹사이트에서 background-image를 사용한 이미지 요소에도 스마트 반전과 비슷한 효과를 낼 수 있습니다. 그러나, 아까부터 설명했지만 이를 Safari에서만 지원하는 것이 아쉬운 점입니다.

자, 일단 기본 사용 방법부터 알아보실까요? 기본 사용 방법은 아래와 같습니다.

@media (inverted-colors:inverted){
        /* 반전된 상태의 스타일을 여기서 정의합니다. */
    }
    @media (inverted-colors:none){
        /* 반전 안 된 상태의 스타일을 여기서 정의합니다. 코드의 정의로만 보았을 때는 이곳에 반전이 되지 않은 상태를 적어두는 것이 좋으나,
        일반적으로 반전이 안 된 것이 기본이기 때문에, 반전이 안 된 색상에 대해서는 전역으로 스타일을 지정해도 문제가 될 것은 없습니다. */
    }

매우 간단하지요? 그런데, 이것만 알고서는 모순이 발생합니다. CSS는 레이아웃과 디자인을 우리 입맛에 맞게 수정하는 것이 목적인데, 우리가 원하는 색상을 적어도, 반전된 색상이 나타나기 때문이지요.

@media (inverted-colors:inverted){
        p{
            background-color:#000; /*black*/
            color:#f00; /*red*/
        }
    }

우리가 아무리 명시를 이렇게 하였다고 해도, 컴퓨터는 반전된 모습을 보여주기에 배경은 #fff, 폰트 색상은 #0ff에 해당하는 색상을 보여줄 겁니다.

Microsft의 고대비 테마의 경우, -ms-high-contrast-adjust 프로퍼티나 추후 다룰 force-color-adjust를 통해 시스템 기본 환경을 무시할 수 있습니다. 하지만 inverted-colors에는 그런 속성이 없습니다.

그러나, 사람은 늘 방법을 찾기 마련입니다. 생각보다 CSS에 능숙한 분이라면 간단하게 해법을 찾을 수 있습니다.

그 해법은 바로 filter 속성! 조금 단순 무식해 보일 수도 있지만, 시스템의 반전도 일종의 전체 화면 필터이니까 결국 반대로 또 반전 필터를 걸면 원래의 색상이 나오지 않겠어요?

@media (inverted-colors:inverted){
        p{
            background-color:#000; /*black*/
            color:#f00; /*red*/
            filter:invert(100%);
            -webkit-filter:invert(100%); /*Safari를 지원하는 것이 목적이므로 -webkit- 머리말이 붙은 filter도 명시해 줘야 합니다!*/
        }
    }

자, 이렇게 해놓는다면 macOS나 iOS에서 아무리 스마트 반전을 켜 놓아도 Safari에서는 원래의 색상으로 요소가 표시되게 됩니다.

만약, 반투명한 레이어에 overlay된 이미지도 원래 색상으로 보이게 해야 한다면, backdrop-filter:invert(100%);을 사용하면 되겠지요?

 

그렇다고 위 사례처럼 사용하면 안 돼요

위에서 작성한 예시 코드는 이를 구현하기 위한 코드일 뿐이지, 저렇게 사용해서는 안 됩니다. 사용자가 원래의 색상과 분위기를 봤으면 하는 의미가 있는 배경에만 이를 이 기술을 사용해야 합니다.

이유는 당연하게도 사용자의 결정을 무시하는 행동이기 때문입니다. 사용자가 자신이 편한 환경을 설정했으나, 위와 같은 코드를 무분별하게 사용한다면 사용자가 선호하는 환경이 무시되는 것과 다름이 없으니까요.

조금 극단적인 코드를 예로 들면 이런 것이 있겠습니다.

@media (inverted-colors:inverted){
        *{˜
            filter:invert(100%);
            -webkit-filter:invert(100%);
        }
        body,html,.wrapper{
            background:#fff;
            color:#000;
        }
    }

와일드카드에서 * 기호가 무엇을 의미하시는지 안다면, CSS를 모르더라도 이것이 무슨 코드인지 예측할 수 있을 정도로, 매우 단순하고 무식하며, 절대 있어서는 안 될 코드로, 모든 요소가 시스템의 반전 설정을 무시하도록 설정한 것이나 다름없는 코드입니다. 오래전에 다뤘던 고대비 아티클에서도 언급하였지만, 시스템 환경을 무시하는 코드는 필요한 만큼만 사용해야 함을 꼭 기억하세요!

이번 시간에는 Apple의 접근성 기능이자, 환경인 스마트 반전이 무엇인지, 어떤 특징이 있는지, Safari 한정이지만, 웹에서는 어떻게 비슷한 효과를 낼 수 있는지에 대해 알아보았습니다.

아직은 Safari 한정이지만, 이 기능이 많은 브라우저에서 적용되고, 많은 쇼핑 사이트에서 적절한 방법으로 이 기능을 적용한다면, img태그가 아닌 상품 이미지도 사용자가 원래의 아름다운 이미지로 볼 수 있으리라 생각합니다.

다음 시간에도 새롭고 유익한 정보로 찾아뵙도록 노력하겠습니다. 감사합니다.