인터넷 익스플로러 때문에 대충 임시방편으로 수정 해놓은 로고의 코드를
다시 리뉴얼 작업을 했습니다. 'ㅡ'
여기서 왜 로고의 코드라고 했는지 아래에서 다시 설명하고..
로고이미지 리뉴얼 작업을 하면서, 이양 하는 김에.. 웹디자인 이미지 사용에
대해서 정리해보는 시간을 가지려고합니다.!!
Intro:웹사이트 속도와 이미지
빠르고 쾌적하고 원할한 웹페이지를 만들기 위해서는 코드의 압축이나 정리, 서버등의 방법도 중요하지만
가장 크게 신경이 쓰이는 부분이 바로 이미지 입니다.
우선 우리가 아는 이미지들은 전부가 모두 코드로 되어있죠.
JPG, PNG 들도 단순히 각각의 압축방식입니다. 그래서 이미지코드를 하나의 파일로
간단히 만들어 놓고, 뷰어프로그램이나 이미지편집프로그램(그림판,포토샵...등등)
으로 보거나 편집할 수 있게 지원을 하는 것이죠.
바로 이런 이미지파일을 사용해서 웹페이지를 꾸미는데 사용을 많이합니다.
이미지를 라이브러리에 저장한 다음
태그를 사용해 링크를 불러오는 방식이죠
<img src="경로"> 또는 CSS:background: url(경로)
이렇게 말이죠.
하지만 이런식의 외부라이브러리에서 불러오는 방식은 웹브라우저가 웹페이지를 로드할 때
이미지크기파일도 문제이지만. Request 요청수도 당연히 늘어나게 되고
이 부분이 웹페이지 로딩속도에 영향을 주게 됩니다.
이미지파일의 크기는...
compressor.io와 같이 무손실로 이미지를 한 번더 압축해주는 툴이 많습니다.
예를들어서. 코코소프트 제블로그를 보면..
코코소프트 메인화면
티스토리 자체플러그인이미지파일, 썸네일을 제외하고, 웹페이지
메인화면에 이미지 파일이 들어간 부분은 배경화면이미지파일 단 하나입니다.
단하나의 이미지를 사용했기 때문에
웹페이지 로드 Request를 대폭 줄일 수 있었죠.
우측상단의 로고, 사이드바에 대형로고,
SNS 아이콘, 좌우글넘기기 아이콘 등등 모두 외부 링크 이미지파일이 아닙니다.
나머지는 CSS code를 사용해서 꾸미거나, 지금부터 설명할 방식으로 표현이 되어있습니다.
《 웹페이지에 이미지를 표현하는 방법 》
1. 데이타 URI 스킴(Data-URI scheme)Base64 방식
위에서 이미지는 모두 코드로 되어있다고 했습니다.
바로 그 코드를 HTML에 직접 삽입하는 방식입니다.
간단한 아이콘 같은 경우에는 매우 간편하게 HTML에 삽입을 할 수 있어서 괜찮은 방식입니다.
다만, 현재 블로그에 사용하는 배경을 변환시 코드의 길이가 수십페이지가 넘어갈 것입니다...
HTML크기가 무거워지겠죠(?), 그리고 HTML에 직접 삽입하기 때문에 브라우징캐싱도 할 수 없습니다.
그렇기 때문에 사이즈 및 고화질의 이미지를 삽입하기에는 적합하지 않는 방식입니다.
http://cocosoft.kr/364 - 데이타 URI 스킴(Data-URI scheme)Base64 이미지 넣기
2. CSS Sprite Image 방식
주로 포털사이트(네이버나 다음에 많이 사용하는 방식입니다.)
하나의 이미지에 필요한 이미지를 모두 합친 다음 CSS:background-position속성으로 표시 위치만 바꿔주는 것이죠
하나의 이미지만 불러오기 때문에 Request를 한 번으로 줄일 수 있으며,
브라우징캐싱 또한 가능하기 때문에 대부분의 포털 및 쇼핑몰 사이트에서 많이 사용되는 방식입니다.
단점은, 만약 이미지를 수정해야할 때 손이 많이 가게 되는 단점이 있죠...
1px이라도 틀어진다면,.. 전체의 사이트가 깨져버리게 된다는..
하지만 요즘은 쉽게 sprite image를 설정하는 툴도 많기 때문에 쉽게 수정도 가능한 편입니다.
http://cocosoft.kr/367 - 이미지 로딩 빠르게하기(페이지속도) CSS Sprite Image
3. Icon font 방식
요즘 웹사이트 뿐만아니라 반응형웹페이지에서도 많이 선호되며 사용되는 방식입니다.
웹폰트 처럼 아이콘폰트를 만드는 방식입니다.
주로 SVG파일과 같은 벡터이미지로 만들 수 있는데..
아이콘 폰트에 이미지를 저장하면, 폰트와 관련된 CSS태그(fontsize..color 등등)를 사용 가능합니다.
모바일 환경에서도 이미지가 작아져도 깨짐현상 없이 선명하게 보이기도 하고..
암튼 아이콘폰트를 잘만 다루어도 매우적은용량으로 많은 이미지를 꾸밀 수 있습니다.
제블로그의 로고파일 또한 아이콘 폰트로 만들어서 삽입해놓았기 때문에 Request를 줄이고 선명한 로고를 유지할 수 있습니다.
http://sonylove.tistory.com/1177-나만의 아이콘폰트 만들기 - icomoon
4. SVG 태그 방식
HTML에 직접 SVG 태그를 사용 하는 방식입니다.
제블로그를 크롬 및 파이어폭스 브라우저로 접속해보면, 우측상단 사이드바에
움직이는 그려지는 로고가 있을 것입니다.
이것도 이미지파일이 아닌 HTML파일에 SVG 태그를 사용해 코드를 넣어서 표현을 했고
CSS: fill 속성과 stroke 속성 그리고 애니메이션효과를 주어서 만든 소스코드입니다.
SVG 쉽게설명하면 벡터이미지 방식인데, path로 경로를 연결하고, 코드를 사용할 수 있습니다.
다양한 플러그인이 존재하며, 앞으로도 많이 사용될 방식이라고 생각합니다.
다만, 아직 망할놈의 익스플로러가 CSS3를 완벽하게 지원하지 않아서,
jQuery SVG 플러그인 스크립트 또는 유로 스크립트를 사용하거나, 적당히 타협을 해야합니다.
아래 포스팅에 SVG이미지파일을 HTML에서 사용가능한 path 코드로 변환하는 방법이 있어용.
http://cocosoft.kr/386-로고 벡터이미지 svg파일로 만들기
http://cocosoft.kr/390-[SVG]글씨 써지는 효과 코드로 만들기 (jQuery DrawSvg || pure CSS)
로고를 보면 이지가 아닌 path태그로 만들어진 것을 알 수 있습니다.
암튼 이것 때문에 오늘 글을 작성했네요...
혹시나 기존에 글씨 써지는 로고효과 포스팅을 보고 사용하신 분들은 ㅠ_ㅠ
시작 fill-opacity 및 stroke-opacity 태그의 값을 1로 시작해야지 익스플로러에서 제대로 표현이 될겁니다.
망할 익스플로러.. 암튼 아래 로고를 보면 이제는 부드럽게 그려지는 효과가 나타날 것입니다.
익스플로러에서는 그냥 멈춰진 상태만 보일 것이구요.
(여기에 익스플로러에 관해서도 많은 것을 얘기해야하지만.. 다음기회에..)
.drawsvg{padding:20px;border-radius:50%;background:linear-gradient(135deg,#b3cae5 12%,#dbdde4 46%,#e4e3e4 70%,#f7ddbb 94%,#efcab2 100%)}
.drawsvg svg{width:130px;height:130px}
.stroke{stroke:#000;stroke-width:2px;stroke-dasharray:0 250;stroke-opacity:1;fill:none;
-webkit-animation:stroke_offset 15s cubic-bezier(0.05, 0.35, 0.26, 0.82) infinite;
animation:stroke_offset 15s cubic-bezier(0.05, 0.35, 0.26, 0.82) infinite}
@-webkit-keyframes stroke_offset{100%,25%{stroke-dasharray:250 0;stroke-opacity:0}50%,75%{stroke-dasharray:250 0;stroke-opacity:.75}55%,70%{stroke-dasharray:0 250;stroke-opacity:1}}
@keyframes stroke_offset{100%,25%{stroke-dasharray:250 0;stroke-opacity:0}50%,75%{stroke-dasharray:250 0;stroke-opacity:.75}55%,70%{stroke-dasharray:0 250;stroke-opacity:1}}
.fill{fill:#000;fill-opacity:1;
-webkit-animation:fill_offset 15s cubic-bezier(.25,.46,.45,.94) infinite;
animation:fill_offset 15s cubic-bezier(.25,.46,.45,.94) infinite}
@-webkit-keyframes fill_offset{100%,25%{fill-opacity:1}50%,70%{fill-opacity:0}}
@keyframes fill_offset{100%,25%{fill-opacity:1}50%,70%{fill-opacity:0}}
크롬, 파이어폭스, 사파리로 보세요.!
암튼 더 다양한 이미지를 처리하는 기법 및 방식이 있겠지만
위 방식만 마스터해도 웹디자인 및 사이트 기획을 할 때 매우 큰 도움이 될 것이라고 생각합니다. 'ㅡ'
그럼 다음에 저도 공부많이해서.. 다시..
더좋은 정보로.. 소개를 위해 노력할게요. 'ㅡ'
음..다음번엔.. 블로그 메인화면을 확 바꿔봐야겠네용ㅎㅎ
