Minicube.kr - 블로그닷컴 Ver 3.03

21세기가 시작된 지 거의 10년이 다 되어가는 2009년에 이르러 네트워크와 인터넷은 놀라운 발전을 이뤄왔습니다. 웹브라우저 시장은 MS의 XX 같은 Internet Explorer가 독점하는 상황을 벗어나서, 지금은 파이어폭스, 사파리, 오페라, 크롬, ... 기타 등등 수많은 브라우저가 서로 웹표준을 향해 경쟁하는 행복한(?) 시대가 되었지요.

하지만, 이런 상황에서도 웹브라우저가 공식적으로 지원하는 이미지 형식은 아직까지는 GIF, JPG, PNG 세 가지 뿐입니다. (BMP는 논외) 그 중에서 가장 돋보이는 포맷은 바로 PNG 인데요...
하지만, 이전에 작성했던 나를 미치게 하는 PNG 라는 포스트에서도 밝혔듯이.. IE6 의 점유율이 10% 이하로 떨어지지 않는 한, PNG의 혜택을 누리기에는 무리가 있습니다.

이런 상황에서 갑자기 8bit PNG 를 활용하자니... 이게 무슨 소린가 하시겠죠? 저도 그랬습니다. IE6 이 버티고 있는 한, png의 p자도 꺼내지 말아야 할 상황이 아닌가! 라고 반문했지요.

png의 포맷은 두가지가 있습니다. 8bit, 24bit 로 나뉘는데요.

1. 8bit : Pallete PNG
   이미지 내의 색상을 index화 하여 256 칼라를 사용할 수 있다는 GIF 와 비슷한 특성을 가지지만, 동일 이미지의 GIF 파일보다 크기가 작습니다. 그 외의 속성은 png와 같습니다. (Alpha Transparency, No Animated)
2. 24bit : Truecolor PNG
   JPG와 같은 1670만 칼라를 지원하며, JPG와 달리 이미지의 손실(열화)이 없습니다. 그래서 이미지의 크기는 JPG보다 크지만, JPG의 최상퀄리티의 파일 크기에 비하면 오히려 작다고 할 수 있습니다. 그외에 역시 Alpha Transparency를 지원하며 애니메이션은 지원되지 않습니다.

PNG 에 대한 자세한 원전은 다음 URL 에서 얻을 수 있습니다.
영어의 압박이 있기에 저도 중간쯤 보다가 말아버렸습니다만, PNG에 대한 모든것이라고 보시면 되겠습니다. ㅠ_ㅠ
http://www.ietf.org/rfc/rfc2083.txt

여기서 주목할 만한 것은 8bit PNG 이미지입니다. GIF와 성질은 거의 비슷한데 GIF보다 파일 크기가 대체로 더 작습니다. 게다가 IE6 에서도 8bit PNG는 GIF와 비슷한 Transparency 를 지원하고 있습니다. 적어도 24bit PNG 처럼 투명 영역이 회색으로 보이는 문제가 없지요. 그래서 8bit PNG를 GIF를 대체하는 웹이미지로 사용할 수 있지 않을까 하는 것이 발상의 전환이죠. ㅎㅎㅎ



물론 이 발상의 전환은 제가 한 게 아닙니다 -_-;;;

다만 PNG 는 이전 포스트에서도 밝혔듯, 각각의 웹브라우저에서 실제 색상은 다르게 표현될 수 있습니다. 직접적인 원인은 PNG 이미지가 자체적으로 감마값을 가지고 있고, 이 값을 해석하는 브라우저가 상이한 결과를 내기 때문인데요...

PNG 파일의 구조는 8bit의 헤더(png이미지라는 것을 알리는 부분)와 여러 개의 chunk 라는 것으로 구성되어 있습니다.
디카로 사진 좀 찍어보신 분들은 아시겠지만 jpg파일도 이미지뷰어로 보면 각종 정보(카메라기종, 조리개, 셔터, WB 등)가 따로 저장되는 것을 볼 수 있는데요, PNG도 실제 이미지 데이터와 별도로 이러한 정보들이 하나의 조각(chunk)으로 저장된다고 보시면 비슷합니다.
색상의 불일치 문제를 일으키는 것은 바로 gAMA chunk 라는 것인데요, 이 값을 제대로 처리하는 웹브라우저가 있고, 이를 잘못 처리하는 웹브라우저가 있기 때문에 색상차이가 보이게 되는 것이지요.

결국, 모든 웹 브라우저에서 같게 표현되게 하려면 gAMA chunk 를 없애는 과정이 필요합니다. 사실 이 chunk를 제거하는 것은 근본적인 해결책은 아닐 겁니다. 근본적으로 해결하기 위해서는, png의 감마 값을 모든 브라우저에서 제대로 지원하고 JPG나 GIF도 이를 지원해야 한다는 뜻인데..... 어렵겠죠? ^^;;;
그래서 조금 우회하여 png 도 다른 이미지와 마찬가지로 하향평준화 시킨다.. 라고 이해하는 것이 좋을 것 같습니다.

이전 포스트에서 새빛 님께서 TweakPNG 라는 프로그램이 있다고 알려주셔서 이 프로그램을 이용하여 샘플 PNG 파일의 정보를 열어보았습니다.



뭔가 굉장히 많죠? IHDR이 png파일의 헤더이며 나머지 bKGD, sRGB, sBIT, pHYs ... 뭔가 못알아볼 데이터들이 많지만 어쨌든 문제가 되는 chunk는 위에 표시한 gAMA chunk입니다.

여기서 gAMA값을 삭제하는 것 만으로 png파일을 웹에서 정상적으로 표기하게 하는 것이 가능합니다. 드디어 문제 해결! 24bit의 트루컬러 PNG는 어쩔 수 없지만 GIF를 대체하여 8bit PNG 를 활용할 수 있어서 상당히 기쁘죠?! ㅠ_ㅠ

but...

웹사이트의 최적화를 위한 길은 정말 멀고도 멉니다. 여기서 우린 당면한 문제 해결에만 급급하지 않고 PNG 파일 자체의 다이어트를 할 수 없을까 고민해볼 수도 있을 것 같네요.
다행히 방법은 있었습니다. gAMA값 외에도 이미지를 표기하는데에 굳이 필요없는 정보들을 삭제하고 데이터영역을 다시 압축하여 최적화시킬 수 있는 툴이 몇가지 존재합니다.

- pngcrush : http://pmt.sourceforge.net/pngcrush/
- pngrewrite : http://entropymine.com/jason/pngrewrite/
- OptiPNG : http://optipng.sourceforge.net/
- PNGOut : http://advsys.net/ken/utils.htm

이것저것 테스트를 해보았는데요, 첫번째 제시된 pngcrush의 경우 명령프롬프트 상에서 실행해야 하는 불편함이 존재했지만 가장 확실할 것 같아 테스트해보았습니다.

실행 방법은 조금 복잡합니다. 간단히 프롬프트 상에서 pngcrush 라고 입력하면 여러가지 옵션이 나오는데 저도 잘 모르겠습니다. ㅠ_ㅠ 아무튼 레퍼런스 코드가 있어서 다음과 같이 입력해보았습니다.

C:\>pngcrush -rem alla -brute -reduce sample.png sample1.png

위 명령을 실행하니 마지막에 나온 정보로 17.16%의 파일 사이즈를 줄일 수 있다고 나오는군요.
그래서 이렇게 나온 파일을 다시 TweakPNG로 열어본 결과 꼭 필요한 헤더와 푸터 chunk(IEND), 그리고 데이터 영역(IDAT)을 제외하고 모든 chunk 가 없어진 것을 확인할 수 있었습니다.



아래 상태표시줄을 확인하면 sample.png 파일의 크기가 13479byte에서 11166byte로 압축되었음을 알 수 있습니다. GIF 에 비해서 PNG 가 용량 면에서 효율적인데도, 덤으로 필요없는 정보를 다이어트 하여 더 크기를 줄일 수 있는 좋은 팁입니다.

이 과정은 조금 복잡하지만, 이 작업을 어느정도 자동화시키면 충분히 실무에도 활용 가능할 것으로 보고 있습니다. 저도 현재 진행중인 모 개편 프로젝트에서 8bit png의 활용과 함께 CSS 스프라이트 등의 최적화 방안을 적용하여 진행하고 있는 중입니다.
적어도 마크업 때문에 사이트 속도가 느리다! 라는 비판을 받으면 자존심 상하지 않나요..?!?! (응?)

pngCrush 프로그램은 다음 URL에서 받으세요.
http://sourceforge.net/project/showfiles.php?group_id=1689&package_id=6641

TweakPNG 프로그램은 다음 URL 에서 받으세요. (Freeware)
http://www.softpedia.com/get/Multimedia/Graphic/Graphic-Others/TweakPNG.shtml

Posted by 아마티

오늘도 보람찬(?) 하루일과를 마치고, 피곤한 몸을 이끌고 잠들기 전에 마지막으로 컴퓨터 앞에 털썩 앉아 헤드폰을 쓰고 플레이한 음악은...

차이코프스키 바이올린 협주곡 D장조 3악장...

아는 사람은 알겠지만, 이 장면은 노다메 칸타빌레 in 유럽에서 잠깐 나왔던 장면. 이 곡이 바로 3악장이다. (원곡은 대략 10분짜리 곡임)
중반까지는 고요함과 편안함을 유지하다가 점점 힘차고 화려한 연주로 분위기를 끌어올리면서, 마지막에 빵~ 터트려주는 피날레는 정말 감동이라고 할 수 밖에 없다. ㅠ_ㅠ

차이코프스키가 유일하게 작곡했던 바이올린 협주곡인 이 곡은 그 유명세 답게 음반도 매우 많은데... 내가 가지고 있는 음반은 야사 하이페츠, 바딤 레핀, 줄리아 피셔 버전... 그중에서도 줄리아 피셔 (Julia Fischer) 버전이 가장 최근작이기 때문에 음질이 깨끗하다.
여성이기 때문인지, 연주 자체에 엄청난 힘이 느껴지진 않지만, 섬세하고 칼같은 연주로 귀를 즐겁게 해준다.

평소에도 즐겨 듣긴 하지만, 정말 몸이 이렇게 노곤한 상태에서 눈 감고 의자에 푹 묻혀서 듣다보면 뭔가 몸이 동동 떠오르는 기분이 드는 것이 중독이 될것만 같다.

오늘도 お休みなさい (안녕히 주무세요~)

Posted by 아마티

CSS에서 사용하는 다중 선택자(Multi Class)란 동일 엘리먼트에 여러개의 선택자(id, class)를 동시에 적용하기 위한 목적으로 여러개의 선택자를 사용하는 것을 말합니다.
CSS1에서 선택자의 개념이 사용된 후, CSS2에서 다중 선택자가 추가되어 사용되고 있는데요, CSS를 사용해 웹사이트를 개발하다 보면 다중선택자는 정말 편리한 존재입니다.

<style>
.foo { background:yellow; }
.bar { border:solid 4px red; }
.foo.bar { border-style: dashed; }
</style>

<div class="foo">foo</div>
<div class="bar">bar</div>
<div class="foo bar">foo bar</div>

아마 기존에 다중 선택자에 대한 자료를 찾아보셔서 알고 계신 분은 foobar 라는 단어가 익숙하실 지도 모르겠습니다. (웃음)
위의 코드는 다중 선택자를 적용하여 foo 클래스와 bar 클래스의 속성을 하나의 엘리먼트에 동시에 적용한 예제입니다. 또한 클래스를 붙여서 선언하게 되면 평소에는 적용되지 않다가 두 클래스가 동시에 적용될 경우에만 별도의 효과를 주는 것도 가능합니다.
이렇게 여러 개의 클래스를 하나의 엘리먼트에 적용하여 서로 다른 효과를 동시에 적용할 수 있고, 이 다중 선택자는 3개 이상도 사용이 가능합니다.
만약 클래스 내의 css속성이 겹친다면 뒷쪽에 선언된 클래스의 css속성을 우선하지만(덮어쓰기 효과) 만약 !important 가 속성에 포함되어 있을 경우 순서에 상관없이 해당 속성을 우선 적용하게 됩니다.

그래서 CSS개발하시는 분은 대부분 다중 선택자를 매우 유용하게 사용하고 있지만, IE6에서는 관련 버그가 존재하기 때문에 사용에 주의해야 합니다. (또 IE6이 문제입니다! -_-)


1. id와 class 를 동시 조합하여 이용시, 나중에 선언된 다중 선택자 구문 무시
이 부분은 NHN NULI의 css가이드를 참고하였습니다. IE6의 경우 id와 class를 다중 선택자로 적용할 때에 나중에 선언된 다중 선택자를 무시하는 버그가 존재합니다.

<style>
#id.class1{background:#f00;}
#id.class2{background:#0f0; width:200px;} /* Does not exist in the IE6 */
#id2.class2{background:#00f; width:200px;}
#id2.class3{background:#0f0; width:300px;} /* Does not exist in the IE6 */
#id.class3{background:#f00; width:300px; font-weight:bold;} /* Does not exist in the IE6 */
</style>
<div id="id" class="class1">class1</div>
<div id="id" class="class2">class2</div>
<div id="id2" class="class2">class2</div>
<div id="id2" class="class3">class3</div>
<div id="id" class="class3">class3</div>

원래 위의 예제에서는 그림처럼 보이는 것이 바른 렌더링입니다. 하지만 IE6에서는 예제에서 2, 4, 5번째 줄에 해당하는 부분을 무시하게 됩니다. 아래 이미지처럼요.



따라서 불쌍한 IE6 을 위해서라면, 붙여서 쓰는 다중 선택자를 사용할 때에는 id와 class를 동시에 사용하지 않고, class만 사용하는 것을 권장합니다.

2. class 조합하여 이용시, 앞에 선언된 class 무시
하지만 불쌍한 IE6을 생각해서 class만 가지고 다중 선택자를 구성했음에도 불구하고, 특정 상황에서는 또 오작동을 해버립니다.
class만으로 다중 선택자를 구성할 때 예를 들어 .foo.bar{} 라는 클래스를 구성하면 IE6은 앞의 .foo를 무시하고 .bar{} 라는 클래스로 인식하게 됩니다.

원래 코드
.foo { background:yellow; }
.bar { border:solid 4px red; }
.foo.bar { border-style: dashed; }
IE6이 인식하는 코드
.foo { background:yellow; }
.bar { border:solid 4px red; } /* border 속성 중 border-style 속성이 삭제됨 */
.foo.bar { border-style: dashed; } /* bar class의 border-style 속성이 오버라이딩됨 */

이를 이미지로 보여드리면 다음과 같습니다.

<style>
.foo { background: yellow; }
.bar { border: solid 4px red; }
.foo.bar { border-style: dashed; }
</style>
<div class="foo">foo!</div>
<div class="bar">bar!</div>
<div class="foo bar">foo bar!</div>

위에서 foo bar 라는 유명한 예제(?)를 보여드렸는데요, 이게 IE6에서 다중선택자의 버그가 있다는 것을 적나라하게 보여주고 있죠. 원래 bar class의 경우 border-style 속성이 solid임에도 불구하고 IE6에선 .foo.bar 를 .bar로 인식함에 따라 border-style이 dashed 로 모두 교체된 것을 확인할 수 있습니다. 1번 항에서 다루었던 버그도 이 버그의 영향이 겹쳐서 생긴 문제가 아닐까 하는데요, 정확히는 잘 모르겠습니다.
이 버그를 회피하기 위해서는 class를 붙여서 선언하는 다중 선택자를 사용하지 않는 것이 최선입니다. 하지만 CSS작성 중의 편의를 위해서 붙여서 선언해야 할 경우엔 뒤에 붙이는 class명을 겹치지 않도록 사용하는 것도 방법입니다.

기존
.dx.class {}
.dy.class {} /* 별도의 class로 인식되지만, IE버그로 dy.class{}만 인식 */
수정(버그 회피)
.dx.classx {}
.dy.classy {} /* 최종 class명을 다른 이름과 겹치지 않는 고유의 클래스명으로 사용 */

이렇게 수정하는 방법은 다중 선택자의 장점을 완전히 무시하는 비효율적인 방법이긴 하지만, 어쩌겠습니까... 이놈의 IE6이 도와주지 않는걸요...

물론, IE7은 위에 나타나는 다중클래스의 버그는 해결하였습니다. 하지만, 표준모드(HTML 4.01, XHTML 1.0)로 동작할 때에만 버그가 나타나지 않게 되어 있으며, Quirks mode DTD로 동작될 때에는 IE6과의 호환을 위해 (또는 미처 쿽스모드 엔진을 고치지 못했을 수도 있죠) 이 버그가 그대로 나타나도록 되어있습니다.

IE6은 언제까지 우리 UI개발자를 괴롭히게 될까요? ㅠ_ㅠ

이 포스트는 NHN WSG(Web Standardization Guide) 블로그와 네이버의 개인 블로그에 함께 연재되고 있습니다.

Posted by 아마티