CSS만 작성하면 스킨이 나오는 이글루스로 간단하게 만들어보았다.
제작시간: 약 하루? 어제 반나절 + 오늘 반나절
스케치로 만든 목업이다. 사용후기는 여기를 참고
그냥 평범한 1140 그리드 스킨이다. 딱 보면 느낌 알겠지만 반응형이 아니다. (애초에 지원할 이유도 없음)대신에 실험삼아 요새 핫한(?) CSS3 태그를 써 보았다.
Backdrop filter
조니 아이브의 주도 하에 애플 제품군에는 새로운 디자인 언어가 적용되었다. 플렛 디자인이라고 불리는 이것은 기존의 실물을 흉내내던 스큐어모픽과는 달리 형광톤의 컬러와 블러 레이어를 통해 경계를 나누는 방식이다. 이후 iOS와 macOS의 서리낀 유리효과를 표현하고자 수많은 웹개발자들이 삽질에 삽질을 거듭하였다.
물론 현재 쓰고 있는 XP1에도 검색창이나 방명록에 서리낀 유리 효과가 적용되어있다. 물론 이것은 오만가지 편법을 동원하여 적용한 것이라 퍼포먼스도 제대로 나오지 않고, 엄청 버벅거리는, 그저 기믹이다.
하지만 웹킷 엔진이 업데이트가 되면서 Backdrop filter가 추가 되었다. 이를 사용하면 디자이너들의 고대했던 서리낀 유리효과를 마음껏 쓸 수 있다! 기존의 css 필터의 경우 이 효과를 지정하려면 페이지 전체를 블러 처리 하는 것 말고는 딱히 대안이 없었다.
그래서 현재 블로그 스킨에 morphing search 스타일 배경으로 블러 효과를 넣은 것을 보면 알겠지만 이 방법이외에는 css 필터의 특성때문에 구현이 불가능하다.
아직까지 지원하는 브라우저는 macOS 시에라 (10.12) 사파리와 iOS 9 사파리 밖에 없다. 하지만 추후에 크롬과 파이어폭스도 적용이 될 것이라고 본다. 또한 엣지도 적용될 가능성이 높다.
왜냐면 마이크로소프트가 현재 윈도우10의 대대적인 UX 수정을 계획하고 있기 때문이다. 프로잭트 네온이라고 불리는 이것은 마치 현재의 macOS 처럼 OS 전반에 서리낀 유리 효과를 말 그대로 퍼붓는 업데이트이다.
이렇게 되면 마이크로소프트 웹사이트 디자인도 바뀔 것이고, 분명 이 backdrop filter 가 필요할 것이므로 빠른시일내에 엣지에서도 찾아 볼 수 있을 것이다.
현재 크롬은 까나리에서만 써볼 수 있는데, 아직 지원이 그렇게 깔끔하지 못하다. 가장 제대로 표현을 해주는 것은 역시나 사파리.
동영상을 보면 알겠지만 정말 매끄럽게 랜더링이 된다. 그에 비해 크롬은 필터도 적용이 안되는데도 버벅버벅….
Position:Sticky
얼마전에 매튜님의 포스팅을 보고 비로소 알게된 것이다. CSS3 신기술 관심사는 grid 밖에 없었는데 이 sticky도 도입되면 상당히 유용하게 써먹을 수 있을 것 같았다.
그러나 실전에서 써보니 생각보다 그리 편하지 않았다. sticky는 해당 컨테이너 안에서만 움직이게 된다. 스킨 다지인 당시 초기 목표는 상단 헤더에 있는 메뉴바가 스크롤을 내리게 되면 창 상단에 붙어서 내려오게 만드는 것이었다. 참고로 이글루스는 자바스크립트 사용이 원천 금지이기 때문에 sticky nav 를 구현하는 것은 불가능에 가깝다. 하지만 헤더 영역내에서만 움직일 뿐 스크롤을 아무리 아래로 내려도 요소가 내려 오지 않았다.
결국 sticky요소는 기존의 position:fixed와 JS로 구현하는 sticky nav를 완전히 대체하게는 힘들 것으로 보인다.
backdrop filter는 생각보다 정말 마음에 든다. 사실 iOS에서 조차도 블러 효과 떄문에 가끔씩 버벅거리는 것을 경험한적이 있어서 상당히 부정적이었는데, 웹킷엔진이 최적화가 잘 되어있어서 그런지 생각보다 잘 나왔다. 어서 다른 브라우저에서도 prefix 없이 사용가능하게 되었으면 한다.
