현재 사용하고 있는 스킨의 버전2를 제작하고 있습니다. Life is a Journey를 제작한 이후로도 여러 사이트를 돌아다니면서 영감을 많이 받았고, 여러가지 신기술도 많이 체험을 했습니다.
버전2를 통해서 이룰 것, 또는 이루고 싶은 것들을 간략하게 적어보겠습니다.
이미지 개수의 감소, SVG의 활용
이 부분은 애플 홈페이지의 영향을 많이 받았습니다. SVG가 혁신 적이긴 하지만 아직 다루기가 쉽지 않아 많이 쓰이지 않고 있는데요, 애플 홈페이지를 가보면 메인폰트인 lucia 이외에 모든 helvetica neue, Myriad Pro로 된 숫자나 문구를 SVG sprite로 만들어 넣는 미친짓(?)을 해놓았더군요. 상당히 인상 깊었고 한번 쯤은 도전해보고 싶은 요소 였습니다. 게다가 SVG는 CSS로 스타일을 바꿀 수 있기 때문에 페이지별 스킨이 적용된 제 블로그에 아주 적합할 것 입니다.
게다가 요즘 고해상도 기기가 늘어남에 따라 일반 레스터 이미지로는 커버하기 힘든 상황입니다. 특히 스마트폰, 테블릿이나 노트북에 이어 이제 PC마저도 4K 대열에 합류함에 따라 고해상도 디스플레이가 도입되고 있는데 표준해상도의 이미지로는 도저히 꼴보기 싫어서 못 볼 정도 입니다. 물론 웹킷이나 파이어폭스의 별도 css를 이용해서 4배로 큰 이미지를 넣을 수 있지만 그렇게 하면 페이지 용량도 커질 뿐더러 제한된 리소스를 낭비하는 꼴이 되어버립니다.
flex box model 적용
CSS3에서 추가된 가장 매력적인 기능 중 하나가 바로 플랙스 박스 입니다. 아직까지는 지원하는 브라우저가 많이 없지만, 대중화가 된다면 더 이상 상용 프레임 웍의 그리드 모듈을 사용할 이유가 없어지고, 미디어쿼리 삽질도 사라질 것입니다. 물론 너무 앞선 기술이다 보니 광범위하게 쓰지는 못하겠고 필요한 곳에만 적절하게, 김대기하게 사용하려고 합니다.
rem 사이즈 폰트 적용
지금도 부분적으로 rem 사이즈가 적용되어있긴하나 완전하지는 않습니다. 여전히 다루기 힘든게 rem이긴 하지만 요즘 대세에 맞춰 적용해보려 합니다.
HTML5 시맨틱 구조 전면 도입
IE fallback 때문에 반쪽 짜리 시맨틱 구조를 사용하고 있었으나 전면 교체에 들어갑니다.
Glyphicon 광범위 하게 적용
현재 몇몇 버튼에서만 사용중이나 글리피콘을 광범위하게 적용할 계획입니다. SVG 보다는 다루기 쉽고 이미지보다는 까다로운게 글리피콘이 아닐까 합니다.
IE fallback 새로 제작
html5shiv를 이용해서 시멘틱 구조를 구형 구조로 인식 시킨 뒤에 1단형 스킨을 새로 만들 계획 입니다.
커스텀 소셜 버튼
현재 소셜 네트워크 버튼들이 너무 꼴보기 싫어서 숨겨 놓은 상태인데요, 요즘은 커스텀 관련 코드가 많이 나와서 SVG 아이콘으로 커스텀 소셜 버튼을 넣을 계획 입니다.
자바스크립트 비동기식 로드
제 블로그 페이지에 보면 꽤 많은 외부 플러그인이 사용된 것을 보실 수 있는데요, 이 때문에 로딩시간에 상당한 손해를 보는 면이 없지 않아있습니다. 그래서 비동기식 로드를 통해서 어느정도 해결을 해보려 합니다.
티스토리 에디터 모든 기본요소의 스타일링 & 현대화
이 부분은 이전 부터 계속 해오고 있는 작업입니다. 여러가지 CSS 꼼수를 적용해서 일단 될때까지 해보는 식으로 하다보니 상당히 진전속도가 느린데요, 아마 언젠가는 가능하지 않을까 라는 생각을 해봅니다.
크로스 브라우징 & 운영체제 최적화
상당히 고민을 많이 하고 있는 부분입니다. 운영체제나 브라우저 별로 폰트가 들쑥 날쑥하게 보이는게 가장 큰 문제 인데요, 여러가지 연구를 통해서 해결을 하려 하고 있습니다. 페이지를 띄우는 것보다 크로스 브라우징시 똑같게 보이게 하는 것이 오히려 더 힘든 것 같습니다.
최적의 타이포그래피 구현
현재 스킨도 많이 연구한 타이포가 들어가 있기는 하지만 여전히 삐걱댑니다. 여러가지 견본을 통해서 가장 보기 편한 타이포와 폰트 스타일을 구현해보려 합니다. 현재 자간이나 문단간격등 여러가지 세부 타이포 요소에 거의 광적으로 집착하고 있습니다.
깔끔한 색 배치
블로그는 내용이 주 목적이지 ‘스킨의 화려함’ 주 목적이 아니기 때문에 본문이 눈에 확 들어 올수 있도록 배려를 하고 나머지 요소들은 반쯤 죽여 놓는 것을 목표로 하고 있습니다. 이를 위해 최대한 절제된 색상을 사용하려고 하며, 완전 검정색은 화면에서 얼룩이 지는 문제가 간혹 있기 때문에 되도록이면 피하고 옵시디언 계열의 색상을 사용하려 하고 있습니다.
사용자 편의성 강화
티에디션에서도 전체 메뉴를 볼 수 있도록 구현 할 계획입니다.
빠르고 덜 삐걱대는 티 에디션
현재 티에디션은 티스토리 기본 프레임웍을 강제로 꺼버리고 자체 프레임 웍으로 돌리는 구조를 취하고 있습니다. 덕분에 이미지도 어긋나게 뜨는 등 상당히 문제가 많습니다. 완전히 해결은 못하지만 코드를 갈아 엎어서 어느 정도는 좀 더 낫게 보이도록 하려고 합니다.
안 쓰는 티스토리 기본 요소는 과감히 제거
티스토리는 타 블로그 서비스와 비교를 해봐도 제공하는 기능이 꽤 많은 편입니다. 그래서 안 쓰는 기능은 전부 덜어낼 계획입니다. 지금도 많이 덜어 냈지만, 더 극단적으로 제거할 계획입니다.
