[번역] 미디어 쿼리 없이 반응형 이메일을 만드는 Fab Four 테크닉

웹 프론트엔드/이메일 Email

[번역] 미디어 쿼리 없이 반응형 이메일을 만드는 Fab Four 테크닉

아로리(arori) 2018. 2. 27. 15:02

원문: The Fab Four technique to create Responsive Emails without Media Queries

미디어 쿼리 없이 반응형 이메일을 만드는 새로운 방법을 찾았습니다. 이 방법은 CSS calc()함수와 width, min-width, max-width 프로퍼티을 사용합니다.

저는 이 프로퍼티를 합쳐서 (CSS계 의) Fab Four라고 부르고 있습니다.

calc() & width & min-width & max-width. (CSS계의) Fab Four로 알려져있다.

문제

반응형 이메일을 만드는 것은 어려운 일입니다. 모바일 이메일 클라이언트(Gmail, Yahoo, Outlook.com)가 미디어 쿼리를 지원하지 않기 때문에 특히 어렵습니다. 하이브리드 방식, Gmail 첫번째 전략, 미디어쿼리가 없는 반응형 이메일이 이런 상황에 대응하는 좋은 방법입니다.

저는 마지막 방법을 가장 좋아하했습니다. 그 방법은 컬럼을 display:inline-block로 정렬하고, 고정 너비를 가진 <div>로 만드는 것이 핵심 아이디어입니다. 화면에 더 이상 두 개의 블록이 나란히 있을 수 없으면 자연스럽게 아래로 떨어지게 됩니다. 그러나 이 방법을 사용하면 항상 문제가 있습니다.

모든 블럭이 일열로 쌓이게 되면, 열이 이메일의 전체 너비를 차지하지 않게 됩니다.

미디어 쿼리 없이도 일열로 쌓을 수는 있지만, 전체 너비에 맞춰 커질 수는 없습니다. Nicole Merlin의 그림

오랫동안 이 문제를 풀 수 있는 방법을 찾아 헤맸습니다. Flexbox는 좋은 후보 중 하나지만 안타깝게도 이메일에서 Flexbox 지원 범위가 매우 떨어집니다.

해결책

width, min-width, max-width 기억하기

제가 찾은 해결책은 calc()함수 외에, 세가지 CSS 프로퍼티로 구성 되어있습니다. 이 해결책의 작동 방식을 완전하게 이해하기 위해서, width, min-width, max-width 속성이 같이 사용될 때 어떻게 동작하는지 다시 살펴봅시다.(동료 프랑스인 프론트엔드 개발자, Raphaël Goetter가 명확하게 요약해놓은 글 처럼 말이죠)

width 값이 max-width의 값 보다 크면 max-width가 적용 됩니다.
min-width값이 width나 max-width값 보다 크면 min-width값이 적용 됩니다.

아래 스타일로 만든 상자의 너비가 얼마일까요?

.box {
    width:320px;
    min-width:480px;
    max-width:160px;
}

(정답: 상자의 너비는 480px 입니다.)

calc()와 마법의 수식 소개

그럼 바로, 여기 두 개의 열을 만들지만, 480px 미만에서는 일열로 쌓이는 Fab Four 예제를 봅시다.

.block {
    display:inline-block;
    min-width:50%;
    max-width:100%;
    width:calc((480px — 100%) * 480);
}

각 width 프로퍼티를 나눠서 살펴봅시다.

min-width:50%;

min-width 프로퍼티는 데스크톱 버전 기준의 열의 너비를 지정합니다. 이 값을 변경해서 더 많은 열을 추가하거나(예: 열이 4개인 레이아웃의 경우에 25%), 열의 너비를 고정 픽셀로 설정할 수 있습니다.

max-width:100%;

max-width 프로퍼티는 모바일 버전 기준의 열의 너비를 지정합니다. 100%가 되면 각 열은 부모 컨테이너의 전체 너비에 맞게 조정됩니다. 이 값을 변경해서 모바일에서 열 개수를 고정할 수 있습다.(예: 열이 2개인 레이아웃의 경우에 50%)

width:calc((480px — 100%) * 480);

calc() 함수 덕분에, width 프로퍼티에는 마법같은 일이 일어나게 됩니다. 값 480은 우리가 원하는 기준점이고, 100%는 열의 부모 컨테이너 너비에 해당합니다. 이 계산식은 max-width의 값보다 크거나, min-width의 값보다 작은 값을 만들어서 width 값 대신 둘 중 하나가 적용되도록 하는 것이 목표입니다.

다음 두 가지 예시를 봅시다.

부모가 500px인 경우, 계산된 width는 -9600px입니다. min-width보다 값이 작네요. 그러므로 min-width의 값인 50%가 적용되어서 2열 레이아웃이 됩니다.

부모가 400px인 경우, 계산된 width는 38400px입니다. width값은 min-width보다 값이 크지만, max-width는 width값보다 작습니다. 그러므로 max-width의 값인 100%가 적용되어서 1열 레이아웃이 됩니다.

데모

이 기술로 뭘 할 수 있는지에 대한 데모입니다.

여기에서 전체 온라인 데모를 볼 수 있습니다. (혹은 Litmus Builder나 Codepen에서도 볼 수 있습니다.)

데모를 각각 Gmail 데스크톱 웹 메일과 Gmail iOS 모바일 앱에서 본 스크린샷입니다. 동일한 코드로, 다르게 렌더링 되었습니다.

Gmail 데스크톱 웹 메일과 Gmail iOS 앱에서 본 Fab Four 데모

이 데모에서는, 여러 다른 그리드(2, 3, 4 열)로 예시 설정했습니다. 이미지가 있는 첫번째 그리드는 데스크톱에서는 4열, 모바일에서는 2열로 이동하도록 제작하였습니다. 다른 그리드는 모바일에서 전체 너비로 커지도록 설계되었습니다.

또한 제목이 어떻게 데스크톱에서는 왼쪽 정렬, 모바일에서는 가운데 정렬로 바뀌는지 보세요. 제목에 190px 고정 너비를 지정하고, 중앙으로 배치하기 위해 margin: 0 auto를 지정하여 구현했습니다. 데스크톱에서는 제목의 부모 컨테이너에 min-width의 190px이 적용되어 로고가 왼쪽에 유지됩니다. 모바일에서는 부모 컨테이너가 전체 너비로 커지므로 로고가 중앙에 배치됩니다.

이 기법의 가장 큰 장점은 모든 것이 그리드의 부모 너비를 기반으로 해서, 이메일을 데스크톱 웹메일에도 적용할 수 있다는 것입니다. 예를 들어, Outlook.com에서 하단이나 오른쪽에 읽기 패널이 있는 경우에도 이메일은 읽기 패널의 너비에만 반응해서 문제가 없습니다. 이것은 미디어 쿼리로는 불가능합니다.

지원 범위

브라우저에서 calc()는 IE9 이상부터 잘 지원됩니다. calc()는 이메일 클라이언트에서도 꽤 지원하고 있습니다. Apple Mail(iOS, OSX에서), Thunderbird, Outlook(iOS, Android 앱), Gamil(웹 메일, iOS, Android 앱), AOL(웹메일), 구버전 Outlook.com(유럽에서 아직 존재)에서 동작합니다다.

구버전 Outlook.com

Outlook.com에는 약간 이상한 점이 있습니다. 웹 메일은 calc() 안에 괄호가 있는 모든 속성을 필터링합니다. 즉 calc(480px - 100%)는 지원하지만 calc((480px - 100%) * 480) 은 지원하지 않습니다. 처음의 공식에는 괄호가 포함되어있으므로 괄호를 피하기 위해 리팩토링해야 합니다. 그래서 Outlook.com을 지원하는 공식은 다음과 같습니다.

width: calc(480px * 480 - 100% * 480);

지원하지 않는 클라이언트

물론 Lotus Notes같은 오래된 클라이언트나 윈도우용 최신 Outlook(Word의 HTML 렌더링 엔진 사용)은 calc()를 지원하지 않습니다. 또한 Outlook 웹 앱(Office 365와 신버전 Outlook.com 둘 다)과 Yahoo(웹 메일, iOS, Android 앱)에서도 작동하지 않습니다. 이 두 경우는 calc()함수와 관련된 속성을 제거 할 것입니다.

폴백(Fallback)

이런 경우에는 calc()를 지원하지 않는 클라이언트를 위해 관련된 모든 프로퍼티에 고정 너비 값을 중복으로 사용하는 것을 권장합니다. 이러한 클라이언트에서 Fab Four를 숨기기 위해서, 기술적으론 좋지 않더라도 calc()함수를 사용하는 것이 좋습니다. 아래 첫번째 예시를 봅시다.

.block {
    display:inline-block;
    min-width:240px;
    width:50%;
    max-width:100%;
    min-width:calc(50%);
    width:calc(480px * 480 — 100% * 480);
}

Outlook 웹 앱

하지만, Outlook 웹앱(Office 365와 신버전 Outlook.com)에는 이상한 점이 하나 더 있다. calc() 함수에 곱셈이 포함된 경우 (* 문자가 포함된 경우) 모든 인라인 스타일을 제거합니다. 즉, 곱셈은 수작업으로 하고 그 결과를 뺄셈하는 것만 유지할 수 있다는 것입니다. 기준점이 480px인 경우에 대한 최종 계산은 다음과 같습니다.

width:calc(230400px — 48000%);

웹킷 프리픽스

구버전의 Android(Android 5.0이전) 또는 iOS(iOS 7 이전)에서 작동하려면 -webkit- 프리픽스가 필요합니다. 최종 버전은 아래와 같습니다.

.block {
    display:inline-block;
    min-width:240px;
    width:50%;
    max-width:100%;
    min-width:-webkit-calc(50%);
    min-width:calc(50%);
    width:-webkit-calc(230400px — 48000%);
    width:calc(230400px — 48000%);
}

단점과 최종 결론

이메일 개발 세계에서의 다른 것들과 마찬가지로, Fab Four 기술은 완벽하지 않습니다. 다음은 생각해볼 수 있는 몇 가지 제약 사항입니다.

Yahoo에서 동작하지 않습니다. 웹 메일의 데스크톱 버전은 미디어 쿼리를 지원합니다. 따라서 이메일의 모바일 버전을 먼저 만든 다음 미디어 쿼리로 데스크톱 버전을 만들어 조금 개선할 수 있습니다.
기준점을 한 개만 설정할 수 있습니다. 하지만 이메일에서는 별 문제가 아닐 수 있습니다. 데스크톱은 600px 이상이고, 모바일에서 두 개 이상의 기준점이 필요하지 않기 때문이다.
데스크톱 버전에서 모바일 버전으로 갈 때 열 갯수를 줄이는 것만 가능합니다. 이런 일은 드물겠지만, 모바일에서 4열이고 데스크톱에서는 1열이 되도록 할 수는 없습니다.
최종 버전의 계산이(구버전 Outlook.com을 지원하기 위해서. 새 Outlook에서는 성능이 저하됨.) 보기 어렵습니다. 전처리기와 mixin을 사용하여 필요한 프로퍼티를 생성하는 것이 도움이 될 수 있을 것입니다.

여전히 이 기술이 여러 케이스에 유용할 것입니다. 특히 Gamil 최적화에 유용할 것입니다. 또한 웹사이트의 사례(위젯이나 광고 등)도 있을 것이라고 확신합니다.

이 기술이 당신이 어떤 것을 창조하도록 영감을 주는지 빨리 보고싶군요.

Fab Four의 의미를 몰라서 검색하느라 고생했던 기억이 있네요. Fab Four는 비틀즈의 별명으로, 주로 "전설적인 4인조"라고 번역 되는 단어라고 합니다. 해당 기법에서 calc(), width, min-width, max-width 네 개의 프로퍼티를 사용하므로 비유적으로 나타낸 것 같습니다.

저작자표시

현재글[번역] 미디어 쿼리 없이 반응형 이메일을 만드는 Fab Four 테크닉

잡다한 개발 블로그