[gmail] 이메일 제목의 애니메이션 아이콘

내가 알고 데이터 URI 있는의 base64인코딩 된 데이터를 이미지로 인라인 등 사용할 수 있습니다. 오늘 저는 실제로 제목에 애니메이션 (gif) 아이콘이있는 스팸 메일을 받았습니다.

여기에 이미지 설명 입력

아이콘 만 있습니다.

여기에 이미지 설명 입력

그래서 내 마음을 떠난 유일한 것은 데이터 URI에 관한 것이었고 Gmail이 제목에 일종의 이모티콘을 삽입하도록 허용하는 경우였습니다. 이메일의 전체 상세 버전을보고 아래 그림의 제목을 가리 켰습니다.

여기에 이미지 설명 입력

따라서 GIF는 =?UTF-8?B?876Urg==?=데이터 URI 체계와 유사한 인코딩 된 문자열 에서 나왔지만 아이콘을 가져올 수 없습니다. 다음은 요소 HTML 소스입니다.

여기에 이미지 설명 입력

간단히 말해, 16 진수 가 https://mail.google.com/mail/e/XXX있는 곳 에서 많은 이모티콘 XXX이 있습니다. 그들은 어디에도 문서화되지 않았거나 찾을 수 없습니다. 그것이 데이터 URI에 관한 것이라면 어떻게 Gmail의 이메일 제목에 포함시킬 수 있습니까? (나는 그 이메일을 야후 이메일 계정으로 전달했고, [?]아이콘 대신 보임 ) 그렇지 않은 경우 인코딩 된 문자열은 어떻게 구문 분석됩니까?



답변

간단한 설명:

내부적으로라고하며 goomoji비표준 UTF-8 확장으로 보입니다. Gmail에서 이러한 문자 중 하나를 발견하면 해당 아이콘으로 대체됩니다. 문서를 찾을 수 없었지만 형식을 리버스 엔지니어링 할 수있었습니다.

이 아이콘은 무엇입니까?

이러한 아이콘은 실제로 “이모티콘 삽입”패널 아래에 나타나는 아이콘입니다.

Gmail 삽입 이모티콘

52E목록에 아이콘 이 표시되지 않지만 동일한 규칙을 따르는 몇 가지 다른 아이콘이 있습니다.

같은 이름이 접두사로 붙은 아이콘도 있습니다 . 이러한 아이콘을 이러한 방식으로 사용할 수 있는지 여부를 결정할 수 없었습니다.gtalk.03C gtalk.03C

이 데이터 URI는 무엇입니까?

일부 유사점을 공유하지만 실제로는 Data URI 가 아닙니다 . 실제로 RFC 2047에 정의 된 이메일 제목에서 ASCII가 아닌 문자를 인코딩하기위한 특수 구문입니다 . 기본적으로 이렇게 작동합니다.

=?charset?encoding?data?=

따라서 예제 문자열에는 다음 데이터가 있습니다.

=?UTF-8?B?876Urg==?=
  • charset = UTF-8
  • encoding= B(base64를 의미)
  • data = 876Urg==

그래서 어떻게 작동합니까?

우리는 어떻게 든 876Urg==아이콘을 의미한다는 것을 알고 52E있지만 어떻게?

base64 디코딩 876Urg==하면 0xf3be94ae. 바이너리에서 다음과 같이 보입니다.

11110011 10111110 10010100 10101110

이러한 비트는 4 바이트 UTF-8 인코딩 문자와 일치합니다.

11110xxx 10xxxxxx 10xxxxxx 10xxxxxx

따라서 관련 비트는 다음과 같습니다. :

     011   111110   010100   101110

또는 정렬 된 경우 :

00001111 11100101 00101110

16 진수에서 이러한 바이트는 다음과 같습니다.

FE52E

보시다시피 다른 UTF-8 문자와 아이콘 FE을 구별 하기위한 접두사를 제외하고 는 아이콘 URL의 goomoji와 일치합니다 52E. 일부 테스트는 이것이 다른 아이콘에도 적용된다는 것을 증명합니다.

많은 작업처럼 들리지만 변환기가 있습니까? :

물론 이것은 스크립트로 작성할 수 있습니다. 테스트를 위해 다음 Python 코드를 만들었습니다. 이러한 함수는 base64로 인코딩 된 문자열을 URL에있는 짧은 16 진수 문자열과 변환 할 수 있습니다. 이 코드는 Python 3 용으로 작성되었으며 Python 2와 호환되지 않습니다.

변환 기능 :

import base64

def goomoji_decode(code):
    #Base64 decode.
    binary = base64.b64decode(code)
    #UTF-8 decode.
    decoded = binary.decode('utf8')
    #Get the UTF-8 value.
    value = ord(decoded)
    #Hex encode, trim the 'FE' prefix, and uppercase.
    return format(value, 'x')[2:].upper()

def goomoji_encode(code):
    #Add the 'FE' prefix and decode.
    value = int('FE' + code, 16)
    #Convert to UTF-8 character.
    encoded = chr(value)
    #Encode UTF-8 to binary.
    binary = bytearray(encoded, 'utf8')
    #Base64 encode return end return a UTF-8 string.
    return base64.b64encode(binary).decode('utf-8')

예 :

print(goomoji_decode('876Urg=='))
print(goomoji_encode('52E'))

산출:

52E
876Urg==

물론 아이콘의 URL을 찾으려면 Gmail에서 새 초안을 만들고 원하는 아이콘을 삽입 한 다음 브라우저의 DOM 검사기를 사용하면됩니다.

DOM 검사기


답변

올바른 16 진수 코드 포인트 (예 : ‘pile of poo’의 경우 fe4f4)를 사용하고 제목 줄 헤더 내에 올바르게 인코딩 된 경우 base64 (@AlexanderOMara 참조) 또는 인용 인쇄 가능 ( =?utf-8?Q?=F3=BE=93=B4?=)으로 두면 Gmail이 자동으로 구문 분석하고 해당 이모티콘으로 바꿉니다.

제목 줄 또는 이메일 본문 에 복사하여 붙여 넣을 수있는 Gmail 그림 이모티콘 목록은 다음과 같습니다 . 받은 편지함에서 더 많은 시선을 끌 수있는 애니메이션 이모티콘은 노란색 배경에 배치됩니다.

emailmarketingtipps.de의 Gmail 이모티콘


답변

Goomoji 태그가 지정된 HTML 이미지에 대해 잘 조사 된 답변에 대해 Alexander O’Mara 에게 많은 감사를드립니다 !

세 가지를 추가하고 싶었습니다.

  • 스팸 발송자와 다른 마케팅 담당자가 이메일 제목 줄에 사용하기 시작하고 Gmail이 HTML 이미지로 변환하지 않는 이모티콘 (및 그림을 생성하는 기타 유니 코드 시퀀스)이 여전히 많이 있습니다. 일부 브라우저에서는 굵게 표시되며 애니메이션만큼이나 나쁩니다. 브라우저 이것들을 애니메이션화하도록 선택할 수도 있지만 어떤 것이 있는지 모르겠습니다. 이러한 유니 코드 시퀀스는 브라우저에 유니 코드 텍스트로 표시되므로 정확한 모양 (색상 여부, 애니메이션 여부, …)은 브라우저가 사용하는 텍스트 렌더링 시스템에 따라 다릅니다. 주어진 유니 코드 이모티콘의 모양은 모든 유니 코드 변형 선택기 및 이모티콘 수정 자 에 따라 달라집니다.유니 코드 코드 포인트 시퀀스에서 그 근처에 나타납니다. 이미지 기반 이모티콘 스팸과 달리 이러한 시퀀스는 브라우저에서 유니 코드 텍스트로 다른 앱에 복사하여 붙여 넣을 수 있습니다.

  • 이 StackOverflow 질문을 읽는 많은 마케터가 아니오라고 대답하기를 바랍니다. 이메일 제목 줄에 이러한 시퀀스를 포함하는 것은 끔찍한 생각이며, 귀하와 귀하의 브랜드는 즉시 스팸 발송자로 변색됩니다. 이메일이 “주의”를받을 가치가 없습니다.

  • 물론 모든 사람의 마음에 떠오르는 첫 번째 질문은 “어떻게 이러한 것들을 제거 할 수 있습니까?”입니다. 다행히도 다음과 같은 오픈 소스 Greasemonkey / Tampermonkey / Violentmonkey 사용자 스크립트가 있습니다.

Gmail 제목 줄 이모티콘 로치 모텔

이 사용자 스크립트는 HTML 이미지 ( Alexander O’Mara 의 멋진 작업 덕분에 )와 순수 유니 코드 유형을 모두 제거합니다 .

후자의 경우 사용자 스크립트에는 마케터가 남용 할 가능성이있는 유니 코드 시퀀스를 캡처하도록 설계된 정규식이 포함됩니다. 정규식은 ES6 Javascript에서 다음과 같습니다 (사용자 스크립트는 놀라운 ES6 Regex Transpiler를 사용하여 널리 지원되는 ES6 이전 정규식으로 변환합니다 ).

var re = /(\p{Emoji_Modifier_Base}\p{Emoji_Modifier}?|\p{Emoji_Presentation}|\p{Emoji}\uFE0F|[\u{2100}-\u{2BFF}\u{E000}-\u{F8FF}\u{1D000}-\u{1F5FF}\u{1F650}-\u{1FA6F}\u{F0000}-\u{FFFFF}\u{100000}-\u{10FFFF}])\s*/gu

// which includes the Unicode Emoji pattern from
//   https://github.com/tc39/proposal-regexp-unicode-property-escapes
// plus also these blocks frequently used for spammy emojis
// (see https://en.wikipedia.org/wiki/Unicode_block ):
//   U+2100..U+2BFF     Arrows, Dingbats, Box Drawing, ...
//   U+E000..U+F8FF     Private Use Area (gmail generates them for some emoji)
//   U+1D000..U+1F5FF   Musical Symbols, Playing Cards (sigh), Pictographs, ...
//   U+1F650..U+1FA6F   Ornamental Dingbats, Transport and Map symbols, ...
//   U+F0000..U+FFFFF   Supplementary Private Use Area-A
//   U+100000..U+10FFFF Supplementary Private Use Area-B
// plus any space AFTER the discovered emoji spam


답변