다크 모드에 맞게 뉴스레터 디자인을 최적화하는 방법

이메일은 마케팅 캠페인의 생명선입니다. 마케팅 담당자는 이메일 마케팅 전략 없이 캠페인을 시작하는 데 동의하지 않습니다. 그리고 이것은 그들이 그것에 익숙하거나 혁신을 원하지 않기 때문이 아닙니다.

하지만 "고장난 것이 아니라면 고치지 말라"는 옛말을 따르기 때문입니다. 이메일 마케팅이나 뉴스레터를 통해 상상할 수 있는 최고의 ROI를 얻을 수 있습니다. 그리고 그것은 모든 인구통계의 소비자를 위해 작동합니다 – 나이가 많든 적든.

뉴스레터 마케팅의 세계는 이제 오랫동안 순조롭게 진행되어 왔습니다. 그러나 4년 전에 등장한 기능으로 인해 약간의 문제가 발생합니다.

예, 우리는 다크 모드에 대해 이야기하고 있습니다. 근데 왜 지금 그게 큰일이야? 생긴지 좀 됐죠? 최근에 스마트폰을 구입했다면 이메일 받은편지함을 처음 봤을 때 "이메일 배경이 검은색인 이유는 무엇입니까?"라고 생각했을 것입니다.

스마트폰 회사는 이제 다크 모드를 기본값으로 설정하기 시작했습니다. 즉, 채택 숫자(이미 높은)가 더 늘어날 것입니다.

이제 뉴스레터를 다크 모드에 최적화하기 위한 디자인 전략을 세울 때입니다. 그리고 그것이 바로 Kimp의 이 블로그가 달성하는 데 도움이 될 것입니다.

그러나 그 전에 약간의 역사와 모든 다크 모드에 대한 간략한 요약이 있습니다.

다크 모드의 진화와 인기 상승

디지털이 풍부한 이 시대에 인터넷에서 가장 좋아하는 우리의 소위 건강 구세주는 여전히 블록에 있는 새로운 아이입니다. TikTok조차도 다크 모드보다 오래되었고 무언가를 말하고 있습니다.

전체 다크 모드 열정 에피소드를 시작한 것에 대한 약간의 역사를 원한다면 모든 것이 Apple 업데이트로 시작되었습니다. 네, 애플은 다크 모드가 존재하는 이유입니다. Apple은 2018년 9월 macOS Mojave의 15번째 시리즈 출시 중에 다크 모드를 출시했습니다. 그런 다음 1년 후 Gmail에서 iOS Mail을 포함한 Android 및 iOS 기기 모두에서 사용할 수 있었습니다.

Outlook용 업데이트는 2019년 6월에 조금 늦게 제공되었으며 Insider 채널의 버전 1907이 가장 먼저 업데이트되었습니다. 이후 2020년 6월 모든 제품에 적용했습니다.

근데 다크모드가 뭔가요?

우리는 우리가 용어를 많이 듣는다는 것을 알고 있지만 모든 사람이 그것이 정확히 무엇인지는 모릅니다.

다크 모드는 검은 색으로 변하는 화면의 공백보다 훨씬 더 많습니다. 기본적으로 모든 디자인이나 화면의 색상을 반전시켜 배경을 더 어둡게 만들고 색상, UI 요소, 아이콘 및 기타 디자인을 밝은 색상 요소로 변경하는 기능입니다.

이제 하나의 디자인 요소에 관한 것이 아니라는 것을 알게 되었습니다. 그 자체로 전체 경험입니다.

왜 갑자기 다크 모드에 대한 관심이 온통 도처에 있습니까?

글쎄, 소문은 몇 년 동안 형성되어 왔지만 업계는 COVID-19 전염병이 성장을 가속화했다고 믿습니다. 어떻게?

음, 우리의 스크린 타임은 항상 우스꽝 스러웠지만 밖이 공식적으로 닫히면 사람들은 가상 경험에서 위안을 찾을 수 밖에 없었습니다. 이는 여러 기기에서 화면에서 오랜 시간을 보내는 것을 의미했습니다. 결국, 이것은 두통, 요통 및 기타 여러 가지 불만으로 이어졌습니다.

대부분의 문제는 장기적인 조정이 필요하지만 어두운 모드로 전환하면 사람들이 화면의 밝은 빛, 눈부심, 눈과 신경계에 미치는 영향을 피할 수 있습니다.

이것은 또한 다크 모드가 모바일 화면만을 위한 것이 아니라 데스크톱 및 iPad 및 태블릿과 같은 기타 스마트 장치에도 그 존재를 확장했음을 의미합니다.

다크 모드에 맞게 뉴스레터 디자인을 최적화하는 이유는 무엇입니까?

우리는 고객이 그것을 사랑한다는 것을 알고 있습니다. Android 사용자의 거의 92%와 MacOS 사용자의 80% 이상이 다크 모드를 선호합니다. 이것이 뉴스레터 디자인을 위한 최적화 전략을 살펴봐야 하는 주요 이유일 것입니다.

하지만 더 있습니다.

고객이 적극적으로 다크 모드를 찾지 않더라도. 우리가 언급했듯이, 새로운 스마트폰은 이제 이 모드를 기본으로 하는 제품을 제공하고 있습니다. 그리고 많은 앱과 이메일 클라이언트도 이러한 움직임을 시작하려고 합니다.

따라서 이것이 기본값이 될 때 디자인이 호환되지 않으면 영향력 있는 메시지를 잃을 위험이 있습니다.

다크 모드는 단순히 흑백 배열을 반전시키는 것이 아닙니다. 많은 색상이 동일하게 작동하지 않고 일부 아이콘이 동일하게 보이지 않으며 최적화되지 않은 디자인도 가독성에 영향을 줄 수 있습니다.

이것이 바로 다크 모드에 대한 설문 조사에서 이메일 마케터의 44%가 더 어두운 UX 개발을 고려하고 있고 28%가 이를 곧 도입할 계획임을 보여주는 이유입니다.

당신은 수준 이하의 경험을 제공하는 유일한 사람이되고 싶지 않습니까?

이로 인해 가입자 손실, ROI 감소 및 너무 늦었을 때 많은 재작업이 발생할 수 있습니다.

그러니 지금 시작하고 앞서 나가십시오.

다크 모드에 맞게 뉴스레터 디자인을 최적화하는 7가지 방법

이제 다크 모드가 인기를 얻은 이유는 밝혀졌으니 당면한 문제를 해결해 보겠습니다. 다크 모드로 작업하는 것은 쉬운 일이 아닙니다. 많은 디자인 지침과 템플릿이 창 밖으로 나가거나 적응해야 합니다.

그러나 기업으로서 수행해야 하는 모든 변경 사항을 추적하는 것은 혼란스러울 수 있습니다. 또한 디자이너가 말하는 내용을 맹목적으로 신뢰해서는 안 됩니다.

따라서 뉴스레터 디자인이 다크 모드에서 잘 작동하도록 하는 데 필요한 변경 사항 및 최적화 기술의 선별된 목록이 있습니다. Kimp의 이 블로그를 통해 팀이 제공하는 디자인을 비판하고 감상할 수 있습니다.

시작하자.

1. 올바른 디자인 스타일 선택

지금 이메일 마케팅 여정을 시작하고 있다면 손에 절호의 기회가 있습니다. 다크 모드와 호환되도록 디자인을 모델링할 수 있습니다. 일반적으로 한동안 해온 브랜드는 디자인 스타일, 필수 이미지, 브랜딩 디자인 등 많은 제약이 따릅니다.

다크 모드 최적화가 성공하려면 함께 사용할 색상, 이미지, 아이콘 및 기타 요소가 필요합니다. 그러나 좋은 소식은 항상 업데이트할 수 있다는 것입니다. 디자인 스타일은 약간의 문제입니다.

디자인 스타일은 레이아웃, 요소 구성 및 전체 메시지 전달을 결정하기 때문에 중요합니다.

일반적으로 다크 모드에 가장 적합한 디자인 스타일은 여기에 포함된 풍부한 여백 때문에 미니멀리즘입니다. 어두운 배경에 비해 디자인이 크고 복잡해 보이지만 최소한의 디자인 스타일은 사용자 경험을 방해하지 않습니다.

따라서 미니멀리즘 또는 다크 모드 호환 디자인 스타일을 채택하십시오.

Kimp Tip: 미니멀한 디자인 스타일이 모든 브랜드의 분위기가 아닐 수 있습니다. 이전에 레트로 또는 팝 아트 기반 뉴스레터 디자인을 가졌을 수 있습니다. 전환은 어렵기 때문에 디자인 팀과 협력하여 어두운 모드에서 작동하도록 톤을 낮추는 방법을 알아보십시오.

트렌드 스타일에서 영감을 받아 브랜드 고유의 맞춤형 디자인 스타일을 만들고 싶다면 지금 Kimp Graphics를 시도하십시오!

2. 표준에 따라 색상 대비를 선택합니다.

어두운 배경은 모든 디자이너에게 어려운 과제입니다. 흰색 또는 밝은 색상의 배경을 사용하면 다양한 색상을 탐색하고, 대비를 사용하고, 매우 최소한의 제약으로 다양한 정렬 작업을 수행할 수 있습니다.

하지만 다크 모드는 완전히 다릅니다. 어두운 배경은 일부 색상을 식별하기 어렵게 만들고 가독성을 크게 저해합니다. 따라서 선택한 색상에 관계없이(다음 섹션에서 자세히 설명) 대비가 중요한 역할을 합니다. 이것은 이메일 디자인이 다크 모드에서 성공했는지 여부를 결정합니다.

Google Material 디자인에서는 배경과 텍스트의 대비 수준을 최소 15.8:1로 권장합니다. 이것은 흰색이 어두운 회색 배경에서 가장 잘 작동함을 나타내는 흰색 텍스트와 검정색 배경에 적용됩니다.

그러나 엄지손가락 규칙은 색상의 밝기와 채도를 조정하면 가독성에 도움이 된다는 것입니다. 따라서 대비를 생각하고 가능한 한 시각적 진동을 방지하십시오.

Kimp 팁: 어두운 모드에서 작업할 때 색상이 혼동될 수 있습니다. 디자이너가 올바른 색상을 얻을 수 있도록 하려면 어두운 모드에서 디자인을 미리 보고 검토하십시오. 정확한 일치를 달성하지 못할 수 있으므로 밝은 모드의 색상을 어두운 모드의 색상과 비교하지 마십시오.

3. 색상 팔레트 만들기

대비에 대한 이전 요점은 다크 모드 디자인에 적합한 색상을 선택하는 것의 중요성에 대해 단서를 제공했다고 생각합니다. 색상은 특히 웹용으로 디자인할 때 배경에 따라 다르게 보입니다.

RGB 모드의 색상은 각 색상(빨간색, 녹색 및 파란색)의 백분율에 따라 음영을 얻습니다. 디자이너가 검정색 배경과 흰색 배경에 대해 추가해야 하는 비율은 다양합니다. 이것은 기존 팔레트가 다크 모드에서 작동하지 않는다는 것을 의미합니다.

그렇기 때문에 어두운 모드에서 뉴스레터 디자인에 가장 적합한 색상 팔레트를 구축하는 것이 좋습니다. 이렇게 하면 브랜딩 일관성을 유지하고 이에 대해 두 번 이상 걱정하지 않아도 됩니다.

어두운 모드에서 어떤 색상이 작동합니까?

음, 일반적으로 너무 채도가 높은 색상은 어두운 검정색 배경과 충돌하여 눈을 상당히 힘들게 만듭니다. 따라서 대담한 색상을 선택하는 대신 파스텔을 선택하여 어두운 배경과 대비를 높일 수 있습니다. 그들은 또한 어둡게 보일 것이기 때문에 디자인 스타일은 너무 많이 변하지 않습니다.

배경에 대해 말하자면 짙은 검정색만 선택할 필요는 없습니다. 다른 색상이 함께 작동하는 한 어두운 회색으로도 실험할 수 있습니다.

Kimp 팁 : 어두운 모드에 더 적합하도록 색상을 변경할 계획이라면 즉시 너무 많이 변경하지 마십시오. 일부 거래 및 일상적인 이메일에서 몇 가지 패턴을 테스트합니다. 전환하기 전에 CTR, 읽기 시간 등의 측면에서 영향을 분석합니다.

또한 색상 반전 프로세스는 이메일 클라이언트에 따라 다르므로 디자인 팀이 각 플랫폼에 대해 개별적으로 디자인하는지 확인하십시오.

Kimp Graphics 무제한 디자인 서비스 구독을 통해 실험에 추가 비용이 들지 않습니다.

4. 글꼴 선택

모든 디자인에는 색상, 글꼴 및 이미지의 세 가지 주요 요소가 있습니다. 색상을 다루었으므로 이제 글꼴로 넘어갑니다.

디자이너가 다크 모드에 대해 느끼는 가장 큰 불만은 가독성에 큰 영향을 미친다는 것입니다. 그리고 가장 큰 영향은 일반적으로 텍스트에 있습니다. 어두운 배경에 흰색 텍스트를 사용하면 글꼴이 더 굵고 크게 보입니다. 그 결과 매우 혼란스럽고 복잡한 디자인 레이아웃이 생성됩니다.

그렇기 때문에 모든 사람이 일반적으로 변경하는 것보다 더 자세하게 다크 모드를 계획하는 것이 좋습니다.

따라서 글꼴 선택과 관련하여 어두운 모드의 결과가 적절한 정도의 굵기로 표시되도록 더 밝은 글꼴 두께를 선택하는 것이 좋습니다. 이렇게 하면 전체 디자인 스타일이 크게 영향을 받지 않습니다.

Kimp 팁: 일반적으로 사용하는 더 밝은 버전의 글꼴이 브랜딩 디자인에 적합하지 않다고 생각되면 사용자 정의 글꼴을 만드는 것이 좋습니다. 네, 이렇게 하면 이전 글꼴에서 영감을 얻을 수 있지만 브랜딩 및 디자인 표현에 맞게 수정할 수 있습니다.

사려 깊은 다크 모드 디자인과 사용자 정의 글꼴로 시각적 진동을 피하십시오. 지금 Kimp Graphics 구독에 가입하여 이것을 받으십시오!

5. 다크 모드 작업을 위한 디자인 요소 업데이트

우리는 색상과 글꼴을 다루었지만 뉴스레터 디자인에는 다른 많은 요소도 있습니다. 여기에는 아이콘, 로고, 브랜드 이름, 이미지 등이 포함됩니다. 이들 역시 디자인이 성공하려면 어두운 모드에서 잘 작동해야 합니다.

이제 아래의 예를 보면 어두운 배경의 아이콘이 밝은 모드와 어두운 모드에서 어떻게 다른지 알 수 있습니다. 소비자가 어두운 모드에서 이메일을 볼 때 로고가 사라질 수도 있습니다. 따라서 디자인에는 이 모드에서 잘 작동하는 요소가 있어야 합니다.

어떻게 합니까?

• 음, 우선, 아이콘, 로고, 브랜드 이름 스타일링 등에 투명한 배경이 있는 png 파일을 사용하여 시작하십시오.
• 요소 자체의 배경이 어둡거나 TikTok 로고와 같이 검은색으로 표시되는 경우 검은색 디자인에 흰색 획을 추가하는 것이 좋습니다. 이렇게 하면 디자인에 무게가 추가되고 배경과 분리됩니다.
• 일부 뉴스레터 디자인에는 배경 이미지에 텍스트가 겹쳐져 있습니다. 텍스트가 흰색이면 어두운 모드가 검은색으로 바뀝니다. 따라서 충돌하지 않는 배경 이미지를 선택하십시오. 그렇지 않은 경우 그 사이에 레이어를 추가하는 것을 고려하십시오.

Kimp 팁: 브랜딩 디자인을 시작하는 소규모 비즈니스인 경우 디자인 팀이 어두운 모드에서 잘 작동하는 자산을 생성하도록 하십시오. 말할 것도 없이, 당신은 검은색 로고를 가질 수 없지만 그들이 당신에게 png 파일을 제공하는지 확인하십시오.

알고 계셨나요? Kimp Graphics를 사용하면 모든 파일에 대한 완전한 소유권을 갖게 되며 다양한 형식으로 디자인을 공유하여 최대한 활용할 수 있습니다.

6. 삽화를 잊지 마세요

우리는 그래픽 디자인이 스톡 이미지나 이메일의 사진에서 멀어진 시대에 살고 있습니다. 네, 일러스트레이션과 기념일 로고가 현재 트렌드이며 그럴만한 이유가 있습니다. 그들은 가능한 가장 좋은 방법으로 브랜드 개성을 보여주고 어떤 비용도 들인 것을 잊어서는 안됩니다.

그러나 브랜드 일러스트레이션은 사전 설정된 색상과 함께 제공되기 때문에 뉴스레터를 다크 모드에 최적화할 때 문제가 됩니다. 그러나 불가능한 것은 아닙니다. 브랜드가 브랜딩 이유로 일러스트레이션의 색상을 변경하는 것을 견딜 수 없는 경우 전문 디자인 팀이 도와드릴 수 있습니다.

그들은 전경 그림으로 배경을 분리하고 디자인이 어두운 모드에서 잘 작동하도록 레이어를 변경할 수 있습니다.

그리고 새로운 일러스트레이션을 디자인하는 경우 디자인 브리프에 다크 모드 호환성을 포함해야 합니다. 그리고 디자인 팀과 협력하여 일러스트레이션에 사용할 파스텔 및 채도가 낮은 색상을 선택합니다.

7. 테스트, 테스트, 완벽해질 때까지

다크 모드에 맞게 뉴스레터 디자인을 최적화하는 마지막이자 가장 중요한 단계는 제대로 될 때까지 실험하는 것입니다. 각 이메일 클라이언트는 다크 모드 이메일을 다르게 렌더링하기 때문에 처음에 제대로 된 이메일을 받는 것은 사실상 불가능합니다. 색상은 화면에 따라 다르며 사용자 경험도 마찬가지입니다.

그러나 테스트, 분석 및 실험에 전념한다면 올바른 길을 가고 있는 것입니다.

다양한 기기와 다크/라이트 모드에서 이메일을 직접 확인하세요. 색상, 글꼴 및 이미지 렌더링이 어떻게 다른지 이해합니다. 드로잉 보드 또는 디자인 팀 회의로 돌아가서 문제를 해결하십시오.

Kimp로 다크 모드 호환 뉴스레터 디자인

뉴스레터 캠페인이 자랑스럽습니까? 매일 콘텐츠를 만드는 것을 좋아합니까? 이 사실을 알게 되어 매우 기쁩니다. 앞으로도 계속 그렇게 하셔야 합니다. 디자인 스타일이나 트렌드의 변화에 ​​좌절하지 마십시오.

Kimp는 당신을 위해 모든 것을 처리하기 위해 여기 있습니다. 예, 어두운 모드에 대한 완벽한 디자인 스타일을 찾는 것이 긴 과정이라는 것을 알고 있지만 우리는 당신과 함께합니다. 당사의 무제한 디자인 서비스(Kimp Graphics 및 Kimp Video)는 이러한 시나리오를 위해 특별히 설계되었습니다. 예산 걱정 없이 실험하고 최상의 디자인을 얻을 수 있도록.

그러니 지금 구독을 신청하고 최적화하세요!