본문 바로가기

Blog/Thoughts

Prototype 스킨 제작 후기 초기에 블로그를 오픈할때 사용하였던 Cognoscenti 스킨은 제가 직접 하드 코딩을 하긴 했지만 여러가지 삐걱거림과 알 수없는 문제들에 시달렸습니다. 속도면에서는 일반 티스토리 스킨에 비해서 이미지를 거의 쓰지 않았기 떄문에 빨랐지만 코딩능력의 부족으로 꽤 볼품 없는 스킨 인것은 부정할수 없습니다. 스킨 제작을 위해서 열심히 구글링과 공부를 하다보니 프레임웍이라는 것을 알게 되었습니다. 기본적으로 사이트에서 사용되는 요소들을 미리 만들어 놓고 이를 활용하여 편하게 웹페이지를 제작할수 있게 하는 도구 입니다. 그래서 무슨 프레임 웍을 쓸까 알아보던중 선택한 것이 부트스트랩 이었습니다. 물론 여러가지 프레임 웍이 웹상에 있지만 부트스트랩으로 만들어진 트위터와 GitHub를 보면서 "그래도 많이 쓰는게 좋.. 더보기
Ver 1.1로 업글 + 속도 최적화 1.1 업데이트 - 페이지별 스타일을 추가했습니다. 태그로그/로컬로그/방명록/메인화면/게시글/미디어로그(현재는 아무것도 없습니다.)/키로그에 따로 배경스타일을 추가했습니다. 직접들어가서 한번보세요 ^^ 맥용 이미지 최적화 어플인 Image Optim으로 전체 이미지를 60%정도 압축했습니다. 온라인 YUI 압축기로 자바스크립트 파일을 하나로 합쳤습니다. gZip 파일을 직접 쓰고 싶긴한데 이게 서버단에서 php로 읽어들여야 하는 거라서 티스토리는 그게 불가능하기 때문에 포기입니다. gZip쓰면 속도가 3배는 빨라질텐데..... 쩝. CSS파일을 하나로 합쳤습니다. 코드 수정용으로는 비압축을 쓸것이지만 실사용으로는 압축파일을 사용합니다. 더불어 HTML도 압축을 했습니다. 이전에는 Quote까지 다 지워버.. 더보기
스킨 제작 일지 - 거의 완료 검색 잘됩니다. 이상하게도 티스토리에서 제공해준 구조대로 짜야지 검색이 먹히네요 -_-; 이제 소소한 버그 잡기와 세부 스타일링을 하고 있습니다. 플러그인도 몇개만 설치하면 끝나겠내요 이거만들다가 감기 제대로 걸렸습니다. 아오 죽겠내 -_- 더보기
스킨 제작 상황 - 끝없는 삽질의 연속 테스트 용 블로그에 적용 성공했습니다.사진을 보시면 아시듯이 좀 깨집니다.사실 좀 많이 깨져요.일단 안되는 것 나열 해보면검색안됨. 메인화면 안뜸. 티스토리 툴바 안뜸. 최근 글 안뜸. 댓글 작성 안됨. 방명록 안써짐. 단축키 안됨(이건 이해가 안되네요 -_-),안됨 안됨 안됨 하여튼 다 안됨아... 멘붕입니다. -_-body 안에 태그를 전부 갈아엎어야 할것 같네요티스토리 기본 스킨 내용물 긁어다가 그대로 복붙하고 그거 바탕으로 스타일링하는게 더 빠를것 같습니다.xhtml로 된건 시멘틱 태그로 바꿔주고.... 아이고 힘들어... 더보기
반응형 스킨제작시 스프라이트 이미지 때문에 발생하는 애로사항들... 현재 로딩속도 비약적 향상을 목표로 삼고 베경 이미지를 제외한 모든 이미지 요소를 스프라이트로 대체 했습니다. 하지만 이에 따른 예상치 못한 문제들이 속속들이 드러나고 있습니다. (오른쪽 플로팅 메뉴 주목) 하지만 옆에 플로팅 요소를 보면 아시듯이 스프라이트를 사용하면 img 요소로 바로 심는 것이 아니라 div나 span을 놓고 거기에 background-img를 사용해서 스프라이트를 CSS로 넣는 방식으로 가야합니다. 사실 이미지 파일 주소를 일일히 쳐넣는 것보다 단일 이미지 파일에 스프라이트 위치만 불러오면 되어 스타일링이 상당히 빠르고 편하지만 요소자체의 크기는 변하되 배경 이미지의 크기는 변하지 않아 반응형 이미지의 구현이 쉽지 않다는 단점이 있습니다. 다음도 현재 개편을 하여 큼직큼직한 스프라.. 더보기
PROTOTYPE 디자인 초안 입니다. 큰 변화 없이 이대로 만들어 지고 있어서 디자인 할때 사용한 PSD 파일의 모습을 공개합니다. 이대로 완성까지 만들어지면 정말 좋겠지만... HTML한계상 타협을 봐야 하는 점은 바뀔수도 있습니다. ^^; 더보기
신기한 Sass LESS와 Sass를 비교하면서 뭘 쓸까 고민했는데 해외에서는 Sass의 지지도가 압도적이더군요 -ㅂ- (참고링크: http://css-tricks.com/sass-vs-less/)그래서 저도 망설임 없이 Sass를 사용했습니다. 현재 코드 네스팅, 믹신, 오퍼레이터, 익스텐드를 써보았는데요 익숙해지면 굉장히 편할것 같습니다. 스스로 믹신이나 함수를 만들수 있는데 아직 내공이 거기까지 쌓이진 않았네요;컴패스에서 제공하는 기본 믹신 만으로도 충분한지라; 더보기
해피콩 행복한 약속 캠패인 벳지를 달았습니다. 네이버 이웃 블로거 이신 플라이스틱님께서 행복한 약속 콩 저금통을 개설 하셨습니다. (http://blog.naver.com/psu77707/30180305954) 좋은일 하시는데 작게 나마 도움이 되고자 저금통 위젯을 제 블로그에도 달아보려 했습니다. 그런데.... 이뭐... 뜬금없는 -_-; 착한일도 자기네 블로그에서만 하라니... 어이터집니다. ㅋㅋ 왠지 네이버가 내색은 안하지만 꼭 제게 "ㅋㅋㅋㅋㅋㅋㅋ 퍼가봐 퍼가봐 어여 퍼가봐 자바스크립트라서 퍼가지도 못하겠지? ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ" 이렇게 말하는 것 같더군요. 갑자기 기분이 팍 나빠졌습니다. -_- (스팀이 팍 오름) 참고로 행복한 약속 캠패인을 하면 블로그에 다는 뱃지를 줍니다. 그래서 저도 하나 달아봤습니다. 뱃지 원본 파일 .. 더보기
코딩은 뒷전이고 워크 플로만드는데 시간 다 보내고 있네요 시간 좀 아껴보려고 오만 꼼수를 동원해서 워크 플로를 짜고 있는데 이것 때문에 시간이 더 걸리네요 -_-; 대충 구축한 워크 플로는 Coda2 + Zen Coding 조합으로 뺑이 없는 초고속 마크업 달성.CodeKit + Compass 로 쾌속 Sass 컴파일 달성. (심지어 자동 스프라이트 생성도 됩니다. ㄷㄷ)오토 리프레시로 옆에다 브라우저 띄워놓고 바로 마크업 하면 실시간으로 반영됩니다. 이거 뭐 초등학생때 나모 웹에디터 쓰는 기분이 나네요 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ (나모 아직도 나오려나...) 구성하기가 좀 까다롭지만 해놓고 나니 전부 한방입니다. -_-b프레임웍 기반이지만 단일 CSS를 사용합니다. 모든 CSS를 하나로 컴파일 시켜버렸는데요, 그래서 무지막지하게 CSS 파일이 큽니다. -_- (압축.. 더보기
프로토타입 스킨, W3C 유효성 검사 무사 통과 어짜피 티스토리 용으로 컨버전 하면 XHTML이랑 짬뽕되서 검사 결과 개판으로 나오기 때문에 일단 기본 마크업 끝내고 최초이자 마지막 검사입니다.경고는 권고안 입니다. HTML5가 너무 새삥이라서 주의 하라네요 -_-여태까지 제가 만든 스킨은 전부 최신 웹표준을 준수합니다. 더보기

티스토리툴바