whali's smart work

SoundCloud에 빠지면서 상대적으로 'Google Music'을 소홀히 하게 된거죠... 엄밀히 말하면 두 서비스의 용도는 다른데요. Google Music에는 제가 가지고 있던 mp3중에 소장가치가 있는 음악들을 올려놓고, 스트리밍으로 언제든지 듣는 용도이고 SoundCloud는 전세계에서 생산되는 새로운 음악들을 스트리밍으로 듣는 용도입니다. 둘을 연결해 주는 온라인 서비스를 찾다가 Jolidrive를 찾게 되었습니다만...결론적으로 'Google Music'과 'SoundCloud'를 연결해 주지는 못합니다만...상당히 매력적인 서비스입니다 :>

Cloud기반 OS Joli OS의 'Browser'

Jolidrive는 'Jolicloud'의 'Browser' 서비스입니다. Joli OS는 chrome OS와 같은 Cloud 기반의 OS로 Jolidrive는 원래 Joli OS를 위한 서비스입니다. 이에 대한 자세한 설명은 생략하겠습니다.(http://www.jolicloud.com/jolios)

html5 기반의 Joli OS와 연동 app들

Storage, Social, Photos, Videos, Music, Reading

Jolidrive의 사용법은 아주아주 simple합니다. 서비스 가입 후 웹브라우저로 접속하여 연결가능한 서비스 중에 원하는 서비스를 선택, 연결만 하면 됩니다. 크게 Cloud Storage, SNS, Photos, videos, Music, Reading 관련 서비스에 연결하고 공유도 할 수 있습니다.

원하는 서비스에 연결하면, 왼쪽에 연결된 서비스 목록을 볼 수 있습니다.

다양한 Cloud Storage를 모아서 본다 Google Drive, Dropbox, Box, SkyDrive 등 현재 6가지의 Cloud Storage에 연결 가능하고 각 서비스의 이용현황과 디렉토리의 pdf, image 등을 미리 볼 수도 있습니다. mp3가 있다면 바로 play도 됩니다. 단, 파일 편집은 제한적이고 편집이 불가능한 파일은 해당 서비스로 연결됩니다. 

google drive의 PDF 파일보기

스트리밍 음악을 바로 듣는다 제가 가장 많이 사용하는 기능은 SoundCloud과 Exfm의 음악을 바로 듣는 것입니다. 그 전에는 각 서비스에 들어가서 들어야 했지만 이제는 Jolidrive상에서 Trendy한 음악들을 즐길 수 있게 되었습니다. 단, 개인적으로 'Airplay'기능과 'google music' 연결이 안되는 게 아쉽네요.....

Exfm의 음악을 선택하면 브라우저 왼쪽 하단에서 play됩니다 :> 그 외에도

'read later'의 대표적인 서비스 Pocket, Readability, Instapaper 연동

Vimeo, YouTube 연동 

facebook, google+, tumblr 연동 :>

Flickr, Instagram, Picasa(그러나 곧 종료 ㅜㅜ) 연동

  Jolidrive에서 보는 제 tumblr가 훨씬 보기 좋네요 ㅜㅜ

아래 영상은 필수!!

PowerPoint의 부적절한 사용

웹 또는 앱프로젝트를 진행할 때 대부분 'Storyboard'라는 것을 만듭니다. 일반적으로 'PowerPoint'로 제작하는 이 무의미한 산출물은 대부분 기획자가 만듭니다. 그 안에는 디자이너와 퍼블리셔와 개발자를 위한 다양한 정보가 담기게 됩니다. 그 좁은 화면에 말이죠... 혹시 화면이 길어지면 '다음페이지에 계속' 이런 진부한 문장을 붙이지는 않나요? 저는 늘 이 ppt로 만드는 storyboard에 염증을 느끼고 있었습니다. 일단, 화면이 너무 작아요... 난 웹을 기획하는데 왜 'Document' 사이즈를 가진 ppt로 만들어야 하나.... 웹이나 앱은 pixel이 기본단위인데 말이죠...  그리고 명색히 storyboard인데 도대체 'story'담기는 이렇게 힘든걸까요... 'PowerPoint'는 잘못이 없지요.... 이 툴을 이 용도로 사용하는 '사용자'의 잘못일 뿐입니다.  그리고 버전관리는....협업은....ㅜㅜ 훔... 길게 쓰지 않겠습니다.

이런것 좀 하지 말자구요...

Pixel단위의 화면, 산출물을 그대로 기획에 담다. UXPin은 웹브라우저 기반의 UX Design Tool입니다. 디자인 툴이라고 하니 왠지 디자이너들만 써야 할 것 같지만 전혀 그렇지 않습니다. UXPin은 Pixel이 기본단위입니다. 그리고 그 크기는 제한이 없습니다. 우리는 여기서 실제 사이즈에 맞게 Grid에 맞춰 실제 화면사이즈로 UI 기획을 할 수 있습니다. 이러한 툴들이 기본적으로 제공되는 다양한 'Element Library'를 사용하면 몇번의 Drag만으로 간단한 Storyboard는 작성이 됩니다. 

메인화면은 길고 서브는 짧다고요? 그렇게 그리면 됩니다. :>

    Wireframe 그 이상! Action을 주고 html로 바로 확인한다.

UXPin이 또 근사한 이유는 각 element에 실제 UX를 담을 수 있다는 것입니다. 이런 것이죠 :>

'이 아이콘에 마우스 오버하면 팝업이 뜨고 팝업에서 닫기 버튼을 누르면 닫혀라!' 물론 아주 간단한 예시지만 이것을 설명이 아닌 action으로 줄 수 있습니다.  그것을 어떻게 확인하느냐... Preview에서 바로 그 모션이 실행됩니다. 브라우저에서 바로 그러한 디테일한 UX까지 모두 확인할 수 있습니다. 그러면 Story는 더욱 정확하게 전달되고, 화면이나 Action에 대한 오류나 개선도 꼼꼼하게 체크할 수 있습니다. 사실 이 기능들은 텍스트로 설명하기는 다소 어렵습니다... 각 element에 name을 줘서 action, hidden, 칼라, 투명도, 링크 등등을 줄 수 있습니다.  게다가 해당 Preview에 대한 url을 공유하면 실시간으로 브라우저에서 확인이 가능하고 html로 별도저장도 됩니다. PDF, jpg로도 저장되고요. :>

웹브라우저에서 바로 Preview~ 아이콘에 마우스를 올리면 Dialog창이 뜨게 action을 줘보았습니다. 2depth, 3depth? 다 됩니다~

반응형웹 UI기획과 Test까지 UXPin이 특별한 또 한가지는 반응형웹 기획이 너무나도 쉬워진다는 것입니다. 제공하는 여러가지 size로 동일한 페이지에 대한 해상도별 사이즈를 쉽게 만들 수 있습니다. 만들어진 페이지는 'Preview'에서 실제 html로 확인이 가능합니다. 브라우저를 쭉쭉 늘렸다 줄였다 하면 바로 반응이 온단 말입니다.해당 url로 모바일이나 tablet에서 확인할 수도 있습니다. 허허

디테일하게 UI까지 test 후 실제 디자인을 진행할 수 있으니 퍼블리싱까지 완료 후에 test를 하는 프로세스에서 오는 다양한 오류사항을 사전에 최소화 할 수 있습니다. 클라이언트의 피드백도 미리 확인할 수 있겠지요....이를 ppt로 힘겹게 그리고 커뮤니케이션하던 슬픈 날들은 이제 잊어주세요....

  실시간 공동편집, 채팅, comment, 파일업로드, history관리... ppt 작성에서는 상상도 못할 이러한 협업들이 가능합니다...권한을 가진 접속자들은 실시간으로 같이 채팅도 하고 편집도 하고 코멘트도 쓸 수 있습니다. 실시간으로 수정되고 있는 상황을 모니터링 할 수도 있습니다. 손으로 스케치한 wireframe 이미지를 첨부할 수도 있고, 이전 버전으로 돌아가는 것도 어렵지 않습니다.

    유료서비스, 하지만 효율을 생각하면 전혀 아깝지 않은 비용

UXPin도 User수에 따른 Month 비용 방식입니다. :> 하지만 실제로 써본 결과 전혀 비용이 아깝지 않은 서비스입니다. 리플렉션에서도 공식적으로 사용하는 UXPin 텍스트로는 그 감동을 전하는 게 어렵군요....

MS Project와 유사한 기능과 Interface gantter는 MS Project와 대단히 유사하면서 필요한 기능을 대부분 갖춘 서비스입니다. 처음이 이 서비스를 접하고 저는 놀라움과 감동에 벅차 올랐던 기억이 있습니다.

위는 gantter에서 제공하는 template중에 'Project Management Plan'의 형태입니다. 물론 처음부터 만드는 것도 가능하지만 이러한 template을 잘 분석하는 것도 관리스킬을 높히는데 도움이 됩니다 :>

gantter는 꼭 필요한 대부분의 기능을 모두 갖추고 있습니다. 주요한 기본기능만 살펴보면

무제한 프로젝트 생성 및 속성관리

하이라키 구조의 작업생성, 기간설정, 소요시간 표시, 작업별 상세속성 지정

자원관리 및 작업배정, 자원비용 계산

PC저장, 온라인저장, google drive 저장

MS Project 파일 가져오기 및 내보내기, PDF/PNG/인쇄가능한 html로 내보내기 등등

  매력적인 Cloud기반의 서비스

gantter의 진짜 강점은 'cloud기반'이라는 것입니다. MS Project파일은 어찌되었던 누군가가 작성하고 전달해야 하는, 관리가 필요한 '파일'이지만 gantter에서 작성된 프로젝트는 온라인에서 저장,관리가 됩니다.  클라이언트는 언제든지 접속해서 스케줄을 확인하고, 관련자에게 부여한 권한에 따라 여러명이 협업으로 관리할 수도 있습니다.

관련자에게 프로젝트의 link를 공유하여 초대합니다. 초대 시 'view/comment/edit'로 권한을 부여할 수도 있습니다. Chrome Extension, Google Drive 연동

사랑스런 크롬브라우저에서 'Chrome Extension'으로 설치하면 gmail만으로 login이 되며, gantter가 아닌 google drive에 저장이 가능합니다. :> 또한, 각 작업과 관련된 파일들을 google drive에서 선택해서 연결해 놓을 수 있습니다.

작업속성에서 '파일연결' 기능을 통해 google drive에서 파일을 선택하여 연결 또한 Google Drive에서 바로 gantter에 접속할 수도 있습니다.

'Creative'를 클릭하면 Chrome Extension을 통해 Google Drive와 연동된 서비스 목록이 나오고 클릭하면 해당 서비스가 바로 활성화 됩니다 :>

그리고 완전 'free' 사랑합니다!!!!

Trello: "The Long-Awaited Trip" from Trello on Vimeo.

  많은 연동은 기대하지 말자. 하지만 그것만으로 충분 단, 단순한만큼 너무 많은 기능을 요구해선 안됩니다. Teambox가 gmail이나 google Calender와 완벽하게 연동되고, Hojoki의 경우 다양한 외부서비스들 - evernote, dropbox 등등 - 과 뛰어난 호환성을 보여주지만 Trello는 google drive, dropbox의 파일을 첨부할 수 있는 기능정도입니다.(이건 공식적 서비스에서, 외부채널을 더 활용한다면 연동이 더 가능은 합니다) 하지만 그 정도의 연결만으로도 사용하는데 어려움은 없습니다.

  직관적인 UI와 Drag & Drop, Trello의 가장 큰 매력 먼저, 회원가입 후 몇 가지 절차를 거치면 아래와 같은 'Board' 형태를 만날 수 있습니다. 

직관적인 UI는 Trello의 가장 큰 장점입니다. 생성하는 프로젝트는 위와 같은 Board의 형태를 띕니다. 물론 여러개의 프로젝트를 생성하면 여러개의 Board가 생성됩니다. 위 프로젝트(Board)는 3개의 List가 생성된 상태이입니다. 각 List의 세부항목들을 'Card'라고 칭합니다. Card들은 Drap & Drop으로 List를 옮겨다닐 수 있습니다. 따라서 각 업무들의 상태를 바꾸기가 상당히 쉽습니다. 아이폰과 아이패드 앱이 있는데요. 앱상에서 이 Drag & Drop은 강력함을 발휘합니다. 너무나 심플하고 너무나 쉽습니다. To-do, Doing, Done 으로 List를 생성해서 이슈관리를 하면 상당히 효율적입니다. 

필요한 기능은 대부분 갖춘 Card

Card를 클릭하면 다음과 같은 Card 상세가 뜹니다. 

Card에는 파일을 첨부할 수도 있고, 댓글도 가능하여 그 주제에 대한 의견교환도 가능합니다. 관련 Member를 설정할 수 있고, 작업만기일, 칼라별로 정의한 Label 부여, Vote를 이용한 우선순위 부여, 외부 링크생성까지 가능합니다. 완료된 Card는 Archive로 저장하면 List에는 남지 않아도 별도로 저장은 됩니다.  서비스 사용에 대한 자세한 내용은 생략하겠습니다. :> 네이버에서 검색하시면 서비스 소개 잘 설명해 주신분이 많습니다. ㅋ 꼭 협업이 아니더라도 개인의 업무를 정리하는 툴로도 아주 효과적입니다.

  작성된 issue는 담당자가 지정되고 담당자는 해당 페이지를 직접 보면서 markup된 issue 사항을 클릭해서 확인하고 진행상황을 표시할 수 있다.  클라이언트의 피드백, 버그 수정, 기능 요청 모든 것을 해당 페이지의 해당영역에 표시하여 관리할 수 있습니다. 

  백문이 불여일견. Demo만으로도 충분합니다. :> http://www.bugherd.com/preview 난 잘 나오는데? 어떤 환경에서 안된다는거지?  테스트해야할 OS, 브라우저, 브라우저별 버전, 해상도가 많다보니 이런것을 파악하는 것도 일이라면 일인데요. bugherd는 이런 환경을 따로 작성할 필요도 없습니다.

작성자가 issue를 작성할 때의 환경이 같이 저장됩니다, 사이트 주소, OS, 브라우저 버전, 해상도, 보고있던 브라우저 크기까지...감동적인 서비스입니다.

팀의 이슈사항, 피드백, 변경사항은 'tast board'에서 한눈에 확인에 확인할 수 있습니다. 그 외에도

브라우저의 확장기능(크롬,사파리,파폭에서 가능)을 사용하면 issue를 작성했을 때의 화면을 자동으로 screenshot으로 추가

이메일 알림, 파일첨부 기능, Tag기능, 강력한 검색, Guest 초대

크롬,사파리,파폭은 확장기능설치로 바로 사용가능, 그 외에는 스크립트 추가 해당 사이트에 Bugherd의 sidebar를 사용하려면 스크립트코드를 추가해야 합니다. 크롬,사파리,파폭은 브라우저의 확장설치만으로도 가능합니다만 망할 IE에서 사용하려면 ... 자세한 방법은 http://support.bugherd.com/entries/20425406-Installing-the-Script

지원브라우저는? Bugherd가 현재 공식적으로 지원하는 브라우저는 다음과 같습니다.

Chrome 23 이상

FireFox 15 이상

Safari 6 이상

Internet Explorer 8 이상 (6,7이 안되는 것은 아닙니다. 단, 광범위한 테스트 대상이 아니라서 공식지원에는 표기하고 있지 않습니다.)

Member수에 따른 월비용 방식, 30일간 무료테스트 가능

첫번째, 나눔글꼴은 'SIL OPEN FONT LICENSE 1.1' 라이선스를 채택함으로써, 개인 및 상업적 사용에 대해 자유롭게 허용하였습니다. 이 라이선스는 웹폰트로 사용도 가능하며, 폰트를 직접 판매하지 않으면, 소프트웨어의 탑제나 번들로도 제공이 가능할 정도로 자유로운 라이선스입니다. http://help.naver.com/ops/step2/faq.nhn?faqId=15879

두번째, 나눔글꼴은 웹폰트로 쓰기에 적합한 힌팅(Hinting)된 폰트로 제작되었습니다. 힌팅된 폰트는 그렇지 않은 폰트와 달리, 폰트 크기에 따라 폰트가 뭉게지거나 가로세로 획의 굵기가 일정하지 않는 등의 문제를 해결하였기 때문에, 현 디스플레이 환경에 또는 웹폰트에 적합합니다. 나눔글꼴은 전문 폰트제작사인 '산돌커뮤니케이션'과 '폰트릭스'에서 제작하여 완성도도 높은 편입니다.  이 두 가지 이유로, 나눔글꼴 특히 웹에서는 '나눔고딕'을 선호하고 있습니다.  나눔글꼴이 '무료'로 쓸 수 있는 부분은 제끼더라도, 웹에서 깨끗하게 사용할 수있는 -특히 본문서체로- 폰트는 찾아내는 것 자체가 쉽지 않습니다. 하지만, 기업에서는 다소 가벼운 느낌을 주는 나눔고딕의 '굴림' 형태 때문에, 또는 NHN의 색깔이 강해서 선호하지 않는 경우도 있습니다.

힌팅폰트, 수요는 있으나 공급은 부족한 이유

나눔글꼴을 제작하는데 NHN에서 몇 억을 들였다는 얘기를 얼핏 들은 적이 있습니다. 폰트 제작이라는 것이 많은 비용이 들어가는 어려운 일이지만, 힌팅폰트는 그렇지 않은 폰트 제작보다 몇 배는 힘든 작업입니다. 

일반적으로 한글폰트가 KS 완성형 2350자를 가지고 있는데(숫자, 영문, 특수문자 등도 포함됩니다.) 그 폰트들을 모두 수작업으로 힌팅을 해줘야 합니다. 이러한 작업을 '메뉴얼힌팅'이라고 합니다. 나눔고딕처럼 조합형 11,172자로 만들 경우에는 그 작업은 몇 배는 더 어려울 것입니다. 이렇게 많은 노력과 비용이 들어가야 힌팅폰트가 완성되지만, 지금까지 그에 대한 수요는 거의 없었습니다. 힌팅폰트는 사실 인쇄용이나 포토샵과 같은 그래픽 툴에서는 전혀 의미가 없습니다. 모니터와 같은 화면에 렌더링되는 문자열에만 의미가 있기 때문입니다.

힌팅폰트, 앞으로는 좀 많아질까? 문제는 웹폰트 사용이 늘기 시작한 현 시점에도, 힌팅폰트 제작은 망설여질 수 밖에 없습니다. 왜냐하면, 고해상도의 디스플레이에서는 힌팅이 되지 않아도 폰트가 충분히 깨끗하기 때문입니다. 모니터의 dpi가 72dpi라면, 최신 모바일기기의 dpi는 일반적으로 300이 넘습니다. 따라서 힌팅이 되지 않더라도 아주 세밀하게 폰트를 렌더링할 수 있습니다. 이미 '레티나 디스플레이'가 맥북에도 적용되어 쓰고 있는 현 시점에, 몇 년안에 대다수의 모니터 환경도 점점 고해상도로 옮겨갈 것으로 예측할 수 있습니다. 따라서 '힌팅폰트'에 대한 니즈는 그리 오래 가지 않을 것으로 전망되기 때문입니다. 

힌팅된 웹폰트로 태어난 Rix고딕: 'Rix스마트고딕' 선택의 폭이 거의 없는 현 시점에서 회사에서도 선호하고 사용하던 Rix고딕이 힌팅된 웹폰트인 'Rix스마트고딕'으로 등장한 것은 개인적으로도 즐거운 일입니다. 제 블로그의 폰트가 바로 'Rix스마트고딕'입니다.  http://typolink.co.kr/fonts/family/Rix스마트고딕 Rix스마트고딕을 적용한 '대학내일', 반응형으로 제작되어있다.

  힌팅폰트 전문 제작사 '우리글닷컴'의 폰트들 우리글닷컴은 클리어타입으로 제작된 힌팅폰트들을 전문으로 제작하고 있습니다. 대표적인 폰트로 '우리돋움','준바탕','우리새봄'이 있습니다. 주로 언론사에서 많이 사용되고 있습니다. http://typolink.co.kr/fonts/browse/ko?p=1&theme=&orderby=updated_at&q=&company=%EC%9A%B0%EB%A6%AC%EA%B8%80%EB%8B%B7%EC%BB%B4&company2=&family2=#.UVxVr8VWySo

맑은고딕을 웹폰트로 쓰면 어때? 윈도우 Vista부터 기본적으로 깔리는 '맑은고딕' 역시 클리어타입으로 제작된 힌팅폰트입니다. 나눔고딕보다 맑은고딕을 더 선호하는 디자이너들도 상당히 있습니다만 이를 '웹폰트'로 쓰는 것은 간단한 문제는 아닙니다. 맑은고딕은 윈도우라는 소프트웨어에 포함된 폰트입니다. 시스템에 깔려있다하여 어떤 용도로든 사용 가능한 것이 아닙니다. 만약 인쇄용으로 또는 웹폰트로 사용하려면 이에 대한 별도의 라이선스 구매가 필요합니다. 맑은고딕의 저작권자는 MS이고, 폰트의 제작 및 판매는 Monotype Imaging에서 이루어지고 있습니다.맑은고딕 뿐만 아니라 윈도우에 기본 탑재된 폰트 - 돋움,굴림 등- 모두 동일합니다. 다국어 역시 마찬가지죠. 관련정보: http://ir.monotypeimaging.com/releasedetail.cfm?ReleaseID=299605

Monotype imaging의 ascenderfonts.com에서 129달러에 팔고 있는 '돋움체'. 웹폰트 라이선스는 아닙니다. 따라서, OS나 소프트웨어와 함께 깔리는 폰트들은 웹폰트로 변환해서 사용하는 것은 라이선스에 위배됩니다.

모바일에서의 다양한 시도들은 잊지말자 위에서 언급했던대로 모바일 디바이스의 높은 dpi로 모바일웹에서는 선택할 수 있는 웹폰트의 폭이 어마어마하게 많습니다. 모바일웹 또는 하이브리드웹앱을 제작할 때 우리는 더 많은 시도를 해볼 수 있습니다. 영문폰트처럼 멋진 필기체나 독특한 그래픽 폰트들을 디자인의 요소로 사용해 보면 어떨까요? html5, css3, SVG, 웹폰트까지 모바일에서는 더 많은 시도가 가능합니다.

gradient 기법을 사용 우선 변경 전 제 Logo 파일이 삽입된 형태입니다.

<div class="profile-icon"><a href="/"><img src="whali.svg"></a></div>

위와 같이 <img>속성만으로도 IE9을 포함한 대다수의 최신 브라우저에서는 SVG가 렌더링 됩니다... 

이제 변경 후에 제 Logo는 2개의 레이어로 구성되었습니다. 우선 html은 다음과 같이 바뀌었습니다.

<a href="/"><div class="profile-icon"></div></a>

이유는 간단합니다. 더이상 image를 직접 부르는 것이 아닌 'profile-icon'이라는 css의 background로 불러오기 때문에 <div>를 <a>Tag로 직접 감쌌습니다....만약 저러한 방식이 웹표준 방식이 아니라해도 또는 저급한 방식이라 해도 저는 전혀 깨닫지 못합니다 :> 이제 'profile-icon' CSS에 아래와 같은 속성을 추가합니다.

background: transparent url(whali.png) center center no-repeat;

background-image: -webkit-linear-gradient(transparent, transparent), url(whali.svg);

background-image: linear-gradient(transparent, transparent), url(whali.svg);

첫번째 줄은 PNG 이미지를 background로 대체하는 것을 의미합니다. 세번째 줄은 SVG를 지원하는 브라우저만이 가지는 2가지 속성-CSS gradients와 multi-layer backgrounds-를 사용하여 이미지를 정의하는 것입니다. 즉, SVG를 지원하는 브라우저는 세번째 줄을 렌더링하게 됩니다....만 반대로 2가지 속성을 지원하지 않으면 SVG를 지원하는 브라우저라도 첫번째 줄을 렌더링하게 됩니다. 거지같은 IE9가 거기에 속합니다..... 두번째 줄은 사랑스런 'Chrome'이나 'Safari'같은 'vendor-specific prefixes'를 아직 지원하는 브라우저를 위한 코드라는 군요... 저 -webkit 코드는 CSS 여기저기에 꼭 들어가는 거 보니 호환성에 필요한 듯 싶습니다(정말 비전문적인  발언 아닌가요? ㅋ)

이제 CSS를 저장하고 SVG와 PNG 파일을 경로에 올리고 test를 하니.... 사랑스런 Chrome과 Mobile에서 SVG는 여전히 잘 나옵니다. 그리고...거지같은 IE에서는 7,8,9 모두 PNG로 잘 나옵니다...(그러나 제 블로그의 반응형 자체가 IE8 이하 따위와는 호환이 잘 안될겁니다. ㅋ) 길게도 썼지만 적용하는데는 5분도 안걸린(파일찾는게 더 오래걸린) 간단한 꼼수였습니다.  도움 받은 출처: http://css-tricks.com/forums/discussion/19965/svg-with-png-fallback http://pauginer.tumblr.com/post/36614680636/invisible-gradient-technique http://pauginer.github.com/invisible-gradient-technique/

  관련 Post

왜 SVG일까? SVG는 그 안에 그래픽의 모든 정보를 수치로 담고 있고 수정도 가능하기에 '원본파일'이나 마찬가지라고 하겠습니다. Vector파일은 픽셀단위의 이미지들과 다르게 '좌표'를 가지고 이미지의 정보를 저장합니다. 예를 들어, 박스를 그린다고 하면, 왼쪽 상단의 시작점을 (0,0)으로 하면 오른쪽 하단의 끝나는 지점의 좌표를 알면 박스가 완성됩니다. 거기에 칼라정보를 저장하면 , 원하는 칼라의 박스가 완성됩니다. '크기'가 fix된 파일이 아니기에 어떠한 크기로도 유연하게 바뀝니다. 고해상도의 모바일 다바이스에서는 더욱 빛을 발합니다. 아주 선명하죠. 또한 동일한 디자인일 경우, 그 박스를 픽셀방식의 이미지로 저장했을 때보다는 Vector파일 자체가 훨씬 가볍습니다. Vector파일은 디자인 요소가 복잡할 수록 그 크기가 커집니다. 그것을 수치로 표현하는 것이 복잡해 지기 때문이죠 :>

서론이 길었습니다. 친절한 설명은 되지 못했지만, 결론적으로 '사진'과 같이 픽셀단위로 서로 다른 많은 정보를 가지고 있다면 기존과 같은 png, gif, jpg가 맞겠지만 직접 제작한 Vector기반의 이미지들은 SVG로 사용될 때 여러가지에서 유용합니다.  <예시사이트> 플래시가 사양길로 접어든 현재, SVG를 사용한 모션은 또하나의 대안이 될 수 있을 것 같습니다.

간단한 예시를 들어보겠습니다. 제 텀블러 왼쪽 상단에 있는 'w'로고를 SVG로 바꾸어 보았습니다. 원래는 포토샵에서 400x400 pixel로 만든 'png'파일이었습니다. 고해상도 대응을 대비해서 좀 크게 만들었습니다.투명도와 칼라값을 가진 PNG-24포멧으로 용량은 '9.126KB'였습니다.

이 디자인을 그대로 일러스트레이터에서 Vector로 만들었습니다. 그리고 몇 가지 포멧에 대한 크기를 비교해 보면 아래와 같습니다.

SVG - 1.446KB

JPG - 31.83KB(투명도 X, Quality 60%)

GIF - 8.836KB

PNG - 14.18KB

용량의 차이가 엄청납니다. 물론 가로세로 더 작은 크기로 저장한다면 용량차이는 줄겠으나  픽셀단위의 이미지들은 동일한 정보도 한픽셀씩 저장하기 때문에 이런 결과가 나타납니다. 게다가 flexible하게 Scale 대응도 안되고요. SVG의 구조

아무튼 제 허잡한 로고를 SVG로 저장하였습니다. SVG 저장할 때 옵션이 있습니다. 자세한 설명은 생략하고 아래 이미지로 대체합니다.(옵션이 이게 정답이라는 것은 아닙니다... 저도 잘 모르거든요 :>)

SVG를 메모장이나 editor에서 열어보았습니다. 브라우저에서 열어서 프리뷰 하실 수 있고 '소스보기'로 아래 코드를 확인할 수도 있습니다.

<?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 13.0.0, SVG Export Plug-In  --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [

<!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">

]>

<svg version="1.1"

xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"

x="0px" y="0px" width="612px" height="612px" viewBox="0 0 612 612" enable-background="new 0 0 612 612" xml:space="preserve">

<defs>

</defs>

<path fill="#FF6600" d="M306.196,0C137.089,0,0,137.089,0,306.197c0,169.109,137.089,306.196,306.196,306.196

s306.197-137.087,306.197-306.196C612.396,137.089,475.304,0,306.196,0z M264.255,168.863l-79.15,202.831

c-2.047,4.775-3.602,10.142-4.451,14.914c-2.448,13.721-0.509,26.25,13.211,26.25c23.268,0,42.824-22.671,57.095-52.498

l74.742-191.497h85.906l-79.15,202.831c-3.279,8.353-5.858,16.107-6.816,21.475c-2.13,11.932,2.452,19.687,16.771,19.687

c58.464,0,127.055-133.629,138.766-199.251c-2.535,4.175-15.383,5.966-20.156,5.966c-14.317,0-18.389-17.3-16.047-30.425

c3.302-18.493,17.68-32.215,42.735-32.215c28.638,0,33.008,25.652,28.322,51.901c-17.033,95.45-95.059,261.89-216.759,261.89

c-38.777,0-61.45-16.703-62.646-50.109c-36.896,42.952-69.793,50.109-93.655,50.109c-35.794,0-60-21.475-51.058-71.587

c2.023-11.334,6.155-24.461,11.692-38.777l74.742-191.497h85.907V168.863L264.255,168.863z"/>

</svg>

위 코드를 보시면 우선 이 파일구조가 'XML'인 것을 알 수 있습니다. 문득 상당히 잘 그려진 데이타 연동 그래프도 활용이 가능하겠다는 생각이 드는군요 :> SVG로 만들어진 그래프 예제 http://nickqizhu.github.com/dc.js/ 이미지에 대한 정보는 <SVG> ~ </SVG>입니다. 칼라값 #ff6600이 보이는군요. width="612px" height="612px"는 삭제하겠습니다. 그러면 100%로 유연한 SVG파일이 됩니다. 브라우저에서 보면 아래와 같습니다.

이제 <SVG>~</SVG>코드를 복사해서 원래 로고가 있던 자리에 넣고 상하좌우 여백을 주는 CSS를 따로 정의했습니다.

-원본소스- 업로드한 이미지 경로를 받고 해당 이미지 사이즈를 컨트롤 하게 되어 있습니다. <div class="profile-icon">

      <a href="/"><img src="{block:IfIconImage}{image:Icon}{/block:IfIconImage}{block:IfNotIconImage}{PortraitURL-128}{block:IfNotIconImage}" /></a>

    </div>

-SVG로 교체-

<div class="profile-icon">

    <a href="/"><svg version="1.1"

     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"

x="0px" y="0px" viewBox="0 0 611 611" enable-background="new 0 0 611 611" xml:space="preserve">

<defs>

</defs>

<path fill="#FF6600" d="M305.696,0C136.865,0,0,136.865,0,305.697c0,168.833,136.865,305.696,305.696,305.696

c168.832,0,305.697-136.863,305.697-305.696C611.395,136.865,474.528,0,305.696,0z M263.823,168.587l-79.021,202.499

c-2.043,4.767-3.595,10.125-4.444,14.89c-2.444,13.698-0.508,26.207,13.19,26.207c23.229,0,42.754-22.634,57.001-52.412

l74.62-191.184h85.766l-79.021,202.499c-3.274,8.339-5.849,16.081-6.805,21.44c-2.126,11.912,2.448,19.654,16.743,19.654

c58.368,0,126.847-133.411,138.539-198.926c-2.531,4.168-15.358,5.956-20.123,5.956c-14.294,0-18.359-17.272-16.021-30.375

c3.296-18.463,17.651-32.162,42.666-32.162c28.59,0,32.953,25.61,28.276,51.816c-17.006,95.294-94.904,261.462-216.405,261.462

c-38.714,0-61.35-16.676-62.544-50.028c-36.837,42.882-69.679,50.028-93.503,50.028c-35.735,0-59.902-21.44-50.974-71.471

c2.02-11.315,6.145-24.42,11.673-38.713l74.62-191.184h85.767V168.587z"/>

</svg></a>

</div> 잘 보시면 <a>~</a> Tag안에만 교체한 것입니다. 이대로 쓰면 동그란 원이 여백없이 꽉 차기 때문에 기존의 profile-icon CSS를 좀 조절했습니다. 이제 로고가 잘 적용이 되었습니다 :>

****내용추가***** 이 post에 관심있으신 분이 예상보다 많아서 부족한 설명을 보충합니다. 오해의 소지가 있을 수 있는데요. SVG는 image처럼 그냥 경로를 설정해도 됩니다. 즉, <img src="~~~/images/logo.svg>와 같이 지정해도 표시가 됩니다. 저 같은 경우 텀블러에 이미지를 올릴 경로가 없어서 SVG 소스 자체를 html 코드에 넣은 것 뿐입니다. ㅎㅎ 

IE8이하는 어떻게?? IE8이하 또는 오래된 Opera에서는 SVG를 지원하지 않기 때문에 Javascript로 분기작업을 해야합니다. 즉, SVG를 지원하지 않는 브라우저의 경우, 별도로 저장된 PNG로 교체하여 보이도록 Javascript를 작성하여 적용하면 됩니다. 또는 CSS의 브라우저 호환성을 이용한 꼼수도 있군요 :> 관련 Post 참고

별도의 PNG를 만들어야 하는데 왜 이렇게까지 해야하냐고 하겠으나

고해상도 디바이스에서의 높은 퀄리티

작은 용량 및 컨트롤

반응형웹과 같은 flexible 대응 - 사이트내 동일한 일러스트를 여러가지 크기나 칼라로 사용한다면 더욱 효과적

XML 방식으로 데이타연동 가능

네이버나 구글을 조금만 검색해보면 좋은 예제와 적용방법을 찾으실 수 있습니다. 

관련 Post