1. 개요
Google I/O 2019에서 Material Design은 제품의 기존 Material 테마를 보완하는 어두운 테마를 만드는 방법에 관한 안내를 도입했습니다. 밝은 테마는 긴 형식의 독서에 적합하며 가독성이 높은 대비를 제공하지만, 어두운 테마는 어두운 환경에서 안전을 제공하고 눈의 피로를 최소화할 수 있습니다.
Material에서 어두운 테마는 기본 밝은 테마의 보조 모드로 사용되도록 설계되었으며, 미묘하고 야간에 적합한 프레젠테이션을 통해 색상, 모양, 유형, 고도 스타일을 비롯한 앱의 고유한 정체성을 유지합니다.
이 디자인랩에서는 Material 연구 중 하나를 사용하여 기존 Material 테마를 기반으로 어두운 테마를 만드는 데 필요한 단계를 살펴봅니다.
Google은 명확성, 가독성, 직관성, 사용 용이성을 위해 설계된 이메일 앱인 Reply와 협력합니다. Reply의 아이덴티티를 파악하고 어두운 환경에서도 편안한 테마를 제작하면서 앱에서 브랜드 순간을 유지하기 위해 신중하게 결정합니다.
또한 기본 어두운 테마를 넘어선 맞춤 표면 색상을 사용하여 테마를 더욱 발전시키고 Reply의 고유한 개성을 다시 강조할 예정입니다.
필수 자료:
2. 필수 파일 수집
시작하기 전에 Figma 스타터 파일을 다운로드해야 합니다. 디자인랩에 필요한 모든 항목이 이 파일에 포함되어 있습니다.
- DarkTheme DesignLab Kit.fig 다운로드 (7.6MB)
3. 환경 설정
다음으로, 디자인 환경을 설정해야 합니다.
로그인한 후 이전 단계에서 다운로드한 파일을 가져옵니다. 이렇게 하려면 Figma 파일 화면의 왼쪽 상단에 있는 '파일 가져오기' 아이콘을 찾아 '다운로드' 폴더에서 파일을 찾으면 됩니다.
잠시 시간을 내어 파일을 살펴봅니다. 여기에는 밝은 테마, 앱 브랜드에 기반한 사전 빌드된 톤 팔레트, 만들 최종 어두운 테마의 사본이 포함되어 있습니다.
- 다른 탭에서 어두운 테마를 위한 Material Design 안내를 엽니다. 디자인 실습 전반에 걸쳐 이 가이드라인을 참고할 것입니다.
4. 제품의 ID 이해하기
Reply의 어두운 테마를 시작하기 전에 Reply의 브랜드 특성을 이해해야 합니다. 이렇게 하면 밝은 테마와 어두운 테마 모두에서 Reply의 아이덴티티와 브랜드가 일관되게 표현되도록 테마에 관해 정보에 입각한 선택을 할 수 있습니다.
Reply 브랜드는 커뮤니케이션을 강조합니다. 앱은 기능적 품질을 우선시하며 기능적 목적이 없는 디자인 요소보다 사용 편의성을 선호합니다.
이 디자인 연구소의 목적에 따라 Reply에서 가장 중요한 브랜드 표현 요소는 색상, 서체, 모양입니다.
색상
답장의 색상 테마는 어두운 청회색 기본 색상과 주황색-노란색 보조 색상을 사용합니다.
보조 색상은 거의 사용되지 않으므로 Reply의 UI는 기본 색상의 변형을 사용하여 단색인 경우가 많습니다. 이 미묘한 색상 테마를 사용하면 방해 요소 없이 콘텐츠를 쉽게 읽을 수 있으며 사진 아바타를 쉽게 볼 수 있습니다.
따라서 Reply의 보조 색상은 사용되는 곳마다 큰 영향을 미쳐 앱 전체에서 중요한 작업을 강조하고 브랜드 순간을 명확하게 표현합니다.
유형
텍스트 기반 콘텐츠와 효율성에 중점을 두는 앱인 만큼 Reply의 아이덴티티 표현에 서체와 타이포그래피가 중심적인 역할을 합니다. 이 앱은 전체 서체 스케일에 Work Sans를 사용하며, Light, Regular, Medium, SemiBold, Bold 등 6가지 두께의 Work Sans를 통합하는 다양한 스타일을 사용합니다.
Work Sans로 전체 서체 크기를 빌드하면 Reply에 일관되고 예측 가능하면서도 유기적이고 가독성이 뛰어난 서체가 제공됩니다.
Work Sans 디자이너 Wei Huang에 따르면 이 서체는 화면 사용에 최적화되어 있습니다. 따라서 이메일이나 기타 콘텐츠에서 텍스트 부분을 효율적으로 읽는 데 유용합니다. 초기 그로테스크의 느슨한 기반은 다소 더 친근하고 인간적인 미학을 제공하며, 더 넓은 트래킹은 더 부드러운 읽기를 지원합니다.
도형
Reply는 미묘한 모양 스토리를 가지고 있으며, 이메일 목록의 효율성과 기능적 특성을 강화하는 방식으로 원형과 날카로운 구성요소를 페어링하는 동시에 주요 작업과 더 큰 구성요소에 더 부드러운 터치를 제공합니다.
- 소형 구성요소
- 미디어 구성요소
- 대형 구성요소
버튼과 FAB 같은 작은 구성요소는 완전히 둥근 반면 이메일 카드와 하단 앱 바 같은 중간 구성요소는 완전히 정사각형입니다. 계정 전환기 및 하단 시트와 같은 큰 구성요소의 모서리는 약간 둥글게 처리되어 있습니다.
이러한 모양은 사용자가 앱에서 자신의 위치와 각 구성요소의 개념, 나머지 인터페이스와의 관계를 이해하는 데 도움이 됩니다.
5. 색상 작업
색상이 Reply의 기본 밝은 테마에서 브랜드 표현과 어떤 관련이 있는지 알면 사용 가능하고 표현력이 뛰어난 어두운 테마를 위해 팔레트를 정보에 입각하여 조정할 수 있습니다.
Material에서 색상 시스템은 색조 팔레트를 기반으로 합니다. 이러한 팔레트는 브랜드 색상을 사용하여 앱 전체에 적용되는 포괄적인 색상 시스템에서 함께 사용되는 조화로운 변형을 만들어 스타일과 가독성을 보장합니다.
Figma 파일에서 Reply의 기본 및 보조 톤 팔레트를 확인할 수 있습니다. 각 팔레트 위의 밝은 화살표는 Reply의 밝은 테마에 사용된 값을 나타내고, 어두운 화살표는 어두운 테마에 사용될 변형을 나타냅니다.
Material로 어두운 테마를 만들 때는 색상 시스템이 표현력을 유지하고 눈의 피로를 유발하지 않으면서 적절한 대비를 유지할 수 있도록 밝은 변형이 선택됩니다. 채도가 높은 색상은 어두운 배경에서 시각적으로 '진동'하는 경향이 있어 읽기가 더 어렵습니다. 밝은 색조는 고도가 있는 표면의 색상을 다양하게 지정할 수 있는 유연성도 제공합니다. 이 내용은 곧 살펴보겠습니다.
6. 표면 색상 조정
이제 Reply의 색조 팔레트와 어두운 테마에서 사용할 색상을 파악했으므로 모형에서 색상 값을 조정할 차례입니다.
머티리얼 어두운 테마에서 인터페이스의 가장 아래쪽 레이어는 일반적으로 16진수 값 #121212의 어두운 회색입니다.
- Figma 파일에서 'Reply Starter'(답장 시작)라는 아트보드를 찾아 'Background'(배경)이라는 레이어를 선택합니다.
- 화면 오른쪽의 인스펙터 패널에 있는 '채우기'에서 색상 값을 121212로 설정하고 Return 키를 누릅니다.
- 아트보드는 다음과 같이 표시됩니다.
Reply의 단색 받은편지함 보기에서 이메일 카드의 색상은 배경보다 약간 밝으므로 어두운 테마의 카드에도 동일한 처리를 적용하여 받은편지함의 시각적 계층 구조를 유지해야 합니다.
- 동일한 아트보드에서 '이메일 카드'라는 그룹을 펼치고 '이메일 카드'라는 모든 레이어를 선택합니다.
- 이전과 마찬가지로 인스펙터 패널에서 채우기 값을 선택합니다. 값을 121212로 설정하고 Return 키를 누릅니다.
- 이제 '이메일 카드 오버레이'라는 레이어만 선택합니다. 이러한 레이어를 사용하면 이메일 카드를 배경과 구분하는 오버레이를 만들 수 있습니다.
- 레이어에 채우기를 지정하고 불투명도를 2%로 설정하여 FFFFFF로 만듭니다.
이메일 카드가 어두워져서 텍스트를 읽을 수 없습니다. 다음으로 텍스트 색상을 살펴보겠습니다.
7. 텍스트 색상 조정
어두운 테마의 텍스트 색상을 이해하려면 더 광범위한 Material Design 시스템에서 색상이 텍스트에 적용되는 방식을 이해해야 합니다.
Material Components는 'on' 색상이라는 개념을 정의합니다. 이 색상은 기본, 보조, 표면, 배경 또는 오류 색상을 사용하는 구성요소와 주요 표면 '위에' 표시되는 색상이므로 이러한 이름이 붙었습니다. '대비' 색상은 주로 텍스트에 사용되어 이러한 표면에서 텍스트를 읽을 수 있도록 합니다.
Material의 기본 'on' 색상은 흰색 (#FFFFFF)과 검은색 (#000000)입니다. 검은색 또는 어두운 'on' 색상은 어두워진 표면에 적합하지 않으므로 흰색을 사용합니다.
이 '설정' 색상으로 텍스트 계층 구조를 설정하는 시스템은 간단합니다. 강조 텍스트의 불투명도는 87%이고, 중간 강조 텍스트는 60%로 적용되며, 사용 중지된 텍스트는 불투명도 38%를 사용합니다.
우선순위가 높은 텍스트는 순수한 흰색이 아닙니다. 5단계에서 설명한 것처럼 밝은 색상인 #FFFFFF는 어두운 배경에서 시각적으로 '진동'하기 때문입니다. 또한 어두운 배경에 순수한 #FFFFFF 텍스트를 사용하면 텍스트의 빛이 어두운 배경에 번지거나 흐려져 가독성을 해칠 수 있습니다.
이 모든 것을 알고 있으므로 어두운 테마의 텍스트 색상을 수정해 보겠습니다.
- 시작 레이아웃의 모든 텍스트는 쉽게 액세스할 수 있도록 그룹화되어 있습니다. Inbox text라는 그룹을 찾아 펼쳐 모든 구성 레이어를 확인합니다.
- 'Hi -"로 시작하는 레이어를 모두 선택합니다. 이는 레이아웃에서 강조가 적용된 모든 텍스트입니다.
- 인스펙터 패널에서 채우기를 FFFFFF로 설정하고 불투명도를 87%로 설정합니다.
- 받은편지함 텍스트 그룹으로 돌아가 'Med -"가 앞에 붙은 레이어를 모두 선택합니다.
- 인스펙터 패널에서 채우기를 FFFFFF로 설정하고 불투명도를 60%로 설정합니다.
8. 구성요소 색상 조정
Material로 빌드된 어두운 테마에서 고도가 있는 표면과 구성요소는 오버레이를 사용하여 색상이 지정됩니다. 표면이 더 높을수록 오버레이가 더 강하고 밝아집니다. 배경이 너무 어두워 어두운 그림자를 안정적으로 묘사할 수 없는 경우 고도와 계층 구조를 전달하는 방법입니다.
하단 앱 바
나머지 받은편지함 UI보다 위에 있는 답장의 하단 앱 바에는 미묘한 오버레이를 적용합니다.
- 레이어 목록에서 하단 앱 바라는 그룹을 찾아 구성 레이어를 볼 수 있도록 펼칩니다.
- 해당 그룹 내에서 Surface라는 레이어를 찾아 Fill 값을 121212로 설정합니다.
- 표면 오버레이라는 위의 레이어를 찾아 채우기 값을 FFFFFF로 지정하고 불투명도를 12%로 지정합니다.
플로팅 작업 버튼
다음으로 FAB에 새 색상을 적용합니다. 이렇게 하려면 앞에서 살펴본 색조 팔레트로 돌아가 Reply의 보조 색상 700 값을 가져옵니다.
원하는 경우 자체 앱의 작지만 영향력이 큰 구성요소에 대해 기본 색상과의 적절한 대비를 유지하는 한 약간 더 채도가 높은 색상을 선택할 수 있습니다. 이 옵션은 나중에 살펴보겠습니다.
- 레이어 목록에서 FAB이라는 그룹을 찾아 펼쳐 구성요소를 확인합니다.
- 표면 레이어를 찾아 선택합니다. 채우기를 FCC13B로 설정합니다.
선택한 카드
Reply의 받은편지함에서 선택한 이메일 카드의 모서리에도 동일한 효과적인 주황색-노란색이 표시됩니다. 강력한 브랜딩을 보여주는 또 다른 순간이지만 구성요소, 노출 영역, 텍스트에 깔끔하게 맞지 않습니다.
이러한 상황에서는 보조 변형 색상 (이 경우 #FFFBE6)부터 시작하여 Reply의 기능적 미학을 방해하지 않으면서 적절하게 표현할 수 있는 색상을 역순으로 찾는 것이 가장 좋습니다. 답장의 경우 일반적인 보조 변형을 사용할 수 있습니다.
- Earmark라는 레이어를 선택하고 Fill을 FFF5A0으로 설정합니다.
9. 더 나아가 맞춤 표시 경로를 사용해 보세요.
앞서 살펴본 것처럼 답장의 플로팅 작업 버튼 (FAB)은 앱에서 브랜드가 강조되는 순간을 나타내는 동시에 강조도가 높은 구성요소입니다. 따라서 답장의 원래 보조 색상을 사용하여 답장의 어두운 테마에서 색상 표현을 유지할 수 있습니다.
- 레이어 목록에서 FAB이라는 그룹을 찾아 펼쳐 구성요소를 확인합니다.
- 표면 레이어를 찾아 선택합니다. 채우기를 F9AA33으로 다시 설정합니다.
Reply의 기본 색상을 하단 앱 바와 이메일 카드의 맞춤 노출 영역 색상으로 다시 가져올 수도 있습니다. 이를 위해 참조해 온 톤 팔레트에 표시된 어두운 기본 색상을 사용하도록 오버레이를 변경하기만 하면 됩니다.
- 레이어 목록에서 하단 앱 바라는 그룹을 찾아 구성 레이어를 볼 수 있도록 펼칩니다.
- 표면 오버레이라는 레이어를 찾아 불투명도가 48%인 새 채우기 값 344955를 지정합니다. 이렇게 하면 적절한 대비를 유지하면서 브랜드 색상을 더 강조할 수 있습니다.
- 레이어 목록에서 이메일 카드 오버레이라는 레이어를 찾아 모두 선택합니다.
- 채우기를 ADC0CB로 설정하고 불투명도를 4%로 설정합니다.
10. Wrapup
Material에서 어두운 테마는 밝은 테마에 표현된 제품의 고유한 정체성을 신중하게 의도적으로 확장한 것입니다. 색상과 고도가 전달되는 방식을 간단하게 조정하여 첫 번째 Material 어두운 테마를 만들었습니다. 축하합니다.
이 디자인 실습의 단계를 자체 제품의 어두운 테마를 이해하고 정의하기 위한 프레임워크로 간주하고 항상 브랜드와 제품의 속성과 목표를 염두에 두세요.
어두운 테마에 관한 자세한 안내는 어두운 테마 관련 Material Design 사양을 참고하세요.
궁금한 사항은 언제든지 Twitter의 @MaterialDesign으로 문의해 주세요.
Google Design YouTube 채널에서 더 많은 디자인 콘텐츠와 튜토리얼을 확인하세요.