본문 바로가기

html5

티스토리의 의미 심장한 공지와 향후 나아갈 방향 예상 얼마전(8.24) 티스토리가 이런 의미심장한 공지를 올렸다. 결론은 버킹검이 아니라 결론은 IE10 미만의 지원을 버린다는 것. 개인적으로는 11, 아니 엣지 이하는 버렸으면 하지만 현실적으로 특히 헬조선에는 아직도 윈도우7 사용자가 창궐하고 있고 대다수가 IE10 버전을 쓰고 있다. 11 버전도 윈도우7에서 설치가 가능한 것으로 알고 있으나 자동 업데이트 항목은 아닌 것으로 알고 있다. IE10도 병신이긴 하지만 그래도 HTML5를 어느정도 지원하고 있다. HTML5test - How well does your browser support HTML5?The data above is compiled from automatically submitted test results. It is possible y.. 더보기
티스토리 새 관리 티저샷 심층 분석 새 티스토리 공지는 다음의 새 디자인언어를 따르고 있다. 관리는 2011년 이후로 바뀐게 거의 없다. 모체인 텍스트 큐브는 꾸준히 관리 화면을 업그레이드 해왔던 것 과는 매우 대조적인 행보이다. 새 공지의 경우 드디어 맑은 고딕이 기본 폰트로 들어간다. 드디어!!! 이게 얼마나 환호할 일이냐면, 나 같은 경우 5K 모니터를 쓰고 있는데 클리어타입을 지원하지 않는 돋움 / 바탕 / 굴림으로 글자가 표시될 경우 모니터에서 읽을 수가 없다. (실제 스크린은 스크린샷 보다 더 끔찍하다.) 계정관리라는 부분이 있는데 이게 버튼인가 의심스럽다. 사진으로 보기에는 기존에 존재하던 블로그 변경 메뉴가 사라졌다. 이건 개악이라고 봐야 할듯 오른쪽 상단에는 알림 메뉴가 생겼다. 이전에는 알림메뉴가 공지 메뉴중 하나였으나 .. 더보기
티스토리 에디터 리뷰 오랜만에 포럼에 접속해서 돌아다니다가 Joo님이 올리신 티스토리 에디터를 발견했다. 예전부터 Markdown를 지원하는 티스토리 에디터가 있었으면 좋겠다고 생각을 했는데, 역시나 사용자가 개발자가 되는 티스토리의 전통답게 능력 좋으신 분이 직접 만들어 주셨다. 분명 예전에 내가 포럼에 마크다운 지원 기능 생겼을때 마크다운 기능 넣어달라고 건의를 했고 운영진도 긍정적으로 검토한다고 답변주었다. 나 이외에도 다른 블로거 분들이 마크다운 지원을 많이 요청해주셨으나 일잘하는 티스토리 답게 아직도 감감 무소식이다. (그래도 몇달전에 에디터에 해더 변환 기능은 추가 되었다. Ctrl + 1~4 예전에는 HTML 편집기로 직접 H1, H2,로 변경해줘야 했다.) 하지만 누가 헤더 변환 기능을 원한다고 했는가... #.. 더보기
새로운 시도 - XP1 1.0.0a 테스트 블로그에서는 엄청난 버전업을 하였지만 주사용 블로그에 처음으로 적용하는 것을 버전 1로 사용했다. 1.0.0 알파 버전이며, 최대한 버그를 많이 잡는다고 잡았는데도 여전히 버그가 산더미 처럼 나오고 있다. (...) 원래 4월에 작성한 글인데 적다보니 끝도 없이 글을 쓰게 되어서 발행을 치일피일 미루다 이제서야 올린다. XP1 이라는 이름의 기원사실 프로토타입이라는 단어를 굉장히 자주 썼다. 3번째 만든 자작스킨의 이름도 프로토타입이다. 실험정신이 투철하다 보니 이것저것 이상한 것 집어넣고 정당하기 위함 일까? 본 스킨에 쓰인 XP라는 이름의 근원은 윈도XP가 아니다. 윈도XP는 eXPerience의 준말이다. EXP라고 하면 경험치같아 보일까봐 XP라고 지은게 아닐까. 윈도우 경험치 에디션. X.. 더보기
Strada - 스킨위자드 되는 티스토리 반응형 스킨 왜 이 스킨을 만들었느냐... 라는 질문을 받았다는 가정하에서 이실직고 하자면 단지 ‘스킨위자드가 되는 반응형 스킨을 한번 만들어보고 싶었다’고 밖에 말씀을 못 드리겠습니다. ㅋㅋ 어짜피 스킨 위자드 적용할꺼 Hare에다가 스킨위자드 기능만 끼워넣어볼까... 라는 생각도 했지만, 이미 만들어 놓은 구조 수정하기도 여러모로 귀찮아서 그냥 새로 스킨을 하나 만들었습니다. -_-a 요즘 사진이나 영상 위에 흰색으로 글씨 쓰는게 대세라서 그 대세에 발맞추어 심플하게 뽑아보았습니다. 진짜 별기능없고 초간단이기 때문에 제작시간도 약 4시간? 쯤 걸린 것 같네요. 막상 만들고보니 계획 했던것보단 이쁘게 나와서 나름 흡족합니다. 특징1 반응형 스킨 주제에 무려 구닥다리 티스토리 스킨위자드가 됩니다! 특징2 글씨가 흰색.. 더보기
Strada - 스킨 위자드 사용가능한 최초의(?) 반응형 스킨 요즘 커피숍들 같은데 보면 흰색 마커로 유리에 그림을 많이 그리더군요. 요즘 대세가 이미지 위에 글씨 쓰는걸 증명이라도 하듯 비미오의 영상이나 워드프레스용 스킨들도 이런류의 스타일을 적용하는 것을 흔히보고 있습니다. 그래서 대세에 맞추어 아예 잡스러운 색은 하나도 안쓰고 오로지 흰색만 사용하여 스킨을 한번 만들어 보았습니다. 티스토리에서는 skin.html과 style.css 수정을 지원합니다. 그러나 이러한 방식은 매우 하드코어하기 때문에 코드만 보면 울렁증을 일으키는 일반인에게는 그다지 적절하지 못한 방식입니다. 그래서 티스토리가 고민의 고민을 한 끝에 내놓은 것이 스킨 위자드 입니다 만… 생각보다 이게 그리 좋지 않습니다. 기껏 수정가능한 부분이라 해봤자 배경이나 타이틀의 배경, 높이, 글꼴, 색상.. 더보기
Mirage - Advanced tistory skin Mochi 라는 것을 들어보신 분은 제 생각에 많이 없을 것 같습니다. 모바일 운영체제 UX중에서 가장 뛰어났던 WebOS의 리디자인된 프레임 웍이 Mochi입니다. 2011년에 개발이 되었으나 HP가 WebOS를 포기 함에 따라 묻혀버린 비운의 프레임 웍입니다. 그러나 2014년 오픈소스화 되면서 소스코드가 일반에 공개되었습니다. 이 공개된 소스코드에 나타난 Mochi의 디자인이 너무 완성도가 높아, 비슷하게 블로그 스킨을 안 만들수가 없었습니다. (저는 죽으나 사나 팜덕후니까요) 최대한 비슷한 느낌을 살리기 위해서 이전에 없던 여러가지 시도를 해보았습니다. 아코디언 사이드바 사이드바 위젯들이 평상시에는 접혀있다가 선택시에 펼쳐지게 되어있습니다. 화면크기에 따라 바뀌는 메뉴 상단 메뉴는 화면크기에 따라.. 더보기
내가 부트스트랩을 쓰지 않는 이유 여태 까지 여러 종류의 블로그 스킨을 만들어 왔지만 부트스트랩은 단 한번 밖에 쓰지 않았다. 사실 처음에 부트스트랩을 접하게 된것은 거의 모든 해외 웹 디자인 사이트에서 연일 부트스트랩 타령을 하고 있었기 때문이다. 뭐가 그리 대단 한것인지 궁금해서 한번 써보았더니 미리 만들어놓은 요소를 사용한다는게 꽤 편했던 기억이 있다. 그러나 그 이후에 스킨을 만들면서 12개 정도 부트스트랩 이외의 프레임 웍을 써보았다. 그랬더니 가장 만족도가 낮았던 프레임 웍은 부트스트랩이었다. 첫번째. 沒개성 부트스트랩은 GitHub를 통해서 거의 유행처럼 번져나가게 되었다. 디자인 능력이 떨어지는 웹개발자들이 디자인 고민 필요 없이도 쉽게 프로토타입을 제작할 수 있다는 점에 있어 부트스트랩은 상당히 편한 도구이다. 그러나 부.. 더보기
Mirage - 실험용 티스토리 스킨 티저 실험용이라고 해서 베포를 안 하는 것은 아니고요, 여태까지 시도된적 없는 방법을 많이 써봤습니다. 일단 그리드 부터가 16단 그리드 입니다. 그리고 사이드바를 옆으로 땡겨서 왼쪽에 위치되어있고요, 모바일 뷰에서는 아래로 내려갑니다. 이외에도 자동 숨김처리 되는 오른쪽 메뉴와 화면 크기가 줄어들때 자동으로 오프켄버스 메뉴가 뜹니다. 스킨의 전체적인 스타일도 아주 독특하게 만들었습니다. 메뉴는 전부다 아코디언 형태로 숨겨져 있고, 게시글의 코멘트와 트랙백, 태그는 텝 형태로 지원이 됩니다. 그리고 베포용 스킨으로서는 최초로 블루프린트를 제거하는 기능을 적용하였습니다. 이 때문에 적용과정이 약간 귀찮아 지긴했지만 그렇게 힘들진 않으니 초보자도 문제 없이 설치가 가능하리라 봅니다. 덕분에 반응형 스펙을 완벽하게.. 더보기
Modern Basic - 티스토리 기본 스킨의 HTML5/ CSS3 버전 여태까지 제가 만든 스킨인 TechAesthetic, Prototype, Congnoscenti를 제외하고 그 이외에 나온 모든 스킨들은 티스토리의 기본 스킨인 Basic 기반으로 되어있습니다. 현재 사용중인 Life is a Journey 스킨도 역시나 Basic 기반인데요, 이렇게 많은 도움을 받은 Basic 스킨에게 작게나마 Tribute를 하기 위해서 뼈대는 그대로 두고 구조만 최신 구조로 바꾸어 보았습니다. 모더나이즈라고 거창하게 이름 붙이긴 했는데요, 주요 개선 골자는 HTML5 시멘틱 구조 도입, CSS3 적용, 레스터 이미지 대신 SVG 100% 적용 입니다. 덕분에 스킨 용량은 157kb 입니다. (이상하게도 미리보기 이미지는 용량을 따지질 않는군요) 티스토리 기본 방식을 그대로 쓰다보니.. 더보기