본문 바로가기

반응형

깔끔한 반응형 웹 테스트 도구 - Respondr 반응형 웹이 구현하기 까다로운점은 여러기기에서 태스트 해봐야 한다는 것입니다. 저만해도 휴대폰은 제걸로 하면되지만 테블릿이 없어서 테스트를 못해보는 실정인데요, 이럴때 반응형 웹 테스트 도구는 정말 큰 도움이 됩니다. 사실 현재 나오는 스마트폰 중에서 가장 작은 넓이를 가지고 있는 폰중의 하나가 아이폰입니다. 해상도는 640x960(1136)이지만 브라우저 화면의 크기는 가로폭 320px입니다. 그래서 아이폰까지 맞춰주면 모바일 기기 반응형은 거진 다 만들었다고 보면 됩니다. 뿐만 아니라 테블릿도 가장 범용적으로 많이쓰이는 아이패드의 해상도 1024x768만 지원하면 됩니다. 나머지 테블릿은 떨거지거나 파편화가 심하기 때문에 쿨하게 넘어가면 되죠 -ㅅ-제대로 하고 싶다면 안드로이드 폰까지 모두 테스트 해.. 더보기
티스토리 카테고리별 스킨 - 풀 스크린 레이아웃 car 카테고리에 적용되는 스킨이며, 사진과 슬라이더, 유투브 영상이 화면에 100% 꽉차게 표시 됩니다. 사진의 크기가 1920보다 작을 경우에는 원래 크기대로 뜹니다. 비디오는 flex-video 옵션을 적용했을시에만 적용 됩니다. 기본적으로 저화질 영상에는 flex-video가 적용이 되지 않습니다. 특정 게시글에는 상단 베너이미지도 바뀝니다. 더보기
Life is a Journey 스킨 제작 후기 + 디자인 사설 요즘 대세는 플랫 제가 만든 1번째 스킨인 Congnocenti가 플랫도 아니고 그런지도 아니고 어정쩡했었고, 2번째 스킨인 TA는 부트스트랩2 기반으로 세미 플랫한 스타일을 가졌었습니다. 3번째 스킨인 프로토타입은 파운데이션 기반으로 스큐어모픽 틱한 디자인을 구현했었죠. 다중 레이어와 그림자 사용으로 거의 3D 가까운 모습을 보여줬었습니다. 11월에 만든 스킨인데 계속 쓰려고 했지만 막상 안 쓰는 기능을 좀 빼고 코드를 정리하려고하니 너무 마크업이 개판이라서 그냥 새로 만드는 방향으로 가게 되었습니다. 스킨을 새로 만들면서 계획했던것은 요즘 유행하는 완전 ‘플랫 스타일을 구현하자’ 였습니다. 그래서 주요 디자인 키워드는 flat&simple 이었습니다. 하지만 중간 중간에 그림자 요소를 넣어서 너무 지.. 더보기
TechAesthetic - 반응형 티스토리 스킨 13년 08.07~ 11/12까지 사용하였던 티스토리 스킨을 다른 티스토리 블로그에도 적용이 가능하게 바꿔서 공개합니다. 초기버전을 올릴까... 라는 생각도 해보았지만 코드도 지저분하고, 반응형도 아니라서 가장 마지막 버전이었던 2.8을 개정해 3으로 업그레이드 하였습니다. 작년 7월 하반기에 작업에 들어가서 약 일주일만에 만들어낸 스킨입니다. 물론 그 이후로 오랜시간동안 수 많은 개선작업을 거쳐와서 현재의 완성도를 가지게 되었습니다. 초창기에는 배경색도 존재하고 그림자도 여러군대 쓰인 모습이었지만 버전업을 거치면서 점점 플랫한 스타일로 바꾸어 나갔습니다. -> 스킨업데이트 내역 기본 바탕이 된 프레임웍은 부트스트랩 2.3.2이며 부트스트랩 2.x버전을 사용했기 때문에 IE7이상의 브라우저에 모두 호환이.. 더보기
Meltdown - 반응형 이글루스 스킨 이글루스에는 스킨 깎는 장인분들이 안 계시기 때문에 제가 만든 스킨이 유일한 반응형 스킨입니다. -ㅅ- ㅋㅋ 남들이 안 가는 길을 가보니 왠지 신대륙 개척한 기분이네요 ㅋㅋ 그렇지만 티스토리보다 난이도가 허접해서 뭔가 대단한걸 이룬듯한 기분은 전혀 들지 않습니다. -_-; 스킨의 기본적인 소개를 하자면, YUI에서 제작한 Pure 프레임웍을 적용하였으며, 매우 가볍고 빠른 스킨입니다. 오른쪽 사이드바는 높이는 100%로 항상 고정되어 있으며, 가로폭 786px의 브레이크 포인트에서 모바일/테블릿형 레이아웃으로 전환 하게 됩니다. 사진에서 보시듯이 모바일 뷰에서는 상단 메뉴가 별도로 뜨게 됩니다. 상단메뉴는 굳이 수정할필요 없이 이글루스에서 기본 제공하는 메뉴릿으로 메뉴 추가가 가능합니다. (배포용 스킨에.. 더보기
이글루스 스킨 제작 후기 티스토리 스킨 제작은 너무 번거롭고 힘든작업이라서 매번 하지는 못합니다. 그러나 스킨 변경이 가능한 몇몇 사이트들은 티스토리 스킨 변경하는데 비해서 아주 적은 노력만으로도 스킨을 바꿀수 있습니다. 물론 제약이 티스토리보다 커서 완전히 뜯어고치기는 힘들지만요. 실력 갈고닦는 개념으로 루리웹 마이피 스킨제작에 이어서 이글루스 스킨제작에 도전했습니다. 이전 마이피는 아무 계획없이 순수 CSS만으로 삽질했던데 비해서 이번 것은 PURE 프레임워크를 기반으로 만들어서 금방 만들었습니다. 사실 이번에 티스토리 스킨 바꾸면서 사용하며 되게 만족한 파운데이션이나 스켈레톤, HTML5 보일러플레이트, 그럼비, 그리고 새로나온 부트스트랩3도 고려를 해보았습니다. 제가 방금 말한 5개 프레임웍의 공통점이 뭔지 아시나요? 네.. 더보기
Prototype 스킨 제작 후기 초기에 블로그를 오픈할때 사용하였던 Cognoscenti 스킨은 제가 직접 하드 코딩을 하긴 했지만 여러가지 삐걱거림과 알 수없는 문제들에 시달렸습니다. 속도면에서는 일반 티스토리 스킨에 비해서 이미지를 거의 쓰지 않았기 떄문에 빨랐지만 코딩능력의 부족으로 꽤 볼품 없는 스킨 인것은 부정할수 없습니다. 스킨 제작을 위해서 열심히 구글링과 공부를 하다보니 프레임웍이라는 것을 알게 되었습니다. 기본적으로 사이트에서 사용되는 요소들을 미리 만들어 놓고 이를 활용하여 편하게 웹페이지를 제작할수 있게 하는 도구 입니다. 그래서 무슨 프레임 웍을 쓸까 알아보던중 선택한 것이 부트스트랩 이었습니다. 물론 여러가지 프레임 웍이 웹상에 있지만 부트스트랩으로 만들어진 트위터와 GitHub를 보면서 "그래도 많이 쓰는게 좋.. 더보기
Introducing Prototype 제 3번째 자작스킨인 Prototype을 공개합니다. 지금 부터 새 스킨의 주요 기능을 설명드리겠습니다. HTML5 시멘틱 구조 도입 시멘틱 구조를 통해서 SEO에 최적화 되어있습니다. 이전스킨도 HTML5 기반이었지만 소심하게 쓴것에 비해서 이번에는 Section, Article 시멘틱 태그를 적극활용했습니다. HTML5, CSS3 웹 표준 검사 통과 본 스킨의 HTML마크업과 CSS스타일링은 W3C 웹표준을 엄격히 준수합니다. Mobile-First 티스토리 최초의 모바일 퍼스트 스킨입니다. 구성요소를 크기만 줄여서 재활용하는 대신 각 스크린 사이즈에 맞는 요소들을 따로 만들어 더 쾌적한 사용환경을 제공합니다. *모바일퍼스트: 웹페이지를 제작할때 PC버전의 크기를 줄이는 기존 방식 대신 반대로 모바일.. 더보기
반응형 스킨제작시 스프라이트 이미지 때문에 발생하는 애로사항들... 현재 로딩속도 비약적 향상을 목표로 삼고 베경 이미지를 제외한 모든 이미지 요소를 스프라이트로 대체 했습니다. 하지만 이에 따른 예상치 못한 문제들이 속속들이 드러나고 있습니다. (오른쪽 플로팅 메뉴 주목) 하지만 옆에 플로팅 요소를 보면 아시듯이 스프라이트를 사용하면 img 요소로 바로 심는 것이 아니라 div나 span을 놓고 거기에 background-img를 사용해서 스프라이트를 CSS로 넣는 방식으로 가야합니다. 사실 이미지 파일 주소를 일일히 쳐넣는 것보다 단일 이미지 파일에 스프라이트 위치만 불러오면 되어 스타일링이 상당히 빠르고 편하지만 요소자체의 크기는 변하되 배경 이미지의 크기는 변하지 않아 반응형 이미지의 구현이 쉽지 않다는 단점이 있습니다. 다음도 현재 개편을 하여 큼직큼직한 스프라.. 더보기
스킨 제작 상황 업데이트 프로토타입 스킨은 100% 모바일 퍼스트로 제작이 되었습니다. (모바일 퍼스트: 기존의 반응형 웹페이지가 PC 페이지를 축소시키는 방식 대신에 역순으로 모바일 페이지를 확장하는 방식으로 만드는 방식입니다.)모바일 뷰에서는 기본 메뉴 대신 별도의 메뉴를 따로 제공합니다.기본적인 마크업은 이제 다 끝났고 스타일링만 남았습니다.스타일링 끝나면 티스토리 최적화 작업도 해야하네요이전보다 많이 가볍긴한데.... 티스토리 CDN이 워낙 구려서... 실제 적용해봐야 퍼포먼스를 제대로 알수 있을듯 합니다. ^^ P.S 그나저나 Placeholder로 괭이 사진을 쓰고 있는데... 자꾸 괭이를 보니 집사가 되고 싶네요... 더보기

티스토리툴바