Acid2 Test 통과한 IE8은 이제 한걸음 걸었을 뿐이고..(ver. RC1)
Nts Nuli
2009-03-04 21:36:16
안녕하세요.
NHN 웹표준화팀 윤좌진 입니다.
이미 Acid2 Test는 작년, 제작년에 줄기차게 다른 브라우저들이 통과하면서 많이 다뤘던 내용이라 좀 식상하지만 IE8은 이제 처음 통과 한 것이니...
다시 정리 해보자면 Web Standards Project에서 제공하고 있는 Acid2 Test는 크게 대략 11가지 항목을 검사합니다.
IE8이 Acid2 test는 통과 했다고는 하지만 Firefox나 safari, opera 보다 사용율이 높은 IE 하위 브라우저들에 대한 대응은 계속 해야 한다는 문제가 남아 있습니다.
어찌 보면 또 하나에 브라우저가 더 추가되었다는 느낌 밖에 들 수 없을 테고 하위 브라우저 이용 율이 어느 정도 유지되는 동안은 IE8의 개선된 기능에 맞는 속성을 무턱대고 사용하는 것은 컨텐츠 접근이나 사용에 문제가 될 수 있으니 IE conditional comment 와 같은 방법을 사용하거나 충분한 테스트 후 페이지를 제작하는 것이 바람 직하다 할 수 있습니다.
이와 더불어 IE8에서 달라지는 사항들을 좀 정리해 보면.. 아래와 같은 내용도 있습니다.
Haslayout 삭제
CSS2.1을 모두 지원하고 Acid2 Test를 통과 함으로서 IE 자체 레이아웃 방식인 Haslayout기능은 더 이상 사용 하지 않는다고 합니다.
이로 인해 IE8에서는 float으로 발생되는 버그나 박스 모델에서 width, height 값 인식 버그, margin 겹침 문제, position 위치가 다른 문제 등이 더 이상 발생 하지 않게 되었다고 합니다.
Charset에 따라 글 간격 달라지는 문제 해결
IE(5,6,7)에서는 charset의 종류에 따라 글 간격(행간)이 달라지는 문제가 발생합니다.
이 경우 가장 대표적인 문제는 텍스트 언더라인 문제와 상하 여백 문제인데 IE8에서는 Charset에 따라 텍스트 간격 차이는 없어졌습니다.
하지만 텍스트 언더라인과 텍스트가 붙는 문제는 여전히 발생을 하는데 이 부분은 폰트 고유의 문제이며 중대한 문제가 아니라고 판단되는지 개선하지는 않고 있습니다.
브라우저 모드, 문서 모드 설정
표준을 준수한 IE8은 하위 브라우저와의 여러가지 차이가 발생 할 가능성이 있습니다.
이로 인해 개발자들과 사용자들에게는 여러가지 혼란을 줄 수 있기 때문에 하위 브라우저 호환성을 유지할 수 있는 설정 방법을 제공하고 있습니다.
하지만 사용자 역시 브라우저에서 기본으로 제공되는 개발도구를 열어 브라우저 모드나 문서 모드를 마음대로 조작 할 수 있기 때문에 하위 브라우저와 IE8을 모두 대응하기 위한 방법을 찾는 것이 더 좋다고 말할 수 있습니다.
(물론 경우데 따라서는 사용자 조작으로 인한 변화의 책임은 사용자의 몫 이지 않을까 생각됩니다)
form 컨트롤러 자체 여백 문제 해결
모든 요소의 자체 여백은 해당 브라우저에 종속적이고 form 컨트롤러는 OS와 브라우저의 영향을 받는 부분입니다.
IE 하위 브라우저에서는 다른 브라우저와 달리 form컨트롤러들이 css초기화를 하였음에도 불구하고 보이지 않는 자체 여백을 계속 지니고 있었지만 IE8에서는 이 부분이 개선되어 더 이상 자체 여백은 가지지 않습니다.
Printing css 지원
기존 IE 브라우저는 프린트 페이지 여백 설정이 화면과 다른 결과로 출력 되어 미리보기나 프린트 출력을 하면 원하는 결과를 볼 수 없었습니다.
IE8에서는 이런 여백 문제가 개선되었다고 보여지고, CSS2.1을 지원하기 때문에 print style 속성 사용할 수 있게 되었습니다.
이 기능으로 인해 IE8브라우저에서는 프린트 페이지의 여백 설정이나 페이지를 나누어서 표현하는 다단기능과 같은 기능도 사용 할 수 있게 되었습니다.
IE8 확장 CSS 지원
IE8에서 자체적인 css 확장 속성을 제공하고 있습니다.
이 속성들은 현재 IE에서만 지원하는 css속성과 css3에서 지원될 속성 들을 IE8에서 사용할 수 있도록 하는 속성들이며, IE8만을 위한 전용 css로 사용 될 수도 있다고 보면 됩니다..
아직 완전히 지원되고 있지는 않지만 내용은 아래 링크 페이지에서 확인이 가능합니다.
- microsoft css vendor extensions
- IE CSS Extension?
링크 url 값에 따라 :visited 인식안됨 문제
이 문제는 IE7부터 발생하던 문제였지만 IE8에서도 개선되지는 않고 있습니다.
방문한 url에 따라 :visited 인식이 되어야 하는 것은 당연하다고 생각하지만 IE7과 8은 url의 값이 스크립트로 구성되어 있거나 #이 들어가 있을 경우 디자인보안 문제로 인해 고의로 막았다고 합니다.
링크의 :link와 :visited에 대한 구분 기준은 있지만 url의 어떤 값에 대한 정의는 특별히 없기 때문에 이 문제에 대한 정확한 정의를 내릴 수는 없어서 이런 문제가 생기는게 아닌가 싶고, 그다지 보편적으로 큰 이슈가 될 만한 문제가 아니라 생각되어서 그런지 이 부분도 역시 바뀔 것 같지는 않습니다.
하지만 방문 했다는 기준에 대한 :visited는 정의 내려야 하는 게 맞지 않나 생각됩니다.
여전히 하위 IE 브라우저 때문에 고생하고 있을 분들에게는 IE8의 출시가 어떤 영향을 줄지 궁금하지만 조금씩 더 나아지고 있는 IE와 점점 사용층이 IE6 에서 IE7 로 바뀌고 있으니 IE8도 대중화 되길 바라는건 제 바램만은 아닐 것 입니다.
웹 표준 뿐만 아니라 기능향상과 IE8의 새로운 기능과 내용에 대해 궁금한 부분이 더 있다면 이 세미나에서 더 많은 내용을 들을 수 있을 것 같습니다.
NHN 웹표준화팀 윤좌진 입니다.
곧 정식 버전이 출시될 IE8은 처음 beta 버전이 배포되고 현재 RC1까지 많은 기사와 블로그 글들에서 성능 향상과 Acid2 Test를 통과해 웹 표준을 준수한 브라우저라는 이야기를 많이 실어놓고 있습니다.
Acid2 Test는 웹 페이지를 웹 표준에 맞게 제작했는지 검증하기 위해 HTML, CSS 검증기를 통과하는 것과 마찬가지로 브라우저가 얼마만큼 웹 표준 규격에 맞춰서 제작되었는지를 알아보는 방법 중에 한 가지라고 할 수 있습니다.
물론 가장 좋은 방법은 W3C에서 필요한 최소한의 권장사항을 모두 준수한 브라우저라고 하고 그것을 증명할 문서와 브라우저가 출력하는 결과로 증명할 수 있다면 속 시원하겠지만 그렇게 잘 정리된 자료를 구하기란 힘듭니다.
이미 Acid2 Test는 작년, 제작년에 줄기차게 다른 브라우저들이 통과하면서 많이 다뤘던 내용이라 좀 식상하지만 IE8은 이제 처음 통과 한 것이니...
다시 정리 해보자면 Web Standards Project에서 제공하고 있는 Acid2 Test는 크게 대략 11가지 항목을 검사합니다.
- png요소 : 테스트 결과 중 눈 부분에 사용된 이미지가 png이며, 이 이미지가 제대로 출력 되는지 테스트 합니다.
- object요소 : 오브젝트 요소를 인식 하는지 테스트를 하며 오브젝트 안에 대체 컨텐츠(object포함)역시 인식하는 것을 테스트 합니다.
이 테스트가 통과되면 IE8에서는 중첩 object와 object 안에 대체 이미지 및 컨텐츠를 표시해 줄 수 있습니다. - absolute, relative, fixed position : 레이아웃에 자주 쓰이는 position속성이 가능한 정확한 위치를 잡을 수 있는지를 테스트 합니다.
이 테스트가 통과되면 더 이상 다른 브라우저와 position 위치 차이로 인해 css hack을 사용하지 않아도 됩니다. - box model : 기존 css box model 모델을 기준으로 한 테스트에서 width, height, max-width, min-width, max-height, min-height 항목을 추가한 테스트 입니다.
- css table : 테이블 태그를 이용한 레이아웃은 잘 못 된 표현방법 이기 때문에 css에서는 table처럼 레이아웃을 구성할 수 있도록 속성이 준비되어 있습니다.
따라서 기존 IE에서는 이 속성이 지원되지 않았지만 IE8에서는 이제 table layout 속성이 지원 되므로 의미는 더 명확하게 정할 수 있고 표현은 더 자유롭게 할 수 있게 되었습니다.
- 여백 : css를 이용한 여백 계산이 얼마나 정확한지 테스트 합니다.
- 컨텐츠 생성 : 마크업을 수정하지 않고도 장식이나 주석을 추가할 수 있는지에 대한 테스트 입니다.
이 항목은 확실하지는 않지만 아마도 before, after, content 속성 지원에 대한 테스트를 말하는 것 같습니다. - CSS 파싱 : 알려지지 않은 css에 대해 무시할 수 있는지 테스트를 한다고 합니다.
그래서 그런지 이전 IE용 css hack은 더 이상 IE8에서는 인식하지 않습니다. - 표현 순서 : 표현에 있어 겹쳐지거나 중복되는 컨텐츠에 대한 표현 순서를 올바르게 지정 할 수 있는지에 대한 테스트 입니다.
- Line Height : inline요소의 box model중 일부 속성들의 브라우저 독립적인 속성값에 대한 테스트 입니다.
이 테스트에서 일부라는 게 어떤 것 인지 정확하게 알 수 없지만 line-heigh와 vertical-align에 대한 테스트가 아닐까 생각됩니다. - 마우스 효과 : Element의 :hover class 속성이 적용 되는지 테스트 합니다.
결과 페이지에서 코 부분에 마우스를 대면 색이 변하게 되는 것 인데 아마 이 부분에 대한 테스트가 아닐까 생각됩니다.
IE8은 이 속성을 비롯해서 기타 다른 pseudo-class에 대한 지원범위도 넓어 졌습니다.
더 자세한 내용을 보려면 IE CSS 지원 차트를 확인하면 됩니다.
IE8이 Acid2 test는 통과 했다고는 하지만 Firefox나 safari, opera 보다 사용율이 높은 IE 하위 브라우저들에 대한 대응은 계속 해야 한다는 문제가 남아 있습니다.
어찌 보면 또 하나에 브라우저가 더 추가되었다는 느낌 밖에 들 수 없을 테고 하위 브라우저 이용 율이 어느 정도 유지되는 동안은 IE8의 개선된 기능에 맞는 속성을 무턱대고 사용하는 것은 컨텐츠 접근이나 사용에 문제가 될 수 있으니 IE conditional comment 와 같은 방법을 사용하거나 충분한 테스트 후 페이지를 제작하는 것이 바람 직하다 할 수 있습니다.
이와 더불어 IE8에서 달라지는 사항들을 좀 정리해 보면.. 아래와 같은 내용도 있습니다.
Haslayout 삭제
CSS2.1을 모두 지원하고 Acid2 Test를 통과 함으로서 IE 자체 레이아웃 방식인 Haslayout기능은 더 이상 사용 하지 않는다고 합니다.
이로 인해 IE8에서는 float으로 발생되는 버그나 박스 모델에서 width, height 값 인식 버그, margin 겹침 문제, position 위치가 다른 문제 등이 더 이상 발생 하지 않게 되었다고 합니다.
Charset에 따라 글 간격 달라지는 문제 해결
IE(5,6,7)에서는 charset의 종류에 따라 글 간격(행간)이 달라지는 문제가 발생합니다.
이 경우 가장 대표적인 문제는 텍스트 언더라인 문제와 상하 여백 문제인데 IE8에서는 Charset에 따라 텍스트 간격 차이는 없어졌습니다.
하지만 텍스트 언더라인과 텍스트가 붙는 문제는 여전히 발생을 하는데 이 부분은 폰트 고유의 문제이며 중대한 문제가 아니라고 판단되는지 개선하지는 않고 있습니다.
브라우저 모드, 문서 모드 설정
표준을 준수한 IE8은 하위 브라우저와의 여러가지 차이가 발생 할 가능성이 있습니다.
이로 인해 개발자들과 사용자들에게는 여러가지 혼란을 줄 수 있기 때문에 하위 브라우저 호환성을 유지할 수 있는 설정 방법을 제공하고 있습니다.
하지만 사용자 역시 브라우저에서 기본으로 제공되는 개발도구를 열어 브라우저 모드나 문서 모드를 마음대로 조작 할 수 있기 때문에 하위 브라우저와 IE8을 모두 대응하기 위한 방법을 찾는 것이 더 좋다고 말할 수 있습니다.
(물론 경우데 따라서는 사용자 조작으로 인한 변화의 책임은 사용자의 몫 이지 않을까 생각됩니다)
form 컨트롤러 자체 여백 문제 해결
모든 요소의 자체 여백은 해당 브라우저에 종속적이고 form 컨트롤러는 OS와 브라우저의 영향을 받는 부분입니다.
IE 하위 브라우저에서는 다른 브라우저와 달리 form컨트롤러들이 css초기화를 하였음에도 불구하고 보이지 않는 자체 여백을 계속 지니고 있었지만 IE8에서는 이 부분이 개선되어 더 이상 자체 여백은 가지지 않습니다.
Printing css 지원
기존 IE 브라우저는 프린트 페이지 여백 설정이 화면과 다른 결과로 출력 되어 미리보기나 프린트 출력을 하면 원하는 결과를 볼 수 없었습니다.
IE8에서는 이런 여백 문제가 개선되었다고 보여지고, CSS2.1을 지원하기 때문에 print style 속성 사용할 수 있게 되었습니다.
이 기능으로 인해 IE8브라우저에서는 프린트 페이지의 여백 설정이나 페이지를 나누어서 표현하는 다단기능과 같은 기능도 사용 할 수 있게 되었습니다.
IE8 확장 CSS 지원
IE8에서 자체적인 css 확장 속성을 제공하고 있습니다.
이 속성들은 현재 IE에서만 지원하는 css속성과 css3에서 지원될 속성 들을 IE8에서 사용할 수 있도록 하는 속성들이며, IE8만을 위한 전용 css로 사용 될 수도 있다고 보면 됩니다..
아직 완전히 지원되고 있지는 않지만 내용은 아래 링크 페이지에서 확인이 가능합니다.
- microsoft css vendor extensions
- IE CSS Extension?
링크 url 값에 따라 :visited 인식안됨 문제
이 문제는 IE7부터 발생하던 문제였지만 IE8에서도 개선되지는 않고 있습니다.
방문한 url에 따라 :visited 인식이 되어야 하는 것은 당연하다고 생각하지만 IE7과 8은 url의 값이 스크립트로 구성되어 있거나 #이 들어가 있을 경우 디자인보안 문제로 인해 고의로 막았다고 합니다.
링크의 :link와 :visited에 대한 구분 기준은 있지만 url의 어떤 값에 대한 정의는 특별히 없기 때문에 이 문제에 대한 정확한 정의를 내릴 수는 없어서 이런 문제가 생기는게 아닌가 싶고, 그다지 보편적으로 큰 이슈가 될 만한 문제가 아니라 생각되어서 그런지 이 부분도 역시 바뀔 것 같지는 않습니다.
하지만 방문 했다는 기준에 대한 :visited는 정의 내려야 하는 게 맞지 않나 생각됩니다.
여전히 하위 IE 브라우저 때문에 고생하고 있을 분들에게는 IE8의 출시가 어떤 영향을 줄지 궁금하지만 조금씩 더 나아지고 있는 IE와 점점 사용층이 IE6 에서 IE7 로 바뀌고 있으니 IE8도 대중화 되길 바라는건 제 바램만은 아닐 것 입니다.
웹 표준 뿐만 아니라 기능향상과 IE8의 새로운 기능과 내용에 대해 궁금한 부분이 더 있다면 이 세미나에서 더 많은 내용을 들을 수 있을 것 같습니다.
조회수12130