본문 바로가기

스킨

스킨 V.2 업데이트 후기 + 디자인 사설 디자인과 속도. 웹 페이지를 만들 때 항상 충돌하게 되는 요소 입니다. 디자인에 신경을 쓰다 보면 웹 페이지 속도가 서서히 감소하는 것이 눈에 보일 것이고, 속도에 신경을 쓰다보면 정말 흰화면에 글자와 사진만 몇 개 떠다니는 수준이 되어버릴 수도 있습니다. 보통 스킨을 제작하게 되면 항상 고민하는 것이 바로 속도와 디자인 입니다. 늘 좀 더 새롭고 좋은 모습을 추구하면서도, 바라는 대로 무턱대고 만들어버리면 속도에 치명적인 영향을 미쳐버리고 맙니다. 그래서 스킨을 처음 만들 때 부터 지금까지도, 좋은 디자인을 가지면서 속도가 빠를 수는 없을까 라는 생각을 늘 상 하곤 했습니다. 이런 고민을 항상 하면서 스킨을 제작하다 보니 이전에는 단순한 구조임에도 속도가 한심할 정도로 느렸지만 지금은 숙련도가 쌓였는지.. 더보기
스킨 업데이트 계획 현재 사용하고 있는 스킨의 버전2를 제작하고 있습니다. Life is a Journey를 제작한 이후로도 여러 사이트를 돌아다니면서 영감을 많이 받았고, 여러가지 신기술도 많이 체험을 했습니다. 버전2를 통해서 이룰 것, 또는 이루고 싶은 것들을 간략하게 적어보겠습니다. 이미지 개수의 감소, SVG의 활용 이 부분은 애플 홈페이지의 영향을 많이 받았습니다. SVG가 혁신 적이긴 하지만 아직 다루기가 쉽지 않아 많이 쓰이지 않고 있는데요, 애플 홈페이지를 가보면 메인폰트인 lucia 이외에 모든 helvetica neue, Myriad Pro로 된 숫자나 문구를 SVG sprite로 만들어 넣는 미친짓(?)을 해놓았더군요. 상당히 인상 깊었고 한번 쯤은 도전해보고 싶은 요소 였습니다. 게다가 SVG는 CS.. 더보기
게임 카테고리 스킨 추가 압축 버전을 끝으로 '추가 스킨 제작은 끝~!' 이라고 선언했지만 사이트 몇 군데 돌아다니다가 본 마음에 드는 스타일 몇가지와, 헤더를 세로로 만들어보고 싶어 후딱 작업했습니다. 미디어 쿼리는 이론상으로 세로 해상도도 적용되는 걸로 알고 있어서 시험 삼아 적용 해보았는데, 실제로 세로 해상도 768px 이하로는 헤더가 사라집니다. 더보기
티스토리 기본 요소 스타일 적용 스타일 적용하기 정말 까다로운 주석 말풍선 부분도 스타일을 적용했습니다. 티스토리에서 기본 제공하는 사진 2개, 3개 베치는 무려 테이블(-_-)이 적용되서 반응형 만들기가 상당히 까다롭지만, 이 역시 삽질로 해결했습니다. 다음지도도 스타일 적용했습니다. 웹킷 브라우저에서만 보이는데, 지도가 흑백으로 뜹니다. 그냥 심심해서 한번 해봤어요 슬라이더 스타일을 개선했습니다. 이전에는 슬라이더 컨트롤이 화면을 완전 가리는 구조였지만, 이제는 양옆으로 밀어 버리고, 전체적인 요소 크기를 줄였습니다. 각종 외부 정보 표시도 스타일을 적용했습니다. 테이블과 dl이 섞여서 상당히 스타일 적용하기가 까다 롭더군요 -_-;;;; 이것보다 더 이쁘게 만들고 싶었지만, 능력한계 입니다. 마이피플 스티커도 gif 아이콘 처럼 .. 더보기
스킨 압축 완료 했습니다. 기나긴 개발 기간 끝에 드디어 압축한 버전의 스킨을 적용하였습니다. css 파일을 하나로 합치고, 스크립트도 하나로 압축, html 파일도 압축했습니다. 평균 페이지 로드시간은 연결상황에 따라 다르지만 약 4초 정도 소요 됩니다. 압축이 스킨 제작에서 제일 마지막 과정인데, 더 이상 손댈게 없다(면 좋겠지만)라는 것을 가정하에 하는 작업입니다. 나름 열심히 계획을 짜서 만들어서, 더 이상은 손댈 일이 많이 없으면 좋겠내요 ㅎㅎ 패이지 스피드는 94점이 나옵니다. 이전 스킨이 91점대였는데 3점올랐네요 킥킥 더보기
구글의 새 반응형 광고 코드와 그에 따른 딜레마 구글이 며칠전부터 새로 업그래이드 된 반응형 광고 코드를 지원합니다. 새로 생긴 옵션인 스마트 크기 조정(권장)을 선택하면 됩니다. 기존 반응형 광고 코드가 미디어 쿼리를 이용해서 컨테이너의 크기를 조절하는 방식이었다면, 이제는 스크립트 자체가 화면의 너비를 계산해서 알맞는 광고를 보여줍니다. 게다가 가로인지 새로 인지도 자동인식해서 모바일 기기에서 가로새로 모드 변경시 광고를 리프레시하는 기능까지 갖추게 되었습니다. (이건 정말 사랑하는 기능입니다.) 그리고 반응형 광고단위를 쓰시는 분들이 속을 많이 썩는 부분이 "중앙정렬" 인데요, 예전에는 미디어 쿼리로 margin:auto를 breakpoint마다 넣어줘야 했던데 비해서 이제는 스크립트가 알아서 중앙정렬을 시킵니다. 벌써부터 인생이 한결 편해진것 .. 더보기
스킨 갤러리 오픈 가만 보니 제가 티스토리에 이주한 이후로 스킨을 꽤 많이 만들었더군요 보관용 장식장을 만든다는 기분으로 스킨 갤러리를 한번 만들어 보았습니다. 각 스킨 별로 스팩이 기제 되어있어, 무슨 언어가 사용되었는지, 무슨 플러그인이 사용되었는지, 무슨 프레임웍 바탕인지, 심지어 IE 호환성도 알 수 있습니다. 게다가 현재 배포 중인 스킨은 바로 다운로드 페이지로 접근 할 수 있습니다. 깨알 같은 비하인드 스토리는 덤입니다. 절반으로 자르는 레이아웃은 처음 시도해 보았는데, 생각보다 반응형 만들기가 까다로워서 지원하지 않고, 아직까지는 PC에서, 그것도 1440px이상의 모니터에서 보시는 것을 권장합니다. 스킨 갤러리 바로가기 더보기
블로그 스킨 마이너 업데이트 Entypo Glyphcon을 도입하였습니다. 하단 프로필의 메일 주소를 아이콘으로 교체. 하단부에 다음뷰 추천과 addthis share button을 묶어서 숨기고 태그도 숨겼습니다. 그대신 버튼을 누르면 나타납니다. 초대형 스크린 (해상도 1440이상)에서 나타나는 3번째 메뉴 길이를 줄이기 위해서 서브 메뉴는 마우스 호버시에 우측으로 나타나게 변경하였습니다. 그 이외에 툴팁 스크립트가 추가 되었습니다. 더보기
현재 스킨 작업의 주안점들 - 다운로드 링크/ CCL/ 주석 벌써 적용한지 2주가 지났지만 여전히 압축을 하지 않고 세부수정을 가하고 있습니다. -_-;;대부분 남은 소소한 작업 때문인데요, 주로 "티스토리의 냄새"를 없애기 위한 작업이라고 보시면 됩니다. 특히 이번에 공들여서 변경한것이 다운로드 아이콘과 CCL아이콘 입니다. 다운로드 아이콘은 이전의 쪼그만한 아이콘에 이게 다운로드링크인지 뭔지 구분도 안 가던 것에서 이제는 한눈에 확 띄게 바뀌었습니다. 사실 모바일 배려 측면도 없지 않아 있습니다. 운영체제의 고도화로 안드로이드나 아이폰에서도 파일을 다운로드 받고 수정이 가능하죠. 하지만 이전의 작디작은 링크 버튼으로는 터치기기 사용 하실때 몸에 사리가 생기실거라 생각되어 큼직큼직하게 만들었습니다. CCL아이콘도 변경을 했는데요, CSS 스프라이트로 이미지를 구.. 더보기
네이버 블로그에 원형 프로필 사진을 넣어보자 네이버에 프로필 사진을 넣을때는 용량제한이 아주 심합니다. 일반이미지 이면 별 상관없긴 하지만 GIF이미지는 기준 용량에 맞추면 화질열화가 아주 쩔게 됩니다. 이를 어떻게 우회할지 고민을하다가 그냥 기본 프로필 위젯에서 사진을 꺼버리고 별도로 프로필 이미지를 만들어 넣은것이 현재 제 네이버 블로그 스킨의 형태입니다. 그리고 한가지 일반 프로필 넣는 방식과 다른점은 원형 테두리 안에 들어가 있다는 것이죠. (물론 IE8이하에서는 네모 낳게 보이겠지만... 네이버는 IE6쓰는 사람이 잔뜩 오잖아? 아마 안될거야) 원형 테두리는 CSS3 속성인 border-radius를 이용하면 구현이 가능합니다. 사실 원형 이미지를 쓰면 잘리는 부분이 너무 많아서 그다지 좋다는 것은 느끼지 못하겠던데, 이전까지의 웹 환경에.. 더보기

티스토리툴바