본문 바로가기

Works/Blog Skin

티스토리 새 관리 - 오늘은 여기까지 데이터 url로 SVG를 CSS에 심어넣는 것은 처음 써봤는데 생각보다 신기합니다. 문제는 코드가 너무 길어서 SCSS에 집어 넣으면 가로 스크롤이 엄청 길어지는게 좀 귀찮습니다. -ㅅ- 그리고 티스토리 이 미친놈들이 거의 모든 UI요소를 스프라이트로 짜버려서 그거 없애느라 혼났습니다. -_- 아니 셀렉터가 모자라던 시절인 것은 이해는 하지만, heading까지 다음체로해서 png로 만들 필요는 있었나 싶네요 (걍 웹폰트 쓰지...) 마크업이 아니라 CSS로 위에 덮어 씌우는 일은 마이피 스킨만들때도 해봤지만, 아이콘 같은거 집어넣으려고 하면 :before 써가면서 삽질해야 하는거 사람할일 아닙니다; 걍 워드프레스처럼 관리도 스킨질 좀 하게 해주지... P.S 반응형 됩니다. 일부 플래시 요소는 어떻게 .. 더보기
티스토리 새 관리 화면 기존 관리화면이 너무 마음에 안들어서 새로 스타일시트를 짜고 있습니다. 이제 아이콘과 Sprite 이미지만 교체하면 거의 완성입니다. 더보기
스킨 업데이트 v 2.0.1 초고해상도(1920px 이상)에서 탑바와 하단부가 삐져나가는 문제를 수정했습니다. 스킨의 컨테이너 최대크기는 1920px으로 잡아놓았기 때문에 그 이상으로는 안 커집니다. 모바일에서 좀 더 누르기 쉬운 버튼으로 상단 메뉴 디자인을 바꾸었습니다. 크기를 키우고 애니메이션을 제거하여 프레임 드랍도 줄였습니다. 티에디션에 있는 상단 슬라이더에 컨트롤 부가 마우스 호버시에만 노출됩니다. 섬네일 갯수를 12개에서 24개로 증가했습니다. 기타) 네이버 이웃커넥트 버튼이 추가 되었습니다. 더보기
Syntax Highlighting 기능 추가 했습니다. 이전부터 Syntax Highlighting 에는 SyntaxHighligher를 사용해 왔으나, 이번에는 좀 더 커스텀을 많이 할 수 있는 Highligter.js로 갈아탔습니다. SH 보다 장점이라고 하면 더 광범위 하게 적용 되는 스타일이라고 보시면 됩니다. 게다가 테마도 많아서 굳이 새로 만들필요도 없더군요. 기존에 있던것 가져다가 약간 변형만 시켰습니다. SH는 브러시라는 개념으로 자신이 쓸 언어의 갯수만큼 스크립트 파일을 추가해줘야 하나, Highlight.js는 자체적으로 선택해서 단일 파일을 생성할 수 있는 점이 참 마음에 듭니다. 저 같은 경우 제가 현재 쓰고 있는 CSS,HTTP,Javascript,Ruby,CoffeeScript,PHP,Markdown,HTML/XML,Python,Ha.. 더보기
스킨 구조 플로우 차트 심심해서 현재 사용중인 Life is a Journey v.2의 구조를 플로우 차트로 만들어 보았습니다. SVG이미지 이기 때문에 구형 브라우저에서는 보이지 않습니다. 구현방식이 꽤 삽질을 해서 알아낸 방식이라 그렇지 실제로는 정말 별거 아닙니다. 스크립트가 브라우저와 카테고리를 구분 시켜주고, 그에 맞게 CSS만 넣어주면 알아서 됩니다. 웹 언어 처음 배울때는 ‘도대체 이런걸 어떻게 하는 거지’ 했는데 점점 비슷한걸 만들어가고 있습니다. ㅎㅎ 더보기
스킨 V.2 업데이트 후기 + 디자인 사설 디자인과 속도. 웹 페이지를 만들 때 항상 충돌하게 되는 요소 입니다. 디자인에 신경을 쓰다 보면 웹 페이지 속도가 서서히 감소하는 것이 눈에 보일 것이고, 속도에 신경을 쓰다보면 정말 흰화면에 글자와 사진만 몇 개 떠다니는 수준이 되어버릴 수도 있습니다. 보통 스킨을 제작하게 되면 항상 고민하는 것이 바로 속도와 디자인 입니다. 늘 좀 더 새롭고 좋은 모습을 추구하면서도, 바라는 대로 무턱대고 만들어버리면 속도에 치명적인 영향을 미쳐버리고 맙니다. 그래서 스킨을 처음 만들 때 부터 지금까지도, 좋은 디자인을 가지면서 속도가 빠를 수는 없을까 라는 생각을 늘 상 하곤 했습니다. 이런 고민을 항상 하면서 스킨을 제작하다 보니 이전에는 단순한 구조임에도 속도가 한심할 정도로 느렸지만 지금은 숙련도가 쌓였는지.. 더보기
게임 카테고리 스킨 추가 압축 버전을 끝으로 '추가 스킨 제작은 끝~!' 이라고 선언했지만 사이트 몇 군데 돌아다니다가 본 마음에 드는 스타일 몇가지와, 헤더를 세로로 만들어보고 싶어 후딱 작업했습니다. 미디어 쿼리는 이론상으로 세로 해상도도 적용되는 걸로 알고 있어서 시험 삼아 적용 해보았는데, 실제로 세로 해상도 768px 이하로는 헤더가 사라집니다. 더보기
스킨 압축 완료 했습니다. 기나긴 개발 기간 끝에 드디어 압축한 버전의 스킨을 적용하였습니다. css 파일을 하나로 합치고, 스크립트도 하나로 압축, html 파일도 압축했습니다. 평균 페이지 로드시간은 연결상황에 따라 다르지만 약 4초 정도 소요 됩니다. 압축이 스킨 제작에서 제일 마지막 과정인데, 더 이상 손댈게 없다(면 좋겠지만)라는 것을 가정하에 하는 작업입니다. 나름 열심히 계획을 짜서 만들어서, 더 이상은 손댈 일이 많이 없으면 좋겠내요 ㅎㅎ 패이지 스피드는 94점이 나옵니다. 이전 스킨이 91점대였는데 3점올랐네요 킥킥 더보기
카테고리 별 스킨 2종 추가 리뷰용 스킨 - 오른쪽 사이드바가 있는 2단 레이아웃 이며, 위에 목차가 따라서 내려오게 되어있습니다. 목차의 제목을 눌리면 글의 해당 부분으로 바로 이동하게 되어있습니다. 해외 IT 매체 사이트에 가보면 볼 수 있는 것인데 한번 구현해봤습니다. 음악 스킨 - 이전게 마음에 안들어서 또 갈아 엎었습니다. 이번에는 좀 차분하고 범용적으로 사용 할 수 있는 모습으로 디자인 했습니다. 더보기
현재 스킨 작업의 주안점들 - 다운로드 링크/ CCL/ 주석 벌써 적용한지 2주가 지났지만 여전히 압축을 하지 않고 세부수정을 가하고 있습니다. -_-;;대부분 남은 소소한 작업 때문인데요, 주로 "티스토리의 냄새"를 없애기 위한 작업이라고 보시면 됩니다. 특히 이번에 공들여서 변경한것이 다운로드 아이콘과 CCL아이콘 입니다. 다운로드 아이콘은 이전의 쪼그만한 아이콘에 이게 다운로드링크인지 뭔지 구분도 안 가던 것에서 이제는 한눈에 확 띄게 바뀌었습니다. 사실 모바일 배려 측면도 없지 않아 있습니다. 운영체제의 고도화로 안드로이드나 아이폰에서도 파일을 다운로드 받고 수정이 가능하죠. 하지만 이전의 작디작은 링크 버튼으로는 터치기기 사용 하실때 몸에 사리가 생기실거라 생각되어 큼직큼직하게 만들었습니다. CCL아이콘도 변경을 했는데요, CSS 스프라이트로 이미지를 구.. 더보기

티스토리툴바