1 Results for 'validation'

  1. 2007.03.22 마크업 권고안에 대한 유효성 확인

좀 긴 글을 포스팅할 때에 처음에는 워드패드를 사용했습니다. - 초기에 위지윅 문제로 정말 길고길고 긴 글을 쓰다가 두어번 날린 뒤론 긴 글은 절대로 티스토리에서 직접 작성하지 않게 되었습니다. 지금 생각해도 안습.
하지만 포스팅 하려면 워드패드 내용을 다시 위지윅에 복사해야 하고 워드패드에서 적용해놨던 폰트 속성을 죄다 다시 걸어줘야 하는데다가 링크는 또 링크대로 따로 걸어줘야 하지요.

그래서 HTML편집기로 작성하는게 가장 좋겠지만 전 웹프로그래머가 아니라 따로 HTML 편집기를 설치하는 것도 꺼려지더군요.

혹시나해서 VS2005의 WEB site 프로젝트에 HTML파일을 추가시켜서 편집해봤는데요, 매우 강력하게 HTML 및 XHTML 표준 권고안을 지킬 수 있게 되어있더군요.

사용자 삽입 이미지
보시다시피 HTML 페이지 작성할 때 흔히 사용했던 많은 코드들에 딴지를 걸고 있어 W3C의 권고안(여기서는 XHTML 1.0)을 철저하게 준수할 수 있습니다.

모질라 사이트의 개발자 센터 페이지의 HTML코드를 붙여봤는데요, 다른 사이트에 비해 비교적 권고안을 잘 지키는 모질라지만 저런 습관적인 부분까지는 신경쓰지 못하는게 사실인가봅니다.
위 예제를 보면 XHTML 1.0 Transitional에 의거해 input 태그는 반드시 />로 종료되어야 한다고 '에러'레벨을 부과합니다.
그리고 위에 보면 form 태그내에 name 어트리뷰트는 새로운 구성으로 변경할 것을 권장한다고 '경고'를 때리는데요, 그 새로운 구성은 id 어트리뷰트죠. 이건 Description에 직접적으로 나오진 않았지만 해당 설명을 구글링해보면 쉽게 얻을 수 있습니다.

또, W3C에서도 VS IDE와 비슷하게 각 문서 타입과 언어별로 유효성 검사(Validation)을 수행할 수 있네요. http://validator.w3.org/
사용자 삽입 이미지
[좀 더 시각적으로 임팩트있는 W3C의 Validation.
 "이 페이지는 유효하지 않은 XHTML 1.0 Transitional입니다!"
뭔가 코드를 수정하지 않으면 안될 것 같은 권위가 느껴지지 않으십니까!]

뭐, 웹개발자도 아닌 사람이 저런걸 알아봐야 뭐하냐...라고 생각할 수도 있지만 오히려 애플리케이션 개발자이기 때문에 HTML의 루즈한 문법적인 부분에 약간은 의문이 들기도 하고 더 신경쓰입니다.

여기저기 기웃거려본 카더라 통신에 의하면 초기에 IE가 HTML 태그가 제대로 닫히지 않아도 적당히 보여주도록 설계가 되었고 그래서 다른 브라우저들 보다 대충대충 만들어도 문서가 깨지지 않고 잘보였었다...라고 하는군요. 게다가 그런 IE(다른 브라우저들도 그런지는 모르겠지만)에 맞춰 개발해오기도 했고 어디서 권고안이니 이딴 소릴 못들어본 일선의 개발자/디자이너, 심지어는 웹에디터의 코드 조차 이런 문법적인 면에 소홀할 수밖에 없었던게 아닐까 생각해봅니다.

그런 점에서 티스토리의 위지윅 편집기에는 정말정말정말로 불만이 많지만 기회가 되면 정리해서 따로 포스팅할 생각이구요, 몇몇 사이트의 초기화면을 Validation 해봤습니다.

사용자 삽입 이미지
권고안 안지키기로 유명한(^^) 구글입니다. 심지어 <!DOCTYPE...> 조차 없습니다!
구글의 레이아웃이 워낙에 단순해서 권고고 표준이고 뭐고 필요도 없이 각 브라우저에서 잘 보이겠지만 일단 문법적인 면에선 저렇네요.

사용자 삽입 이미지
의외로 깔끔한 보이는 MS의 Validation 결과인데요, 몇몇 IE 전용(혹은 비표준)을 제외하고는 XML에 관한 warning들입니다. 그런데 MS의 사이트는 가장 웹표준안을 잘 지키는 사이트중 하나란 얘길 들었는데 말이죠. 참 알다가도 모를일...

사용자 삽입 이미지
뭐 당연하겠지만 네이버는 참담한 수준입니다. 그도 그럴 수밖에 없는게 각종 배너며 기사며 네이버 외부에서 작성된 것들이 그대로 올라오니 표준은 커녕 ""로 둘러싸지 않은 어트리뷰트는 기본이요, 명백히 실수-부주의-로 태그를 제대로 닫지 않은 것도 많습니다.
스샷은 안찍었지만 야후도 yahoo.com은 구글과 비슷한 양상을 보이는데 kr.yahoo.com은 포털 성격의 사이트로 네이버랑 비슷한 결과가 나오더군요.

사용자 삽입 이미지
시험한 것 중 유일하게 XHTML 1.0 Transitional을 사용한 티스토리입니다.
뭐어 onFocus 같은 이벤트 핸들러 지정 익스텐션 등에서 몇개 걸리고 나머지는 다른 사이트들처럼 습관적인 내지는 권고안에는 안맞지만 브라우저에는 잘 보이는 종류의 것들입니다.
VS2005의 Validation을 보면,
사용자 삽입 이미지
이렇습니다. 제 생각엔 비교적 괜찮은 편이라고 보는데요, 티스토리의 문제는 바로 포스트 에디터입니다.
기껏 VS2005에서 힘들게 모든 권고안을 통과시킨 HTML 코드를 HTML 편집창에 붙여넣고 위지윅 모드로갔다가 다시 HTML 모드로 와보면 모든 태그를 제 입맛에 맞게 수정을 해놓는데 정말 엄청난 양의 에러를 뿜어내는군요.

이 분야에 깊은 이해가 있는건 아니지만, 웹표준-실은 권고안에 불과하지만-을 준수한다면 최소한 저런 Validation 정도는 통과해야 하는게 아닐까요?

물론, 일부 태그, 어트리뷰트나 스크립트에서 브라우저 별로 지원에 차이가 있고 이런 것 때문에 권고안과 달라질 수 밖에 없는 부분이 있는건 알지만 적어도 Doctype을 밝힌 HTML문서라면 해당 Doctype의 문법적인 수준의 권고는 철저하게 지켜줘야 한다고 봅니다.
예를 들어 <br>이 아닌 <br />, <img />에는 반드시 alt 어트리뷰트 달아주기와 같은 것들 말이지요.

어쨌든, validation을 체크하고 맞출 수 있는 부분은 맞추자! 라는 게 결론입니다. 끝!

신고
Posted by gongdo


티스토리 툴바