오늘의 강좌 | Save for web 옵션 알아보기

 

오늘은 조금 깁니다. ^^

 

Save for web 옵션 알아보기                                       

 

이전 장에서 보신 Save for web & devices 란 옵션에 대해서 이번 장에 더 자세하게 알아 보도록 하겠습니다.

 

Save for Web 이란 옵션은 포토샵이 웹이 대세인 시대가 도래하면서 새롭게 추가된 메뉴 중 하나입니다.

 

일반 프린트 물이나 기타 일반적인 그래픽 파일 포맷은 아주 다양하게 존재하고, 각각의 프로그램에 따라서도 확장자가 다릅니다.

 

하지만 웹에서 사용할 수 있는 그래픽 포맷은 한정되어 있습니다.

현재까지 웹에서 사용할 수 있는 그래픽 포맷은 GIF 파일 , JPG 파일 그리고 PNG 파일이 있습니다. PNG 파일인 경우 오래전에 발표된 포맷이지만 공식적으로 사용한지는 얼마 되지 않아서 IE6 같은 브라우저에서는 이전 장에서 보신 것처럼 완벽하게 인식하지 못합니다.

 

이미지 종류에 대해서는 바로 다음 장에 다시 살펴보도록 하겠습니다.

 

 

어떤 이미지를 Save for web 으로 저장하면 나타나는 윈도우입니다.

여기서 하나씩 옵션들을 살펴보겠습니다.

 

 

포토샵에서 웹용으로 특화된 기능이 이 Save for web 이란 옵션이고 이 옵션이 실무에서 많이 사용하기 때문에 자세하게 알아둘 필요가 있습니다.

 

Save for web 옵션에서 보면 상단에 Original | Optimized | 2-up | 4-up 이라는 탭이 있습니다.

 

 

이 탭을 클릭했을 때 마다. 나타나는 화면은 다음과 같습니다.

 

 

각각의 탭을 눌렀을 때 변하는 것이 있습니다 바로 아래에 나타나는 정보들입니다.

그 정보들은 색에 대한 정보와 파일 사이즈에 대한 정보를 나타냅니다.

 Original 화면 하단에 보시면 264K 하고 표시되어 있는 것을 보실 수 있습니다.

하지만 Optimized 하는 화면에는 19.17K 라고 표시되어 있습니다.

또한 Oroginal 에는 없었던 100% dither / Perceptual Palette / 256 colors 라는 항목을 보실 수 있습니다. rm리고 19.17K 항목 아래쪽에 4 sec @ 56.6 kbps 라고 표시되어 있는 것도 보실 수 있습니다.

 

 

 

 

이 항목들을 살펴보면 264K가 의미하는 것은 실제 파일 사이즈를 말하는 것입니다. 그리고 Optimized 에서 19.17K 는 최적화된 GIF 파일인 경우 19.17K 바이트의 사이즈로 용량이 작아진 것을 말하며 이미지가 100% 로 디더링 되었다는 것과  지각할 수 있는 팔레트에 의해 256가지의 컬러만 사용되었다는 것을 의미합니다.

 

여기서 100% 디더링과 선택적인 팔레트 그리고 94가지의 컬러는 사용자가 선택할 수 있습니다.

 

 

위의 그림을 한번 보시면 각각의 선택적인 상황에 맞게 조금씩 변화를 준 것입니다.

 

현재의 이미지는 최소 16컬러만 구현하더라도 원본 이미지에서 크게 손상을 입힐 것 같진 않습니다. 하지만 마지막에 8 컬러만 사용한 이미지는 원본과는 조금 많은 차이를 보이고 있습니다.

 

여기서 옵션 하나를 살펴보겠습니다.

GIF 일 경우에 해당되는 사항입니다

GIF로 변환 시키는 메뉴 아래에 보면 Perceptual / Selective / Adaptive / Restrictive  Custom  Black-White / Grayscale / Mac Os / Windows  라는 메뉴가 있습니다.

 

 

번역하자면 / 지각할 수 있는 / 선택적인 / 적응할 수 있는 / 엄격하게 / 사용자화 / 흑백 / 회색조톤/ 맥오에스 / 윈도우

 

이런 내용입니다 Perceptual 은 인간의 눈에 느낄 수 없을 정도로 변환하는 것을 말합니다. 또한 Adaptive 는 인간의 눈에 적응할 수 있는 정도로 변환하는 것을 말하겠죠. 가장 많이 사용하는 옵션이 이 두 옵션이며, 나머지 메뉴들도 조금씩 미세하게 조정을 해 보시면 그 차이점을 알 수 있습니다.

 

다음 그림을 보시면 4개의 윈도우에 각각 다른 포맷으로 지정한 것을 볼 수 있습니다. 포맷도 다르지만, 저장될 때 파일의 사이즈도 다르다는 것을 알 수 있을 겁니다. GIF 와 PNG 파일인 경우에만 배경이 투명하게 저장 할 수 있다는 것을 염두해 두시고 보시면 GIF 와 PNG 파일 사이트가 유난히 틀리다는 것을 아실 수 있습니다. 즉 PNG 파일 사이즈가 2.5배 정도 차이가 나는 것을 알 수 있습니다.

 

여기서 다시 문제가 발생합니다.

어떨 때 GIF 이미지를 사용하고 어떨 때 PNG 파일을 사용하는 것이 좋을지에 대한 문제가 발생하는 것입니다.

 

정답은 없습니다만, 제가 보기에 단순한 배경과 밝은 색상을 가진 곳에 투명한 이미지를 사용할 경우에는 GIF 이미지를 사용하는 것이 좋고, 복잡한 색과 어두운 색상을 가진 곳에는 PNG 이미지를 사용하는 것이 좋다는 결론이 나옵니다.

 

 

 

여기서 복잡한 이미지를 배경으로 사용해서 해당 이미지를 배치 시킨 그림을 한번 살펴보도록 하겠습니다.

 

또한 단순한 배경이미지에 해당 이미지를 올려놓고 비교해 보도록 하겠습니다.

그래야만 어떤 상황에서 PNG 이미지를 사용하고 또 어떤 상화에서 GIF 이미지를 사용하는 것이 좋은지에 대한 비교가 가능하기 때문입니다.

 

 

맨 상단의 이미지를 보시면 바로 어떤 이미지가 PNG 파일이고 어떤 이미지가 GIF 파일인지 바로 파악되실 겁니다. 하지만 밑에 있는 그림인 경우에는 어떤 것이 GIF 파일이고 어떤 것이 PNG 파일인지 잘 파악이 되지 않을겁니다.

 

상단의 이미지의 좌측은 예상하신 바와 같이 PNG 파일이고 우측은 GIF 파일입니다. 하단의 이미지의 좌측은 GIF 파일이고 우측이 PNG 파일입니다.

 

이렇게 웹에서 사용할 때 투명한 배경을 사용할 때 색상이 복잡하지 않고 밝은 배경에 사용할때는 GIF 파일을 사용하는 것이 파일 사이즈도 줄일 수 있으며, 전체 웹페이지의 용량을 많이 차지하지 않습니다. PNG 파일인 경우에는 색상이 많고 복잡하고 어두운 배경에 투명한 배경을 사용할 때 사용하는 것이 좋습니다. 하지만 복잡하면 복잡할수록 PNG 파일의 사이즈도 증가한다는 사실은 염두해 두셔야 합니다.

그럼 JPG 파일은 어디서 사용하는지에 대한 의문이 남습니다.

JPG 파일인 경우에는 주로 사진이나 기타 이미지들이 필요한 곳에 JPG 파일을 사용한 것이 좋습니다. 또한 큰 배경화면을 웹사이트에 적용할때도 JPG 파일을 사용하는 것이 파일 사이즈 면에서나 색상 사용면에서 좋습니다.

 

GIF 파일은 나타낼 수 있는 총 색상이 256 컬러로 한정되어 있습니다. 또한 PNG 파일은 생각보다 큰 파일에서는 JPG 파일보다 크기가 상당히 커집니다.

 

JPG  파일은 파일의 용량을 조절할 수 있지만 PNG 파일은 용량 조절을 할 수 없습니다.

 

이런 점을 잘 고려하셔서 웹에서 이미지 파일을 사용할 때 어떤 형식의 그래픽 파일이 필요한지 적절하게 사용하시면 됩니다.

 

현재도 가장 많이 사용하는 이미지 파일은 GIF 이미지 파일이며, 그 다음에 JPG 파일이고 PNG 파일은 특수한 경우에 사용됩니다.  그리고 HTML5 규격에서는 SVG라는 벡터 형식의 그래픽 파일을 지원한다고 합니다. HTML5을 완벽하게 지원하는 브러우저가 지금은 사파리 정도 밖에 없으니, 이런 파일 형식은 논외로 하겠습니다.