이번편은 블로그 스킨 꾸미기 할 때 유용한 사이트 소개를 해보겠습니다.
티스토리 블로그 CCZ-CROSS 스킨 꾸미기 완성 #1편 과 함께
작성을 하려고 했는데 포스팅이 길어질 것 같아서 따로 글을 적었습니다.
소개해드리는 사이트는 매우 유용하니 북마크를 해두시고 사용하시면 매우 도움이 될 것이라고 생각합니다.
첫 번째 - COMPRESSOR.io
이건 예전에도 무수히 많이 소개해드린 사이트입니다.
이미지를 무손실에 가깝게 압축을 해드립니다
여담으로 1x1 투명 gif 파일을 압축해봤는데. 42byte가 나왔습니다.
웹상에서 모든 브라우저 및 프로그램에서 오류없이 사용가능한 최소 크기만큼 줄여지는 것이죠.
바이트열 분석을 통해 더 불필요한 부분 지우면 32byte까지 줄여진다곤하는데
아무튼 compressor.io 의 압축능력 하나는 정말 뛰어 난 것은 사실입니다. 매우 빠르고 손쉽게 가능하죠
아쉬운 점은 다량의 사진 작업이 불가능하고 캐시가 삭제되지 않으면 동일 파일명은 사용 불가능
또 파일명에 한글이 포함된 이미지 파일은 압축 불가능한 점이 주의사항입니다.
두 번째 - pixlr.com
웹포토샵입니다. 설치형 adobe 포토샵 보다는 복잡한 기능이 없지만
웬만한 기본 기능 및 필터등 꾸미기를 할 때 유용한 기능들이 많이 포함되어 있습니다.
이미지 작업을 할 때 주로 사용하는 사이트이기도 합니다.
세 번째 - http://refresh-sf.com/
티스토리는 따로 gzip 압축을 사용 할 수 없기 때문에
코드 단축을 사용을 해야 합니다.
코드를 압축해주는 사이트 중 가장 오류가 없이 깔끔하게 줄여줍니다.
다만 HTML에는 스킨치환자가 많이 포함 되어있기 때문에 사용할 때 유의 해줘야합니다.
코드가 압축이 되어있으면 불필요한 공백을 삭제해 문서 크기를 줄이는 효과도 있지만
남들이 나의 소스 코드를 보기도 힘들게 하는 역할도 합니다.
물론 본인도 압축된 코드를 보는 것은 매우 힘듭니다 -ㅠ-
그래서 저는 따로 파일명을 하나 더만들어서 2개를 사용합니다.
main.js 와 해당파일을 압축한 main.min.js
실제로는 main.min.js을 사용하고 수정이 필요할 때는 원본 파일에 수정을 한다음 갱신시키는 방법을 하죠
네 번째 - http://unminify.com/
압축을 했으면 푸는 사이트도 필요하겠죠..
HTML, JS, CSS 파일을 넣으면 전부 보기 좋게 풀어줍니다!
간혹 코드나 강좌에 압축된 코드를 올려주시는 분들이 계신데 풀 때도 유용합니다.
물론 압축된 CSS나 JS를 풀때도 좋구요!!
다섯 번째 - https://cloudconvert.com
https://cloudconvert.com/svg-to-png
다시 이미지 파일로 넘어왔습니다.
이미지를 변환 해줄때 원본 그대로 변환해주는 사이트입니다.
간혹 컨버팅 사이트중 이미지의 크기를 자체적으로 압축해서 제공해주는 사이트들도 많은데
여기는 별다를 가입이나 조건 없이 손쉽게 원본 이미지크기 그대로 잘변환해줍니다.
특히 벡터이미지를 변환하다보면 빵꾸 현상이 발생하는데 여기는 그런 것도 없이 아주 깔끔하게 잘 변환을 해줍니다.
여섯 번째 - http://www.abluestar.com/
http://www.abluestar.com/utilities/encode_base64/index.php
이미지를 base64 인코딩을 해서 URI 스킴을 사용 할 수 있게 해주는 사이트입니다.
http://cocosoft.kr/364 - 데이타 URI 스킴(Data-URI scheme)Base64 이미지 넣기
50KB 이미지 제한이 있지만
어차피 데이타 URI 스킴은 너무 큰용량의 이미지를 사용하기에는..
크게 효과도 없고 코드도 너무 늘어나 버려서 20KB 파일만 되어도.. 한글문서로 약 12장정도니..
아이콘을 변환해서 사용할 때 매우 유용합니다. 이사이트는 즐겨찾기정도는 아니고 알고있으면 좋은?
꾸미기 이외에는 잘사용하지는 않습니다.
일곱 번째 -http://responsivechecker.net/
http://responsivechecker.net/responsive
반응형 웹을 작업을 하다보면 모바일 해상도를 체크해야하는데
손쉽게 디바이스별로 체크를 할 수 있는 사이트입니다.
모바일용 작업을 할 때 알아두면 매우 도움이 됩니다.
끝.
마지막 뽀나스 - http://www.faceyourmanga.com
http://www.faceyourmanga.com/editmangatar.php
자기 자신만의 아바타를 만화로 만들어 주는 사이트입니다.
저도 옛날에는 여기서 닉네임을 만들어서 사용했었는데 로고가 없을 때는 유용할 것 같습니다.
다음에 더 좋고 유용한 사이트 2탄으로 찾아올게요!!!!!!
