WP of dstyle » Web

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.에 정리된 내용입니다.

디자인 향상 (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회 웹표준의 날에서 발표하신 정찬명님의 발표자료를 살펴보면서 번역한 책 내용이 생각나서 반가운 마음에 급 포스팅 올립니다.

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

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

웹 디자이너들이 HTML & CSS를 알면 좋은 5가지 이유

dduck — Mon, 29 Mar 2010 09:37:24 +0000

아래의 글은 ’5 Good Reasons Why Designers Should Code’ 라는 제목으로 올라온 Mike Kus의 글을 대략적으로 번역한 글이다.

2010년인 지금도 여전히 자신의 디자인을 코드로 작업하지 못하는 ‘웹디자이너’들이 있다는 사실에 충격을 먹었다. – Elliot Jay Stocks

트위터에서 작은 논쟁이 되던 글이다.

개인적으로 그의 생각에 동의한다. 웹 디자이너가 자신의 디자인을 코드로 만들지 못하는 것이 이상하다고 생각했을 뿐 아니라, 심지어 3년전에는 나도 HTML 코드를 전혀 모르는 디자이너 중 한 명이었다. HTML 코드 작업을 접해 보기 전까지 나는 10년 넘게 그래픽 디자이너로 일해왔다. 지금 생각해 보면 내가 작업한 디자인을 웹페이지로 만들기 위해 HTML과 CSS를 배운 것은 정말 잘한 일이라 생각한다. 디자이너들이 HTML과 CSS를 배우게 되면 좋은 점 5가지를 이야기해 보겠다.

첫번째 이유
포토샵에서 디자인 하는 것과 HTML & CSS를 사용하는 방법을 모두 알고 있으면, 각각을 따로 알고 있는 것보다 훨씬 더 막강한 힘을 발휘할 수 있다. 대부분의 디자이너들이 코드화 작업이 그들의 작업물에 많은 제약을 준다고 생각하는데, 직접 코드를 배우고 나니 제약보다는 나를 해방시켜준다는 느낌을 받았다. 많은 제약으로부터 새롭고 창조적인 가능성의 세계를 열어준 것 같다. 기본적으로 HTML&CSS 작업을 배운 것이 나를 한단계 발전한 웹디자이너로 만들어 주었다.

두번째 이유
디자인 작업물은 여러분이 원하는 방식대로 정확하게 디자인될 것이다. 만약 디자인과 UI개발 업무가 완벽하게 분리되어 있다면, 프로젝트에서 UI개발자가 그들의 작업을 끝마치는 시점이 되면, 디자이너는 결과물이 그들이 원하던 모습과는 전혀 다르다고 생각하게 될 것이다.
이것은 UI 개발자의 잘못이 아니다. 그런 상황이 발생할 수 밖에 없다.
사이트에 새롭게 디자인된 섹션의 추가 작업이 필요할 때마다 디자이너가 매번 포토샵으로 작업을 하는 것은 실용적이지 않다.

세번째 이유
포토샵으로 디자인 하는 것과 UI 개발은 서로 통하는 것이 전혀 없어 보인다. HTML&CSS가 개발자들을 위한 도구라기 보다는 디자이너를 위한 도구라는 사실은 논쟁의 여지가 있어 보인다.
예를 들면, 집을 짓고 싶어하는 건축가가 디자인이 된 후에 굴삭기 운전 하는 법, 벽돌 쌓는 법, 목공일 등을 배워야만 하는 것이다. 건축가와 웹디자이너를 비교하는 것이 문맥상 전혀 말이 안되는 것은 아닐 것이다. 하지만, 나는 웹사이트를 디자인 할 때, 포토샵에서 디자인을 한 후에 수시로 HTML&CSS를 이용해 작업을 한다. 이것은 디자인 작업과 UI 개발 작업이 거의 하나로 혹은 동시에 진행된다는 의미이다. 이는 웹과 그래픽 디자인에서나 가능한 것이다. 자동차나 건물을 디자인 할 때는 그렇게 할 수가 없다.
따라서, 만약 당신이 HTML&CSS 작업을 모르는 디자이너라면, HTML&CSS 를 배우라고 압박하는 것처럼 보일테지만, 절대 어렵지 않다. 배워라. 절대 후회하지 않을 것이다.

네번재 이유
디자인 작업과 UI개발 작업 양쪽 모두 많은 시간을 절약할 수 있다. 앞에서 지적했던 것처럼, 처음 적응되면, 전체 디자인 파일에서 변경된 부분만 잘라서 전달 할 수 있을 것이고, 코드에서는 포토샵에서 이미 작업해 놓은 부분만 수정하면 된다.

다섯번째 이유
HTML&CSS를 모르는 디자이너가 HTML&CSS를 배우면, 여러분이 프리랜서를 원하건 정규직을 원하건 보다 다양한 일자리가 생길 것이다. 내가 UI 개발을 배운 가장 큰 이유 중 하나는 UI개발을 모르는 디자이너들에게는 일자리를 구할 수 기회가 그다지 다양하지 못했기 때문이다.

결론
특히 대형 프로젝트에서 사이트의 업데이트를 위해 많은 시간을 보내는 디자이너들에게만 유용한 것이 아니라, 사이트에 있는 콘텐츠가 어떻게 보여질 것인지에 대해 고민하는 디자이너들에게도 기본적인 HTML & CSS를 알고 있으면 훨씬 더 좋은 결과를 얻을 수 있을 것이라고 생각한다.

여러분들의 생각은 어떤가?

이상의 내용이 링크에 있는 글의 내용이다.
글에 대한 개인적인 생각은 별도의 포스팅으로 정리해 보려고 한다.

to be continued..

번역 작업 중.. 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 에 있는 정말 유용한 포스팅들을 보고 있는 느낌이랄까..

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

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

이글루스 홈 BI 개편, 그리고 W3C Markup Validation Passed

dduck — Tue, 07 Apr 2009 17:23:40 +0000

2009년 4월 7일 이글루스 BI와 함께 메인 페이지가 개편되었다.
새로운 느낌의 BI와 함께 개편된 메인페이지는 기존의 페이지보다 뭔가 정돈된 느낌이다.

깔끔하고 명랑한(!) 느낌의 BI와 함께 개편된 메인페이지.
무엇보다도 기쁘게 생각되는건 W3C Markup Validation 통과했다는거.

네이트 메인 페이지의 W3C Markup Validation 통과에 이어 또 하나의 기쁜 소식이다.
그렇지만 통과한 사실보다 더 중요한 것은 한번 통과한 validation이 지속적으로 유효할 수 있도록 유지해 나가는 것이라 생각된다.

어떻게 보면 당연한 일일 수도 있겠지만, 단순히 UI개발자만의 노력이라기 보다 관련된 모든 분들의 노력의 성과가 얻어낸 결과이기 때문에 더 의미가 크다고 생각한다.

국내의 많은 사이트들이 이미 Markup Validation을 통과하고 있는 시점에서 조금 늦은 감이 있는 것은 사실이지만, 이제 시작은 되었으니 메인 페이지들 뿐 아니라 개편되는 모든 서비스 페이지들도 가뿐(!)하다는듯 validaton 통과 릴레이가 지속적으로 이어질 수 있으리라 확신한다.
급하게 가기 보다는 차근차근 내실을 다지며 한걸음씩 전진할 수 있게 되길 바란다.

Opera 9.5

dduck — Sun, 15 Jun 2008 10:19:04 +0000

더 많이 착해지고 이뻐진 Opera 9.5 +_+

더욱더 기본에 충실해지고 간결하고 깔끔해진 인터페이스, 그리고 부드럽게 바뀐 스크롤 등등.
맘에 드는게 한두가지가 아니네~

잠자리도 그렇고~