CSS 핵 남용에 따른 문제점
dev | 2008-09-11
웹표준은 하나의 코드로 많은 브라우저와 호환성을 유지하기 위해서 사용합니다. CSS 핵은 이와는 정 반대의 브라우저 전용 코드죠. 핵에 의존한다는 것은 웹표준을 포기하는 것입니다.
얼마전 하코사에 올라온 '핵의 남용에 따른 문제점은 어떤것이 있나요?!'라는 글에 좀 강경한 어조로 답변을 달았습니다. 제가 이렇게 얘기했던 이유는 핵을 남용했을 때에 벌어지는 비극적인 결과를 몇번 봐왔기 때문입니다.
개발자가 인터넷 익스프롤러7과 파이어 폭스를 기준으로 작업을 했습니다. 그런데 인터넷 익스플로러6에서 화면이 일그러지니까 이것을 전부 다 스타 핵으로 보완했습니다. 이렇게 작업을 하면 사파리나 오페라에서도 제대로 나오지 않습니다. 그러면 또 다시 사파리나 오페라용 핵을 써야 겠죠. 그러면 사이트는 완전히 유지운영이 불가능한 상황이 됩니다. 비용대비 효과에서 밀리니까 사파리나 오페라 브라우저 사용자들은 제외되는 상황도 발생할 수가 있습니다. 소수 브라우저를 사용하는 방문자의 피해라고도 말할 수 있겠죠.(웹표준을 지킨다고 열심히 했는데도!!)
CSS 핵은 브라우저간의 CSS 표현의 차이를 각각의 브라우저에 특화된 의도된 CSS 구문 오류로 해결하는 방법을 말합니다. 브라우저 호환성에 문제가 생겼을 경우 대상 브라우저에만 적용되는 CSS 룰을 선언할 수 있기 때문에 아주 유용하게 사용할 수 있습니다.
하지만 브라우저별로 코드를 만들어 줘야 하기 때문에 과거의 네스케이프용 코드와 인터넷 익스플로러용 코드를 따로 만들어주는 방법과 크게 다를 바가 없습니다. 추가적인 노력없이 하나의 코드로 여러 사용자 환경을 충족시키자는 웹표준과는 반대 방향의 해결책입니다. 웹표준을 위해서 CSS를 사용하는데 CSS를 사용하다보니 표준에 반하는 CSS 핵을 사용하는 것은 정말 아이러니하죠. CSS 핵은 표준에 어긋나는 방법입니다.
하지만 그렇다고 해서 CSS 핵을 무조건 쓰지 말아야 한다는 것은 아닙니다. 저도 필요하면 핵을 사용합니다. 표준이 제대로 구현이 되지 않은 현상황에서 필요악 정도로 이해하는 것도 좋습니다. 다만 너무 이에 의존한다거나 과용하지 말아야겠죠. 사용하는 횟수도 줄이고 사용하는 상황도 줄여야 합니다. 반드시 핵을 사용해야 하는 경우는 그다지 많지 않습니다. 보통은 핵을 피하고 다른 방법으로 구현하는 것이 가능합니다. 이렇게 문제를 최소화하면 다른 브라우저에서도 문제가 잘 발생하지 않습니다. 인터넷 익스프롤러8 베타를 테스트 해보고 자신이 제작했던 사이트들이 많이 깨지는 것을 보신 분들도 있을 텐데 이렇게 방어적으로 제작을 하면 새로운 브라우저가 나왔다고 해서 많이 깨지거나 하지 않습니다. 사실 이게 웹표준의 노하우죠.
처음에는 최대한 핵을 사용하지 않고 다양한 브라우저에서 테스트 해보는 것이 중요합니다. 그러다보면 자연스럽게 오류가 발생할 가능성이 있는 구현 방법을 피하게 되고 아주 간결한 코드로 브라우저 호환성을 높이는 것이 가능해 집니다. CSS를 처음 접하시는 분들은 다른 사람들이 만든 사이트를 많이 테스트해 보시고 코드 분석도 많이 해보실 것을 권해드립니다. 삽질해서 노하우를 터득할 수도 있지만 다른 사람의 코드를 보는 것이 훨씬 빠르게 스킬을 올리는 방법이거든요.
Comments
와~ 전 오늘 알았습니다. 다른 브라우저 css핵때문에 올바른 css 마저도 제대로 읽지 못해 이런 결과를 초래할수 있다는 걸요... 하코사에 핵의 문제점을 질문한 사람이 바로 접니다 ㅡㅡㅋ 제가 아직 초보라서 ㅠ 좋은글 잘 읽고 갑니다. 트랙백 감사합니당 ~(__~)
뭔 글인가 해서 왔더니 현석님이네요. ㅋㅋ
css핵을 접하게 되면 표준을 포기하는 것이다 라는 말씀에 한표던집니다. 저또한 css핵을 쓰지않는 것은 아니지만, 가끔 정말 어떠한 방법을 쓰더라도 해결이 되지 않는 상황이 있습니다. 한번 써 버릇하면 계속 쓰게 되는 것이 바로 css핵 같습니다. 최대한 css핵을 써야하는 상황이 오면 자신요소와 부모요소까지 스타일을 없애고 다시 재설계를 하는 노력을 해야한다고 생각합니다.
css핵을 사용하는곳은 3군대 밖에 없다고 결론지었습니다. 1. form 태그 계열 2. Float로 인한 부모Element의 높이를 줄때 (선택자로도 가능하지만;;) 3. IE 6이하 버전의 min-height나 min-width계산할때 로 압축이되더군요; 2번은 빈Element를 생성하는것보단..핵(zoom)이 좋을듯하더군요 가상선택자도 좋고..;; 좋은글 읽고 갑니다~
안녕하세여.. 제 파란계정이 문제가 있어서여,, 짐 사이트 접속이안되염... 글에 제 블로그 링크걸어주신거 깨지거든염.... 현석님 사이트에 링크깨짐을 원치않아서여.. 링크막아주셨으면 해욤~~ 한주잘보내세욥~
류팡님 빨리 돌아오시길 바랄께요~ :)
아직 공부한지 얼마안되는 초보입니다만... 공감가는 글에 댓글 달아봅니다. 좋은 글 잘 읽고 갑니다. 좋은 하루 되시길.. ^^
다른 사람의 코드를 보는게 실력이 빨리 는다는게 눈에 뛰네요.전. css 핵 이야 ie6,7기반으로 가끔 사용하는 정도인데.. 핵않써도 되는방법이 있으면 핵은 피하는게 좋겠죠... 오래된 글이다 이론 ;;
필자의 의견에 반대하는건 아니지만... hack은 적절하게 잘 사용해야한다고 생각합니다. UI개발은 퍼블리셔와 백엔드개발자의 합작으로 결국 완성되는것이고 상호 소통을 하는 가운데 UI개발자가 원하는 완벽한 표준은 나오지 않는것이 현실입니다. 원칙과 기본을 알고 적절하게 잘 사용하는것이 좋지 않을까 싶네요