스마일게이트 서비스개발팀에서 작성한 최적화 이슈에 관련된 발표 자료를 공유합니다.

1. 웹사이트 최적화 이슈 – 이미지와 폰트 편Copyright ⓒ2002~2010 SmileGate ,Inc. All right reserved.

2. 작성이력

3. 최적화 방해의 주범 중 한가지는 다수의텍스트 이미지최적화 방법의 일부 중서버의 요청횟수를 줄이는 방법Copyright ⓒ2002~2010 SmileGate ,Inc. All right reserved.

4. 매년 증가하고 있는 스마트폰 유저도모바일로웹서핑정보습득의 편리함으로 인한 모바일웹서핑 시간이 매년 증가하고 있는 상태최적화의 중요성Copyright ⓒ2002~2010 SmileGate ,Inc. All right reserved.

5. 해결책은CSS Sprite 기법 사용Copyright ⓒ2002~2010 SmileGate ,Inc. All right reserved.

6. CSS Sprite 기법의 사용의 장점은눈에 띄는 최적화수십개의 서버 요청횟수를 단 한 개로 줄일 수 있는 엄청난 장점Copyright ⓒ2002~2010 SmileGate ,Inc. All right reserved.

7. 그러나 장점만 존재할 수 없다.단점은백그라운드 포지셔닝의 위치 값을 포토샵을 통해 잰다음 추적 후 CSS파일에 기록하는 과정에 작업시간의 증가운영상의 번거로움자칫 이미지 로딩이 안되면 모든 문구가 표시가 안될 수도 있는 문제가 생김예) 이미지 사용이 잦은 쇼핑몰의 경우는 이미지 서버의 다운으로 큰 문제 발생텍스트 이미지의CSS Splite기법 활용은 일본이 아닌 국내에서 가장 많이 사용.Copyright ⓒ2002~2010 SmileGate ,Inc. All right reserved.

8. 이상하게도 국내에서는이미지의 역할이 차지하고 있는 부분들은사진, 일러스트등+텍스트 이미지Copyright ⓒ2002~2010 SmileGate ,Inc. All right reserved.

9. 한글이 만들어내는 글자 수는 합계는총 11172개가타가나와 히라가나가 만들어내는 글자 수는 합계는총 100개 + 한자영어는 그냥 소문자와 대문자 알파벳몇십개Copyright ⓒ2002~2010 SmileGate ,Inc. All right reserved.

10. 한글폰트의 개발기간이 다른 나라의 비해서길다.Copyright ⓒ2002~2010 SmileGate ,Inc. All right reserved.

11. 다행스러운건 한글폰트의 개발기간이 길어도매년 한글날마다 무료 한글폰트가 개발완료되어 공개된다는 점그 외에 우리글 닷컴의 폰트 http://www.woorigle.com/LfontMall/list_02.phpCopyright ⓒ2002~2010 SmileGate ,Inc. All right reserved.

12. 기사가 자주 올라오는 언론사이트를 제외한 기본 폰트돋움과 굴림나눔고딕의사용율이 점점 늘고 있다.Copyright ⓒ2002~2010 SmileGate ,Inc. All right reserved.

13. 한 개의 잘 만든 유료 웹폰트열 개의 텍스트 이미지 안부럽다.Woff, eot포멧의최대 0.99MB 용량의 폰트다수의 텍스트 이미지VS서버요청횟수~99회메뉴를 디자인한BG몇개 포함하여대략 ~5회Copyright ⓒ2002~2010 SmileGate ,Inc. All right reserved.

14. 지금은 최신브라우저와 구형브라우저에도웹폰트를 적용할 수 있는 상태iOS혹은 그 외의 스마트폰에서도웹폰트적용가능TTF 포멧의 한글폰트의 평균용량은 3~5MB최신브라우저에서 지원하는 WOFF 포멧용량은0.99MB 안팎IE6~8에서 지원하는 EOT 포멧의용량도 0.99MB 안팎Copyright ⓒ2002~2010 SmileGate ,Inc. All right reserved.

15. CSS Sprite +IR기법 + 대체 텍스트 제공 고민 안해도 되는행복한 상상Copyright ⓒ2002~2010 SmileGate ,Inc. All right reserved.

16. 그러나 텍스트 이미지의요청 횟수를 줄일 수 있는 또 다른 방법이 있다.그건 바로!Copyright ⓒ2002~2010 SmileGate ,Inc. All right reserved.

17. 애플스토어의 메뉴!!!이미지를 사용안했으며웹폰트도 사용하지 않았다.어떻게 제작했을까?http://www.apple.com/Copyright ⓒ2002~2010 SmileGate ,Inc. All right reserved.

18. 이미지 파일 Base64인코딩 방식http://firejune.com/1383/%EC%9D%B4%EB%AF%B8%EC%A7%80+%ED%8C%8C%EC%9D%BC%EC%9D%84+Base64%EB%A1%9C+%EC%9D%B8%EC%BD%94%EB%94%A9+%ED%95%98%EA%B8%B0?stag=CSSCopyright ⓒ2002~2010 SmileGate ,Inc. All right reserved.

19. Firejune말씀 인용역시나 부작용이 있네요. 과하면 독이 된다더니, 사이트에서 사용되는 모든 이미지를 인코딩할 경우 css파일의 용량이 무려 400kb에 달하면서 페이지 로딩 속도가 오히려 감소하는 현상이 발생하였습니다. E7이하 브라우저에서는 불필요한 Data URI정보를 들고 있게 되어 더욱 느려진다.

20. 그래픽 디자인 유지/보수가 어렵다. 변동사항이 생길때 마다 인코딩뭐든지 과하면 독이 된다.Copyright ⓒ2002~2010 SmileGate ,Inc. All right reserved.

21. 제일 편한건 폰트최신브라우저에 대응할 수 있는 woff포멧IE9를 제외한 이하 IE브라우저에는eot포멧한글폰트를 사랑합시다!Copyright ⓒ2002~2010 SmileGate ,Inc. All right reserved.