다크 모드 토글: 두 가지 상태만으로 충분하다

제가 좋아하는 종류의 괴짜 같은 UI/UX 논의입니다.

Lea는 방문자에게 세 가지 상태 옵션을 표시하는 라이트/다크 모드 구현에 반대하고 있습니다:

• Light (라이트)
• Dark (다크)
• System (시스템) (논쟁의 핵심)

좋은 두 가지 상태 제어만으로 실제로 이 세 가지 상태를 모두 표현할 수 있는데, 굳이 시스템 옵션을 보여줄 필요가 있을까요? 사용자들은 단지 해당 설정이 관련성이 생길 때 처음으로 재정의(override)하기만 하면 됩니다.

첫 번째 그림이 이 점을 간결하게 보여줍니다:

요약하자면, 선호도가 없으면 시스템 설정을 따르고, 필요하거나 선호하는 경우 이를 재정의할 수 있는 설정을 제공합니다. 그런 다음 그 선호도는 향후 세션을 위해 localStorage에 저장됩니다.

제가 처음 이미지를 봤을 때 놓친 점은, 어떤 색상 구성이 활성화되었는지 알면 두 가지 상태를 표시할 필요조차 없을 수도 있다는 것입니다:

• 기본값이 Light라면? 이를 재정의하기 위한 Dark 옵션을 보여줍니다.
• 기본값이 Dark라면? 이를 재정의하기 위한 Light 옵션을 보여줍니다.

개인적으로 저는 그렇게 확신합니다. 동일한 것을 달성하는 더 적은 UI가 일반적으로 더 많은 UI보다 좋습니다. Lea의 주장은 단순성을 넘어, 잘 고려된 이유들까지 다루며 훨씬 나아갑니다.

흥미로운 고려 사항은 상태로 돌아가는 경우에 무슨 일이 발생하는지입니다. 예를 들어, Light 시스템 기본값으로 시작하여 Dark로 토글한 다음 다시 Light로 돌아간다고 가정해 봅시다. 새로운 재정의 선호도를 얻게 될까요, 아니면 시스템 설정(undefined localStorage 값)으로 돌아갈까요? 어쩌면 중요하지 않을 수도 있습니다. 왜냐하면 테마 전환이 정확히 주요 사용자 의도는 아니기 때문입니다:

기억하세요, 이 제어는 웹사이트 방문의 실제 사용자 목표와 완전히 무관합니다. 설령 그들의 의도가 System(light)으로 되돌아가는 것 대신 Light로 고정하는 것이라 하더라도, 이것은 OS가 다크 모드로 전환될 때처럼 이러한 차이가 발생하는 순간에만 알아차릴 수 있는 것입니다. 그때는 수정하는 것이 단 한 번의 클릭 거리입니다. 너무 쉬운 수정이라서 더 깊이 생각할 필요조차 없습니다.

명확히 하자면, Lea가 언급하는 것은 지속적인(persistent) UI를 의미한다. 이 가이드는 방문자에게 항상 보이는 토글을 대상으로 한다. 이는 웹사이트의 헤더/내비게이션에서 정말 흔하게 볼 수 있는 패턴이다 (나의 개인 사이트도 마찬가지다). 만약 이런 패턴이라면, 방문자의 주된 의도를 방해할 수 있다. 그리고 옵션이 많아질수록 인지 부조화(cognitive dissonance)가 더 많이 유발된다.

스레드에서 훨씬 더 설득력 있는 주장이 있다고 생각한다:

맞아요! 선호도 설정에 대한 개발은 필요하지만, 해당 설정이 브라우저 자체에 있을 경우에는 오버라이드를 표시할 필요는 없습니다. 그러면 삼중 상태(tri-state) 토글이 좀 더 받아들여질 수 있습니다.

말 나온 김에, Lea가 세 가지 상태가 적절한 두 가지 시나리오를 제시합니다:

• 별도의 설정 패널에 존재하는 색상 구성표(Color scheme) 설정 (즉, 토글이 방문자의 주된 의도와 방해되지 않는 완전히 다른 맥락에 있을 때)
• 시스템 설정에 따라 색상 구성표가 다르게 구현되는 경우 (즉, 두 가지 이상의 색상 구성표를 제공할 때)

내 생각엔 전부 읽어볼 가치가 있습니다!

업데이트: Lea가 자신이 첫 게시물로 촉발시킨 전체 논의를 요약한 후속 글을 발표했습니다. 할 말이 남아있을까요? 이 가이드는 메인 내비게이션에 있는 것과 같은 지속적인 토글에만 해당된다는 것입니다. 만약 그렇다면, 그녀의 두 상태 패턴이 최선입니다. 하지만 최고의 해결책은? 아예 토글 자체가 없고 시스템 기본값(default)이 작동하도록 하는 것일지도 모릅니다.