최근에 웹서비스 시 웹사이트의 품질을 어떻게 올리느냐는 질문을 부쩍 많이 받습니다.
기본적으로 확보하셔야 할 소프트웨어에서의 품질은 이렇게 고민하시면 됩니다.
1) 요구사항 품질
2) 기획 품질
3) 설계 품질
4) 코드 품질
5) 사용자측면(UI/UX) 품질
6) (그리고 이 모든 것이 올바로 진행되는 지에 대한) 프로세스 품질
이 내용은 언젠가 자세히 포스팅할 예정입니다. 요새 제가 하고 다니는 강의가 이 내용이거든요. 이 외에도 실제 품질 향상을 위해서는 더 많은 사항들이 고려되어야 하지만, 일단 컨셉은 저렇게 잡으시면 될거라 믿습니다. 그래서 강의도 하고 다니는 거구요.
에... 이 중 HTML5의 코드 품질을 확보하는 부분은 어렵지 않습니다. 보통 코드 품질을 확보하기 위해서는 코드 한 줄 한 줄이 스택되는 부분까지 보는 방법과, 코드의 구조에 대한 규약을 정하는 방법, 시큐어 코딩 등 필요한 부분에 대한 표준과 비표준을 확보하는 방안들 등을 고려할 수 있겠습니다.
하지만 HTML은 기본적으로 Scripting 언어이고, 그약이 정해진 Markup 언어이기 때문에 정해진 규칙에서 벗어난 부분은 금방 추출해 낼 수 있습니다. 그리고 이 기능을 제공하는 사이트가 있습니다.
1. W3C에서 제공하는 유효성 검사 - http://validator.w3.org
해당 웹사이트로 이동하여 자신의 사이트 주소를 입력하면 아래와 같이 에러(Error)와 경고(Warning)이 나타납니다.
수정이 필요한 부분들은 아래와 같이 이렇게 표시됩니다. 어디에 어떤 에러가 있다고 보여주고, 필요한 경우 해당 에러에 대한 설명을 보여줍니다. 이런 정보들을 이용하여 자신이 생성한 웹페이지 코드를 점검할 수 있습니다.
2. HTML5 Validator - http://html5.validator.nu
같은 방식으로 해당 사이트의 주소 입력 창에 주소를 입력하면, 아래와 같이 에러가 출력됩니다.
재미있는 것은 W3C에서 제공하는 유효성 검사와 다른 결과가 나옵니다. 전문가들이 알아서 내부 알고리즘을 만들고 규칙들을 입력해 두었을테니 어떤 것이 더 좋다 나쁘다고 왈가왈부하는 것은 좋지 않은 것 같습니다. 두 개 모두 사용하세요.
잘 정리된 코드가 있는 페이지의 경우에는 이렇게 초록색으로 된 성공 문구가 나타납니다. HTML5 표준 코드를 적용한 페이지인데 굉징히 많은 표준 코드를 지킨 것 같은 착각이 들게하네요. 하하.
이런 유효성 검사기를 내부 개발 프로세스에 적용하실 때는 한 가지만 추가하시면 됩니다.
"Test팀에 테스트를 넘기기 전에 2개의 유효성 검사를 통해 HTML 코드에 대한 유효성을 100% 확신한 뒤 넘긴다."
HTML5 유효성 검사를 이용해서 자신의 스크립팅 버릇도 고칠 수 있고, 코드의 안정성도 확보가 되니 일석이조입니다.
마지막으로 개인적인 바램이 있다면, 한국의 유명한 포탈 업체 중 하나에서 국산 HTML Validator를 개발해 주시면 얼마나 좋을까 하는 생각을 합니다. HTML5 Validator라는 것이 영문으로 나오다 보니 영어 울렁증이 있으신 분들이 사용하지 않으실 거거든요. 한글이 제공되는 Validator가 나온다면, 훨씬 많은 분들이 HTML5를 이해하고 웹퍼블리싱 시 Clean Code를 적용하는 수준이 전체적으로 올라가지 않을까 생각합니다.
