WP of dstyle » CSS

CSS 최적화 방법

dduck — Sun, 12 Dec 2010 14:12:50 +0000

CSS를 이용한 웹 디자인의 미래는 현재 우리가 알고 있는 것을 어떻게 해야 하는지가 아니라, 미래에 무엇을 배우게 될 것인지를 알고, 현재 CSS로 가능한 기술들을 이 책 전반에 걸쳐 폭넓게 담으려 했습니다. 즉, ‘CSS 최적의 방법’으로 폭넓게 받아들여지고 있는 많은 테스트를 거친 검증된 기법들입니다. 이러한 최적의 방법들은 멋진 디자인 기법들보다 매체나 브라우저의 한계를 가지고 있지만, 그것들을 알고 있다면 개발 프로세스를 빠르게 진행시킬 수 있고, 보다 멋진 디자인 결과물을 안겨줄 것입니다.

일반적인 사항

외부 스타일시트를 사용하십시오.

CSS를 이용하는 최대 장점은 한번의 변경으로 전체 사이트에 영향을 미칠 수 있는 것입니다. 하지만 진정한 힘을 발휘하려면, 스타일이 외부 스타일시트 파일로 분리되어 있어야 합니다.

속도를 위해서 , 유연성을 위해서 @import를 사용하십시오.

@import는 HTML 문서와 외부 CSS파일 둘다 동등하게 사용될 수 있는 장점을 가지고 있습니다. 하지만, IE에서는 @import를 사용하여 임포트된 스타일이 콘텐츠가 로딩되기 전에 로딩되지 않아, 페이지 로딩이 지연될 수 있는 이슈를 가지고 있습니다. 이러한 페이지 로딩 문제를 알고 있다면, @import 대신 를 사용하십시오.

모니터, 프린트, 소형기기를 위한 CSS를 링크하십시오.

CSS는 각각의 출력매체에 콘텐츠가 최적화 될 수 있도록 사용되어야 합니다. 디자이너는 웹 페이지를 프린트했을 때나, 휴대폰 같은 소형기기로 접근했을 때, 콘텐츠가 어떻게 보이는지 고려하여야 합니다.

인라인 스타일의 사용을 피하세요.

인라인 스타일의 사용은 지정해 놓은 스타일을 덮어쓸 수 없기 때문에, 스타일을 변경할 수 없어 디자인 유연성에 커다란 제약을 줍니다. 또한 인라인 스타일의 사용은 코드의 양을 증가시켜, 검색 엔진 최적화 (Search Engine Optimization, SEO)를 감소시켜, 많은 검색엔진에서 낮은 검색 결과율을 가져다 줄 것입니다.

body 안에 사용되는 임베디드 스타일의 사용을 피하세요.

body 테그 안쪽에 위차한 임베디드 스타일은 페이지 콘텐츠가 로딩된 후에 랜더링 되는 경우가 많아 스타일이 적용되지 않는 페이지가 보여지는 경우가 종종 있습니다. 또한 지정된 스타일을 덮어 쓰기가 어렵고, 수정도 용이하지 않아, 코드의 양이 늘어나는 결과를 가져와, SEO도 감소시킵니다.

그래도 임베디드 스타일을 사용해야 한다면, 안에서 간략하게 사용하십시오.

문서의 안에 삽입되어 콘텐츠가 로딩되기 전에 랜더링된다고 하더라도, 디자인의 유연성을 떨어뜨리고, 코드의 양은 증가하여, SEO를 감소시킬 것입니다.

!important의 사용을 피하십시오.

비록 개발이나 프로토타이핑 하는 동안에는 유용할지 모르겠지만, 중요도의 선언은 디자인 유연성을 떨어뜨리고, 나중에 스타일을 수정하려고 하는 다른 개발자에게 혼란을 가져다 줄 수 있습니다.

간단명료하고, 의미 있는 class와 id를 사용하십시오.

적용되어 있는 스타일을 설명하는 이름의 사용을 피하십시오. 이는 스타일을 변경해야 할 때, 문제를 일으킬 수 있습니다. 대신, class나 id의 기능을 설명하는 이름을 사용하십시오. 예를 들면, redtext라는 class보다 hilight나 hilighterror같은 class 명이 더 좋습니다.

디자인

디자인을 위한 이미지가 아닌 이미지 콘텐츠(사진, 일러스트, 다이어그램 등)에만 태그를 사용하십시오.

HTML안에 이미지를 삽입한다는 의미는 쉽게 스타일을 지정할 수 없거나 변경될 수 없다는 것입니다. 아이콘, 로고, 제어버튼 등을 포함하는 인터페이스 요소들은 CSS에서 배경이미지를 사용하여 추가될 수 있습니다. 이런 방법은 HTML 코드의 양을 줄여주어, 보다 좋은 SEO 결과를 가져오며, 디자인을 보다 자유롭게 변경할 수 있도록 해줍니다.

HTML은 스타일 표현을 위해 사용되는 것이 아니라, 구조를 위해 사용되어야 합니다.

HTML은 페이지의 구조를 위한 것입니다.
나 와 같이 구조보다는 특정 스타일을 지정하기 위한 태그는 사용하지 않습니다. 대신 이나과 같이 브라우저 스타일로 사용 가능한 태그를 사용합니다.

고정된 영역 요소를 표현할 때 패딩과 테두리 선의 사용을 피합니다.

IE6에서는 박스 모델(box model) 적용 시, 패딩과 테두리 선이 지정된 너비와 높이 값이 포함이 되어 계산되는 버그가 있습니다. 대신에 안쪽에 있는 요소에 패딩과 마진을 조정하세요.

버튼과 아이콘 표현을 위해서 CSS 스프라이트(sprite) 기법을 사용하세요.

CSS 스프라이트 기법은 보다 적은 수의 이미지를 로딩하여, 링크가 이동하는 동안 이미지가 로딩되면서 깜빡거리는 현상을 피할 수 있게 해줍니다.

CSS 작업

가능하면 CSS 코드에 진행 사항을 주석으로 남기세요.

개발의 마지막 단계에 코멘트를 남길 수도 있겠지만, 가능하면 후임 디자이너와 개발자를 위해 코멘트를 남겨주세요

모든 선언의 마지막에는 항상 세미콜론을 붙여주세요.

CSS의 규칙 선언이 리스트의 마지막에 있다고 하더라도, 나중에 골치 아픈일이 생기지 않도록, 세미콜론을 붙여주세요.

0을 제외한 숫자에는 단위를 붙여주세요.

0은 단위가 상관없지만, 대부분의 경우에 단위는 필요합니다. 예외적으로 line-height와 opacity는 단위가 없는 값을 가질 수 있습니다.

색상지정을 위해 RGB값을 사용하세요.

CSS에서 색상의 지정은 다양한 방식으로 지정이 가능하지만, RGB값을 사용하여 지정하는 것이 널리 사용되는 방법이며, 자바스크립트를 이용하여 값을 변경하기도 용이합니다.

전체 사이즈나 폰트 사이즈 지정에는 em을 사용하고, 절대 사이즈에는 px을, 상대 사이즈에는 퍼센트를 사용하세요.

웹디자인에서 단위로 em을 사용하느냐 px을 사용하느냐 하는 문제는 아직까지도 많은 논쟁이 있습니다. 만약 em을 사용하기로 결정했다면, EM 계산기(riddle.pl/emcalc) 같은 px을 em으로 변경해주는 계산기에 친숙해질 필요가 있습니다.

규칙의 범위를 제한하세요.

ID와 class를 사용할 때는, 다른 영역에 스타일이 적용되지 않도록 하고, 서로 뒤섞이지 않고, 원하는 곳에만 적용될 수 있도록 해야 합니다.

최적화하기

CSS 속성은 가능하면 축약형을 사용합니다.

많은 CSS 속성들이 축약형을 사용하여 하나의 속성으로 조합 가능합니다.
예를 들면,
border-top:5px; border-right:5px; border-bottom:1px; border-left:2px은
border:5px 5px 1px 2px;
로 줄여서 표현할 수 있습니다.

과다하게 스타일을 추가하지 마세요.

하나의 요소에 스타일 속성이 한번 지정되면, 선택자 종류(HTML, class, id)에 따라 페이지의 모든 요소와 자식 요소에 상속이 됩니다.

가능하면 id의 사용은 최소화하고, 웹 페이지마다 id를 한번만 사용하세요.

id가 많아진다는 것은 여러분의 코드가 보다 복잡해진다는 의미입니다. 일반적으로 페이지의 주요 영역 구분을 위해 id를 사용합니다. 문맥 구분을 위한 영역에도 id를 사용하고자 한다면, 너무나 많은 id를 사용해야 할 겁니다.

가능하면 class의 사용을 최소화 하세요.

id와 마찬가지로, 페이지에 class가 많으면 코드가 복잡해집니다. class는 비슷한 유형의 요소에 스타일을 지정할 때 유용하지만, 요소의 모든 인스턴스가 각자의 class가 필요한 것은 아닙니다.

HTML 선택자를 이용한 규칙이 문맥의 마지막까지 적용될 수 있도록 해보세요.

문맥 영역에 지정되는 CSS 규칙까지 HTML 선택자를 이용하여 지정될 수 있도록 한다면, 여러분의 코드에서 id와 class의 갯수를 최소화 시킬 수 있을 것입니다.

- 위의 내용은 ‘스타일로 말해요‘의 Chapter 12.에 정리된 내용입니다.

Tweet

스타일로 말해요! – CSS를 아는 웹디자이너 되기

dduck — Tue, 20 Jul 2010 02:16:12 +0000

작년 하반기에 번역 작업을 시작한 책이 이제서야 출간되게 되었습니다. 좀 늦은 감이 있지만, 그래도 나오게 되어 기쁘네요.

‘스타일로 말해요’ 라는 제목이 처음 봤을때는 어떤 내용의 책인지 한번에 파악이 안되는 부분이 있긴 한데요. 부제마저 없었다면 전혀 다른 분야의 책제목으로도 어울릴듯하기도 해요.
물론 다른 여러가지 제목들도 고민해보았지만, 저는 책이 딱딱하지 않으면서 내용의 이해가 쉽다는 느낌을 강조하고 싶었어요. 그래서 부제는 좀 구체적인 느낌으로 전달될 수 있도록 했어요. 그래도 작업하면서 계속 봐서 그런지 이제는 별로 어색하지 않은 것 같네요. ㅡㅡ;

책의 내용은 정말 기본적인 (CSS를 이용한) 웹디자인에 대한 내용이지만, 실제 작업하는 방법에 대한 얘기보다는, ‘작업을 위해 알아두면 좋은 것들‘에 대한 얘기들이 많아서 좋았어요. 그리고, 책의 내용들이 CSS에 익숙하지 않은 디자이너를 위한 것이라 더욱 맘에 들었구요.
그리고, 영어를 배우는 것에 비유해 이야기를 풀어나가는 저자의 방식도 마음에 들었구요.

다음은 역자 서문이예요.

영어를 잘 하려면 풍부한 어휘의 습득이 필수이듯이, 웹디자인에도 어휘와 문법이 있다.
여러분은 이 책을 통해 멋진 웹디자인을 하기 위한 기본 어휘와 문법을 배우게 될 것이다.

책이 다루고 있는 내용은 웹표준에 기반한 CSS의 기본적인 사용법과 작업 프로세스에 대한 내용들이다. 하지만, 그 뻔한 이야기를 저자가 풀어가는 방식은 남다르다.
일반적인 CSS에 대한 이론적인 사실의 나열이 아니라, 웹을 디자인하는 디자이너의 입장에서 쉽게 풀어쓰고 있다. 이 점이 굉장히 맘에 들었다. ‘마땅히 지켜야 하는 것이기 때문에 알아야 한다.’라는 생각과 주장보다는, 스스로 알아야만 하고 필요한 것으로 받아들이게 만드는 것이 더 훌륭한 방법이라고 생각한다.
이 책은 강요하지 않고, 스스로 깨닫고 받아들일 수 있는 내용들을 제시하고 있다.

국내의 웹 개발 직군을 보면, 대부분 세부적으로 업무가 나누어져 있다. 크게 기획, 디자인, UI개발, 개발의 직군으로 분류할 수 있을텐데, 이 구분의 장점은 아무래도 각 업무의 전문성을 높이기 위함이 아닐까 한다.
하지만, 반대로 생각해보면, 자신이 맡고 있는 업무 이외에는 해박한 지식이 없어도 프로젝트를 진행하는데는 크게 지장이 없다는 말이 되기도 한다.
이러한 상황에서 열린 시각과 열린 마인드가 없다면, 전문성이라는 명목으로 오직 자신의 업무만을 고집하게 되는 경우가 생길 수 있다. 어쩌면 이것이 가장 골치 아픈 경우라고 할 수 있을텐데, 이런 상황이 지속된다면 프로젝트가 어떻게 될지는 불보듯 뻔할 것이다. 하지만, 자신의 업무가 아니라도, 분야에 대한 지식을 알고 있으면, 자신의 업무에 더 많은 도움을 얻을 수 있고, 훨씬 좋은 결과물도 만들 수 있을 것이다.

이 책의 번역을 하게 된 계기도 어쩌면 이 책의 저자와 같은 고민과 생각을 하고 있었기 때문이라고 할 수 있겠다.
책의 내용 중에 상당히 공감가는 부분이 있었는데, 다음의 내용이다.

‘ 필자는 편집 디자이너로 디자인을 시작했고, 인쇄 과정을 처음부터 끝까지 이해해야 했습니다. CMYK, 종이의 두께 등에 대해 알아야 하고, 출력 파일을 만드는 법도 알아야 했습니다. 이런 것들을 이해해야 하는 것은 필자의 디자인이 직접 선택한 적절한 매체에서 최고의 결과를 얻어야 하기 때문이었습니다. 적어도 여러분 자신이 코드를 작업할 계획이 전혀 없더라도, CSS가 어떻게 동작하는지 이해한다면, 한 단계 더 발전된 웹 디자이너가 될 수 있을 것입니다.’

아직 편집디자인의 관점에서 웹디자인을 바라보는 시각들이 많은 경향이 있다. 어떤 디자인이든 디자인이 적용되는 매체의 특성을 먼저 파악해야 한다. 그리고 그 매체의 특성에 맞는 디자인이 정말 훌륭한 디자인이라고 생각한다.
‘웹디자인’에서 ‘디자인’의 의미가 단순한 ‘그래픽 작업’에서 끝나는게 아니라, ‘설계 및 제작’이라는 의미까지 포함되어 있다라는 것을 감안해본다면 자연스럽게 받아들 일 수 있는 말이 아닐까 싶다.

이 책은 CSS를 비롯한 다 양한 브라우저 이슈, 효율적인 코드 작성, IE6를 대처하는 방법 등 이론이 완벽하더라도 실무에서 마주칠 수 있는 이슈들을 저자의 경험을 바탕으로 디자이너의 관점에서 쉽게 설명해주고 있다. 따라서, 실무에서 요긴하게 많은 도움을 얻을 수 있을 것이라고 생각된다.

아무쪼록, 이 책을 통하여 영화 ‘매트릭스’의 주인공 ‘네오’가 그동안 느끼지 못하고 있던 진정한 ‘real world’를 ‘모피어스’의 도움으로 만나게 되듯, 여러분들도 이 책을 통하여 ‘real web’을 볼 수 있는 안목을 가질 수 있기를 희망한다.

마지막으로 이 책이 번역되어 나올 수 있도록 많은 노력을 해주신 위키북스의 박찬규 대표님, 김윤래 팀장님, 꼼꼼한 내용 검토를 해주신 이준님, 부제 선정에 결정적인(!) 도움을 준 후배 준희, 그리고 SK커뮤니케이션즈 UI개발팀 동료들에게도 감사의 마음을 전한다. 또한, 책의 마무리 작업을 위해 주말과 밤시간에 집중할 수 있도록 배려해 준 아내 ‘랑’과 곧 세상의 빛을 보게 될 ‘꼬물’이에게도 애뜻한 고마움을 전한다.

부디 웹을 하시는 디자이너분들 뿐 아니라, 기획자분들께도 많은 도움이 되었으면 좋겠어요.

도서 상세 내용 보기

Tweet

디자인 향상 (Design Enhancement)

dduck — Sat, 29 May 2010 10:57:39 +0000

최근에 번역 작업을 한 Speaking in Styles에 보면 디자인 향상(Design Enhancement)에 대한 내용이 나옵니다.

간단히 설명하자면, 디자인 향상은

새롭게 나온 속성이 지원되는 최신 브라우저에서 좀 더 멋지고 향상된 디자인이 적용되어 보이도록 하는 것

입니다.

디자인 향상(Design enhancement) 작업을 할 때에는 디자인이나 사이트의 기능적인 부분을 비평해서는 안됩니다. 해당 속성이 사용하는 브라우저에서 동작을 하든 안 하든, 사용자들이 사이트를 이용하는 데 불편함을 주거나 방해가 되어서는 절대 안됩니다. 단지 사이트가 조금 덜 매끈해 보일 뿐이지요. 결국, 좀 더 좋은 도구를 선택한 사용자들이 더 향상된 경험을 제공받을 수 있게 되는 것입니다.

최근에 나온 아래와 같은 속성들을 이용하여 디자인 향상 작업을 적용할 수 있을 것입니다.
첨부된 이미지는 원서에 있는 이미지를 가져 온 것입니다. 따라서 현재는 더 많은 브라우저가 아래의 속성들을 지원하고 있습니다.

[IMG SRC : Speaking in Styles > Part 2. CSS Grammer > chapter 6. Vocabulary: Talking the Talk ]

참석하진 못했지만, 오늘 열렸던 제4회 웹표준의 날에서 발표하신 정찬명님의 발표자료를 살펴보면서 번역한 책 내용이 생각나서 반가운 마음에 급 포스팅 올립니다.

디자인 향상 작업이 사용자들의 자발적인 브라우저 업데이트로 이어질 수 있으면 참 좋을텐데요.
뭐 좋은 방법 없을까요?

현재 이 책의 번역 작업은 완료되었고, 최종 마무리 편집 작업중에 있습니다.
예정보다 늦어졌지만 하루빨리 서점에서 만나볼 수 있게 되면 좋겠네요.

Tweet

번역 작업 중.. speaking in styles

남덕현 — Thu, 24 Sep 2009 23:37:25 +0000

새롭게 번역 작업 중인 책이다.

평소 일을 하면서 기획과 디자인 단계에서 CSS에 대한 조금의 이해가 더 있었더라면 더 좋은 결과물이 나오지 않았을까 하는 생각을 많이 해보게 된다.
나와 같은 생각을 하는 사람들이 의외로 많은가보다.

이 책은 웹표준과 CSS에 대해 아주 쉽게 설명하고 있다. 마치 영어를 처음 배우는 사람에게 영어를 가르치듯..
그래서 제목도 ‘speaking in English’ 삘 나는 ’speaking in styles’가 아닌가.

이 책은 웹디자인을 하면서 CSS에 관심이 있거나 쉽게 배우고자 하는 사람들이 텍스트에 대한 부담없이 편하게 읽어볼 수 있는 책이다.

이 책에서 다루고 있는 특징적인 내용들을 간략하게 살펴보면, 물론 CSS의 기본적인 개념들은 다 설명하고 있고, 웹디자인을 하면서 디자이너나 개발자들에게 꼭 필요한 것들, 예를 들어, 사람들이 CSS에 대해 가지고 있는 오해들, IE6 버그에 대한 설명과 대처법, 브라우저별 특징을 잘 설명하고 있고, 후반부에는 하나의 사이트를 선정하여 직접 페이지 마크업과 스타일 작업을 많은 그림고 도표로 설명하고 있다.

책을 접했을 때, 실무에 상당히 유용한 방법들이 많다라는 느낌이 들었다.
뭐랄까… Smashing Magazine이나 nettuts 에 있는 정말 유용한 포스팅들을 보고 있는 느낌이랄까..

어쨌거나, 처음에는 작업이 길어지지 않으리라 생각했는데, 이래저래 개편작업으로 하루걸러 밤을 새고 있는 상황이고, 개인적으로도 일이 있어 주말에도 시간을 내기 힘드니 대략난감할 뿐이다.

번역 작업을 하면서 중간중간 내용을 정리해볼 생각이다. 많이는 아니겠지만…
암튼 하루빨리 책이 번역되어 나왔으면 좋겠다.

Tweet