요약
Office 애드인이 Outlook for iOS에서 메시지(예: 이메일 서명)에 HTML을 삽입할 때, Outlook for iOS는 해당 콘텐츠가 메시지 본문에 추가되는 시점에 인라인 CSS를 재작성합니다. 재작성된 CSS는 현대적인 축약형(shorthand) 표기법과 currentcolor 키워드를 사용하는데, 클래식 Windows용 Outlook(Word 기반 렌더링 엔진)은 이를 올바르게 렌더링하지 못합니다. 그 결과, 클래식 Windows용 Outlook에서 메시지를 여는 수신자에게는 스타일이 누락되거나 잘못 표시되며, 특히 서명 요소의 테두리 색상이 사라지는 현상이 가장 두드러지게 나타납니다.
동일한 메시지가 웹용 Outlook, 새 Windows용 Outlook, Outlook for iOS 및 Outlook for Android에서는 올바르게 렌더링됩니다. 오직 클래식 Windows용 Outlook만 영향을 받는데, 이는 Word 렌더링 엔진만이 재작성된 CSS를 해석하지 못하기 때문입니다.
영향을 받는 대상
Outlook for iOS에서 서명 애드인(또는 스타일이 적용된 HTML을 삽입하는 모든 애드인)을 사용하는 모든 조직과 클래식 Windows용 Outlook을 사용하는 수신자가 해당됩니다. 클래식 Windows용 Outlook은 여전히 많은 기업에서 기본 클라이언트로 사용되고 있으므로 이는 매우 광범위한 사용자 층에 영향을 미칩니다.
현재 마땅한 해결책이 없는 상황에서, 저희는 이 문제로 인해 영향을 받고 있는 수많은 고객을 대신하여 이 문제를 제기합니다.
관찰된 현상
애드인을 통해 메시지에 다음과 같은 HTML을 삽입합니다:
<td align="left" style="padding:12px; border-top:none; border-right:none; border-bottom:none; border-left:solid 8px #F5F736; vertical-align:top; font-family:Calibri,Arial,sans-serif;">
그러면 Outlook for iOS는 이 내용이 메시지 본문에 반영되기 전에 다음과 같이 재작성합니다:
<td dir="ltr" align="left" style="white-space: nowrap; border-width: medium medium medium 8px; border-style: none none none solid; border-color: currentcolor currentcolor currentcolor #F5F736; padding: 12px; vertical-align: top;">
여기서 두 가지 동작이 문제를 일으킵니다:
- 개별적으로 선언된
border-top,border-right,border-bottom,border-left속성이border-width,border-style,border-color축약형으로 병합됩니다. - 병합된
border-color에서 설정되지 않은 세 면에 대해currentcolor키워드가 사용됩니다.
클래식 Windows용 Outlook은 이러한 컨텍스트에서 currentcolor를 안정적으로 지원하지 않으며, 이 특정한 축약형 조합을 처리할 때 실제 색상이 지정된 면의 설정을 누락하거나 잘못 계산합니다. 결과적으로 발신자가 의도한 유색 테두리가 수신자에게 표시되지 않습니다.
애드인에서 이 문제가 특히 중요한 이유
Office 애드인 개발자는 body.setSignatureAsync, body.setAsync 또는 이와 유사한 삽입 API가 호출된 후 호스트 클라이언트가 HTML에 수행하는 작업을 제어할 수 없습니다. 저희가 제공하는 HTML은 유효하며 다른 모든 Outlook 환경에서 올바르게 렌더링됩니다. 하지만 Outlook for iOS 내부에서 사용자가 모르는 사이에 재작성이 발생하고 있으며, 이를 거부(opt-out)할 수 있는 API도 존재하지 않습니다.
재현 방법
- 표준 Office JS 본문 삽입 API를 사용하여 위 HTML 스니펫을 새 메일 메시지에 삽입하는 간단한 Outlook 애드인을 구축합니다.
- Outlook for iOS(테스트 환경: iOS 18.3.2, Outlook for iOS 4.2513.1)에서 메시지를 보냅니다.
- 웹용 Outlook 또는 Outlook for iOS에서 보낸 편지함을 확인합니다: 노란색 왼쪽 테두리가 올바르게 표시됩니다.
- 클래식 Windows용 Outlook에서 보낸 편지함을 확인합니다: 왼쪽 테두리 색상이 누락되어 있습니다.
이전 보고 사항
이 문제는 이전에 GitHub의 Office JS 저장소에 보고된 바 있습니다: https://github.com/OfficeDev/office-js/issues/6521. 당시 답변은 단기간 내에 수정될 계획이 없으므로, 팀에서 수요를 파악할 수 있도록 Tech Community에 게시글을 올려달라는 권고였습니다. 본 게시글은 그 권고에 따라 작성되었습니다.
요청 사항
최선의 해결책으로 다음 중 하나를 요청합니다:
- Outlook for iOS가 지원되는 삽입 API를 통해 제공된 애드인의 인라인 CSS를 재작성하는 것을 중단해 주십시오. 작성자가 제공한 HTML을 수정 없이 그대로 전달해 주십시오.
- 만약 정규화(normalization)가 반드시 필요하다면,
currentcolor배출을 피하고 클래식 Windows용 Outlook(Word 엔진)이 해석하지 못하는 방식으로 테두리 속성을 축약형으로 병합하지 마십시오. - 클래식 Windows용 Outlook을 포함한 모든 Outlook 클라이언트에서 상호 호환성이 보장되는 "공식 지원 HTML 및 CSS 서브셋"을 문서화하여 공개해 주십시오. 그러면 애드인 개발자가 이를 목표로 개발할 수 있습니다.