이번 SNS 공유버튼 관련 작업읗 하면서 참조했던 사이트와 자료들을 여기에 간단히 공유해 봅니다.

우리 개인적으로 모았던 자료가 산만하게 흩어져 있으므로 항상 접속할 수 있는 곳에 간략히 정리해 보자하는 것이고, 둘째는 혹시나 필요하는 사람에게 조금은 도움은 주었으면 하는 생각입니다.

1. SNS 로고별 색상 코드

SNS 공유버튼을 수정하다보면 SnS 로고별 기본 컬러 코드가 필요합니다. 플러그인에서 컬러코드로 백드라운드 컬러를 불러오는 경우가 많기 때문이죠.

아래는 주로 외국 사이트 중심이라는 한계는 있지만 나름 잘 정리된 사이트입니다.

SNS별 로고 색상 정리 (Hex/RGB)

참고로 한국에서 많이 사용하는 SNS의 컬러코드는 아래와 같습니다.

• 네이버 밴드 : #1BCD21
• 네이버 : #00C53B
• 카카오톡 : #FEE700
• 라인 : #00C300
• 카카오스토리 : #FCB700

2. SNS별 공유 버튼 URL

SNS 공유버튼이 작동하기 위해서는 공유버튼을 눌렀을 시 반응해야하는 URL이 있어야 합니다. 대부분의 플로그인이 이 URL을 요구하고 있는데요.

구글링을 하다보면 이런 URL을 잘 정리해 놓은 사이트들이 있습니다.

bradvin/social-share-urls 에서는 아래와 같은 SNS의 URL을 정리해 놓았네요.

Facebook,Twitter,Google+,Pinterest,Linked In,Buffer,Digg
StumbleUpon,Tumblr,Reddit,Delicious,Blogger,LiveJournal,MySpace,Yahoo,FriendFeed,NewsVine,EverNote,GetPocket,FlipBoard,InstaPaper,Line.me,Skype,Viber,WhatsApp,Telegram.me,VK,OKru,Douban,Baidu,QZone,Xing,RenRen,Weibo가 정리되어 있습니다.

여기에서는 중국계의 SNS도 많이업데이트 되어 있습니다.

한국 SNS관련해서는 [개발] SNS 공유 링크 정리 에서는 URL을 정리해 놓았네요. 물론 여기에는 글로벌, 중국 그리고 한국것이 망라되어 있습니다.

3. SVG 활용 관련

디자인 등에서는 많은 관심을 받고 있는 파일 포맷이지만 아쉽게도 마소에서는 IE9이전까지는 지원하지 않아서 널리 활성화되지는 못했던 포맷인데요.

아 예전에 hackya님이 저를 지목하면서 소개한 적이 있었던 포맷이기도 합니다.

VR 360° 과 이미지 압축방법

그리고 워드프레스 빠르게 하기 라는 글에서도 SVG관련 많은 설명이 있습니다.

이번 SNS 공유버튼 관련 여러 플러그인을 조사하다보니 Sassy Social Share가 바로 SVG를 사용하고 있더라구요. 아주 오랜된 브라우져는 포기한다면 상대적으로 빠른 속도를 구현할 수 있고 실제로도 테스트 한 플러그인 중에서 가장 빨랐습니다.

WordPress Social Sharing Plugin – Sassy Social Share

3.1. SVG 활용법 소개

SVG 활용에 대해서는 안형우님이 운영하는 사이트 웹으로 말하기에서 나름 체계적으로 소개하고 있어서 링크를 걸어봅니다.

SVG 활용 1 – 아이콘 폰트가 아니라 SVG를 사용한 이유

SVG 활용 2 – 일러스트레이터를 이용해서 SVG 파일 만들기

SVG 활용 3 – 웹 문서에 SVG를 넣는 다양한 방법, 온갖 예외 피하기

SVG 활용 4 – 미지원 브라우저 대응

SVG 활용 5 – SVG에 애니메이션 효과 주기

그리고 전체적으로 퀵하게 살펴보기에는 아래 글도 괜찮은 듯 합니다.

웹에서 벡터(Vector) 이미지를 쓰는 방법 – SVG

블로그 로고 벡터이미지 svg 파일로 만들기 및 사용법

3.2. SVG 용량 최적화

SVG 파일은 일러스트레이트에서 만드는데요. 여기 말고도 있을 것같긴한데..

아무튼 일러스트레이터에서 만든 SVG 파일을 최적화해주는 svgo-gui라는 프로그램입니다. 이는 온라인상에서 작업을 알 수 도 있고 프로그램을 PC에 설치해 작업할 수도 있습니다.

저는 따로 PC에 설치하는 번거로움 때문에 그냥 온라인 사이트를 사용했습니다.

SVG 최적화 프로그램 – 온라인 작업 사이트

SVG 최적화 프로그램 – PC 설치용 프로그램 다운로드

보통 30%이상 일러스트에서 작업했던 것 보다 줄어듭니다.

3.3. charset을 사용하고 URL Encoding을 해야

SVG 파일 포맷을 적용하려다보니 인터넷 익스플러르는 고려할게 있네요. 까다로운 IE(인터넷 익스프러르)

data:image/svg+xml;charset=utf8를 사용해야

그것중의 하나가 utf8 ㅈ체를 지우너하지 않아서 charset을 추가해야 한다고 하네요.

이미지 URL data type을 일반적으로는 data:image/svg+xml;utf8를 사용하는데요. IE는 이를 지원하지 않으므로 data:image/svg+xml;charset=utf8이라고 바꾸어야 한다고…

URL Encoding을 해야

SVG를 사용 시 크롬 등 일반 브라우져는 URL Encoding없이 사용해도 문제없이 작동하는데요.
IE는 반드시 URL Encoding을 해줘야 합니다.

• “ 대신 ‘를 사용하며
• < 와 >는 반드시 Encoding해야 한다고..

그러면 어떻게 URL Encoding을 할 수 있을까요? 인터넷에는 인코딩 해주는 사이트가 널려 있습니다. 구글링하면 금방 찾을 수 있습니다. 제가 사용하는 사이트는 아래와 같습니다.

URL Encoding and Decoding

네이버 로고의 Raw SVG 파일 코드

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><style>.st0{fill:#00C53B;} .st1{fill:#FEFEFE;}</style><path class="st0" d="M200.2 100.3v99c0 .7-.2.9-.9.9H1.1c-.7 0-.9-.2-.9-.9V1.1c0-.7.2-.9.9-.9h198.2c.7 0 .9.2.9.9v99.2z"/><path class="st1" d="M116.5 101.5v-1.1-44.8c0-.9.2-1.1 1.1-1.1h31.5c.9 0 1 .3 1 1.1v89.5c0 .9-.2 1.1-1.1 1.1h-31.9c-.8 0-1.2-.2-1.6-.9-10.3-15.2-20.7-30.5-31-45.7-.2-.3-.4-.6-.8-1.1v46.4c0 .9-.1 1.3-1.2 1.3H51.1c-.9 0-1.1-.2-1.1-1.1V55.5c0-.9.3-1 1.1-1h32.3c.7 0 1.1.2 1.5.8 10.2 15.1 20.5 30.3 30.7 45.4l.6.9c.2-.1.3-.1.3-.1z"/></svg>

네이버 로고의 URL Encoding된 SVG 파일 코드

%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%3E%3Cstyle%3E.st0%7Bfill%3A%2300C53B%3B%7D%20.st1%7Bfill%3A%23FEFEFE%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M200.2%20100.3v99c0%20.7-.2.9-.9.9H1.1c-.7%200-.9-.2-.9-.9V1.1c0-.7.2-.9.9-.9h198.2c.7%200%20.9.2.9.9v99.2z%22%2F%3E%3Cpath%20class%3D%22st1%22%20d%3D%22M116.5%20101.5v-1.1-44.8c0-.9.2-1.1%201.1-1.1h31.5c.9%200%201%20.3%201%201.1v89.5c0%20.9-.2%201.1-1.1%201.1h-31.9c-.8%200-1.2-.2-1.6-.9-10.3-15.2-20.7-30.5-31-45.7-.2-.3-.4-.6-.8-1.1v46.4c0%20.9-.1%201.3-1.2%201.3H51.1c-.9%200-1.1-.2-1.1-1.1V55.5c0-.9.3-1%201.1-1h32.3c.7%200%201.1.2%201.5.8%2010.2%2015.1%2020.5%2030.3%2030.7%2045.4l.6.9c.2-.1.3-.1.3-.1z%22%2F%3E%3C%2Fsvg%3E

3.4. base64 인코딩/디코딩

이 동네를 기웃거리다보니 base64 라는 것이 있네요.
말 그대로 64진법으로 인코딩한다는 뜻인데, ASCII 문자들을 써서 표현할 수 있는 가장 큰 진법이므로 전자메일 등을 통한 이진 데이타 전송에 많이 쓰이고 있다고 합니다.

마찬가지로 Sassy Social Share가 base64로 인코딩해 로고를 사용하고 있다고 해셔 참고하게 되었습니다.

온라인상으로 base64로 인코딩 디코딩해주는 곳이 많은 데요

아래와 같은 사이트들을 참고했습니다.

Base64 encoder/decoder online

HTML/Oct/Hex Decoder

Base64 Decoder & Encoder

참고로 Sassy Social Share에서 base64로 인코딩한다는 정보는 잘못되었고요.
위에서 밝혔듯이 svg 포맷을 URL Encoding 한것이죠.

%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23fffff'%2F%3E%3C%2Fsvg%3E

이를 디코딩해보면 아래처럼 svg 파일 형식이 나옵니다.
이는 URL Encoding한 것입니다.

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'><path d='M0,22L22,0l2.1,2.1L4.2,22l19.9,19.9L22,44L0,22L0,22L0,22z' fill='#fffff'/></svg>

4. 마치며

이상으로 간단이 SNS 공유버튼 만들면서 접했던 정보중에서 공유할만 가치가 있다고 생각되는 것들을 추려보았는데요.

막상 정리하고나니 과연 도움이 되는 정보들이지 조금 의아하긴 합니다.

그러면서 너무 마이크로하게 문제를 접근하고 있는 게 아닌지 그리고 저같은 문외한이 해결하긴 너무 벅찬 주레를 가지고 혼자 끙끙 앓고 있는 것은 아닌지 반성을 하게 됩니다.
사실 돈이 있다면 전문가에게 의뢰해서 아 내가 이런것을 원하는 데 만들어 줘!! 하겠는데.. 쩝 돈이 없으니 몸과 시간을 들여서 고민을 해보는 것이라소 스스로 위로해 봅니다.

그리고 이런 삽질을 하면서도 조금씩 배우는게 있으므로 연관성이 조금 떨어지지만 도움이 조금은 되지 않을까요? 이번에 몰랐던 많은 지식을 피상적으로나마 접하게 되었으니 말입니다.