제 3번째 자작스킨인 Prototype을 공개합니다. 지금 부터 새 스킨의 주요 기능을 설명드리겠습니다.
HTML5 시멘틱 구조 도입
시멘틱 구조를 통해서 SEO에 최적화 되어있습니다. 이전스킨도 HTML5 기반이었지만 소심하게 쓴것에 비해서 이번에는 Section, Article 시멘틱 태그를 적극활용했습니다.
HTML5, CSS3 웹 표준 검사 통과
본 스킨의 HTML마크업과 CSS스타일링은 W3C 웹표준을 엄격히 준수합니다.
Mobile-First
티스토리 최초의 모바일 퍼스트 스킨입니다. 구성요소를 크기만 줄여서 재활용하는 대신 각 스크린 사이즈에 맞는 요소들을 따로 만들어 더 쾌적한 사용환경을 제공합니다.
*모바일퍼스트: 웹페이지를 제작할때 PC버전의 크기를 줄이는 기존 방식 대신 반대로 모바일 페이지의 크기를 늘이는 방식
Sass 도입
Sass로 스타일링을 하여 간단한 코드 수정만으로도 쉽게 스킨의 색상을 바꿀수 있습니다. 현재 어두운 테마이며, 추후에 밝은 테마를 따로 만들어볼 계획입니다.
Compass도입
Compass의 기능중하나인 Magic-sprite를 사용하여 빠르게 CSS스프라이트를 구성하였습니다. 스프라이트 이미지를 통해서 이미지가 많이 쓰였음에도 향상된 로딩속도를 구현하였습니다.
초대형 스크린사이즈 지원
Prototype스킨은 최대 해상도 1920px에서 부터 최소해상도 320px까지 지원합니다. 갈수록 스크린이 대형화, 고화질화 되어감에 따라 미리 준비하기 위해서 크기를 아주 크게 잡았습니다. 이미 해외에서는 2770 가로폭까지 지원하는 사이트까지 등장하였으나 제 모니터가 그것보다 작으므로 지원하지 않습니다. -_-; 기본 해상도는 1280px이며 그 이상으로는 억지로 잡아당기기 때문에 보기 약간 불편하실겁니다. 원래 계획은 xx-large용 페이지를 별도로 만들 계획이었으나 생각보다 마크업이 까다로워서 잠시 보류중이며, 현재 관련된 문서 탐독을 열심히 하고 있으니 조만간 초대형 스크린 지원도 원활하게 될것입니다.
스마트폰용 별도 메뉴 제공
이전 스킨은 테블릿뷰 이하로 내려가면 아예 메뉴를 지워버리는 막장스러움을 보여주었지만 이번 스킨부터는 오프스크린 메뉴를 지원합니다. 스마트폰으로 접속하신뒤, 별도 메뉴의 특권을 누려보세요!
CSS3 스타일요소 적극사용
IE8이하의 지원은 포기함에 따라 CSS3을 200% 활용하여 화려한 스킨 스타일링을 이끌어냈습니다. (아래 페이지 표시는 이미지 하나도 없이 전부 CSS로 만든겁니다.)
터치스크린 최적화
기존 스킨에는 터치기기에 대한 지원이 별로여서 반응이 굼뜨거나 터치 인식을 잘 못 인식하는 경우가 허다 하였으나 파운데이션5로 이를 개선하였습니다.
검색기능 부활
이전스킨에서 낙동강오리알 신세가 되었던 검색기능이 부활했습니다. 제 마크업 실력이 형편없다는 것을 여지없이 보여줍니다. ㅠㅠ
플로팅 메뉴
플로팅 메뉴로 본격적인 추천 구걸을 시작합니다.
텝 메뉴 지원
밑도 끝도 없이 길어지던 사이드바 길이 문제를 해결하기 위해서 안그래도 멍청한 머리를 열심히 굴려 구상한 방법입니다.
기본 카테고리 부활
너무 못생겨서 이전 스킨에서는 아예 쓰지 않았던 카테고리 메뉴를 부활시켰습니다. 그래도 꼴보기 싫어서 제목을 한번 클릭해야 볼수 있게 해놓았습니다.
새로운 형태의 메뉴 도입
기존 메뉴가 3단이 최고 였다면 이번 메뉴는 원한다면 10단까지도 만들수 있습니다.
어드민용 이미지 닉네임 도입
어짜피 쓰지도 않는 기본 댓글이지만 CSS실력 향상용으로 여러가지 실험을 해보았습니다.
페이지별 스킨
카테고리별 스킨은 CSS압축문제로 아직 보류중이며 대신에 페이지 별로 별도의 스타일링을 시도해보았습니다.
타이포그래피
폰트크기가 제멋대로 였던 이전 스킨에 비해서 rem기반으로 통일성과 버티컬리듬을 구현했습니다.
한글 웹폰트 도입
로딩속도 문제 때문에 이전스킨에서는 적용하지 않았던 한글 웹폰트를 적용합니다. 이제 모든 기기와 브라우저상에서 동일한 한글폰트를 보여줍니다.
되게 이쁜 달력
달력 위젯을 만드는데 꽤 시간을 쏟아부어서 되게 이쁩니다. 그냥 그렇다고요.
