welcome to xnsm6

WELCOME
TO THE NEW XENOSIUM. October 2014 xnsm6 design renewal

좀 갑작스럽지만, 블로그의 디자인을 변경해보았습니다. 사실 꽤 오래전부터 생각하고 있던 것이긴 한데 막상 작업을 할 시간을 찾지 못해 / 일이 커질까봐 건드릴 엄두를 못 내고 있다가 여행기 글을 작성하면서 이래저래 스타일링을 고민하다가 그냥 홧김에 갈아엎기로 했습니다(..)

We’ve got some space now

기본적인 뼈대는 이전 스킨과 비슷하게 두었고 스타일만 바뀐 페이스리프트 정도로 보실 수 있을것 같은데요, 사실 좀 외형이 많이 바뀌긴 했지만요. 우선 눈에 띄는 가장 큰 변화는 가로 공간의 테두리를 없애고 양 옆으로 쫙 늘려서 본문 폭이 넓어졌다는 점일겁니다. 저는 블로그 초기시절부터 대체로 상당히 좁은 본문 폭을 고수해 왔었습니다만은 (주 이유는 글을 적게 써도 폭이 좁으면 뭔가 꽉 차 보인다고 생각했기 때문에!) 스킨을 변경하면서 400, 500, 600, 640.. 차차 늘리더니 지금까지 오게 되었네요.

여행기 같은 사진과 내용이 많은 글을 쓰다보면 좁은 폭때문에 사진을 좀 더 큼지막하게 볼 수 없었던게 항상 아쉬웠는데, 공간이 넓어지니 확실히 숨이 트이는군요. 참고로 브라우저 폭을 이리저리 늘려보시다보면, 일정 폭 이상 브라우저가 넓어지면 사진등 특정 컨텐트가 기존의 본문 텍스트 폭 이상으로 늘어나도록 했습니다. 텍스트 폭은 너무 길게 늘리고싶지 않은 게, 한 줄이 너무 길어지면 읽기가 피곤해지거든요. 이리저리 조정해 보다가 가장 안정적으로 보이는 폭을 결정했습니다. 덤으로 실제 글자 크기도 약간 더 키워서 최상의 가독성을 목표로 튜닝해보았습니다.

Scalability, scalability everywhere

수 년 전 (벌써 4년이나 되었군요) 아이폰4가 출시되면서 세상에 본격적으로 고밀도 Hi-DPI 시대를 열었을 때만 해도 개발자들, 웹디자이너들에게는 꽤나 큰 충격이었죠. 고밀도 디스플레이에서도 선명하게 보이는 이미지 리소스를 공급하기 위해 2x 이미지를 추가하는 등, 애초부터 고해상도를 작업한뒤에 크기를 줄이든 등 디자인 작업의 프로세스도 그간 많이 변화했는데요. 이번에 아이폰 6 plus가 나오면서 이젠 두배가 아닌 세배 밀도가 도입되는것을 보면서 ‘아 이젠 그냥 단순히 이미지 두배 하는것으로는 모자라겠구나’하는 생각을 했습니다. 사실 2.0 이상의 밀도를 가진 모바일 디스플레이들이 이전에도 안드로이드 진영에 몇 나오긴 했었지만 아직은 소수겠지 하고 별로 신경을 안 쓰고 있었습니다만, 이제는 때가 되었구나 싶더라구요.

어떤 밀도의 어떤 크기의 디스플레이에서 봐도 흐려지거나 깨지지 않는 그래픽—이라면 역시 해답은 벡터밖에 없지요. 최근의 디자인 트렌드가 전부 납작납작 플랫플랫하고 단색/도형 위주의 그래픽으로 바뀌는 것도 앞서 말한 모바일 환경의 변화에 역시 영향을 받지 않았나 싶습니다. 뭔가 이야기가 굉장히 의미심장해졌는데, 아무튼 이번 스킨에는 이러한 흐름에 따라 SVG를 적극 활용해보기로 했습니다. Scalable Vector Graphics. 크기를 마음대로 늘여도 선이 흐려지지 않는 벡터 그래픽이기 때문에 기존의 스킨에서 쓰던 HDPI용 오버라이드 이미지와 스타일시트가 전혀 필요 없게 되어버렸습니다. 사실 이번 디자인에 사용한 것들은 거의 단순한 도형으로만 이루어진 그래픽인지라 별로 ‘이미지’같아보이지도 않을 것 같지만요.

SVG라는 것을 처음 알게 된 것은 사실 꽤 오래 전인데 그동안 적극적으로 활용하지 못했던 이유는 역시 브라우저 호환성이었습니다. 그런데 이번에 작업하면서 체크해보니 예상 외로 모든 브라우저에서 널리 지원을 하고 있었습니다. 그래서 망설임 없이 SVG를 쓰기로 결정, 그리고 한 술 더 떠서 기왕 하는 김에 아예 전부 SVG로 해보자! 해서 간단하게 첫 디자인 목업을 포토샵에서 작업 한 뒤 일러스트레이터에서 도형을 만들어 각각 SVG로 출력, 불필요한 첨가물을 지우는 등 코드를 손수 정리해서 CSS에 적용. 그렇게 생각보다 간단하게 작업을 했습니다.

colors, fonts

전체적인 디자인 컬러는 뭐 너무 어렵게 생각하지 않고 그냥 그동안 오래 썼던 스킨 두개가 다 푸른계열의 차가운 색이었기 때문에 다시 조금 따듯한 적색 계열로 가보자는 의미에서 색을 고르다가 포인트 컬러로 화사하고 튀는 주황색을 먼저 고르고 어울리는 갈색계열 컬러를 골랐습니다.

@xbrown: #1a1813; @xbrown-l2: #806d40; @xbrown-l3: #ccc9c2;
@xgray: #ada9a5; @xorange: #d83603;

폰트는 이전에 Fontfabric에서 할인을 해서 8개 두께 풀 세트를 단돈 9달러에 구입해두었던 Nexa 폰트 패밀리를 전격 사용했습니다. 웹폰트 임베딩 라이센스도 포함되어있었기때문에 자유롭게 활용. 헤더에 매우 두꺼운 체를 사용해서 본문과 대비가 확 되도록 했습니다. 문제는 그에 어울리는 한글 폰트인데.. 쓸만한 것을 찾다가 예전에 윤디자인에서 완전 무료로 배포했던 윤바탕/윤돋움 패밀리중 가장 두꺼운 윤돋움160을 한글 fallback으로 지정했는데요, 웹폰트 임베딩의 경우 허용이 되는지 어떤지 알아보려고 검색해봤더니 기존 배포 링크는 깨져있고 윤디자인 공식 사이트와 폰트샵을 아무리 뒤져봐도 폰트의 존재 유무 자체조차(..) 찾을 수가 없었습니다. 근데 검색해보다가 예전 글에 라이센스가 상업적 목적 이외 완전 자유라고 명시되어있었다고 하는 것을 보고.. 그냥 넣어버렸습니다. 일단은 헤더 폰트에만 사용되고 본문은 그대로 시스템 기본 애플산돌네오고딕/나눔바른고딕/맑은고딕 순서대로 지정되어있습니다.

사실 윈도우를 무시한다면 그냥 애플제품에 기본 포함된 산돌네오고딕 ExtraBold두께를 지정했어도 두께는 얼추 맞았을것같긴 한데 우선 제가 (윈도우) 컴퓨터에 그 폰트가 없고(..) 또 Nexa가 나름 Century Gothic같은 Geometric 폰트이기 때문에 한글도 일반적인 고딕과는 약간 다른 폰트를 찾다가 윤돋움이 적합하다고 생각해 사용하기로 했습니다.

댓글에 INDIER님께서 알려주셔서, 윤돋움을 내리고 그냥 나눔고딕 ExtraBold로 바꿨습니다. 닉스곤도 적용해보았는데 모양이 별로 어울리지 않고 두께가 맞지 않아서 두꺼운걸 찾다가 결국은 나눔고딕으로(..) 본고딕도 괜찮은데 문제는 CDN이 없고 용량이 너무 크네요 ㅠㅠ

else {}

기존에 쓰던 SyntaxHighlighter를 떼고 highlight.js로 갈아탔습니다. 뭔가 가벼워서 좋더군요. 최근들어는 코드 설명 들어간 내용은 거의 안 쓰긴 하지만, 옛 글 하위호환(?)도 그렇고 뭐 해둬서 나쁠건 없으니까요. 코드 색상 테마는 평소에도 잘 쓰는 Chris Kempson씨의 Tomorrow Night을 highlight.js용으로 포팅한 것을 찾아 응용했습니다.

code { 
	font-size: 1rem; 
	background-color: #eee; 
	padding: 2px 5px; 
	margin: 0 3px 0 1px; 
	.border-box;
}	
pre code { 
	font-size: 0.9rem; 
	margin: 0;
	background: #eee;
	padding: 20px;
	display: block;
	-webkit-text-size-adjust: none;
}
pre[data-type]:before {
	display: block;
	background: @xbrown-l2;
	color: #fff;
	content: attr(data-type);
	padding: 5px 10px;
	width: 100%;
	height: 1.6rem;
	font-size: 0.9rem;
	text-transform: uppercase;
	.font-family-Nexa-content;
	font-weight: bold;
	.border-box;
}

이런 식으로 보입니다.

이외에 풋터 등에 간간히 들어간 아이콘은 IcoMoon이라는 SVG폰트제작 서비스에서 무료 Entypo 아이콘 라이브러리를 사용했습니다.

워낙 삘받아서 급하게 만든거라(..) 아직 기존 스킨에서 미처 변경하지 못한 코드나 좀 더 다듬어야할 부분들이 더러 있지만, 일단 모바일용 레이아웃을 포함한 전반적인 것은 완료가 됐다고 생각해서 정식으로 본 스킨으로 적용을 했습니다. 언제나 그랬듯이 앞으로 차차 보이는대로 수정하고 해서 마무리를 할 생각입니다.