테스트 블로그에서는 엄청난 버전업을 하였지만 주사용 블로그에 처음으로 적용하는 것을 버전 1로 사용했다. 1.0.0 알파 버전이며, 최대한 버그를 많이 잡는다고 잡았는데도 여전히 버그가 산더미 처럼 나오고 있다. (...)
원래 4월에 작성한 글인데 적다보니 끝도 없이 글을 쓰게 되어서 발행을 치일피일 미루다 이제서야 올린다.
XP1 이라는 이름의 기원
사실 프로토타입이라는 단어를 굉장히 자주 썼다. 3번째 만든 자작스킨의 이름도 프로토타입이다. 실험정신이 투철하다 보니 이것저것 이상한 것 집어넣고 정당하기 위함 일까? 본 스킨에 쓰인 XP라는 이름의 근원은 윈도XP가 아니다. 윈도XP는 eXPerience의 준말이다. EXP라고 하면 경험치같아 보일까봐 XP라고 지은게 아닐까. 윈도우 경험치 에디션.
XP는 멕라랜의 프로토타입에 붙이는 명칭이다. 멕라랜의 경우 시판차를 출시하기 전에 여러대의 XP를 만든다. 이것이 바로 Experiment Prototype. 즉 실험용 프로토타입이다. XP를 통해 여러 테스트를 거친후 시판을 하게 되는 것이다. 일반적인 양산차 업계의 경우 프로토타입에 위장을 시켜 사람이 적은 외딴 곳에서 테스트를 하기 마련인데, 슈퍼카의 경우 시판 될 차량의 컨셉트 모델을 공개하고 나면 거의 외관은 변동없이 나오기 때문에 위장막을 잘 하지 않는다. 위장막은 경쟁사의 디자인 카피를 막기 위함인데, 슈퍼카의 디자인은 대부분 고도로 발달된 금형기술로 수제작을 하기 때문에 마음먹고 배끼기도 쉽지 않다. 물론 테스트 뮬이라고 더미 바디를 쓰는 제조사들도 꽤 있지만 멕라랜의 경우 거의 양산모델 그대로 테스트를 진행하는 것으로 유명하다.
멕라렌의 본사건물에 대한 정보를 찾아보다가 이에 관련된 다큐멘터리를 보고 크게 감명받았다. 태극 형태의 본사 건물은 1991년에 지어진 것으로 현재 기준으로 봐도 초현대적인 디자인을 자랑한다. 다큐멘터리를 보면 이러한 프로토타입들의 모습들이 자주보이는데, 각각 XP1, XP8등 제작 순번에 따른 번호가 부여되어 있음을 볼수 있다. 이전에는 메이저 업데이트후 V2를 붙이거나 아니면 그냥 숫자를 붙였었는데, 이제는 그러한 방식에서 좀 벗어나고 싶어 "XP + 숫자"라는 이름의 형태를 적용해 보았다.
이름에 걸맞게 여러 실험적인 시도를 많이 하였다. 물론 실험적인 시도를 하면서도 모든기기에 최적화된 화면을 뿌려주는 것이 최종적인 목표이다. 현재로써는 최신버전의 크롬/ 사파리/ 파이어폭스 / IE11 / 엣지를 지원하고 있지만 업데이트를 통해 골칫덩어리인 구버전 IE와 그 외의 소수 브라우저에 대한 지원을 강화할 계획이다.
Flex-box의 광범위한 사용
이전에 쓰던 Life is journey 같은 경우 개발 당시만해도 Flexbox의 기술이 많이 무르익지 않았던 시절이라 섣불리 사용하기 힘들었다. 물론 현재로써도 Grid 와 같은 CSS의 신기술이 매우 사용하고 싶었지만 아직까지 Grid는 표준이 제대로 잡히지도 않은 상태라 사용하기 힘들다. Flex-box도 이와 마찬가지 였으나 현재는 거의 모든 브라우저가 다 지원을 하고 있으며, 아니나 다를까 IE11은 몇몇 버그를 제외하고는 사용가능한 수준이다. 최근들어 Flex-box에 관한 글이나 코드들이 많이 올라오고 있어 지금이 Flex-box를 적용하는데 최적기라고 판단하여 많은 곳에 Flex-box를 사용하였다.
Flex-box를 사용하면서 나타난 가장 큰 변화는 Float 요소의 사용이 줄어든 것이다. 예전부터 float와 clear를 도배하면서 사용하며 느낀것은 어쩜 이렇게 CSS는 저급한 언어일까 라는 의문 뿐이었다. 사실상 웹페이지를 구현하기 위해서는 css 말고는 대안이 없는데, 이 마저도 레이아웃을 만드는데 있어서는 형편이 없기 때문. 그렇다고 해서 완전히 float를 걷어내진 않았다. 몇몇 요소는 여전히 float과 clearfix가 도배되어 있다.
Base64 임베딩
요청 횟수를 줄여 좀더 빠른 렌더링을 하고자 base64를 사용했다. 이전까지는 SVG임배딩에만 base64를 사용했는데, 이번에는 폰트와 이미지 까지도 base64로 임배딩 했다. 게시글의 기본 헤더 이미지는 base64로 로드된다.
폰트의 경우 한글 폰트는 용량이 엄청나게 크다. 특히 이 블로그에서 쓰인 Noto Sans의 경우 7가지 스타일을 합치면 110Mb가 넘는다. 이는 1만1천자가 넘는 완성형 한글폰트이기 때문인데, 실생활에서 자주 쓰이는 글자는 2천3백자 정도의 표준형 폰트로 제작이 가능하다. 폰트를 제작하기 위해 여러 곳을 참고 했는데, 하나는 Coderifleman님의 한글 웹 폰트 경량화해 사용하기과 스포카 한 산스 개발 과정 이었다.
이곳에서 착안을 하여 서브셋 폰트 메이커로 별도의 서브셋을 만들었다. Coderifleman님이 만든 서브셋에서 안 쓰는 일문과 일부 기호, 특수문자를 대폭 삭제하여 자수를 2000자 미만으로 축소시켰다. 이를 서브셋 폰트 메이커를 사용하여 직접 별도의 폰트를 만들었다. 물론 기존에 변환되어있는 폰트 파일을 사용하여도 상관 없었겠지만 Noto Sans는 4개의 스타일이 들어가고 Kopub 바탕은 2개 스타일, Montserrat 3개 스타일, Bebas Neue 3개 스타일, Playfair 한 개 스타일 까지 도합 13개의 폰트가 포함 되었다. 폰트가 많다 보니 이를 Base64로 변환하여 CSS에 심으니 폰트 CSS만 해도 4Mb가 넘어간다.
웹폰트는 Woff2의 경우 일부 브라우저는 아직도 지원하지 않는 곳이 많아 Woff로 변환하였고 이를 다시 Base64로 변환하였다. Woff전환은 Font Squirrel의 온라인 변환기를 사용하였고, Base64도 온라인 변환기를 사용하였다.
구글에서 원본 Noto Sans CJK 다운 > 서브셋 폰트 메이커로 추출 > Woff 변환 > Base64변환
다양한 폰트 Weight의 사용
Noto Sans의 경우 모든 스타일을 다 쓰기에는 무리가 있어 200 / 400 / 600 / 800만 사용하였다. 서브셋을 직접 구성하다 보니 폰트의 크기를 훨씬 더 줄일 수 있었고, 이를 통해 여러가지 폰트 스타일을 적용할 수 있었다. 특히 영문 폰트의 경우 숫자와 특문 몇개 그리고 알파뱃만 있으면 되기 때문에 다양한 Weight의 폰트 탑재에 제약이 크지 않았으나 한글 폰트의 경우 용량이 매우 크고 이는 곧 로딩속도의 저하로 이어지기 때문에 신경을 많이 써야 했다.
본문 폰트의 경우 처음으로 Serif체를 도입했다. 원래 메인 블로그에서는 항상 Sans-Serif를 사용하고 있었는데, 이번에는 기분전환 삼아 Serif폰트를 도입했다. 예전에 Serif 폰트가 가독성이 더 뛰어나다는 글을 본적이 있으나 시간이 지나면서 여러 관련글을 읽어보니 근거 없는 낭설이었다. 물론 Kopub 바탕이 워낙 잘 만들어진 폰트라서 그냥 써놓기만 해도 가독성이 매우 좋다. 폰트의 가독성 문제는 Sans-serif냐 Serif냐의 문제가 아니라 폰트 자체의 구성에 달려있는듯.
버티컬 리듬
한국의 웹디자이너들은 거의 신경 안쓰는 부분이다. 사실 이것은 영문폰트에 최적화 되어있는 부분이라서 그렇기도 하다. 왜냐면 한글 폰트는 ascender나 descender가 없기 때문. 하지만 영문으로 된 글을 아예 안 쓸것도 아니기 때문에 버티컬리듬에 어느 정도 신경을 썼다. 버티컬리듬은 아주 간략하게 설명하면 base-line을 설정하는 방법이다. 물론 여기에는 일일이 계산을 해줘야 겠지만 우리에게는 pre-processor가 있지 않은가! Compass의 mixin으로 제공되는 Vertical-rhythm 도구를 사용하였다.
황금비율
사실 나는 황금비율의 신봉자가 아니었다. 얄팍한 눈대중으로 대충 때려 맞추면 되는게 상책이라고 생각했기 때문. 그러나 김종민님의 인터렉티브 웹디벨로퍼 책을 보고서는 황금비율에 대해 여러가지를 찾아보게 되었고 이후로는 황금비율을 체득하려고 많이 노력하고 있다. CSS3에 새로 등장한 Vw와 Vh단위를 적극 활용한 것도 황금 비율 때문이다.
포토샵으로 목업을 만들때 부터 옆에 황금비율 계산기를 끼고서는 열심히 계산, 또 계산을 하면서 구성을 하였다. 가장 대표적인 것은 헤더. 테블릿과 PC화면에서는 황금비율로 화면을 차지하게 되어있다. 덕분에 예전 스킨의 경우 눈대중으로 헤더 크기를 때려넣었으나 지금은 그에 비해 훨씬 안정적이고 보기가 좋다.
폰트도 황금비율을 사용했다. 친절하게도 온라인 황금비율 폰트 계산기가 있어서 적극 활용했다. 폰트 크기는 모바일 / 테블릿/ PC에 맞춘 최적의 값을 찾아서 적용하였는데 이미 기존에 존재하는 사이트들도 많이 참고 하였다. 특히 미디움의 큼직큼직한 폰트 스타일이 좋아 그들의 폰트 사이징 방식을 많이 참고 했다.
모바일 퍼스트
사실 대부분의 웹사이트들이 모바일 퍼스트로 만들어지고 있다. 이전에 Prototype 스킨 부터 모바일 퍼스트를 지향하여 개발해오고 있었다. 그러나 일부 페이지의 경우 PC퍼스트로 개발되어 부족한 부분이 많았다. 그러나 이번 XP1의 경우 모든 페이지가 전부 모바일 퍼스트로 제작이 되었다. 모바일 퍼스트의 장점으로는 PC퍼스트 보다 모바일 화면에서 어색한 요소를 줄일수 있다는 점. 그리고 억지로 PC 페이지를 줄여놓은 듯한 나쁜 인상을 없애 줄수 있다는 것이다. 물론 PC퍼스트 보다 모바일 퍼스트가 더 코딩하기 까다롭고 귀찮지만 완성품이 이쁘게 나오면 그걸로 된 것.
퉤모지
티스토리의 경우 글쓰기에 스티커나 아이콘을 지원했다. 그러나 어느날 스티커 지원이 사라졌다. 물론 지저분하게 스티커로 도배를 하진 않지만 그래도 이모티콘을 쓰면 보기가 좋아야 할 것 같아서 퉤모지를 설치했다. 퉤모지는 트위터에서 만든 오픈소스 이모티콘으로 이 스킨에는 공식 깃헙에서 제공하는 CDN소스를 사용하고 있다. 이모티콘이 보이면 자동으로 퉤모지 SVG로 변환을 해준다.
블러효과
일부 브라우저는 지원하지 않는다. 대표적으로 엣지, IE가 있다. CSS필터 기능은 표준으로 채택은 됐다고 하는데 아직까지는 겍코, 웹킷이나 블링크 계열의 브라우저에서만 정상적으로 사용이 가능하다. 요즘 애플의 영향인진 몰라도 이 블러 효과를 쓰는게 유행처럼 번지다 시피 해서 한번 적용해보았다. 페이지를 감싸는 컨테이너 전체에 블러 이팩트를 주고 나머지 요소는 제외 하는 방식. OSX나 iOS 같이 상태바만 블러를 넣는다던지 하는 효과는 주기 힘들지만 그래도 이 정도로 구현 가능한게 어디인지. 이 스킨에서는 검색기능을 사용할때 블러 효과가 나타난다. OSX 같은 느낌을 내기 위해 비표준 요소인 CSS3 블랜딩 기능도 사용하였다.
드롭케피탈
많이 쓰진 않지만 가끔 쓰기에 기본 스타일로 만들어서 넣었다. 원래 게시글의 스타일은 크게 신경쓰지 않는 편이었는데, 가독성에 신경을 쓰면서 메거진에서 사용할만한 효과를 많이 넣었다. 이는 인디자인을 배우면서 이 쪽 부분에 좀 눈을 뜨게 된 면이 있다. 자의반 타의 반으로 서적을 만들게 되었는데 이때 인디자인을 접해볼 기회가 생겨 이것저것 만지며 출판업계에서 쓰는 많은 요소를 배웠다.
시멘틱 HTML
원래 부터 항상 강조해왔던 것이지만 이번에는 좀 더 많은 부분으로 확대했다. main 태그도 추가 되었고, figure나 figcaption 같은 요소들도 사용했다. SEO를 위한 눈물겨운 노력인셈.
Pantone 컬러
원래 스킨 만들때 개념없이 아무 색이나 색상 피커에서 갖다 쓰곤 했으나 이번에는 Behance 돌아다니면서 접한 여러 프로잭트를 보면서 Pantone 컬러를 사용했다. 물론 인쇄물을 만들 것은 아니지만 지정된 색상을 사용하면 나중에 활용할 곳이 있지 않을까 싶어서이다.
Autoprefixer사용
예전부터 Compass와 CodeKit을 사용하고 있었으나 그 때 당시에는 없던 기능이다. 그도 그럴것이 군머에 있는 2년동안은 웹코딩에 손도 대지 않았다. 뒤늦게 전역하고 나서 보니 세상은 엄청나게 바뀌어 있었고 나혼자만 뒤로가고 있더라. 어쨌든 이 Autoprefixer라는 아주 편리한 기능이 생겼다. 원래 Sass나 Less를 사용해서 vendor-prefix가 있는 요소는 따로 mixin을 쓰거나 해야 했지만 Autoprefixer는 그럴 필요없이 자동으로 prefix를 달아준다. 너무 편하다. 덕분에 SCSS파일이 덜 지저분하게 되었다.
Preloader 사용
원래 프리로더는 잘 사용하지 않는 편이었으나 로드될때 헤더에 구멍이 뚫린다던지, 폰트가 안 뜬다던지 하는 여러요소를 방지하기 위해 프리로더를 달았다. 치일 피일 미루고 있는 속도 최적화 작업을 거치고 나면 화면을 가리는 preloader는 제거할 생각. 상단의 유투브 스타일의 로딩바는 살려둘 생각이다. 티스토리 메뉴의 특성상 페이지 로드가 완료 된후에 사이드 메뉴로 옮겨야 정상적으로 이동이 되더라.
방명록 스타일
이전에는 밑도 끝도 없이 스크롤만 길어지는 형태 였는데 지금은 단일 페이지 형태의 스타일로 변경했다. CSS 꼼수로 적용한 가짜 블러 스타일은 덤.
SVG, CSS 그러데이션
요즘 들어 형광톤의 컬러와 그러데이션의 사용이 늘어나고 있다. 플렛 디자인 운동의 영향을 받은 것일까, 사실 액정 기술이 발달하여 AdobeRGB를 100%에 가깝게 표현하는 디스플레이가 늘어나고 있어 이에 맞춘 추세 같기도 하다. 일부 브라우저에서는 지원하지 않지만 마우스 호버시 SVG에도 그러데이션을 입혔고, 일부 택스트에도 그러데이션을 넣었다.
일관성있는 색상 조합
이미 포토샵 목업을 만들때 사용할 색상 스니펫을 고정해두고 작업을 했기 때문에 과도한 색상 사용은 최대한 줄이고 디자인의 일관성을 살렸다. 뿐만 아니라 색상 데이터를 scss변수로 만들고 전체 스타일에서 공유해서 간편하게 작업하였다.
페이징 별 스타일
검색, 비밀글, 방명록, 메인페이지, 게시글의 화면이 모두 다르다. 이는 기존의 Life is journey 스킨의 독자 기능인 perpage style을 한단계 더 발전 시킨 것으로 제작 당시부터 별도의 페이지를 따로 관리하는 방식을 통해 완전히 독립된 스타일 시트를 사용하고 있다.
비밀글 - 동영상 배경이다. 궁금하면 이곳으로 -> http://est0que.tistory.com/1454
특히 검색이나 태그 검색시에 뜨는 페이지와 카테고리별 보기에 뜨는 스타일이 다르게 설정되어 있다.
추후에 카테고리별 별도 스타일도 부활시킬 계획이다. 다만 이것 말고도 구현해야 할 기능이 무지 많이 있기 때문에 잠시 보류중.
티스토리 툴바 재활용
에물단지 취급받는 티스토리 툴바를 재활용하여 오프켄버스 메뉴에 집어넣었다. 그래봤자 아무도 관심없다는거.
티에디션 teardown
티에디션을 완전분해하여 새로 제작했다. 이전에 쓰던 Life is Journey는 티에디션을 수정하려면 티에디션 오버라이드 코드를 죽이고 티에디션을 수정한 다음 다시 티에디션 오버라이드 코드를 활성화 시키는 웃지못할 짓을 해야 했지만 이번에는 다른 접근 방식을 취했다. 바로 티에디션 수정모드에 들어갈때 사용하는 url 만을 걸러내어 그때만 티에디션 프레임웍을 활성화 시키는 방법이다. 이렇게 하면 티에디션을 언제든지 수정하면서도 별도의 스타일을 쓸 수 있다.
티에디션이 반응형 구현이나 입맛대로 개조하기가 지랄맞아서 그렇지 의외로 쓸만한 기능이 많다. 인기글 표시라던지 카테고리별 글 표시라던지 기존의 퍼머링크 타입의 메인화면으로는 구현할 수 없는(또는 복잡하고 귀찮은) 부분들을 한꺼번에 해결해준다.
특히 이번에는 티에디션에 들어가는 거의 모든 코드를 그대로 옮겨놓아 티에디션에 표시되는 게시글 제목을 변경하거나, 글 요약 수정, 미리보기 이미지 수정등 다양한 티에디션의 기능을 여과 없이 그대로 사용 할 수 있다.
아직까지 구현 시도만 하고 있고 못 구현한 것은 스크롤시 자동 로드가 되는 기능이다. 일부 블로그에서는 티에디션으로 이를 구현한 것을 보니 기술적으로는 불가능하지 않은듯.
반수동 헤더이미지
이전의 경우 헤더 이미지를 설정할 경우 별도의 css코드를 작성해서 넣었다. 물론 서식으로 넣었기 때문에 일일히 입력하는 바보짓은 하지 않았으나 여간 귀찮은게 아니었다. 이번에는 방법을 바꿔서 특정 id가 적용된 사진은 헤더로 보내는 방식을 썼다. 대표 이미지로 설정된경우 별도의 클래스가 붙는 다면 한결 수월하겠으나 아직까지 그런 기능은 지원하지 않기 때문에 여전히 반수동으로 작업해야 한다. 물론 첫번째 이미지를 일괄 선택하는 방법도 있긴한데 이렇게 되면 선택적용이 안되서 불편해진다.
SVG최적화
예전에는 무식해서 SVG를 그냥 가져다 썼는데 요즘은 관련 도구가 많이 생겨 SVG를 쉽게 최적화 할 수 있었다. SVGO라는 툴을 사용하여 잡다한 코드를 다 걷어내고 쉽게 SVG를 넣었다. 상단 로고나 하단 로고는 모두 SVG이다.
해결한 문제
iOS7 모바일 사파리 - vw/vh 버그
일일이 mixin으로 다시 계산해서 넣었다. 사람할짓이 아님...
알려진 문제들
티에디션이 가끔 깨진다. 아무리 고민을 해봐도 해결이 안 되는 문제. 어이가 없는건 게시글을 한번 눌렀다가 다시 메인으로 나오면 정상적으로 뜬다. 아직까지는 원인을 못 찾고 있는중.
IE11 flexbox버그 - 화면만 뜨면 되잖아? 뭐하러 고쳐.
1.0.1 개선 내용
- 추천 글 표시 적용
- 미디어로그 활성화
- 작성된 디스커스 댓글 표시
- Syntax Highlighting 지원
