파이어폭스 이미지 리사이징, 해답이 안보인다

안녕하세요? 나노하입니다.

몇 개월 전부터 네이버에서 굿바이! 익스플로러6 (http://campaign.naver.com/goodbye-ie6) 라는 캠페인을 벌이고 있더군요. IE6의 경우 웹 표준화 문제나 취약한 보안 등 많은 문제가 있다는 건 이미 알려진 사실로, 네이버가 좋은 인터넷 환경을 위해 직접 나서고 있다는 점은 긍정적으로 생각합니다. 그러나 여기서 또 대두되는 IE의 문제..

주위 블로거들의 평을 보면 IE는 악평 일색입니다. IE라는 이름만 거론되면 상스러운 욕이 곁들여지는 건 사실 어제 오늘일이 아닙니다. 그 때문에 제 주위 블로거분들을 보면 IE를 버리고 타 브라우져를 많이 사용하시기도 하고요.

개인적으로 제가 마이크로소프트나 IE에 대해서 악감정을 가지고 있는 건 아닙니다. 속도 측면에서 다소 느리기는 하지만 그 정도는 사양으로 커버할 수 있고, 한국에서만큼은 뛰어난 호환성이라는 강점을 가지고 있기도 합니다.

그러나 인간은 언제나 편리한 것을 추구하는 동물이라고 했던가요? 때때로 일어나는 IE 특유의 오류나 느린 이미지 로딩속도는 브라우져 교체에 대한 갈등을 일으키곤 합니다. 그래서 최근 몇 개월전부터 브라우져 교체를 위한 제 나름대로 꾸준한 노력이 있어왔습니다만, IE에서는 발견하지 못했던 문제들이 타 브라우져에서 하나씩 발견되고 있어서 교체가 쉽지 않은 상황입니다.

현재 그나마 가장 가능성이 있는 브라우져는 모질라의 파이어폭스. IE 다음으로 많은 분들이 사용하고 있는 프로그램이기도 하고, 빠른 속도에 풍부한 부가기능이 인상깊은 브라우져입니다. 호환성에 대한 부분도 IE Tab을 적절히 조합하면 큰 문제는 없습니다.


그러나 파이어폭스의 고질적인 문제이자, 사람들이 생각하기 나름에 따라서는 큰 문제가 아니기도 한 이미지 리사이징에 대한 문제가 남습니다. 일단 아래 사진을 보시죠.

** 반드시 클릭하여 확대하여 보시길 바랍니다. **

모두 현재 제 블로그의 메인 화면을 캡쳐한 이미지로, 위는 IE 아래는 파이어폭스입니다.
확대해서 보시면 정확하겠지만, 슬쩍봐도 위 아래의 사진간의 차이가 존재한다는 걸 알 수 있을겁니다. IE는 이미지 리사이징시에 부드럽게 표현되는 반면, 파이어폭스는 깨져서 표현되고 있습니다.
※ 참고로 IE 뿐만 아니라 크롬, 사파리 역시 IE와 똑같이 표현됩니다.
   오페라는 파이어폭스와 같은 증상 발생 - 夢の島 님 제보

위 사진으로 구분하기 힘드신 분들을 위해서 한RSS의 프로필 사진의 차이점을 같이 보여드리겠습니다. 마찬가지로 위는 IE, 아래는 파이어폭스입니다.

         

  
         

위 문제는 저에 한정되어 일어나는 것이 아니며, 제가 아는 범위내에서는 파폭을 이용하시는 모든 분께 일어나는 현상으로 추측됩니다. 이 문제를 트위터나 모질라 포럼 등을 통해 문의를 넣어봤으나 딱 부러지는 해답은 찾지 못했습니다. 대신 이런 현상이 발견되는 원인은 짐작 할 수 있었습니다.


- 파이어폭스의 이미지 리사이징 알고리듬이 타 브라우져와는 달라서 생기는 현상
- 파이어폭스는 이미지에 한해 안티 얼라이어싱 (Anti-Antialiasing) 이 적용되지 않는다.


안티 얼라이어싱에 관해 짤막하게 소개하기 위해서, 한 인터넷 사이트에 소개되어 있는 글 중 일부를 가져왔습니다.

Aliasing은 우리가 보통 볼 수 있는 비트맵(BMP)이미지를 확대했을 때 계단 현상이 일어나는 것을 볼 수 있습니다. JPG, GIF도 압축이 들어갔을 뿐 결국은 비트맵 이미지의 하나죠.

계단 현상이 일어나게 되면, 참으로 보기 싫습니다. 아무리 확대해도 계단 현상이 일어나지 않는 것은 벡터 이미지이지만, 이것을 사용하는 데는 한계가 있습니다. 비트맵 이미지에 비해서 실제감이 떨어지기 때문입니다.

그래서 비트맵 이미지의 계단 현상을 줄이고자 생각해 낸 것이 중간 색상을 넣어 눈에는 부드럽게 이어진 것처럼 보이자는 것입니다. 중간 색상으로 인해서 계단 현상이 현저하게 줄어보이게 되는 겁니다. 이것을 aliasing을 없앤다 해서 anti-aliasing이라고 합니다.

출처 - http://www.vga.pe.kr/xe/tip/43819

위 글을 통해, 파이어폭스의 이미지 리사이징 기능에는 안티 얼라이어싱 기능이 존재하지 않으며, 이 때문에 이미지가 축소되거나 확대되었을 때 부드럽게 표현되지 않고 일종의 계단현상 같이 깨지는 현상이 나타나는 것이라고 짐작해볼 수 있습니다.



문제는 대충 짐작이 가니, 이 때까지 제가 시도해본 해결책들을 적어보겠습니다.

1. 최신 업데이트면 자연스럽게 해결될 것이다.

-- 현재 제가 사용하고 있는 파이어폭스는 3.6.8 최신버젼이며, 실험용으로 최근에 나온 파이어폭스 4.0 베타 1,2,3을 모두 사용해봤지만 버젼 업데이트으로는 해결할 수 없었습니다.

2. 적절한 부가기능을 찾아본다.

-- 부가기능 중 이미지에 관련된 제법 잘나간다는 부가기능은 대부분 설치해봤으며, 일부 안티 얼라이어싱 기능을 조절할 수 있는 부가기능 역시 설치해봤지만 해결 불가.
간혹 IE Tab을 사용해보라고 하시는 분들이 계시는데, 물론 그러면 해결은 됩니다. 다만, IE Tab 쓸바에야 그냥 IE8 쓰느니만 못하다는 게 제 생각입니다.

3. 전문가들에게 문의를 넣어보면 해결해주지 않을까?

-- 한국을 비롯한 외국 모질라 포럼에 문의를 넣어봤지만, 감감 무소식. 그나마 한국 포럼쪽에서는 적절한 부가기능을 찾아보라는 무성의한 대답뿐.




몇 개월동안 이 문제를 해결하기 위해 제가 할 수 있는 범위내에서는 전부 시도해봤지만, 현재로서는 답이 안보이는 군요. 이런 고생을 하느니 차라리 느려도 IE를 쓰는 게 속편하겠다고 생각한 적이 한두번이 아닙니다. 저 정도는 마이너한 문제이니 무시해도 되지 않느냐고 말씀하실 수도 있지만, 이미 IE에 적응이 된 터라 도저히 저 피카소를 연상시키는 이미지를 눈뜨고 볼 수가 없네요.

이 포스팅은 혹시 제가 모르는 부가기능이나, 제가 겪는 문제를 해결하신 분들이 주위에 계시지 않을까 하는 실낱같은 희망을 가지고 적는 마지막 글입니다. 여기서도 해결책이 나오지 않는다면 사실상 파이어폭스에 대한 시도는 사실상 GG네요. 한국에서 살면서 탈 IE 하기가 정말 쉽지 않다고 느끼는 요즘입니다.