윈도우즈 비스타(Vista)

주소 : http://www.microsoft.com/windowsvista/
검사 : HTML 유효성
검사 : CSS 유효성
검사 : WAI 접근성
평가 : 3.57 (75) Loading ...

내년으로 출시가 연기된, MS 윈도우의 다음 버전인 비스타(Vista) 홈페이지입니다. CSS 디자인의 도(道)를 깨우친 듯 한 멋진 디자인으로 구성됐습니다.

사이트의 CSS를 확인해보니, 자신들이 제작한 구버전의 브라우저(IE5 등)을 위해 CSS hack을 사용한 점이 웃음을 자아내군요.

너무 멋진 디자인의 사이트이기에, 굳이 문제점을 찾아보니, 좌측 CSS 기반 네비게이션에서 2가지 문제점을 발견할 수 있었습니다.

png포맷의 배경이미지를 효과적으로 사용하지 못한 점 : 브라우저 제작사의 홈페이지가 png 알파 채널을 효율적으로 사용할 수 없는 현실이 슬프군요.
a:hover 를 통한 이미지 교체 방법으로 배경 이미지 교체 방법을 사용한 점 : 이는 자바스크립트를 이용해서 이미지를 미리 읽어야 하는 것은 물론이고, 마우스 hover때마다 http 요청을 수행해야 하므로 웹사이트 최적화 방법론에 의하면 배제해야할 방법입니다.

어쨓거나 CSS 디자인의 도(道), 진리(眞理)를 깨우친 듯 한 디자인임에는 틀림없습니다.

등록일 :2006년 04월 02일, 12시 32분 ｜ 분류 :해외 사이트 > 회사 > Gallery ｜ 읽음 :1577 ｜ 의견 :(8)

이 글의 트랙백 주소 : http://csslook.com/2006/04/windows-vista/trackback/

이전 글 : 비씨파크 ｜ 다음 글 : 조은웹 ｜ 갤러리 목록 보기

8개의 답글이 있습니다.

1. 신현석 ｜ 2006년 04월 02일, 1:38 pm

뭘 어떻게 했는지 모르겠지만 사파리에서는 사이트이용이 거의 불가능 하군요. 메뉴와 컨텐츠 영역이 마구 깨집니다.

그리고 a:hover를 했을 때마다 이미지를 받아오는 것은 IE의 비정상적인 처리 때문 입니다. 다른 브라우져들은 처음 한번만 요청한 후 캐시된 이미지를 사용합니다.

디자인은 상당히 Windows틱하고 이쁜데 브라우져 호환은 좀 미약하군요.
2. Hooney ｜ 2006년 04월 02일, 1:50 pm

a:hover의 IE bug에 대한 hack이 존재하고 있으니, css hack을 사용한 것처럼 대처하면 효율적일 수 있다는 의미였구요.

사파리에서 깨진다니.. 그 점은 미처 확인하지 못했네요. 제 데스크탑에는 ff, opera, ie 밖에 깔려있지 않아서요. ㅜ.ㅜ

비스타 사이트를 확인해보니 asp + xml을 이용해서 css를 불러오던데, 이부분에서 맥에 대한 지원이 부족한 듯 싶습니다.
3. 아크몬드 ｜ 2006년 04월 02일, 2:10 pm

http://microsoft.com/korea/windowsvista/
한국MS의 윈도우 비스타 공식 웹사이트도 업데이트 되었습니다.
4. 아크몬드 ｜ 2006년 04월 02일, 2:11 pm

아, http://www.microsoft.com/korea/windowsvista/ 이렇게 www를 붙여야 되는군요;
5. nmind ｜ 2006년 04월 02일, 5:29 pm

저도 예전에 이 사이트 CSS의 .hack 보고 조금 웃었습니다
그러게 평소에 잘 하지라는 생각이 드는군요. 아마 외주를 주었을텐데 작업하던 디자이너 꽤 궁시렁됐을것 같은 느낌이…하하하
6. 082net ｜ 2006년 04월 15일, 3:59 am

재밌네요.. 자신들이 웹표준이 되어버리고자(실질적인) 했을텐데.. 무엇보다 firefox의 힘이 크다는 생각입니다..

개인적으로는 첫 화면의 레이아웃을 하위 페이지들에서도 같이 따랐으면 더 좋았을것같다는 아쉬움이 있네요.. 음…
7. Hileejoy ｜ 2006년 06월 30일, 11:05 pm

정말 외주를 주어서 만들어진거라면 일을 받은 개발자의 노림수일수도 있습니다. 하하.
8. 어부바 ｜ 2006년 12월 28일, 6:32 pm

사파리에서는 확인을 못했지만, 정말 감격적인 디자인입니다. 요즘 웹표준에만 신경을 쓰다보니 디자인에서 벽이 너무 보이는데, 개인적으로 디자인과 기술의 궁합이 좋은 사이트라고 생각합니다. 공부가 될것 같은 사이트입니다…