객체지향CSS가 무엇인고…?

갑자기 CSS에서 객체지향 이라는 말을 붙이니 뭔가 어색하다.
웹 표준이 대두되고 CSS의 활용 범위가 전에 없던 개발, 디자인 까지 도움을 줄 정도가 되면서 이제는 객체지향적인 기법(?) 내지는 객체지향 이라는 말까지 붙일 수 있게 된 것이라 생각되지만, 아직까지 객체지향CSS가 뭔지 정확히는 잘 모르겠다.
프로그래밍에서 말하는 클래스, 메소드, 상속, 오버로딩, 오버라이딩, 다형성, 추상화 등을 CSS에서도 찾는 것일까? 확실히 알 수 있는 것은 프로그래밍에서 말하는 그 정도의 개념은 아닐 것이라는 거다.
어쩌면 이미 우리가 CSS를 활용하는 방법이 객체지향CSS였을 수도 있고 그러한 방식이 올바른 CSS 사용법으로 적합하다고 알고 있는지도 모르겠지만 stubbornella의 OOCSS(객체지향CSS) 에서 강조하는 몇 가지 사항은 이렇다.

OOCSS를 위해 권장하는 것들

  • 재사용을 위한 component library를 만들어라
  • 스타일을 정의할 때 의미있고 일관되게(모순없이) 정의해라
  • grid를 활용해라
  • 유연하게 만들어라
  • 구조와 표현을 분리해라
  • 박스와 내용을 분리해라
  • 다수의 class를 사용하되 속성의 중복은 피하고 속성의 종류는 확장해라

OOCSS를 하기에 적합하지 않는 것들

  • 위치에 독립적인 스타일은 피해라
  • div.style01과 같이 tag에 class를 지정하는 방식을 피해라
  • 본문안쪽 영역은 ID로 style 하는 것을 피해라
  • 불규칙한 배경(불규칙무늬, 그라데이션)이라면 그림자나 라운드코너 박스를 피해라
  • 높이를 이용한 줄맞춤(간격설정)은 피해라
  • 원본은 언제나 텍스트라는 것을 잊지 말아라(이미지만으로 표현하지 마라)
  • CSS 설정이 중복되지 않게 해야 한다
  • 성급한 최적화는 피해라(충분한 테스트가 필요하다. 장담할 수 있는가?)

이런 내용만 봐도 객체지향CSS가 무엇을 말하려고 하는지 대충 짐작은 된다.
하지만 짐작만으로는 뭔가 시원하게 풀리지 않기에 위 사이트에서 말하는 CSS를 보다 완벽하게 구축하기 위한 상세한 내용을 살펴보면 아래와 같은 내용이 있다.
(사실 내용을 살펴보면 CSS에 대한 그리고 웹 개발에 대한 올바른 인식과 소통법에 대한 충고이거나 격언을 말해주는 부분 이기도 했다.)

CSS에 대한 인식
CSS는 전문적이여야 한다는 것을 말 하고자 한다.
(그렇다고 완벽함을 바라는 것은 아닐 것이다.)
웹 개발 실무자들 사이에서 CSS에 대한 인식이 얼마나 있을까? 현재까지 전문적인 직업으로 여기는 사람들이 그리 많지 않고 개발, 디자인 사이에서 아직까지 애매한 역할을 하고 있는 것이 사실이다.
그렇기 때문에 더욱 명료하고 전문적인 코드가 될 수 있을 법한 CSS가 대충 아무렇게나의 코드가 되는 것은 아닐까? 라는 생각이 든다.

분리
웹 표준에서 항상 강조하는 것이 구조와 표현을 분리하는 것이라고 말하고 있다. 그러나 객체지향 CSS를 위해서는 내용과 내용을 담는 컨테이너도 분리하는 것이 좋다고 말하고 있다.
내용과 컨테이너를 분리하므로 해서 내용이 특정 위치에 있을 때만 스타일링 되는 것이 아니라 페이지의 어느 곳에서도 표현(위치)하기에 자연스러울 수 있도록 하기 위한 규칙이 아닐까 생각된다.

재사용
디자인에 필요한 component library를 만들어 놓아야 한다.
다양한 페이지를 만들기위해서는 미리 만들어진 구성요소들을 이용해서 조합할 수 있는 것이 가장 중요할 것이다.
어쩌면 이것이 핵심이라 생각된다. YUI를 보자면 객체지향CSS가 무얼 말하는 것인지 단번에 떠오르지 않을까? 일단 모든 구성요소가 정의되면 필요한 디자인은 페이지 마다 필요한 구성요소를 가져다 쓰기만 하면 된다.
(준비된 Lego를 이용해서 다양한 모형을 만드는 것을 비유하고 있는데 꾀나 적절해 보인다. :D)
그러나 재 사용할 수 있는 코드가 있더라도 현실적으로 재 사용이 잘 이루어 지고 있지 않다.
왜냐하면 대부분의 개발자들은 다른 개발자의 코드를 잘 신뢰하지 않기 때문이다.
물론 그로 인해 CSS 코드가 추가되지만 실제로 이런 추가코드는 대부분 별 문제가 없겠지 라고 느끼는게 대부분이다.
하지만 지속적인 CSS의 추가는 그 만큼 파일 사이즈도 증가한 다는 것을 알아야 한다.

곤란할 수 있을 요소를 없애라
만약 h3선언과 h5선언이 똑같은 역할을 하고 있다면? 만약 가변적인 박스에 수직,수평의 변화되는 배경이 깔리거나 라운드 박스 뒤 배경이 변화되는 이미지라면?
웹페이지를 구성하면서 가장 불필요한 시간을 잡아먹는 것이 있다면 이런 곤란한 요소들 때문에 고뇌하고 또 고뇌하는 게 아닐까 생각된다.
정말 필요한 경우가 아니라면 미리 자주 일어날 법한 곤란한 일들은 미리 체크하고 피하는 것이 좋다. 이런 일들은 주로 경험에서 많이 나온다. 그럴때 마다 체크하고 다음 프로젝트를 위해 유용하게 사용될 수 있도록 기록하는 것은 중요한 정보가 될 수 있다.
여기서 말해주는 몇 가지 리스트도 참고할 만 하다.

  • 중복되는 스타일 설정을 피해야 한다.(규칙을 겹쳐쓰지 마라)
  • 표제는 순서대로 선언해야 한다. 잘 못 측정 하면 처음부터 끝까지 계속 잘 못 된다.
  • 어림짐작을 피해라.
  • 일관적인 의미의 스타일을 사용해야한다.
  • 표제가 페이지의 다른곳에 위치하면 안된다.

사실 위 내용을 읽으면서도 어떻게 해야할 지 대략적인 그림이 머리에 그려는 지지만 실현되지 않는 현실때문에 항상 이상으로 남는 것이 대부분이라 생각된다.
하지만 이런 내용들을 CSS를 제작하는 사람들만 알고 있다면 아무것도 해결 되진 않는다.
CSS는 아직 완벽하지 않기 때문에 Grid를 이용하여 레이아웃과 구성요소의 범위 구성을 미리 디자이너, 기획자와 함께 맞춰보고, 디자이너와 개발자에게 CSS에 대한 정보도 공유된다면 유연한 CSS개발에 한걸음 더 올라설 수 있지 않을까 생각해본다.

참고

16 comments on “객체지향CSS가 무엇인고…?

  1. Pingback: ifree's me2DAY

  2. Pingback: attic's me2DAY

  3. Pingback: bomnun's me2DAY

  4. Pingback: pearl0310's me2DAY

  5. 치프

    안녕하세요..
    글 내용중에서, ‘div.style01과 같이 tag에 class를 지정하는 방식을 피해라’ 라고 적혀있는데 이유가 뭔가요?!
    다른 태그속성에서도 동일한 클래스를 사용하기 위함인가요?!

    전 클래스네이밍앞에 태그명을 적었었거든요 ㅠ

    글 잘읽고 갑니다 ~(__~)

  6. 윤 좌진 Post author

    치프님 안녕하세요 ^^
    저도 저 부분을 사소하게 여겼었는데 물론 저렇게 해야 한다는 것은 아닐 겁니다.
    하나의 class로 공통의 style을 사용할 경우 만약 style이 tag.class{}로 설정되어 있다면 그럴 수 없겠죠.
    반대로 P태그에만 .styles{}을 적용하고 싶을 경우나 strong 또는 div태그에만 적용해야 할 경우에는 맞지 않겠죠 이런 예외 경우가 아닐경우 특정 태그에 제한적인 class로 style을 지정하면 그 class설정과 동일한 환경이 아닐 경우 style의 적용이 힘들기 때문이라고 이해하시면 될 것 같습니다.
    이 상황이 50대50 이라고 생각될 수도 있지만 component library를 활용한 class의 재활용을 생각해 본다면 사실상 다른 태그에 동일한 class를 지정할 수 있는 경우는 매우 많습니다.
    조금 다른 경우이지만 사이트 리뉴얼 도중 div태그를 이용해야 할 곳에 span태그를 사용해 버린 곳이 있어 span을 div로 변경했더니 스타일이 적용되지 않았었는데 왜그런가 해서 css파일을 열어보니 span.styles{}로 설정 되어 있는 경우가 있더라구요.. ^^;

  7. Pingback: cdk's me2DAY

  8. Pingback: cranberries' me2DAY

  9. ch4feel

    저만 이런 생각을 한건 아니었군요.
    결국 CSS의 가치를 높이기 위한 방법이라고 생각합니다.

    전에 제가 요런글을 쓴적이 있는데
    http://forum.standardmag.org/viewtopic.php?id=2757
    Object Oriented 라는 말을 붙이기엔 좀~ 길이 다르다란 생각이 들었고요. 뭔가 적절한 방법론으로 이름을 붙이면 좋겠다는 생각을 해보았습니다.

  10. 윤 좌진 Post author

    네 ch4feel님 CDK에서 ch4feel님글은 잘 읽었습니다. ^^
    프로그래밍적인 접근은 저도 생각해본적이 없어서 미투데이에도 그 글을 링크 건적이 있었거든요 ^^
    그런데 CSS를 프로그래밍쪽으로 바라보기에는 ch4feel님 말대로 약간 끼워넣기 일지도 모르겠다는 생각이 들었고(어쩌면 점점 그렇게 발전할 것 같기는 해요 ^^) 우리가 사용하고 있는 CSS에 대해 너무 쉽게 생각하는 경향도 있고 CSS가 과연 무얼 위한 건지 정체성을 잃어가는 분들이 있다면 해서 생각 정리해서 적어본 거에요 ^^ 방문해 주셔서 감사합니다.
    블로그 있으시다면 방문해보고 싶네요 ^^

  11. 황준상

    .a .face{
    width:100px;
    }
    .a .nose{
    height:20px;
    }
    .b .face{
    width:80px;
    }
    .b .nose{
    height:20px;
    }
    이런게 객체지향일수도?? 캬캬
    멋진글 잘 보고갑니다.

  12. 황준상

    .a .face{
    width:100px;
    }
    .a .nose{
    height:20px;
    }
    .b .face{
    width:80px;
    }
    .b .nose{
    height:10px;
    }
    이런게 객체지향일수도? 캬캬
    멋진글 잘 보고갑니다.

  13. 윤 좌진 Post author

    황준상님 방문 감사합니다 ^^;
    댓글스팸방지애드온 설치후 대부분의 댓글이 일단 한번 거친후에 등록되어 이거 문제네요 ^^;
    황준상님이 말하는 방식이 어찌보면 blue print와 같이 미리 여러 속성들을 준비해놓는 css프레임웍 같은 방식인데 이 방식이 필요한 생각은 들지만 그 전에 사이트에 맞게 최적화 되어 준비가 될 필요가 있지 않나 싶기는 합니다.
    아시겠지만 css프레임웍의 최대 단점은 준비되는 상황이나 조건을 맞추기위해 용량이 커질 수 밖에 없다는 문제가 있거든요..

  14. Pingback: sunyruru's me2DAY

Comments are closed.