네이버 메일

, 김군우

이 문서는 email standards project의 규칙을 국내 이메일 클라이언트에 적용한 결과입니다.

네이버 메일

네이버 메일 스크린샷 – ESP의 acid test에 대한 결과입니다. 네이버 메일 스크린샷

상태:

개선이 요구됨.

요약:

inline style을 제외하고 표현을 분리하여 적용할 수 있는 방법이 없다. 지정된 ID를 변형하는 경우는 없었다. HTML 문서 head에서의 embedded CSS 지원이 요구된다.

마지막 업데이트:

2007년 11월 30일

불완전/미지원 속성 (높은 우선순위):

불완전/미지원 속성 (꾸밈 요소):

개선을 위한 추천사항

높은 우선순위의 추천사항

우리는 네이버가 네이버 메일이 다음의 중요한 CSS 속성을 지원하도록 개선하기를 바란다.

background-image

접근가능한 컨텐츠를 전달하는 핵심 방법 중 하나는 그래픽 요소를 인라인으로 읽는 것보다 CSS를 사용하여 읽는 것이다. 문맥상 의미있는 이미지들(예를들어 사람, 제품 등의 이미지)은 대체로 인라인으로 읽히는 것이 적당하다. 그러나 시각 디자인 요소로 만들어진 그래픽들은 CSS로 읽히는 것이 최상입니다. 이는 구조와 표현의 분리의 향상뿐 아니라, 이미지가 다운로드 되지 않기 때문에 CSS를 지원하지 않는 디바이스의 경우에도 도움을 준다. 텍스트 전용, 화면 낭독기용 이메일 클라이언트 등에서 대역폭을 절감하는 혜택을 포함하여, 향상된 성능과 표현의 강화라는 이득이 있다. backgroud-image CSS 속성을 지원하지 않는 경우에 이미지는 반드시 인라인으로 표시되어야 한다.

background-image-position

배경 이미지를 지원하는 경우, 해당 이미지의 위치 지정을 지원하는 것은 가독성과 밀접한 관계를 가진다. 배경 이미지는 종종 HTML text를 포함하는 block-level element의 안에 위치한다. background-image-position CSS 속성은 이미지의 위치 지정을 할 수 있도록 도와주며 그리하여 text가 읽지 못하도록 되는 것을 방지한다. 위치 지정이 불가능한 경우, 접근성에 텍스트를 읽지 못할 가능성이 있는 잠재적인 이슈를 가져온다.

color/background-color

시각 디자인의 가장 근본적인 부분은 아마도 색상일 것이다. 그것은 디자인의 기초이다. 그러나 시각 디자인을 위한 전경/배경 색의 지원에 있어 불완전한 혹은 일부분의 지원은 접근성의 문제를 야기할 수 있다. 흰 텍스트가 올바르게 표시된 위에 검은 배경색이 제거된다면 결과는 흰 바탕에 흰 텍스트가 된다.

descendant selectors (자식 선택자)

마크업을 깨끗하게 하고 CSS를 재사용할 수 있게 해주는 훌륭한 방법은 자식 선택자를 사용하는 것이다. 이것의 지원이 없다면, ID와 class는 스타일을 입힐 모든 element에 지정되어야 한다. 그렇게 되면 쓸데없는 마크업이 파일의 크기를 증가시키고 파일을 복잡하게 만들게 된다.

float/clear

float 속성은 표준 기반 마크업 디자인을 위한 필수요소이다. 테이블 레이아웃이 사라진 후, float는 레이아웃을 위한 기본이 되었다. float 없이 완벽한 디자인은 불가능하다. 그리고 element들이 layout 상에 float 속성을 통해 표현되면 clear 속성은 뒤이어 표시될 element를 올바르게 표시하기 위해 존재한다. clear 속성은 인접 컨텐츠가 float 된 element에 가려지지 않도록 지켜준다, float와 clear는 친밀한 존재이다.

margin

margin 속성의 지원이 없으면 디자인은 상당히 깨져보일 것이다. 하지만 디자인의 미학의 파괴는 이제 막 시작이다. element들이 버퍼 없이 강제로 함께 나오는 경우, 그곳에 포함된 텍스트들이 종종 읽을 수 없게 된다.

padding

padding 속성의 지원이 없는 것은 margin의 그것보다는 여파가 적지만, 유사한 이유로 중요하다. background-color, list-style-image, border와 같은 속성을 가진 다른 element들과 함께 사용될 때 padding 속성은 가장 중요하다. 앞서 언급한 element들과 함께 사용될 때, padding 속성 결핍의 영향력이 증가된다.

HTML 문서의 링크 텍스트는 다양한 배경색에 속하게 된다. 따라서 텍스트의 가독성 문제를 일으키지 않기 위한 링크 색상이 제공되어야 한다. 만약 어떤 링크 색상이 뒤따르는 링크의 정의를 바꿔버린다면, 가독성에 문제가 생길 수 있다. 이것이 미적 특성으로 확장될 수 있기 때문에 접근성에 있어 중대한 문제라고 여겨진다.

width/height

width 속성의 사용은 height 속성의 그것보다 일반적이다. height 속성은 미적 균형의 독립을 위하여 종종 사용된다(background 색상의 확장 등). 그러나 이 두 속성은, 미지원 시 가독성의 장애나 레이아웃의 파괴를 야기할 수 있는, 어떤 디자인에나 매우 중요한 요소이다. width 속성은 결정적으로 중요한 요소이다. 왜냐하면 float, text-align 등의 속성이 width 속성에 의존하여 표현되기 때문이다. width 속성이 지원되지 않으면, float 속성은 무의미해지고 우측정렬 혹은 중앙정렬된 element는 기본 block element의 너비인 100%로 위치되어 원하는 위치에 놓을 수 없다. 그리고 height 속성에 대한 지원 부족은 미적으로 부정적인 효과를 넘어 clear 되지 않은 float element들의 가독성 문제를 일으킬 수 있다.

보통 우선순위의 추천사항

결정적으로 중요한 것은 아니지만, 우리는 네이버가 네이버 메일이 다음 CSS 속성을 지원하도록 개선하기를 바란다.

background-image-position a:hover

a:hover를 통해 a 태그에 쓰인 배경 이미지의 위치를 조절하는 것은 표준 기반 디자인에서 상호작용을 위해 널리 쓰이는 기술이다. 일반적으로 HTML 텍스트로 구성되는 인조 버튼과 내비게이션용 element의 배경색/이미지를 바꾸기 위해 가장 자주 쓰인다. 이메일 디자인에 심각한 영향을 주지는 않지만, 링크된 element에 시각적인 신호를 주어 사용성을 증대시킨다.

border

디자인은 테두리가 제거되면 확실하게 분리되지 못한다. 그러나 테두리가 빠지거나 불완전하게 표시되면, 비록 그 어떤 것이 동일시 하게될 수 없을지라도 어떤 것이 옳지 않은 것은 명백하다.

font family/size/weight/style

font 속성이 지원되지 않을 때, 텍스트는 기본 font 값을 사용하여 표시됩니다. 이것이 가독성이 떨어지거나 접근성이 없는 결과를 내지 않더라도, 그것은 디자인의 무결성을 망친다. 세리프 글꼴이 산세리프 글자체가 될 때, 또는 반대의 경우가 가장 대표적인 경우입니다. 글꼴들은 시각 디자인의 주요부이므로 font 속성에 대한 완전한 지원은 이메일 클라이언트의 중추 부분일 것이다.

font-family names with quotes (인용구로 감싼 font-family 속성)

많은 일반적인 HTML의 font-family 속성이 단일 단어들(Georgia, Arial, 등등)으로 정의되지만, 다른 것들은 두 단어 이상으로 정의된다(Trebuchet MS, Lucida Grande, 등등). 그리고 CSS 지침에 따르면, 두 단어 이상으로 정의되는 font-family 속성은 인용구로 감싸져야 한다. 웹 디자이너들은 이미 HTML font를 단일 단어로 정의된 것들로 제한하여 사용하고 있는 상황이다. 두 단어 이상으로 정의되는 font명들에 대한 지원은 중대한 사항은 아니지만, 그것은 웹 디자이너들의 HTML font명의 사용을 제한시킨다.

font inheritance (font 상속)

마크업을 깨끗하게 유지하고 CSS을 재활용하는 것을 돕는 훌륭한 방법은 font 상속의 성질을 이용하는 것이다. 만약 글꼴 스타일이 모든 필요한 선별기에 적용되어야 하면, 파일들은 쓸데없는 마크업으로 덩치가 커진다. 그리고 컨텐츠 제작 과정에 쓸데없는 노동이 강요된다.

line-height

디자인은 line-height 속성에 대한 지원의 부족으로는 읽지 못하는 상태나 접근성의 장애를 가지고 오지는 않는다. 그러나 이 속성은 디자인이 숨을 쉬도록 하고 어떤 이들의 가독성을 증가시킨다. 적당히 사용될 때 이처럼 그것은 가치를 더한다.

list-style-image

디자인은 UL에 블렛들을 장식하는 것으로 향상될 수 있다. 이것을 만드는 유명한 방법 2가지는 기본 list-style-image 속성과 배경 이미지를 사용하고 padding을 부여하여 기본 list-style-image 속성을 좀 더 조작하기 쉽게 만든 것이다. list-style-image가 정의되었지만 지원하지 않는 경우, 단순히 기본 bullet을 보여주는 것으로 기능이 축소된다. 그러나, 그것은 훌륭하게 지원될 때 시각 디자인을 향상할 수 있는 속성이다.

코멘트 남기기

코멘트 작성