7월 초부터 조금씩 개발해오던 스킨이다. 사실 웹 개발에 손을 놓은지가 꽤 되어서 감각을 찾고자 개발을 시작하게 되었다. 최종 목표는 워드프레스 테마. 아마도 루리웹 마이피 > 이글루스 > 티스토리 > 워드프레스 순으로 개발하게 될 것 같다.
각설하고, 이번 스킨의 개발 의의는 오랫동안 우려먹을 수 있는 다용도 스킨의 개발이다. 사실 이 스킨에서 처음으로 css grid를 써보았다. 이전에 css grid에 대한 예제를 수도 없이 많이 읽어 보았지만 실전에서 적용해본 것은 이게 처음이다. 이글루스의 경우 매우 구시대 레이아웃을 사용하고 있어서 사방을 둘러보면 fr / clearfix와 같은 클래스 들이 도배가 되어있다.
무식하게 * 셀렉터로 float를 전부 제거하고 전부 css grid로 교채했다. 사실 flexbox가 나왔을 때도 신세계였지만 grid는 진정한 신세계라고 할 수 있다. 대부분의 css 레이아웃이 float과 clear를 도배하는 거대한 삽질의 역사였으나 css grid로 인해서 이러한 삽질이 한방에 해결된다.
물론 오랫동안 float에 익숙해져 있다 보니 머릿속으로 레이아웃을 그리는 것에 익숙해지기 까지 시간이 좀 필요했으나 익숙해지고 나니 두번다시는 float 쓰던 시절로 돌아가기 싫을 정도로 편했다. 특히 요소 내의 중앙 정렬이 이렇게 간편해질 줄이야… 물론 flexbox도 가능하지만 margin:auto 같은것 안쓰고도 한큐에 grid내 의 모든 요소 정렬이 가능하니 완전 개꿀이었다.
이번 스킨의 접근이 다른 스킨들과 다른 점 중 하나는 이글루스의 스타일 요소를 거의 대부분다 지원한다는 것이다. 물론 css의 한계로 완전하지는 않지만… 이글루스의 경우 스킨 설정에 들어가면 여러가지 스타일 선택이 가능하다. 그러나 이게 골때리는 이유는 스타일 마다 셀렉터도 다르고 코드 구성이 다르다는 것이다.
불과 1년 전만 해도 flexbox로는 꿈도 못 꿨지만, css grid는 박스 레이아웃의 한계를 벗어나 자유롭게 레이아웃을 구성할 수 있기 때문에 어떤 요소를 선택하더라도 항상 일관된 모습을 보여줄수 있도록 스타일을 작성했다.
완벽하지는 않지만 어떤 스킨 스타일 요소를 선택하더라도 최대한 비슷한 모습을 보여주게 되었다.
뿐만 아니라 무식하게 6개나 되는 메인 화면 스타일도 모두 스타일이 적용 되었다. 이렇게 삽질을 해서 만든 메인 화면 스타일 들은 다른 스킨에서도 우려먹을 생각.
메인화면 레이아웃을 100% css grid로 짰기 때문에 메인 컨테이너 크기만 바꿔주면 자유자재로 레이아웃 크기 조정이 가능하다.
이를 응용해서 1단, 2단, 3단 베리에이션도 제작해 볼 생각. 일단은 2단 기본형을 베이스로 만든 Universal I 을 공개하였다.
