의미있는 CSS 클래스 명을 써라
dev | 2010-10-20
가끔 커뮤니티에서 CSS 클래스명을 CSS 속성명으로 축약해서 지정하는 방법을 사용하는 사람들을 볼 수 있다. 예를 들어서 margin-top: 10px을 지정하고 싶으면 mt10과 같은 클래스를 만들고 class="mt10"과 같이 적용하는 것이다. 비슷하게 float: left나 position: absolute 같은 속성을 지정할 때에도 각각 fl이나 pa와 같은 클래스를 만들고 class="mt10 fl pa"이런 식으로 사용하는 것이다.
누가 처음부터 사용하기 시작했는지는 모르지만 예전에 모 포털 사이트에서도 이런 방법을 사용한 것을 보았다. 그리고 그것을 따라하는 사람들이 꽤 많은 것 같다. 심지어는 사수나 팀장이 클래스 명에 의미를 부여하지 말고 위와 같이 사용하라는 말을 했다는 얘기도 들었다.
의미있는 클래스 명을 쓰는 것은 구조와 표현의 분리라는 CSS의 목적을 지키기 위한 아주 기본적인 원칙이다. CSS의 활용 목적과 이득을 충분히 이해한 사람이라면 위와같이 속성명을 클래스 명으로 쓰는 발상을 할 수 없었을 것이다. 클래스 명도 아이디와 같이 HTML의 구조와 의미를 기술하는 중요한 수단이다. 이런곳에 mt10과 같이 표현 정보만을 가진 이름을 지정해서는 안된다. 정말로 1회성 margin-top이 필요하다면 차라리 style 속성으로 인라인으로 선언하는 것이 더 좋다. W3C의 QA 팁의 "Use class with semantics in mind."에도 잘 설명이 되어 있다.
CSS를 처음 공부할때는 상상할 수 없었던 이런 방법들이 왜 꾸준히 거론되는지를 생각해 봤다. 아마도 많은 사람들이 단순히 PSD를 HTML로 컨버팅하는데만 급급해서 전체를 보지 못해서 그런것 같다. HTML 코더라는 말이 싫어서 보다 전문화된 직종이 될 수 있도록 웹 퍼블리셔라는 직군을 만들었는데 지금의 웹 퍼블리셔는 옛날의 HTML 코더에서 크게 벗어나지 못한 것 같다. 가장 우려하던 일이 발생한 것이다.
CSS는 단지 상자의 크기를 지정하고 배경이미지를 넣기 위한 것이 아니다. 웹사이트 전반의 디자인을 규격화하여 정의하는 것이다. 웹에 종사하는 사람들이면 누구나 웹스타일 가이드라는 것을 알 것이다. 물론 웹스타일 가이드가 미리 만들어지는 프로젝트가 거의 없다는 것은 잘 알고 있다. 산출물을 제출할때나 되어서야 이미 만들어져 있는 사이트를 보고 웹스타일 가이드를 만드는 경우가 일반적일 것이다.
여기서 웹 퍼블리셔가 할일이 생긴다. 디자이너가 만들어준 디자인을 검토하고 웹사이트의 통일성을 지킬 수 있는 웹스타일 가이드를 스스로 만들어야 한다. 만약 디자이너가 이 가이드를 어기고 PSD마다 조금씩 흐트러진 모습을 보인다면 디자이너가 정말로 의도한 디자인이 어떤 것이고 어느 방향으로 구현이 되어야 하는지 묻고 재정의 해야 한다. 이때 CSS의 장점이 발휘되는 것이다. 이미 만들어져 있는 페이지도 CSS 코드만 수정하면 새로 정의된 디자인이 사이트 전체에 적용되는 것이다. mt10, mt12, mt15 이런 이상한 방법으로 단순히 PSD를 HTML로 바꾸는 것이 아니라 일정에 쫓기는 디자이너를 도와 웹사이트의 디자인 통일성과 업무 효율성을 고민해줘야 하는 사람들이 바로 웹 퍼블리셔이다.
어떤 바보같은 디자이너들은 코딩된 결과물을 캡춰해서 PSD와 어느정도 차이가 있는지 대본다고 한다. 이런 사람 보다는 자신이 정의한 웹스타일 가이드가 잘 지켜졌는지를 검사하는 것이 진짜 생각이 있는 디자이너이다. 웹 퍼블리셔가 할 일은 CSS를 가지고 사이트 디자인의 구조를 잘 정의해서 디자이너를 PSD 쳐내는 사람이 아니라 사이트 아이덴티티를 잘 살려내는 진짜 웹 디자이너가 되게 도와주는 일이다.
Comments
아.. 글 참 맛깔난다. :)
저도 컨텐츠 공통으로 사용되는 스타일들을 정의할때 .mt20 {margin-top:20px;} .fLeft {float:Left;} 등 클래스명을 사용하는데 1회성 목적보단 공통 스타일을 만들때 복수 class 로 사용하기위해 쓰는데 CSS 파일에서 공통으로 사용되는 스타일들의 정의할때는 괜찮은 방법이라고 생각해요.
mt20, fLeft 같은 클래스가 어떻게 공통 스타일이 될 수 있는지 잘 모르겠네요. 공통 스타일은 "윗여백 20픽셀"이 아니라 "헤딩 다음의 문단"이라든가 "가입폼 하단 메시지"와 같이 콘텐츠의 구조나 내용을 담고 있어야 합니다. 구조와 표현을 분리해야 하기 때문에 인라인으로 스타일을 선언하기 보다는 외부 CSS파일로 빼는게 더 좋다는 것을 아실 것입니다. <p style="margin-top: 20px">과 <p class="mt20">은 완전히 동일합니다. class를 썼지만 스타일이 구조와 분리됐다고 볼 수 없습니다. 저 상단 여백을 30픽셀로 바꾸고 싶으면 CSS를 수정해야 하는게 아니라 수십페이지의 HTML에서 class를 mt30으로 바꿔야 할 테니까요.
CSS 는 디자인을 규격화하여 정의를 해야한다. 라는 대목에서 고개가 절로 끄덕여집니다. 하지만 디자이너가 화면의 작은부분까지 세세하게 능동적으로 설명해주는데 저로써는 꼭 그렇게 해야하는 이유와 더 좋은방안을 제시하는 껀덕지가 지금 이 세계에는 너무 없고, 제시할 방법조차 안내되어 있지않습니다. 세세하고 능동적인디자이너를 어떻게 설득해야하는지 선배님의 조언을 부탁드립니다.^^
작고 세세한 모든 부분에 항상 구체적인 이유가 있지는 않습니다. 디자이너의 느낌과 감을 존중해주어야 하는 경우도 상당히 많습니다. 중요한 것은 디자이너와 함께 디자인 가이드를 같이 만들어 낼 수 있는가 하는 것입니다. 그러기 위해서는 CSS가 디자인 가이드를 만드는 작업이라는 것을 이해시키고 디자이너도 그쪽으로 신경쓸 수 있게 해 주어야 합니다. 보통 경력많은 디자이너는 기본적으로 머리속에 가지고 있죠. 어떻게 설득할지를 고민하지 마시고 어떻게 서로 이해할 수 있을지를 고민하는게 좋습니다. 우선은 인간대 인간으로 친해지고 신뢰가 쌓여야 합니다. 아무리 좋은 방법론과 화법이 있어도 서로 믿음이 없으면 다 소용없습니다. 그래서 제가 웹표준 하시는 분들한테 항상 싸우지 말라고 하는 겁니다. :) 웹표준을 잘 아는 것도 중요하지만 그보다 먼저 회사에서 인정받는 일잘하는 사람이 되는 것이 중요합니다. 그래야 말에 무게도 실리니까요.
mt20 이렇게 사용하는건 관점에 차이인거 같습니다. css사용할때 css설정을 관점으로 사용하셨어 저런 클래스명이 나오지 않을까 싶네요. 제가 보기에는 화면영역을 기준으로 css를 만드셔야된다고 생각하는데요.
전 만들 때 마다 바뀌는 엉터리 제 규약이 있습니다. 저만의 표중안을 만들어야는데 ㅠㅠ
박진호님, 말씀하신 그 관점이 CSS의 장점을 많이 포기한 관점이라는게 제 글의 요지입니다.
되도록 이면 시멘틱한 Class명을 사용하라는 동의하지만, 상황에 따라 축약된 명을 쓰는 것이 틀린것 이라고 하기는 좀 애매해보입니다. mt라고 줄여쓰는 것이 단순히 단순코딩의 의미로만 부여되지 않는 경우도 있을 테니까요. 또 단지 비주얼을 목적으로 코딩하는 영역도 필요하지요. 모든 상황을 뭐다 라고 단정 지을수 없으니 말입니다. 좀 다른이야기지만 문법, 표준에 갇혀 있다보면 그 이상의 것을 보지 못하는 경우도 있습니다. 우리의 관점에서만 보고 말하는 것은 우리만의 대화가 될지도 모른다는 생각이 듭니다. 현석님이 덧글에도 쓴것처럼, 웹표준만 잘하는 웹퍼블리셔(?)보다 웹서비스도 잘 이해하는 퍼블리셔가 필요하지 않을까 해요.. 그나저나 잘 지내시지요?(기억못하시려나 ㅎ)
웹디자이너, 웹퍼블리셔도 소양교육이 있으면 좋겠어요. 웹퍼블리셔라는 명칭을 사용하면서 막코딩하는 분들이 많아서, 웹퍼블리셔 = 마크업 전문가라는 이미지 메이킹에 실패한 느낌이랄까요. 또 명칭만 바꾼다고 해결될 문제는 아니겠지요.
또하나 잘배워서 갑니다~!!^^.. ㅎㅎㅎ 요세 공부중이긴한데..^^ 힘드네요^^..ㅎㅎㅎ;;; 잼있어서 하는거지만^^..
동감합니다. CDK에서 잠깐 얘기가 나온 김에 포스팅하셨나봐요. 이러니 저러니해도 저런 class는 편의를 위한 거죠. 생각을 덜 하고 싶은 마음. 저도 주로 아르바이트 작업같은 걸 할 때 저런 방법을 쓰지만, 오히려 한 장짜리 작업을 하면 그럴 일이 없던데요. 전체 모양이 한 눈에 들어오고, 어떻게 css를 사용할지 머리 속에 쉽게 짜여지니까요. 1. 우리나라 웹사이트 제작 프로세스상 거의가 디자인 종속적인 코딩을 하는 상황. 2. 웹디자이너가 공간과 컬러에 대한 스타일 가이드를 제대로 만들어내지 못했을 때 현실과의 타협. 3. 시간적인 압박. 이런 이유들로 인해서 css를 저렇게 쓰게 된 게 아닌가, 생각합니다. 우리나라는 프로세스의 문제가 풀기에 많이 먼 숙제인 것 같아요. 그나저나 정말 margin-top:10px; 이것만 한 class에 css가 들어가는 경우가 자주 보이면 mt10을 안쓰기도 힘들더군요 ㅋ 다른 것보다 제일 힘든게 naming이라서!!!!!!!!!!!!!!!!!!! 자주 쓰는 naming 정리라도 해봐야겠습니다. ^^;
디자이너와 퍼블리셔를 병행하는 이로써 참으로 공감하면서도,, 또한 애매모호한 부분도 있네요. 또한 이놈의 습관성 코딩은 잘 고쳐지지 않는다는게 문제지요. 시간에 쫓기다 보니;;; 퍼블리싱하면서 느끼는건 화면영역 분할능력이 머릿속에서 그려지니 훨 쉬워졋다는거.. 스타일가이드 할때도 두번 반복 안해도 되고 허허...
경험삼아 알바 형식으로 수십장 분량의 마크업 작업을 <strong>처절하게</strong> 진행 하면서 느낀점이 여기 있네요^^; 먼저 전체를 보는 눈이 없으면 css가 길어지고 작업 속도가 느려지며 약속 날을 못지키고 신뢰를 잃고 혼나고... 어허헝 ;;
지금 저희 회사에서 개발하는 사이트가 딱 이렇게 하고 있네요. 디자인과 마크업을 외주 줬는데 개발은 70% 정도의 공정을 보이고 있습니다. 처음부터 css 가 맘에 들지 않았는데. 왜 그랬는지 이제야 확 와닿는군요. 좋은글 감사합니다. ^-^
그리고 또하나 맘에들지 않는 css 작성법은 comm.css 또는 base.css 라는 파일 안에 들어있는 다음과 같은 문장 입니다. ㅠㅠ * {margin:0xp 0xp 0xp 0xp;padding:0px 0xp 0xp 0xp;} HTML {WIDTH: 100%; HEIGHT: 100%;overflow-y:scroll;}
위험한 코드네요. 콘텐츠 연계시에 문제가 많이 발생하는 리셋 방법입니다.
정말 마음에 딱 오는 글이었습니다. (_._) 반성;;
아 ;ㅁ; 맘에 확 와닿는 글입니다. 늦게 보긴 했지만 어떻게 이렇게 시원하게 써주시는지! 참 얼마전에 안드로이드 브라우저 관련 멘션도 감사드려요 덕분에 해결했답니다 :)
저는 실무 웹 제작에 직접 개입되지 않아서인지 아직도 궁금한 것이, 왜 디자이너가 먼저 PSD 작업을 해야 하는가입니다. 처음부터 퍼블리셔가 CSS로 디자인해도 될 것 같기도 한데, 옆에서 보면 반드시 파워포인트로 된 스토리보드(?)가 나오고, 포토샵으로 된 디자인 시안(?)이 나오고, 마지막에 퍼블리셔가 작업하는 그런 복잡한 순서가 과연 꼭 필요한지 모르겠더라구요. 이런 순서에서는 퍼블리셔가 mt10이라는 클래스명을 쓰든 의미적인 이름을 붙이든 고객이 볼 때는 아무런 차이가 없기 때문에, 디자이너의 역할은 매우 중요하지만, 퍼블리셔는 그냥 코더인 것으로 간주될 수 밖에 없는 듯해요.
신승식님 퍼블리셔가 그것을 한다고해도 결국 가이드라인과 공간정도겠지요 색감이나 그라데이션 뻣는 정도등 디자인을 우리가 어떻게 합니까 ^^
기획서가 가장중요하다고 생각합니다. 기획서가 쫘악 잘 뽑아져나오면 그걸 전체적으로 보고 제목이라든지 같이 딸려나오는 컨텐츠라든지 다른페이지에는 있는데 이 페이지에는 없는 영역 등 전체적으로 쫘악 보고 의미있게 클래스명을 뽑아야하는데 우리나라 실제업무는 그렇지 못하니까 거기서부터 디자이너도 기획서 전체를 보지못하게 되는거 아닌가 생각합니다
그리고 실업무를 하다보면 고객의 변덕이나 자체적인 실수로 나중에 추가되는 컨텐츠때문에 클래스명을 의미있게 짓기 힘든경우도 많습니다. 처음에 의도한대로 의미있는 설계를 한다면 그 추가되는 것 때문에 여러 jsp를 열어서 수정해야하는 경우가 있으니까요. 귀찮아서 그냥 때려박든가 거기만 대충 클래스 처리하겠죠
도움되는 글이네요. 잘 읽었습니다.
좋은 글 고맙습니다~~^^ 큰 도움이 되었어요~!!!ㅎ
흠... 시맨틱 마크업은 굉장히 중요한 것이고 저 또한 그러한 의미있고 목적에 맞는 마크업을 위하는 사람 중 하나라고 자부합니다만... 저는 css 파일의 용량이 조금 높아져도 저만의 셋팅으로 미리 공통 클래스를 설정해 두고 작업을 합니다. 동일하지 않은 형태의 박스라고 하더라도 동적인 효과를 주기 위해서는 클래스명을 통일하고 하위 브라우저를 사용하는 사용자들을 위해서는 가상 클래스의 사용을 100% 활용하지 못하는 점이 있기에 클래스 명에 공통 클래스 부분을 추가하여 너비, 높이, 위치 등만을 위한 용도의 공통 클래스는 분명히 존재해야한다고 믿고있습니다. 그리고 프론트엔드 개발자 뿐만이 아니라, 백엔드 개발자와 SVN으로 협업을 하는 경우가 대다수인 프로젝트 수행에 있어서 백엔드 개발자들도 프론트엔드에 조금 더 쉽게 접근할 수 있도록 만들어 줄 필요가 있다고 생각합니다. 필요악이 아니라 부족한 점을 보완해주는 도우미 같은 것이라 생각합니다.
신승식 선생님... 예를 들어 자동차를 만들때 테일은 이렇게 루프는 이렇게 혼자서 생각을 가지고 무작정 만들수 없듯이 디자인의 컨셉과 방향을 구체화 시키는 것입니다. 그런 접근없이 웹코더라는 표현을 사용하시는 부분이 상당히 거슬리네요.
지노군님, 제 생각에 CSS 용량과 공통 클래스는 그다지 큰 연관성이 없고요. 애니메이션을 위한 공통 클래스가 있을 수 있다는 점에는 동의 하지만 가상 클래스의 브라우저 하위 호환성 때문에 공통 클래스를 추가한다는 말은 어떠한 경우인지 잘 모르겠네요. 가상 클래스로 요소의 너비, 높이, 위치 등을 지정한다는 것도 이해할 수 없는 활용이고요. 좀 더 자세한 예시를 들어주셔야 설명이 될 것 같습니다. 그리고 프로젝트에 포함된 사람들이 좀 더 쉽게 접근할 수 있게 해야 한다는 취지에는 동의하지만 이러한 방식이 크게 도움이 되지도 않고 전반적인 프로젝트 관리 차원에서는 설계를 엉망으로 만드는 방법입니다. 각종 도구와 CSS 설계에 신경을 써서 읽기 쉽고 수정하기 쉬운 코드를 고민해야지 이런 편법으로 문제를 해결하려고 해서는 안됩니다. 말씀하시는 공통 클래스라는게 제가 지칭한 mt10을 말씀하시는 것인지 잘 모르겠네요. 그리고 저는 '필요악'이라는 표현은 사용하지 않았고요. '필요악'이나 '부족한 점을 보완해주는 도우미'나 둘다 의미없는 클래스 명을 긍정적으로 보는 표현인데 제 글은 이를 부정적으로 보고 있기 때문에 제 글의 논점을 제대로 파악하지 않은 것 같네요. 그리고 신승식님의 말씀은 그러한 역할을 해야 하지만 지금의 작태는 그렇지 못하기 때문에 코더라는 표현을 쓴 것인데 이 역시 글의 논점을 제대로 이해 못하신 것 같군요. 제 느낌에 제가 쓴 글에 대한 반응도 그렇고 신승식님의 글에 대한 반응도 그렇고 글 전반적인 논리를 잘 파악 못하신 것 같은데 좀 더 글의 의도를 잘 파악하도록 시간을 들여서 잘 읽어주시기 바랍니다. 그냥 대충 하고 싶은 말만 글로 배설하지 말고요. 불쾌합니다.
글 잘보고갑니답!