어두운 시대가 다가오고 있다

또는 애플리케이션이나 웹사이트의 다크 모드를 개발할 때 염두에 두어야 할 사항

2018년에는 다크 모드가 진행되고 있음이 나타났습니다. 이제 2019년의 절반이 지났으므로 우리는 자신있게 말할 수 있습니다. 그들은 여기 있고 어디에나 있습니다.

오래된 녹색 바탕에 검은색 모니터의 예

다크 모드가 전혀 새로운 개념이 아니라는 사실부터 시작하겠습니다. 꽤 오랫동안 사용되어 왔습니다. 그리고 옛날 옛적에, 사실 오랫동안 이것이 그들이 사용했던 유일한 것이었습니다. 모니터는 "검은색에 녹색"이었는데, 내부의 발광 코팅이 방사선에 노출되었을 때 녹색 빛을 발산했기 때문입니다. .

하지만 컬러 모니터가 등장한 후에도 다크 모드는 계속 존재했습니다. 왜 그럴까요?

오늘날 모든 두 번째 사람이 서둘러 응용 프로그램에 어두운 테마를 추가하는 이유를 설명하는 두 가지 주요 동기가 있습니다. 우선, 컴퓨터는 어디에나 있습니다. 우리가 보는 곳마다 일종의 화면이 있습니다. 우리는 아침부터 늦은 밤까지 모바일 기기를 사용합니다. 어두운 모드가 있으면 잠자리에 들기 전 "마지막으로" 소셜 피드를 스크롤할 때 눈의 피로가 줄어듭니다. 네트워크. (당신이 나와 같다면 "지난번"은 3시간 스크롤을 의미할 수도 있습니다. R/엔지니어링Porn. 다크 모드? 예, 부탁합니다! )

또 다른 이유는 새로운 디스플레이 생산 기술이다. Apple, Google, Samsung, Huawei 등 대기업의 주력 모델에는 모두 LCD 디스플레이와 달리 백라이트가 필요하지 않은 OLED 화면이 장착되어 있습니다. 이는 배터리에 있어서 정말 좋은 소식입니다. 휴대전화에서 검은색 정사각형 이미지를 보고 있다고 상상해 보세요. LCD를 사용하면 화면 대부분이 검은색임에도 불구하고 백라이트가 화면 전체를 비춥니다. 그러나 OLED 디스플레이에서 동일한 이미지를 볼 때 검은색 사각형을 구성하는 픽셀이 단순히 꺼집니다. 이는 에너지를 전혀 소비하지 않는다는 것을 의미합니다.

이러한 유형의 디스플레이는 어두운 모드를 훨씬 더 흥미롭게 만듭니다. 다크 인터페이스를 사용하면 장치의 배터리 수명을 크게 연장할 수 있습니다. 지난 11월 Android Dev Summit의 사실과 수치를 직접 확인해 보세요.. 물론 다크 모드는 UI 변경과 밀접하게 연관되어 있으므로 지식을 좀 더 복습해 봅시다!

다크 모드 101

우선, "어두운"은 "검은색"과 동일하지 않습니다. 흰색 배경을 검은색 배경으로 바꾸려고 하지 마세요. 이렇게 하면 그림자를 사용할 수 없게 됩니다. 이와 같은 디자인은 (나쁜 방식으로) 매우 평면적일 것입니다.

음영/조명의 기본 원칙을 염두에 두는 것이 중요합니다. 더 높은 곳에 있는 물체는 그림자가 더 밝아서 실제 조명과 음영을 시뮬레이션해야 합니다. 이렇게 하면 다양한 구성 요소와 해당 계층 구조를 더 쉽게 구분할 수 있습니다.

그림자가 있는 두 개의 동일한 회색 사각형. 하나는 100% 검정색 배경이고 다른 하나는 #121212입니다. 물체가 올라가면 더 밝은 회색 음영이 됩니다.

어두운 테마에서는 대비가 괜찮다면 일반 기본 색상으로 계속 작업할 수 있습니다. 예를 들어 설명해 보겠습니다.

이 인터페이스에서 주요 작업은 하단 표시줄에 있는 큰 파란색 버튼입니다. 밝은 모드와 어두운 모드 간 전환 시 대비 측면에서 문제가 없으며, 버튼이 여전히 눈길을 끌고, 아이콘이 선명하고, 전반적으로 모든 것이 괜찮습니다.

예를 들어 텍스트에서 같은 색상을 다른 방식으로 사용하면 문제가 발생합니다. 기본 색상의 채도가 훨씬 낮은 색상을 사용해 보거나 브랜드 색상을 인터페이스에 통합할 수 있는 다른 방법을 찾아보세요.

왼쪽: 검정색 바탕에 빨간색이 보기 좋지 않습니다. 오른쪽: 채도를 낮추면 모든 것이 좋아 보입니다. — 대략. 번역

경고 또는 오류 색상과 같이 사용했을 수 있는 다른 강한 색상에도 마찬가지입니다. Google은 기본 오류 색상 위에 40% 흰색 레이어 오버레이를 사용합니다. 머티리얼 디자인 가이드라인 다크 모드로 전환할 때. 이는 AA 표준에 맞게 대비 수준을 향상시키기 때문에 매우 좋은 출발점입니다. 물론 언제든지 적절하다고 생각되는 대로 설정을 변경할 수 있지만 대비 수준을 확인하십시오. 그런데 이 목적에 유용한 도구는 Sketch 플러그인입니다. 뚜렷한, 두 레이어 사이에 대비가 얼마나 있는지 정확하게 보여줍니다.

텍스트는 어떻습니까?

여기에서는 모든 것이 간단합니다. 100% 검은색과 100% 흰색이 있어서는 안 되며 그 반대의 경우도 마찬가지입니다. 흰색은 모든 파장의 광파를 반사하고 검정색은 흡수합니다. 100% 검정색 배경에 100% 흰색 텍스트를 배치하면 글자가 빛을 반사하여 번지거나 가독성이 나빠져 가독성에 부정적인 영향을 미칩니다.

100% 흰색 배경의 경우에도 마찬가지입니다. 이는 단어에 완전히 집중하기에는 너무 많은 빛을 반사합니다. 흰색을 조금 부드럽게 만들어 보세요. 배경에는 밝은 회색을, 검정색 배경에는 텍스트를 사용하세요. 이렇게 하면 눈의 피로가 줄어들어 예방할 수 있습니다. 과전압

다크 모드가 출시되었으며 사라지지 않습니다

우리가 화면 앞에서 보내는 시간은 계속 늘어나고 있으며, 깨어나는 순간부터 잠들 때까지 매일 새로운 화면이 우리 삶에 나타납니다. 이것은 상당히 새로운 현상입니다. 우리의 눈은 저녁 늦게 화면을 보는 시간이 늘어나는 데 아직 익숙하지 않습니다. 여기서 다크 모드가 작동됩니다. macOS와 머티리얼 디자인(그리고 대부분 iOS에서)에 이 기능이 도입되면서 조만간 모바일과 데스크톱 모두에서 모든 애플리케이션의 기본값이 될 것이라고 믿습니다. 그리고 이에 대비하는 것이 좋습니다!

어두운 모드를 구현하지 않는 유일한 이유는 애플리케이션이 밝은 일광에서만 사용된다고 100% 확신할 때입니다. 그러나 이것은 자주 발생하지 않습니다.

앞서 요약한 기본 원칙 외에도 다크 모드를 구현할 때 특별한 주의가 필요한 몇 가지 사항을 언급할 가치가 있습니다.

접근성 측면에서 다크 모드는 일반적으로 대비가 낮아서 가독성이 전혀 향상되지 않기 때문에 가장 편리하지 않습니다.

출처

하지만 당신이 잠자리에 들 준비를 하고 있고 정말로 자고 싶지만 잠들기 직전에 누군가에게 하룻밤도 지체할 수 없는 매우 중요한 메시지를 보내야 한다는 것을 기억한다고 상상해 보십시오. 휴대전화를 들고 전원을 켜면 AAAAAAH... iMessage의 밝은 배경이 3시간 더 깨어있게 해줍니다. 어두운 배경의 밝은 텍스트는 가장 접근하기 쉬운 것으로 간주되지 않지만 지금 바로 어두운 모드를 사용하면 편의성이 백만배 증가합니다. 그것은 모두 사용자가 현재 처한 상황에 달려 있습니다.

그렇기 때문에 우리는 믿습니다. 자동 다크 모드 정말 멋진 아이디어네요. 저녁에 켜지고 아침에 꺼집니다. 사용자는 그것에 대해 생각할 필요조차 없어 매우 편리합니다. 트위터는 다크 모드 설정을 통해 훌륭한 작업을 수행했습니다. 또한 모든 OLED 화면에 대해 어두운 모드와 더 어두운 모드가 모두 있어 배터리와 관련된 모든 것을 절약할 수 있습니다. 여기에서 주목하는 것이 중요합니다. 사용자가 원할 때마다 수동으로 전환할 수 있는 기회를 제공하십시오. 다시 전환할 수 없는 기능 없이 인터페이스를 자동으로 변경하는 것보다 더 나쁜 것은 없습니다.

트위터에는 저녁에 켜지고 아침에 꺼지는 자동 다크 모드가 있습니다.

또한 테마를 개발할 때 어떤 것들은 단순히 어둡게 만들 수 없다는 점을 명심할 가치가 있습니다.

Pages와 같은 텍스트 편집기를 사용하세요. 인터페이스를 어둡게 만들 수 있지만 시트 자체는 항상 흰색이므로 실제 종이를 시뮬레이션합니다.

다크 모드가 활성화된 페이지

Sketch나 Illustrator와 같은 모든 유형의 콘텐츠 제작 편집기에서도 마찬가지입니다. 인터페이스를 어둡게 만들 수 있지만 작업하는 아트보드는 기본적으로 항상 흰색입니다.

어두운 모드에서 스케치해도 여전히 밝은 흰색 아트보드가 유지됩니다.

따라서 앱에 관계없이 다크 모드는 귀하가 사용하는 운영 체제에 기본적으로 제공될 것이라고 믿습니다. 즉, 미래를 준비하는 것이 가장 좋습니다. 어두워질 것이다. 

다크 UI 개발에 대해 자세히 알아보려면 가이드라인을 확인하세요. 소재 디자인, 이것이 이 기사의 주요 정보 출처였습니다.

출처 : habr.com