대세는 모바일 이다. 백년 전부터 모바일이 대세라는 소리를 귀가 따갑게 들었지만 이제는 정말 모바일 대세다. 어느새 모바일 기기는 64비트 아키텍쳐를 품고 PC와 대등한 존재가 되어버렸다. 그리고 통신망의 발달로 인해서 더 빠른 시간에 웹 페이지를 로드 할 수 있게 되었고, 날이 갈수록 새로 등장하는 기술들 덕분에 웹은 더 다채롭고 빨라지고 있다.
지금 처럼 웹이 격변하는 시기는 웹의 도래 초기 이후로 전무후무하다. 이에 따라 한시도 쉬지 않고 업데이트를 하지 않으면 시대에 뒤쳐질 수 밖에 없는 처지에 놓인 것이 스킨제작자의 삶이 아닐까한다.
이번 업데이트에서는 여러가지 알려진 오류를 수정하였고, 신형 기기지원, 구형기기 지원의 향상 그리고 빠질 수 없는 요소인 속도에 중점을 둔 최적화를 하였다. 그 뿐만 아니라 블로그 앱을 웹 앱 처럼 구동할 수 있는 기술도 적용이 되어있다.
알려진 오류 수정
IE 전용 스킨에서 하단부 footer 너비 적용되게 수정
크롬 hack으로 font smoothing 추가 (0.3px) - 신형 크롬은(35+) 이 규칙을 무시한다.
IE font smoothing 추가
IE9~10 orbit error - 프레임 웍 업데이트로 수정완료
Legacy 지원
IE 전용스킨의 기본폰트 옵션을 돋움으로 변경, 영문은 Tahoma (IE8 이하 나눔고딕의 폰트엘리어싱 문제)
XP에서 최신 브라우저로 접속하는 환경을 고려하여 기본폰트 돋움도 로드 되게 변경
블로그 기능 업데이트
이전에 필요 없다고 사용하지 않았던 기능을 다시 부활시켰다. 미디어 로그는 아직 용도가 불명이라서 문을 닫아둔 상태이나 용도가 생기게 된다면 무언가 넣을 생각이다. 로컬로그 같은 경우에는 요즘 사용 추세가 늘어나고 있는 50/50 레이아웃을 사용하였다. 절반으로 쪼개지고 모바일 화면에서는 아래위로 나뉘는 독특한 구조다. 다음 지도에서 지도 첨부를 하면 갔다 온 지역의 지도가 첨부 된다. 하지만 이 지도 팝업의 스타일이 상당히 끔찍해서 공을 들여서 새롭게 바꾸어 놓았다.
키로그 같은 경우에는 이걸로 위키를 만들어 볼까...라는 생각을 했지만 귀차니즘이 발동하여 그렇게 하지 못하고 있다. 페이지의 경우 PC에서는 4단 레이아웃 모바일에서는 1단 레이아웃으로 나타나게 하였다. 빈 공간이 많아서 어색하긴한데, 독특한 레이아웃 도전도 이제는 한계에 봉착한 것 같다. 같은 HTML 구조를 가지고 CSS만 으로 바꾸는 것도 정말 쉬운 일이 아니다. 더불어 키로그를 클릭 했을때 뜨는 팝업에도 스타일을 적용하였다. 작디작은 폰트에 반응형 지원 따윈 되지도 않는 노답 구조였으나 스타일 적용과 뷰포트 지정을 통해서 반응형 스팩을 지원하게 되었다.
비밀글도 새로 제작하게 되었다. 사실 거의 쓸일 없는 기능이긴 하지만 심심해서 만들어 넣은 것이다.
태그로그의 경우에는 /tag와 /taglog 라는 두가지 주소로 접근이 가능하다. 두가지 주소의 스타일을 다르게 짜볼까 라는 망상을 하였지만 부질없는 짓이라 그만두었다.
코어 프레임 웍 업데이트 5.2.2 -> 5.4.5
- 4단 반응형 레이아웃
- 키로그는 리스트 형태로 제공
- 2단 반응형 레이아웃 (50:50 Radical)
- 절반은 구글 지도 적용
- 로컬로그의 섬네일 지도까지도 스타일 적용
- 지도는 흑백 처리
- 전용 베너 이미지
- 입력 스타일 새로 적용
- 태그 클라우드 형태의 스킨
- 태그 연관글 뷰도 스타일 적용
창작물 업로드 전용스킨 - 크레이티브(?)한 게시물을 올리기 위한 공간을 따로 만들었다. 나름 화사하게 만든다고 노력했는데 그냥 저냥 평타수준인것 같다.
검정 글씨 베너 추가
원래 밝은 이미지 베너는 넣지 않았으나, 이번에 밝은 이미지 지원을 위해서 새로 만들었다.
-Tutorials
-블로그 운영일지
-Notice
-기본 게시글
-비밀글
-검색결과
-카테고리
-아카이브
베너 사진도 물갈이를 해주었다. 안 그래도 이제부터 토할 정도로 많은 눈을 봐야 하고(...) 눈산은 이제 지겹기도 해서 제설(?)해 버렸다.
이외에도 새로 생긴 카테고리나 재분류된 카테고리에 대해서 신규 베너 이미지를 적용하였다.
IE 전용 최적화
X-UA-Compatible 옵션 적용으로 IE에서는 항상 스텐다드 모드로 랜더링 시켜 처리 속도 향상
크롬 프레임이 깔려있는 IE에서도 처리 속도 향상
IE에 관한 글을 많이 읽으면서 유용할만한 기능을 한 두개 추가하였다. 기왕이면 신경조차 쓰고 싶지 않은게 IE이지만, 통계를 보면 생각보다 많이 들어오기에 아예 버리자니 그러기도 힘들다.
humans.txt 캠페인 참여
humans.txt 적용
robot만 텍스트 파일을 읽는게 아니라 사람도 읽어야 한다. 우리는 기계가 아니기에 사람이 읽을 수 있는 텍스트 파일이 필요하다는 것에서 시작한 것이 humans.txt 캠페인이다.
관심있으면 참가해보기 바란다. > http://humanstxt.org/
윈도우 / 윈도우 폰 최적화
윈도우8 이상에서 공유 옵션 사용시 자동으로 대표 이미지 끌어오게 설정
윈도우 폰7, 윈도우8용 타일 아이콘 지원
윈도우 폰 용 MS네오고딕 지원
윈도우8.1, 윈도우 폰 8용 크기조절 가능한 타일 아이콘
윈도우RT, 윈도우8용 스냅 기능 최적화
윈도우 8.1, 윈도우 폰8에서 대형 타일로 적용시 RSS 불러오는 기능 (beta - 안 될수도 있음)
윈도우 폰 기기를 위해서 전용 meta 태그가 추가
Filp Ahead 브라우징 적용 - IE10/11 메트로 버전, 윈도폰8 이상에서 작동. 제스쳐 만으로 다음 페이지로 이동.
윈도우 8 부터 MS의 통합 운영체제가 구체화 되고 있다. 물론 시작부터 그다지 좋지 않았지만 버전업을 거듭하면서 꾸준한 개선을 이루고 있다. 특히 애플의 갑질(?)에 맞서서 MS도 자신의 운영체제나 IE에서만 전용으로 돌아가는 기능을 한둘 공개하고 있는데, 멀티 플랫폼 스킨이라는 목표에 맞추어 이런것들도 빠짐없이 대응하고자 노력하고 있다. 구형 윈도나 IE는 지원하기 귀찮은 존재이지만 새로운 윈도우는 여러가지 신기능을 적용해보고 싶은 마음이 있다.
속도 향상/ 최적화
content-language 적용으로 SEO 최적화
jQuery를 티스토리 서버에서 끌어오는 것으로 전환
종료된 서비스인 다음뷰와 믹시 위젯을 제거
SVG 압축 & 최적화
IE5,6,7,8에서 마크업 오류 수정 + Doctype 미지원이라도 Quirks 모드가 아닌 스텐다드 모드로 실행
CSS Hack 개선
스킨 위자드 활성화
png 패턴을 SVG로 교체
부재중인 사이에 인터넷 세상도 격변을 맞았다. 한시대를 풍미하던 메타블로그도 추억속의 존재로 사그라져 버렸고, 레스터 이미지도 서서히 웹상에서 종적을 감추고 있는 실정이다. 사실 메타블로그는 구글 브라우저 스코어를 낮추는 주범중 하나였다. 이참에 때어 내면서 스코어에 소폭 상승이 있었다. 스킨 위자드용 코드를 넣어서 활성화 시켜 보았다. 물론 이용할 수는 없다. png 패턴을 SVG로 교체해서 최신 브라우저 사용시 더 빠르고 깨끗한 패턴이 나타난다. 구버전 IE를 위한 작업을 하였다. 좀 더 수월하게 접속이 가능하리라 본다.
모바일 지원 강화
앞서 말했듯, 모바일이 대세다. 그래서 이번 업데이트는 모바일 지원에 정말 공을 많이 들였다. 이전에는 웹 클립으로 스마트폰에서 지정했을시에 일반 웹 페이지와 별다른 차이점이 없었으나 이제는 완전한 웹앱 형태로 지원한다. 블로그 웹앱을 홈화면에 설치시 마치 웹앱처럼 별도의 프로세스로 동작하는 것을 볼 수 있다. 웹앱 기능은 꾸준히 업데이트 하여 퍼포먼스를 향상 시킬 계획이다.
원레 모바일 앱은 SPA라고 해서 Single Page Application으로 만들어야 하지만… 티스토리는 그렇게 만들 방법이 없으니 그냥 자바스크립트로 웹앱을 벗어나지 않고 계속 페이지 로드만 되게 해놓았다.
웹 앱으로 사용 방법은 홈 화면에 추가만 하면 된다.
더불어 구버전 iOS기기 뿐만 아니라 최신형 기기까지 모두 웹 클립 아이콘과 로딩스크린을 지원한다. 그리고 iOS7 부터 생긴 특수 요소들을 십분 활용하여 최적화된 브라우징 환경을 지원한다. 아쉽게도 안드로이드 계열은 이런 것이 없어서 특화가 쉽지 않은 편이다.
모바일 최적화 내역
Webapp 모드 용 로딩화면 추가 - 아이폰3GS, 아이폰4, 아이폰5, 아이패드, 아이패드 레티나 (가로&새로)
iOS7 전체화면 옵션 적용으로 업스크롤시에 네비게이션바가 나타나지 않음
iOS7용 다이나믹 폰트 스타일 적용
iOS2~6용 웹 클립 아이콘
iOS6용 웹 클립 아이콘 추가 지원
interword 요소 스타일 적용
iOS7+용 웹 클립 아이콘 (아이폰/아이팟/아이패드)
iOS/안드로이드 용 로딩 스크린 (웹 클립 로드시)
iOS7 사파리 최적화 (속도향상)
iOS/안드로이드에서 웹 클립으로 접속시 Stand-Alone 모드 지원
모바일 접속시 가로/세로모드 폰트 사이즈 고정
Mobile Safari 용 전용 CSS 코드 추가
iOS7.1 safari 미니멀UI 옵션 지원
안드로이드 용 웹 클립 아이콘
iOS8 최적화 및 아이폰6, 아이폰6+ 지원
WebOS(Enyo) 기기를 위한 전용 meta 태그가 추가
모바일에서 작동하는 카카오톡, 카카오스토리, 라인 공유 아이콘 추가
카카오톡 공유 스크립트 추가
크로스 브라우징을 넘어 크로스 플랫폼을 향해 나아가려는 목표를 위해서 여러가지 기기를 지원하기 위해서 힘쓰는 중이다. 각 기기나 운영체제 별로 있는 개발 가이드 라인을 읽으면서 써먹을 만한 부분은 최대한 적용 중이다. 특히 요즘 윈도의 비약적인 발전과 더불어 개선된 웹 표준과 접근성 향상 때문에 건드려 줄 곳이 많아지고 있다.
케케묵은 이야기 이지만 정식 글로 다루지 못했던 v 2.5 내역도 함께 첨부한다.
v 2.5 (‘14.3.31)
티스토리 기본 댓글 스타일 수정
티스토리 정보 표시 버튼 변경 (팝업창은 아직 작업중)
관리자 전용 프로필 추가
손님 전용 프로필 추가
관리자, 손님, 비밀댓글 구분 용 으로 오른쪽에서 라벨 추가
세부 카테고리 스타일 변경
티스토리 에디터 레이아웃 반응형 적용
이미지 캡션 스타일 수정
티스토리 기본 이미지 슬라이더 스타일 수정, SVG 적용
다음뷰 추천버튼 흑백 필터 적용
티스토리 기본 음원 플레이어 흑백 필터 적용
티스토리 에디터 수식 입력에 스타일 적용
티스토리 에디터 외부 정보에 스타일 적용 (완벽 개선)
코드뷰 스타일 수정
티스토리 주석 풍선 스타일 교정
유투브 이미지 대체 플러그인의 플레이버튼을 SVG로 교체
HTML5에서 표준안으로 빠진 Strike 태그 대신 S 태그로 대체중
Textarea는 아래쪽 사이즈만 조절 가능
확장자별 다운로드 아이콘 적용 (zip, deb)
CSS 이미지 스프라이트 재도입
태그 스타일 개선
소셜버튼에 tumblr, flatter 추가
소셜 버튼으로 공유시 페이지 이름이 똑바로 뜨지 않는 현상 수정
본문 폰트 스타일을 시스템 기본폰트로만 적용하게 변경
일부 카테고리에 새로운 웹폰트 적용
구글 페이지 스코어 상승 95 -> 97점
메인화면 슬라이더 속도및 성능 개선
하드웨어 가속 지원
