HTML과 스크립트의 구조분리에 대해서..
웹표준에 따르는 문서 구조적 설계에 HTML, JS, CSS는 분리되어야 하는것이 마땅하겠지만, 에이젼시에서 일하면서 이에 반하는 작업을 하게되는 일이 다반사입니다.
그 중에 하나가 바로 HTML과 스크립트의 분리입니다.
흔히 사용하는 탭 메뉴나 펴졌다 접혔다 하는 메뉴 등 주로 display를 제어해서 표현해주는 스크립트에서 생각해볼 문제인데 이것을 제어하는 함수를 onload 혹은 addEventListener를 사용하여 문서가 로드된 후에 실행되게 한다면 문서가 완전히 로딩되기 전까니는 모든 컨텐츠가 보이는 상태에서 레이아웃이 틀어져 있는 상태가 됩니다. 순간적으로 자리를 잡는 장면도 다 티가 나구요… 일반적으로 이 눈에 활짝 띄는 장면에 그냥 넘어가는 클라이언트는 없더군요. 사실 CSS가 읽어지기 전 구조대로 쭉 나열되어 있다가 CSS에 의해 자리를 찾아가는 모습에 대해서도 전에는 안그랬는데 (테이블 레이아웃) 눈에 거슬린다고 하는 클라이언트도 많고요…
어쨌든, 이런 문제로 인해서 저도 문서 중간에(스크립트를 사용할 컨텐츠 마크업 바로 아래부분) 함수를 사용하는 일이 많습니다. 아직은 이런문제에 대해서 고객을 설득할만한 위치도 아니며, 로딩타임 동안의 부자연스러운 화면의 모습이 저 역시도 보기에 좋지는 않습니다 ^^;
JQuery 프레임워크에 $().ready 라는 것이 있더군요. 이것을 사용하면 이 문제를 해결할 수 있을지 모르겠습니다. 아니면 진짜 빠른 서버를 구축해서 순간적으로 로딩이 끝나게??ㅋㅋ
결론은 에이젼시에선 이렇게 나름 고민해야 될 상황이 많은 것 같습니다 . 웹표준을 준수한다는 것이 힘에 부치는게 현실이죠.
- Posted in WWW at 12월 14th, 2007
- Tags : javascript, 웹표준
- Trackback : http://www.hoiheart.com/wp/archives/39/trackback
'HTML과 스크립트의 구조분리에 대해서..' 에 대한 5개의 댓글들이 있습니다
전 body 시작 전에 스크립트를 몰아놓습니다. YSlow의 Put JS at the bottom이라는 항목에서도 권장하는 방식이고 무리는 없는 것 같아요.
어쨌든 맨 아래 넣었으니 마크업과 분리했다고 생각하고 있습니다. -_-;;
시작 전이 아니고 끝나기 전입니다. 오타. ㅠ.ㅠ
‘head 사이 삽입’과 ‘문서중간중간 삽입’의 절충안이로군요~
찜찜한 기분도 어느정도 날려버릴수 있고요 ^^
그런데 이 역시 컨텐츠 로딩타임이 긴 페이지라면 body를 모두 로딩할때까지 대기상태가 되겠네요
어느정도 감수가 될 정도라면 앞으로 이 방식을 사용해야겠어요
좋은 의견 감사합니다 ^^
저는 head 안에 js 파일을 넣고 콘텐츠 마크업 바로 아래부분에서 함수 호출만 한다면 구조(html)와 동작(js)를 분리한거라고 생각합니다.
콘텐츠 밑에 둠으로써 이부분이 자바스크립트를 사용하였고, noscript 로 자바스크립트 기능이 동작하지 않을 경우 대체콘텐츠도 넣을 수 있으니까요
제가 생각하는 이상적인 분리는 자바스크립트 코드는 js파일에서 모두 가지고 있고 onload와 같은 이벤트를 통해 html에 접근하여 동작을 제어하는 형식인데요. 관리적인 측면에서도 이러한 방식이 더 좋을 것이라 생각합니다. 그러나 위에도 말씀드린 여러가지 문제로 인해 저도 마이신님처럼 사용하고 있습니다 ^^
그리고 JS의 역할이 컨텐츠를 찍어내는 부분은 아니기 때문에 noscript를 쓸 일은 그다지 많지 않은 것 같습니다.(물론, 가끔은 noscript가 필요할 때도 있죠 ^^)