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

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.php Copyright ⓒ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=CSS Copyright ⓒ2002~2010 SmileGate ,Inc. All right reserved.

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

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

22. 감사합니다. Copyright ⓒ2002~2010 SmileGate ,Inc. All right reserved.