본문 바로가기
CSS

CSS 이미지 대채 sIFR

by 샷타이거 2009. 9. 4.

sIFR (Scalable Inman Flash Replacement)

flash, script, html, css를 사용하여 사용자의 PC에서 설치 되어있지 않은 디자인 폰트를 웹상에 출력 시킬수 있는 기법을 말합니다.

현재 sIFR 2.0.7 까지 release된 상태이고 네이버 모두의 블로그를 비롯하여 많은 사이트에서 관련 기법을 사용중입니다.

http://www.mikeindustries.com/blog/sifr/

사용예 : http://section.blog.naver.com/sub/PostListByDirectory.nhn?option.directoryAlias=movie

sIFR의 장점

sIFR 은 특정 태그와 class 이름을 기준으로 적용이 가능하며

시스템 폰트에서 제공하지 않는 디자인 폰트를 제공하면서도 StyleSheet를 이용하여 배경 색상과 크기, 글꼴 색상의 제어가 가능 합니다.

플레쉬로 text를 제공하기는 하나 마우스로 글꼴을 긁어 필요 부분을 복사 하여 사용할 수 있고

인쇄시나 Script, Css가 지원되지 않는 환경에서는 기본 Text폰트로 표현 되는 등 기본적인 접근성을 지원하고 있으며

screenreaders에서의 접근도 허용하고 있습니다.

출처 : http://www.mikeindustries.com/blog/sifr

sIFR의 단점

sIFR의 단점으로는 Script로 문서가 로딩시에text flash로 변환 시키기 때문에 이미지나 일반 text요소들이 모두 로딩된 후에 보여진다는 단점이 있습니다.

그리고 플레쉬로 변환된 text부분을 마우스로 드레그 하여 영역을 선택 하였을 경우 원하는 영역을 선택할 수는 있지만

플레쉬 외부에서 마우스 드레그를 시작하여 플레쉬 파일을 포함 나머지 영역까지 선택할 경우는 선택이 불가능 하거나 영역을 잘 못 이해 하는 경우가 잇습니다.

그리고sIFR의 경우 영역의 부분 부분에 강조의 의미를 제공하거나 부분 부분 다른 글꼴을 제공할 수 없는 단점도 가지고 있습니다. 부분 링크도 제공하지 못합니다.

Ex) aaa <strong>aaa</strong> a<span style=font-family:dotum>a</span>a <a href=#>aa</a> (X)

sIFR기법을 사용시에는 플레쉬, Ajax, html 세 업무 파트의 협업이 필요 합니다.

또 한가지 확인 해야 할 사항으로는 변환 할 수 있는 부분의 기준이 tag가 아닌 class이름을 기준으로 변환이 가능한지 Ajax파트에 문의가 필요 할 듯 합니다.

태그를 기준으로 변환을 하게 되면 매번 관련 script를 삽입해 주어야 하지만 class를 기준으로 작업 할 시에는 필요 부분에 class이름을 삽입 하는 것만으로 적용이 가능 하기 때문입니다.

출처 : http://www.allcrunchy.com/Web_Stuff/sIFR_lite/

결론

sIFR 그동안 디자인 구현시 제한이 되었던 글꼴 문제를 해결할 수 있는 좋은 방법이기는 하나 많은 제한 적인 기준을 가져야 할 듯 합니다.

한 예로 아래 url을 보게 되면 한 페이지내에 최대 10개 이하의 부분만 사용을 권장 하고 있습니다.

출처 : http://www.mikeindustries.com/blog/sifr/

위의 내용들을 기준으로 보았을 경우 사용의 기준은 아래와 같습니다.

 1. heading영역

 리스트의 header영역은 제외시키며 페이지에 기준이 되는 상단 제목영역만을 의미 합니다. 그리고

2. 약관페이지나 설명 페이지등에는 삽입을 피합니다

 많은 양의 text를 변환시의 속도 문제점이 생길 수 있고 페이지의 header부분만 변환 한다고 하여도 마우스로 드레그 시에 영역의 선택이 불명확 한 오류가 있으므로 피하도록 합니다.

3. 많은 양의 text나 많은 부분의 변환을 삼가합니다.

  검색 서비스나 이미 많은 양의 기능이 추가 되어 페이지 로딩속도가 민감한 페이지의 경우에는 되도록 삽입을 피하도록 합니다.


출처는http://maxzero.kr/?p=60

사용방법은 http://wiki.novemberborn.net/sifr/

댓글