2011

03월

28

파이어폭스4와 익스플로러9를 통해 생각해보는 접근성과 웹표준.

최근들어 최신버전의 브라우저들이 쏟아지고 있습니다. 크롬10, 익스플로러 9 에 이어서 얼마전 파이어폭스 4가 업데이트 되었습니다. 예전에는 사이트를 볼 수 있으면 됐었던 브라우저들이 이제는 다양한 기능을 담아서 출시되고 있습니다.

블로그나 뉴스들을 보면 새로 나온 브라우저들의 비교대상이 거의 다 속도와 기능을 위주로 벤치마킹한 내용들 입니다. 주변에서 저에게 브라우저에 대해서 이야기를 하면 항상 “이번 어떤 브라우저 정말 빠르더라?” 입니다. 근데 사람들이 이야기 하는 속도가 어떤것인지를 모르겠습니다.
제가 주력으로 사용하는 브라우저는 맥에서는 사파리(집), 윈도우즈에서는 파이어폭스입니다.(회사) 저는 업무를 위해서 다양한 브라우저들을 열어봐야 합니다. 하지만 정말 속도차이가 느껴지는 브라우저를 별로 보지 못했습니다. 개인적인 편차가 있겠지만요.

오히려 제가 체감하는 속도는 브라우저를 처음 부팅할 때, 그리고 브라우저 내에서 다른 탭을 열 때 입니다. (빈 탭을 열 때 익스플로러는 왠지 애가 쓰입니다.)
분명 브라우저들 사이에는 엔진에 따라, 최적화에 따라 랜더링 속도가 틀리겠지요. 하지만 그게 일반 사용자들이 평균적인 사이트들을 돌아니면서 얼마나 크게 체감되는지가 의문입니다. 밴치마킹에 나오는 속도는 “백분의 일 초” 단위 아닌가요? 그걸 느끼는 사람들 자체가 전 더 놀랍고 신기합니다. ㅡ.ㅡ;;

헉! 말이 너무 많이 샜네요. 슬금슬금 제자리로 돌아가 보도록 하겠습니다. 쿨~~~~~럭;;

브라우저가 무한경쟁에 들어가면서 참 많은 기능과 속도향상이 이루어지고 있습니다. 그런데 정말 부라우저에서 가장 중요한 랜더링에 대해서는 대부분 신경쓰지 않는것 같습니다. 브라우저가 아무리 빨라도 제대로 html을 해석하지 못하면 무슨 소용인가요??오늘은 그런 이야기를 해보려고 합니다.

1. 해외에서는 익스플로러를 배제하고 작업하는 경우를 종종 볼 수 있습니다.

구글이 익스플로러6에 대한 지원을 중단하고 (유튜브) 심지어 마이크로소프트도 익스플로러 6을 사용하지 않도록 권장하고 있습니다. (스스로 Active-X도 버렸죠.) 익스플로러 6의 여러 문제점 때문일수도 있지만 점점 정상적으로 더 좋은 표현이 가능한 브라우저들 위주의 작업이 이루어지는 것을 볼 수 있습니다.

해외의 사이트들을 보면 익스플로러는 표현을 못하더라도 더 좋은 표현이 가능한 브라우저들 위주의 작업이 이루어지는 것을 볼 수 있습니다. 큰 대형사이트들도 마찬가지로 움직이고 있습니다. 한가지 예를 들어보겠습니다.

크롬에서 캡쳐한 evernote 사이트의 일부분 입니다. 좌측의 “자세히 알아보기” 버튼과 우측의 “지금보기” 버튼은 이미지가 아닙니다. css3로 처리된 박스와 텍스트 입니다. 텍스트에 보이는 그림자도 물론 css3로 처리되어있습니다.

위 이미지는 이번에 출시된 익스플로러9의 evernote 캡쳐화면입니다. 한쪽은 사각박스로, 한쪽은 라운드 처리된 상태로 출력됩니다. 텍스트의 그림자들은 모두 사라졌습니다. 그나마 익스플로러9 라서 “지금보기” 버튼은 정상적으로 표현한 것 입니다.

이번에는 html5로 만들어진 사이트를 비교해 보도록 하겠습니다.

파이어폭스에서 본 html5 페이지 입니다. 심지어 이번에 나온 파이어폭스4 가 아닌 파이어폭스 3.6 입니다. 물론 최신버전이 아닌 다른 브라우저들도 정상적으로 사이트를 보여줍니다.

이번에 출시된 익스플로러 9 입니다. html5는 고사하고 css3도 제대로 처리하지 못하는것으로 보입니다. 오히려 익스플로러8이 하단의 메뉴는 제대로 출력하더군요.

심각합니다. html5는 차치하더라도 css3마저 제대로 랜더링하지 못하는 브라우저가 익스플로러 9 입니다. 그것도 출시된 지 13일 밖에 안된 최신 브라우저 입니다.

2. 한국은 무조건 익스플로러에서 정상적으로 나와야 합니다.

천 번 양보.. 아니, 천만 다섯 번 양보해서 hml5는 빼고 css3도 제대로 출력 못하는 익스플로러9에서 evernote 사이트 처럼 버튼이 보인다면 우리나라 같으면 어떻게 할까요? 이미지로 처리해서 익스플로러에서 정상적으로 보이게 하는 업체가 대부분일 겁니다. 다시 한 번 말씀드리지만 해외의 대형 사이트들도 익스플로러에서 어느정도 정상적으로 출력이 되지 않더라도 좀 더 효율적인 브라우저들을 지원하는 추세로 흐르고 있습니다.

아무리 좋은 브라우저가 나오고 다른 브라우저들이 html5를 지원하면 무슨소용인가요? 익스플로러에서 돌아가지 않으면 cpu점유를 우습게 여기고 원본소스에 접근조차 할 수 없는 폐쇄와 효용성의 극악을 달리는 플래시로 도배를 해버릴 생각만 가득한데 말입니다.

해외에서는 점점 효율적이고 실용성이 뛰어난 방향으로 사이트가 흘러가고 html5를 통해 다양한 실험적 시도와 적용이 이루어지고 있는 이때에 언제까지 익스플로러에서 정상으로 보여야 한다는 강박관념과 오타쿠 같은 집착을 하려는지 모르겠습니다. 익스플로러9가 저 꼬라지면 (html5를 처리를 저지경까지 못하다니 허참.. ) 앞으로도 세계는 변하는데 우리는 제자리 걸음을 걷고 있을건가요?

3. 비정상적인 점유율을 말을 하지만 그건 우리 모두의 핑계입니다.

앞에서 말했지만 해외에서는 익스플로러가 표현하지 못하더라도?다른 브라우저들이 지원하는 방향으로 사이트가 흘러가고 있습니다. ( 심지어 어느정도 사이트가 깨지는 현상이 있더라도 말입니다. )

익스플로러 브라우저가 ?90% 이상의 점유율을 보이는 나라가 어떻게 만들어졌나요? 정부의 보안관련 정책이요? 인터넷 뱅킹 외에도 사용자의 시스템을 제어하고 개발이 더 편한것에만 중점을 두는 업체들의 책임이 더 크지 않나요? 저는 그렇게 생각합니다. 국가의 쓰레기 정책은 어쩔 수 없다 치더라도 옳다구나 라면서 사용자의 정보와 제어를 위해 기업들이 벌인, 그리고 그것에 대해 변화하려고 하지 않는 기업들의 책임이 더 큽니다. PC에 설치된 프로그램들이 온통 Active X (이하 액티브엑스) 천지입니다. 거의 악성프로그램 수준이라도 지울 수 없는 상황입니다.

액티브엑스는 둘째 치더라도 온 사이트가 플래시로 도배가 된, 특히 사이트 네비게이션까지 플래시로 도배를 해서 그 블링블링함에만 온 전력을 집중하는 에이전시들은요? 클라이언트가 그것을 원한다는 이유만 말하면서 정작 에이전시들이 앞으로 흘러가야 할 방향, 그리고 필요없는 공수를 줄이고 더 좋은 퀄리티의 서비스에 집중할 수 있는 제안을 하나요??제가 지금까지 본 바로는 그렇지 않습니다. 아직도 플래시를 제안하고 이전의 런칭방식을 버리려고 하지 않습니다. 해달라는데로 해주면, 비주얼만 신경쓰면 실무자들의 윗선에서 승인이 떨어지는데 말입니다.

도대체 옥션같은 쇼핑몰에서 제품의 제목이나 가격을 왜 플래시로 출력하나요? 그게 그렇게 중요한 부분인가요? 점유율과 상관 없이 기존의 관행에 젖어서 사용자가 원하는 것 보다 하던방식만을 고수하려는 것은 아닌가요?

새로 런칭한 사이트를 모아놓은 갤러리 사이트들은 비주얼 위주의 사이트들만 올립니다. 연말, 연초에 있는 사이트 어워드들은 대형사이트와 대기업 사이트 위주, 그리고 비주얼 위주의 사이트에만 상을 줍니다.

이놈의 한국은 브라우저가 무슨 도화지인 줄 아나봅니다. 그냥 포토샵을 붙여놓지 그러냐구요.

한국처럼 기형적이지는 않지만 해외에서의 익스플로러의 점유율도 57%를 넘습니다.(80% 후반에서 많이 내려왔네요.) ?2위와의 점유율 차이는 거의 3배에 달합니다. 아이폰 등 모바일 기기와 그외 디바이스들을 제외하면 PC에서의 실제 점유율은 더욱 올라갈 것 입니다.

해외의 대형 사이트들이 우리나라처럼 플래시에 의존적인가요? 우리나라처럼 플래시로 PC를 혹사 시키고 정보의 접근을 막는 곳이 많지 않습니다. 우리나라보다 점유율 차이가 적다고 하더라도 결코 적은 수치가 아닙니다. 점점 익스플로러 보다 더 나은 사용성을 다른 브라우저에서 제공할 수 있다면 그렇게 움직이고 있습니다.
점유율로 인해 익스플로러에 맞춰야 하는 상황이라는건 그래서 말이 되지 않습니다.

4. 왜 익스플로러 보다 접근성에 중점을 두어야 하나요?

잘못된것은 용서하는것이지 용납하는것이 아니기 때문입니다.
잘못된것을 용납해서 일어나게 된 일은 첫째로 액티브엑스를 통한 보안 인증방식으로 인해 선택의 자유권을 빼앗긴 것 입니다.용납을 하다보니 법원에서도 한국에서는 익스플로러를 많이 사용하므로 위법하지 않다고 판결하여 OS의 선택권과 브라우저의 선택권을 빼앗겼잖습니까??많은 사람들이 방화와 약탈을 하면 그냥 놔두겠다는 말과 다를 것이 없습니다.

잘못된것이 용납이 되니 지속적으로 영업 위주의 업체들이 득세를 하게 되는것 입니다. 한국에서 태어나 한국에서 살면서 반드시 윈도우즈 OS에 익스플로러를 써야 합니다. 법원이 인터넷뱅킹만 위법이라고 판결 했지만 이 모든것을 용납하겠다는 말과 다름이 없습니다.

이렇게 가다가는 모든 국민에게 연령별 의류업체를 지정하고 모두 동일한 제복을 입혀야 겠습니다. 방통위가 DDoS 공격을 빌미로 좀비PC법을 통해 무조건 PC에 백신을 설치하고 통제?하는것과 다른것이 무엇입니까? 여기가 민주국가인가요?

용서라는것은 말 그대로 지난 실수를 용서하는 것입니다. 앞으로는 잘못을 고치고 정상적으로 활동할 수 있게 하는 것입니다. 용서는 그것을 전제로 하는 것이지 용납하는 것이 아니니까요.

우리가 앞으로 신경쓰지 않고 온라인을 즐기기 위해 해야 하는것이 용서입니다. 익스플로러를 용서하되 이후 버전들의 변함없는 실수를 덮어두고 거기에 맞춰서 제작하고 사용해서는 안됩니다.

한국은 익스플로러를 많이 사용하니까 어쩔 수 없다는 말을 하는 것 자체가 법원의 용납과 다를 것 없습니다.
익스플로러 6에 맞추지 않는다고 접근성이 높아지고, 정보에 접근하기가 쉬워지고, 선택권이 넓어지는 것 이 아닙니다. 제대로 된 표준을 준수하고 거기에 맞는 서비스를 제공하는 것이 맞는 방향입니다.?지금처럼 앞으로도 익스플로러만 1절, 2절, 3절에 돌림노래로 불러대면 조만간 한국은 더욱 퇴보하게 될 것입니다.

해외에서 어떤식으로 사이트가 변하고 브라우저가 지원하는지 동영상을 통해 보여드리겠습니다.
맥에서 사파리를 통하여 애플사이트에 접속하여 캡쳐했습니다. 근래 버전의 대부분의 브라우저들에서 동일하게 동작이 됩니다. 단, 익스플로러의 모든버전(9포함)을 제외하고 말입니다.

Safari browser with html5 from paperbook on Vimeo.

플래시가 아닙니다. 보여주고자 하는 핵심비주얼을 애니메이트 하고 메뉴와 컨텐츠를 애니메이트 합니다. (영상중간에 메뉴로 이동하여 나오는 움직임은 다른브라우저에서는 다르게 동작합니다.)?우리나라 같으면 플래시로 메인페이지들 만들자고 제안을 하겠죠. 소위 메이저 에이전시들 대부분이 그렇게 할 겁니다. 단, 더 화려하고 멋지게 빛도 확확 날아다니고 3D 오브젝트가 화면을 누비면서요. 그것도 하루 이틀 봐야 재밌지. 느려터진 PC는 인터넷 서핑할 권리도 없나요?

—————————————————————————

불과 지난주에 회사에서 대표와 폰트에 대해 이야기 하다가 나온 이야기가 “한국은 익스플로러를 많이 사용하니까..” 였네요;

해외에서는 웹퍼블리싱을 위해 표준에 맞춰 코딩을 하고 익스플로러에서 어느정도 제대로 출력이 되도록 코딩을 하는 추세라고 합니다.?아직까지 한국은 ?익스플로러에 맞추고 다른 브라우저는 안될경우에는 그냥 넘기는 퍼블리싱이 그대로 이루어지고 있습니다.

중요한것은 표준이 아닙니다. 아무리 w3c의 표준테스트에 통과하더라도 제대로 접근할 수 없다면 의미가 없습니다.
표준보다 중요한것이 바로 접근성입니다. w3c의 표준이 권고사항인 이유가 바로 그것 아닌가요? 표준이라고 하니 또 거기에 목매여 ‘하늘을 우러러 한 코드 부끄러움 없이’ 코딩했다고 자랑하는 유행이 번질까 무섭습니다. ( 그렇게 될리가 없지만요; ) 접근성을 위한 크로스 브라우징과 크로스 플랫폼이 중요합니다. 그것을 위해 존재하는것들에 맞춰 채점하는 것은 “엑티브액스로 로그인 해야 하는 접근성 테스트에 통과된 관공서”로 충분합니다.

요즘 새로 생기는 모바일 서비스나 신생기업들의 사이트가 어깨가 무겁습니다. 이런 회사의 서비스들과 사이트들이 접근성에 중점을 두고 생기는것을 보면서 많은 기대를 하고 있습니다. 척박한 한국의 인터넷 환경에서 이 분들이 고군분투 하고 조금씩 토양을 바꾸어 가기를 기대합니다.