CSS3로 사이트를 제작하면서 파이어버그 등의 지원 프로그램을 이용하면 포토샵 없이도 왠만한 레이아웃 및 디자인은 실시간으로 잡을 수 있다.

하지만 이를 통해서 만들어진 소스를 그대로 퍼블리싱하기에는 아래와 같은 문제점이 있다.

 

CSS3 속성의 성능(퍼포먼스)문제

CSS3에서 가장 많은 사랑을 받는 속성은 무엇일까?
개인적인 생각으로는

  • border-radius : 엘리먼트에 라운드를 줄 수 있음.
  • rgba : alpha값을 적용하며 색상과 함께 투명도를 지정할 수 있음.
  • box-shadow : 엘리먼트에 그림자를 줄 수 있음.
  • text-shadow : 택스트에 그림자를 줄 수 있음.

등을 들 수 있다.

또한 이 외에도 CSS3 에니메이션이나 transform 등의 속성도 요긴하게 써먹을 수 있다.

하지만 위에서 예시로든 모든 속성들은 때로는 심각한 퍼포먼스 저하를 불러올 수 있다.
예를 들면 임의의 링크를 클릭하여 스크롤이 발생하는 페이지가 있을 경우 위의 속성들이 많이 혹은 크게 적용된 엘리먼트가 있다면 스크롤 자체가 버벅이는 느낌(한 두번이면 버티지 사용자 입장에서 계속 이럼 짜증을 유발한다ㅋ)을 받을 수 있다.

또한 jQuery 등으로 에니메이션이 적용된 엘리먼트들도 위의 속성이 많이 포함된 경우에는 에니메이션이 버벅버벅이면서 차라리 없으니만 못한 결과를 초래할 수도 있고 말이다.

예전에 플래시를 잠깐하면서 alpha값의 랜더링이 CPU 퍼포먼스를 많이 요한다는 이야기를 듣고 실제로 그렇다는 것도 깨달은 적이 있었는데 어느세 플래시의 자리를 많은 부분 대체해버린 CSS3역시 같은 효과에서는 같거나 혹은 더한 정도의 CPU퍼포먼스를 요한다는 것이다(원페이지 사이트에서는 이와 같은 성능문제로 인한 한계가 더욱 심해짐).

그래서…
최근에는 CSS3로 사이트의 디자인을 잡아버린 후 퍼포먼스를 저해하는 속성은 이미지로 대체하거나 IE8 부터 지원하는 :before, :after등의 속성을 이용하여 처리하는 방식으로 제작 중이다.

웹제작에 새로운 세상을 열어준 CSS3이지만 아직 세상과 완전히 융화되기에는 역시 시간이 필요한 것이다.

현재 만들고 있는 원페이지 사이트 - 하지만 CSS3 성능의 한계로 인해 많은 부분 포기한 것이 있다.
현재 만들고 있는 원페이지 사이트 – 하지만 CSS3 성능의 한계로 인해 많은 부분 포기한 것이 있다.
Tags:

Leave a Reply

Your email address will not be published. Required fields are marked *