[Mobile] iOS 사파리의 배경 이미지 렌더링 버그 (iOS Safari 의 background image rendering Bug)

얼마전입니다. apple 에서 iPad 2 를 내놓았습니다. 이전 버전에 비해 엄청난 혁신은 없지만 전/후면부 카메라와 2배의 성능향상, 9배의 그래픽성능 향상이 있고, 무엇보다 많이 가벼워진 무게가 구매하고픈 욕구를 매우 많이 충족시켜주고 있습니다. 이제 한국에도 4월중에 발표한다고 하는데요. iPad2 를 통해 국내 타블렛 시장도 좀 더 활성화 될 것을 예상하고 있습니다.

그런 측면에서 오늘은 모바일 브라우져의 대명사인 iOS의 사파리에 대해서 이야기 해보도록 하겠습니다. 그 중에서도 모바일 사파리의 배경 이미지 렌더링에 대해서 이야기를 할 것인데요. CSS 스타일을 할 때 CSS - IR 기법을 많이 사용하게 됩니다. (IR:Images Replacement, 배경 이미지의 위치를 조정해서 이미지를 나타내는 기법) IR 기법을 사용하여 작업을 하게 되면 이미지 렌더링 속도를 향상시킬 수 있습니다. 그래서 많이 사용하는데요. 모바일 사파리에서는 배경 이미지를 사용할 때 이상한 현상이 발생합니다.

IR기법의 핵심은 영역에서 원하는 영역은 보여지게 하고 원하지 않는 영역은 보이지 않게 하는 것입니다. 예를 들면 width, height 가 각각 100px 인 박스가 있다면 그 뒤에 배경으로 더 큰 이미지를 설정하고 그 것의 위치를 조정해가며 다른 화면을 나타내는 것입니다. 그럴려면 이미지가 정확하게 표현되어야 하는데요. 그런데 iOS에서는 약간(?) 이상하게 렌더링 됩니다.

말이 필요 없겠지요? 우선 이미지를 확인해보시면 될 것 같은데, 이미지를 확인하시기 전에 알아두셔야 할 것이 있습니다. 연두색 박스는 확인해야 할 영역을 나타내는 것이고, 유심히 보셔야 할 곳을 파란 박스 입니다. 배경으로는 가로, 세로 200px 의 박스를 넣었는데요 붉은색 배경 가운데 가로세로 100px 의 박스가 있습니다. 다음의 그림을 보시면 이해가 편하실 겁니다. 

 
저렇게 생긴 이미지를 width, height 가 각각 100px 의 배경으로 넣고 background-position 속성을 이용해서 해당 이미지의 위치를 약간 수정해주면, 100px 의 상자안에 파란색 부분만 보여지게 할 수 있겠죠? 이건 뭐 보실 것도 없이 당연히 그렇게 됩니다. 직접확인 해보셔도 좋을 것 같네요.

그런데 iOS에서는 이렇게 당연한 것이 조금은 다르게 나옵니다. 아래의 그림을 확인해보시면 보실 수 있는데요. 무엇을 보시면 되냐면, 이미지의 경계 부분에 가려져야 할 붉은 색 부분이 번져 보입니다. 별거 아니라고 생각하실 지도 모르겠는데, 어떠한 상황에서는 정말 큰 영향이 있을 수도 있습니다.

(아이패드에서는 이렇게 렌더링 됩니다.)

(그리고 아이폰에서는 이렇게 렌더링 됩니다.)

이 것을 볼 때, IR 기법을 사용할 때는 반드시 사용하려는 이미지 사이에 공백을 반드시 주어야 합니다. 너무 간단하게 결론이 나는데요. 아주 간단하지만 꼭 지켜야 할 문제 인 것 같습니다.

사실 이 사항을 발견하고 이 문제에 대해서 고민도 많이 하고 어떻게 포스팅 할지 이렇게 저렇게 구성도 많이 해보았는데 다 작성하고 보니 너무 부실하게 완성이 된 것 같네요. 너무 오랜만에 갑자기 포스팅을 하려니 적응이 잘 안되는 것도 같습니다. 어찌 생각하면 이 문제는 포스팅을 할 만큼 중요한 문제도 아닌 것도 같구요. 하지만 이러한 문제들은 한번쯤은 집고 넘어가는게 나중에 작업할 때도 도움이 될 것이라고 생각합니다.