홈페이지 업그레이드를 하다가 알게된 것은, Apple 사의 기기들로 홈페이지 접속시 Safari 7.0 이 아닌 버전에서는 제대로 플렉시블 박스가 구현되지 않는다는 점이었다. 특히 처음에 의기양양하게 beta 버전을 만들어놓고 올린 뒤에 아버지에게 자랑스레 '아들이 이런 걸 해냈어요!'라고 선언했는데, 정작 아버지의 새 아이폰 6으로 fluorF.net에 접속하니 '이게 뭥미' 이런 말이 절로 나올 정도로 페이지 상태가 매우 괴악하기 짝이 없었다.

크로스브라우징(cross-browsing)의 필요성을 다시 절감한 나는 집 컴퓨터에 5대 대표 인터넷 브라우저를 설치했다. 인터넷 익스플로러는 원래 깔려있었고, 구글 크롬을 오랜만에 내려받아 설치했다. 이어 애플 사파리, 모질라 파이어폭스, 그리고 오페라 설치를 완료했다. 모든 브라우저에서 내 홈페이지는 기획된 대로 보였다. 오직 하나, 애플 사파리만 빼고. 도무지 이해할 수 없었다. 사과하면 첨단 전자 기기들, 선도적인 표준 지향의 상징 아닌가? 그런데 CSS 의 최신 버전인 flexible box를 왜 제대로 구현할 수 없단 말인가? 시간이 흘러 이제야 그 진상을 파악할 수 있었다.

1. Apple Safari는 7.0 버전부터 CSS3의 대부분의 기능들을 지원한다. 그 이전 버전의 경우 -webkit-이라는 접두어를 모두 달아줘야 한다. 물론 이는 인터넷 익스플로러의 경우 -ms-, 모질라 파이어폭스의 경우 -moz-, 그리고 구글 크롬 역시 -webkit-을 달아줘야 한다는 점에서 큰 문제가 아닌 것처럼 보인다. 그러나...
2. 현재 출시된 아이폰 6의 경우 Safari 7.0 이 아니라 6.x 가 설치된 것으로 보인다. 애플 사의 운영 체제에 대해 아는 게 별로 없지만 가장 최신 모바일 버전인 iOS 8이 이렇다면 지금까지 나온 모든 아이폰, 아이패드의 경우 Safari 6.x 이하이므로 지원이 다 되지 않는 CSS 코드에는 무조건 모두 -webkit-을 붙여야 한다는 결론이다.
3. 크롬 같은 경우 OS와는 무관하게 자기 스스로 판올림을 해서 최신 버전을 항상 유지할 수 있다. 그런데 아이폰과 아이패드의 경우에는 그렇지 않나보다. 도대체 어떤 식으로 진행되는 건지 모르겠지만, 아무튼 Safari 7.0이 출시되었음에도 많은 아이폰 유저들이 Safari 6.x 를 쓴다는 것은 사파리의 버전이 iOS에 연동되어 있거나 모바일이나 태블릿 용 Safari 최신 버전이 아직 안 나왔다는 것이 아닌가 생각이 된다.

이런 결론에 이르니 애플 사파리야 말로 '파편화(framentation)' 문제를 가장 심하게 겪는다는 생각이 들었다. 안드로이드 모바일 운영 체제의 경우 OS의 버전은 상이한 음식이라 하더라도 구글 크롬의 버전은 가장 최신으로 업데이트 가능하다. 그래서 운영 체제는 파편화가 되어 있을지언정 브라우징의 파편화 완전 구식 기종이 아닌 이상 문제는 거의 없다. 하지만 애플의 경우 무려 최신 핸드폰과 태블릿이더라도 Safari 버전이 제각각이라는 것이다! 맥북으로 본 홈페이지와 아이패드로 본 홈페이지, 그리고 Benedikt가 들고 있던 아이폰 3GS 고물폰으로 본 홈페이지가 다 제각각인데 난리 법석도 이런 난리가 없다.

그래서 나는 전격적으로 모든 CSS 파일에 있는 order 코드에 -webkit- 접두어를 단 코드를 새로 다 붙여넣으려고 한다. 그런데 이런다고 문제가 다 해결되는 게 아니다. 애플 6.x 이하부터는 사진첩에 있는 자바스크립트 코드가 잘 안 먹혀들어가는 것 같다. 다른 브라우저들은 아무 문제가 없는데 말이다. 너 도대체 왜 이러니.

For the sake! Of the call!

-fluorF-