이글루스 스킨 제작후기 - 도대체 빌어먹을 CSS 글자수 제한은 왜 있는 건가 by Estoque

연습삼아 스케치3으로 간단한 목업을 떠보았다. 


간단하게 이글루스 스킨으로 만들수 있을 것 같아 약 하루 남짓 시간을 투자해서 스킨으로 바꿔보았다. 

CSS3으로 코드를 작성했지만 반응형은 지원하지 않는다. 애초에 외부에서 접속하면 뷰어로 보여주는 막장 이글루스에서 스킨을 쓰는게 무슨 의미가 있나 싶기도 하지만...
예전의 스킨들이 IE를 전혀 의식하지 않고 만들었다면, 이번 스킨은 한걸음 더 나아가서 사파리 사용자를 기준으로 만든 스킨이다. (크로스 브라우징? 그게 뭐져 먹는건가여 우걱우걱)
물론 크로스브라우징이 개념없게 됐다는 건 아니고, 일부 요소는 사파리에서만 작동한다. 이번에 실험삼아 webkit에 새로 추가된 css 스타일인 backdrop filter를 처음 사용해보았다. 아이폰7 발표 되었을때 처음 공개된 것으로 알고 있는데, 애플 홈페이지에 들어가면 맥OS에서 보는 것과 똑같은 블러 효과를 볼 수 있다. 나는 처음에 SVG 블러를 어떻게 외계인 고문해서 집어넣었나 했더니 그냥 자기네 브라우저 엔진을 이에 맞게 뜯어고친것. 

backdrop filter는 참고로 매크-오에스 씌에라, iOS9 이상에서만 작동한다. 



지금 크롬이나 파이어폭스에서 보고 있다면 어떻게 적용되었는지 궁금해 할 것 같아서 별도의 영상을 첨부한다.

크롬의 경우 background cover속성 때문에 프레임레이트가 간혹 끊기는 현상이 있다. 크롬 30떄도 있던건데 대체 언제쯤 고칠런지...
참고로 크롬 까나리액젓에서는 실험실 기능으로 사파리와 비슷하게 볼 수 있다. 하지만 블러가 깨지고, 프레임이 튀고 난리도 아님. 

개발중에 제일 빡쳤던 것은 이글루스의 css 자수 제한이었다. 몇자인지는 정확하게 파악이 안되지만 에디터에 나타나는 줄수로 가늠해 볼때 약 2070줄이상넘어가면 그 밑으로는 잘라버린다. 

덕분에 meltdown이나 hare같은 옛날 스킨들은 @import를 동원하고 별 쑈를 다해서 옛날 스킨을 개발했었다. 

지금은 hack도 안 쓰고 그냥 정말 노멀하게 웹표준대로 만들기 떄문에 코드수는 많이 줄었으나, 그래도 그냥 코드를 막 퍼부으면 코드가 잘리는 현상이 나타난다. 
최대한 스타일 요소를 재활용하고 코드를 짧게 쓸려고 하고 있지만 몇가지 불가항력적인 사항들이 있다. 그 대표적인것이 base64 이미지 삽입이다. 이글루스의 경우 html 소스가 오픈되어있지 않고 오로지 css 수정만 허용되어 있기 때문에 인라인으로 임베딩된 이미지 버튼의 경우 css로 오버라이드를 해야 한다. 그렇다고 첨부파일로 파일을 업로드하자니, SVG 속성은 업로드도 안된다. (개새끼들...)

그래서 할 수 없이 svg를 base64로 변환해서 data-url로 css안에 직접 집어 넣어야 한다. 그러나 이렇게 하면 css의 길이가 엄청 길어진다. 따라서 버튼 한두개 정도 svg로 넣으면 자수제한이 꽉차버린다. 

게다가 스킨에디터에 들어갔다 나올때마다 커스텀 이미지용 코드 찌꺼기가 맨 아랫줄에 추가 되면서 자수를 잘라먹는다. (시발...)

스킨은 얼마간 베타테스팅후 공개할 생각. 

배경이미지는 unsplash / 폰트는 나눔바른고딕 (OFL), 호스팅은 jsdelivr / MIT 라이센스 




최근 포토로그