인포그래픽 한장으로 보는 소셜미디어 이미지 크기

정말로, 오랜만에 써보는 글이네요.
RSS 리더기를 눈팅만하다가 괜찮은 인포그래픽을 하나 발견해서 올려봅니다

페이스북, 구글플러스, 트위터, 텀블러, 유투브, 링크드인, 핀터레스트, 인스타그램의 프로필과 커버에 들어가는 이미지 사이즈를 알려주는 인포그래픽인데요, 제작한 곳은 canva라는 곳입니다.

Canva를 처음 듣는 분이 계실텐데, 사이트에 들어가보시면, 페이스북 커버사진이나 인스타그램 이미지, 포스터 등을 간단하게 만들 수 있는 그래픽 툴을 무료로(!) 제공하는 곳입니다. 저는 아이패드 앱으로 먼저 알게됬는데, 웹에서도 사용 가능하네요


Find more awesome design content at designschool.canva.com
The Complete Social Media Image Size Guide: With Awesome Design Tips [Infographic]
The Complete Social Media Image Size Guide: With Awesome Design Tips [Infographic]

내용이 긴 편이라, 잘라서 살펴보도록 하죠. 순서는 약간 바꿨습니다.

페이스북

페이스북은 커버 이미지, 프로필사진, 게시글 이미지 이렇게 3가지로 나누어져 있습니다.

  • 커버이미지: 851px × 315px
  • 프로필사진: 180px × 180px
  • 게시글 이미지: 1200px × 900px

페이스북에서 조심해야 할 점은 커버사진의 프로필사진영역이 중요한 정보를 가리면 안된다는 것과, 커버와 프로필이 이어지는 이미지로 작업한다면,[note]
[/note] 프로필 이미지가 160px로 줄여져서 나온다는 부분은 조심해야 겠죠.

인스타그램<

인스타그램 웹버전이 어느새 위의 캡쳐이미지 처럼 바뀌었네요
그래도 업로드하는 이미지 크기(640px)는 그대로입니다.

트위터

요새 많이 죽었지만(주그지마ㅠ) 그래도 올려봅니다. 트위터도 역시 페이스북과 마찬가지로 커버 이미지, 프로필사진, 게시글 이미지가 있습니다.

  • 커버이미지: 1500px × 500px
  • 프로필사진: 400px × 400px
  • 게시글 이미지: 1024px × 512px

트위터가 페이스북을 자꾸 따라하다보니 비슷비슷하네요. 역시 주의할 점은 페이스북처럼 커버사진이 중요한 정보를 가리면 안되겠고, 커버와 프로필을 이어지는 이미지라면 역시 프로필사진이 200px로 줄어든다는 점을 확인해야겠죠. 그리고 게시글 이미지는 타임라인에선 505px × 253px으로 나오지만, 비율은 그대로라서 상관은 크게 없어 보이네요.

텀블러

텀블러는 이미지를 보아하니 대시보드 기준이네요. 대시보드에서는 프로필사진과 게시글 이미지가 있습니다.

  • 프로필사진: 128px × 128px (최소)
  • 게시글 이미지: 1280px × 1920px (최대)

제 생각엔 게시글 이미지는 실제 표시되는 이미지의 가로 500px만 맞춰주면 될 것 같네요.

핀터레스트

텀블러와 함께 뜨고있는(근데 수익모델은 뭘까싶은) 핀터레스트입니다. 핀터레스트엔 프로필사진, 보드사진, 핀된 이미지가 있습니다.

  • 프로필사진: 165px × 165px
  • 보드사진: 가로 236px 이상
  • 핀된 이미지: 가로 600px736px 이상

보드사진은 제가 측정했을때는 216px × 146px으로 나옵니다. 사실 가로 236px로 되어있는 이유는 핀된 이미지를 메인페이지에서 보여줄때 가로를 236px로 보여주기 때문인 것 같네요. 그리고 핀 된 이미지는 확대했을 때 600px가 아니라, 736px이상이여야 잘 나옵니다.

유투브

유투브는 개인 프로필대신 채널페이지가 있죠.

  • 채널아이콘: 800px × 800px
  • 채널아트: 2560px × 1440px

이미지크기가 엄청 크네요 채널아이콘은 98px로 표시되면서, 권장사이즈는 800px이군요. 그리고 비디오 비율은 16:9로 표시되어야 한다네요.

링크드인

국내에서는 많이 사용하진 않지만, 해외에서 흥하고있는 링크드인입니다. 링크드인은 개인프로필 페이지와 회사프로필 페이지로 나누어져 있네요.

  • 개인 프로필사진: 500px × 500px
  • 개인 커버이미지: 1400px × 425px
  • 회사 로고: 100px × 60px
  • 회사 커버이미지: 646px × 220px

링크드인은 크리에이티브한 사진을 넣기보단.. formal한 사진을 넣어야해서 그런지, 개인 커버이미지는 옵션입니다.

구글플러스

아무도 쓰지않…는듯한 구글플러스입니다. 요새는 안드로이드 앱을 테스트 중이라면 커뮤니티에 가입해야 테스트 앱을 받아볼수도 있기도 해서, 약간 사용자가 늘어난 것 같기도 합니다. 어쨌든, 구글플러스의 프로필페이지엔 프로필사진, 커버이미지, 게시글 이미지 3가지가 있습니다.

  • 프로필사진: 250px × 250px
  • 커버이미지: 1240px × 700px
  • 게시글 이미지: 가로 497px

크게 주의할 점은 없고, 역시 유투브처럼 이미지가 크다는 특징이 있네요.


이렇게 정리해보니 많네요..
저는 이미지크기를 딱 맞게 올리거나 하는건 추천하지 않습니다. 인스타그램처럼 리디자인되어 이미지 크기가 바뀌거나 한다면, 이쁘게 안나올 수도 있으니까요 ?

역시 사진은 크게크게 올리는게 최고입니다

티스토리 에버노트 플러그인 VS Postach.io

얼마 전, 티스토리에 에버노트 플러그인이 생겼습니다. – Evernote 플러그인 오픈 안내

에버노트를 많이 쓰시는 분들은 상당히 반기는 분위기이던데요. 하지만, 알고 보면 에버노트 자체를 블로그화 시켜주는 Postach.io라는 서비스도 있습니다. 언뜻 보면 비슷한 두 서비스지만, 사용해보면 많이 다르더군요. 간략하게(?) 소개 겸 비교를 해봤습니다 🙂

Postach.io?

Postach.io는 에버노트에 노트를 작성하고 간단한 태그만 입력하면 바로 블로그에 글을 올려주는 서비스입니다.(사용법과 자세한 소개는 에버노트로 작성하고 퍼블리싱하는 멋진 블로그 서비스 ‘Postach.io’를 참고해보세요.) 2013년 에버노트 Devcup 금상을 수상한 서비스이기도 하죠.

그리고 현재 한국 에버노트 공식블로그도 Postach.io를 사용하고 있습니다. 참고로 이전까지는 텀블러를 사용했었죠.(근데 본사 블로그는 워드프레스군요;;)

Postach.io는 시작부터 글쓰기 그리고 글의 공개까지 상당히 심플하고 간단합니다. 블로그서비스라는 측면에서 봤을때, 글을 쓰는 또는 수정하는 부분이 없다는 건 독특합니다. 글을 쓰는 부분은 모두 에버노트에서 담당하기 때문에, 이전부터 에버노트를 활용해왔던 분이라면 손쉽게 글을 쓰고, 글을 공개할 수 있습니다. 그리고 에버노트에서 수정하면 바로 공개된 글에 바로 반영됩니다.

반대로 에버노트에 모두 맡기는 것이 오히려 단점이 되기도 합니다. 오로지 ‘에버노트’에서만 글 작성과 수정이 가능해서, 동영상과 같은 자료를 넣는 게 좀 제한적이긴 합니다(그래도 요즘엔 유투브,비메오 등은 코드로 지원해주고 있습니다) 그리고 하나 더 치명적인 단점이, 제목과 태그에 한글을 넣어 작성하면 모든 한글이 로마자로 자동변환(!)된다는 것입니다. 아래처럼 말이죠.

Evernote 블로그가 Postach.io와 함께 새롭게 탄생하였습니다.
evernote-beulrogeuga-postach-iowa-hamgge-saerobge-tansaenghayeossseubnida

에버노트를 열심히 사용하시는 분들이고, 위의 로마자 자동변환 문제만 신경 쓰지 않는다면, Postach.io를 추천 드립니다.

그럼 티스토리 에버노트 플러그인은?

티스토리의 플러그인은 Postach.io와 관점이 좀 다릅니다. Postach.io가 에버노트에 있는 노트를 ‘그대로’ 보여주는 것에 집중한다고 한다면, 티스토리는 글을 불러온 후 수정이 가능합니다. 당연히 티스토리에 불러온 글을 수정한다고 해서 에버노트의 원래 노트가 수정되진 않죠. 저는 이러한 점에서 두 가지 사용방법을 생각했습니다.(자세한 사용법은 ‘티스토리가 진화하고 있습니다. Evernote 글 불러오기 플러그인!!!’을 참고해보세요)

나름대로 모바일에서 잘나간다는 다음이 서비스하고 있는 티스토리에 대한 모바일지원은 거의 없는 거나 다름없죠. 이에 비해 네이버블로그는 모바일로 글을 작성하는 분들이 많습니다. 그만큼 블로그앱이 잘 되어있죠.


Alexander Supertramp / Shutterstock.com

그래서 첫 번째 용도로 티스토리의 빈약한 모바일 지원을 에버노트 글쓰기 플러그인으로 어떻게 좀 무마할 수 있지 않을까 하는 생각이 들더군요. 최소한 스마트폰에서 블로그에 브라우저로 글쓰기화면에 접속하는 것보단 에버노트 앱을 켜서 글 쓰는 게 나을 테니까요.

두 번째로, 블로그 글 초안을 에버노트로 쓰는 분들에게는 참 좋은 플러그인이라고 생각됩니다. 초안을 작성하고 간단한 서식을 지정한 후 그걸 바로 올릴 수 있으니까요. 예전에는 초안을 에버노트에 써놓고 그걸 복사+붙여넣기해서 썼었는데, 그것보단 확실히 편해졌네요.(요즘도 에버노트에 초안을 작성하는 분들이 계실지 모르겠지만, 에버노트는 블로그 초안을 쓰는데도 꽤 좋은 툴입니다. 원노트도 괜찮구요;;)


이러쿵 저러쿵 말이 길어졌습니다만, Postach.io든 티스토리든 컨텐츠가 중요하다는 것! 잊지마세요 🙂

덧) 모바일 지원이 지지부진해도 저처럼 티스토리에 계속 세들어 살 분들이라면, 군말없이 열심히 씁시다ㅠ

국내 인포그래픽의 문제점

저는 인포그래픽을 좋아합니다. 자랑이라고 하기는 뭐하지만, 지금까지 여러 인포그래픽을 봐왔고, 괜찮은 것들을 모아 포스팅하는 텀블러도 하나 운영하고 있습니다.

요즘, 영어권에서 불던 인포그래픽 열풍이 우리나라에서도 슬슬 불기 시작하는 것 같습니다. 몇몇 국내 대기업들이 인포그래픽을 제작하고 있는 것이 눈에 보이고, 신문에서도 인포그래픽이라면서 여러 자료를 제공하고 있구요.

그런데, 한국에서 과연 인포그래픽이 영어권만큼 열풍이 될까요?

공유가 되지 않는 인포그래픽 = 죽은 정보

요즘 영어권에서 인포그래픽은 하루에 3~4개씩은 쏟아져 나옵니다. 인포그래픽의 주제가 천차만별인 만큼, 그 퀄리티도 천차만별입니다. 한가지 예를 들어보면, 저번 런던 올림픽에 대해 100개가 넘는 인포그래픽이 쏟아져나왔습니다. 그나마 추려낸게 50여개입니다.

이렇게 많은 인포그래픽을 보면서 “정보의 홍수”라는 말을 다시금 깨닫게 됩니다. 그런데 문제는, 이렇게 만들어진 퀄리티도 괜찮은 인포그래픽들이 세상의 빛을 못보고 정보의 홍수속에 묻혀버리고 있는 경우가 많습니다.

그럼 국내 인포그래픽은 어떨까요?
현재는 여유가 있는 대기업들이 제작하는 경우가 많습니다. 대기업에서 운영하는 블로그에서 홍보용으로 올려놓는 경우가 많은데 공유상황은 어떤지 보면, 페이스북과 트위터를 합쳐도 한자리수를 벗어나지 못합니다.
나름대로 인기가 있을법한 GS칼텍스의 채용관련 인포그래픽과 KT의 wifi등에 대한 인포그래픽도 페이지에 들어가보면 썰렁합니다.

이렇게 만들어 놓고도 사람들에게 보여지지 못하는 인포그래픽이 어떤 의미가 있을까요?

이전에 보던 차트가 인포그래픽?

국내신문사들도 인포그래픽을 이제 막 시작하는 시기입니다. 그래도 현재 그나마 양적으로 많은 곳을 뽑자면, 조선일보에서 제공하는 인포그래픽페이지가 있습니다.

이런저런 자료들이 있는데, 가장 유감인 점은 인터랙티브 인포그래픽이라고 올라와있는 것들은 죄다 플래시기반이라는 겁니다. 그래도 인터랙티브한 자료들이 제대로 올라오면 다행입니다. 아예 인포그래픽이 맞나 싶은 자료들도 많습니다.

위와 같은 형식의 차트는 이전에도 많이 있었습니다. 인포그래픽이라는 이름으로 기존의 차트형식의 이미지까지 어영부영 포함시키려는것같은데 말이죠… 글쎄요?

데이터의 나열 ≠ 인포그래픽

제게 누군가 인포그래픽에 대해서 무엇이 가장 중요하냐고 물어보면 기획이라고 뽑을 것 같습니다. 기획이야말로 국내 인포그래픽에 대해 제가 제일 아쉬워하는 부분인데, 의미있는 데이터를 가지고 있으면서도 그냥 나열하는 식으로만 보여지는 것들도 있습니다.

위의 인포그래픽은 기획이 제대로 안되어있고 데이터만 있을때, 어떤 인포그래픽이 제작되는지 가장 뚜렷하게 보여준 사례라고 생각합니다. 너무 많은 데이터를 하나의 인포그래픽에 담으려는 과한 욕심이 데이터와 차트를 나열하는 식으로 만들게 하지 않았나 싶습니다. 기획만 제대로 되었다면 저런 결과물이 나오지는 않았을것 같네요.

덧) 이런 글을 썼다고 인포그래픽 싫어하는거 아니에요(…)
덧2) ‘기획’이 중요하다고 느낀건 재미삼아(?) 만들어보았을 때였습니다;;

숨겨진 텀블러 무료테마 100여개 모음

제가 주로 이용하는 블로그서비스 중에  텀블러를 좋아합니다. 텀블러를 5개나 운영하고 있을 정도죠.

Life Log – http://life.ludens.kr
Media Log – http://media.ludens.kr
Ludens’ View – http://pic.ludens.kr
Ludens ♥ Opera – http://opera.ludens.kr
Ludens ♥ Infographics – http://info.ludens.kr

어느 서비스형 블로그나 다 마찬가지겠지만, 텀블러를 쓰면서 드는 생각은 ‘테마가 왜 이것뿐인가?’입니다.
텀블러에서는 테마페이지가 따로 있어 버튼 하나만 누르면 간단하게 설치되지만, 직접 테마를 만드는건 어지간한 능력자가 아니면 어렵습니다ㅠㅠ

텀블러 테마페이지의 All themes에는 160여개의 테마가 있지만, 여기서 유료테마를 제외하면 남는건 70여개밖에 안됩니다. 그나마 여기서 입맛에 맞는 테마를 고르기도 어렵지만, 다른사람과 같은 테마라는게 마음에 걸립니다.
그래서 제가 그동안 찾아놓았던 텀블러 무료테마들을 모아서 레이아웃별로 정리해보았습니다. 텀블러에 테마 적용해서 예쁘게 사용하시기 바랍니다:)

1단

[one_half]

Litewire by david

[/one_half][one_half_last]

Color Shades by gondaba

[/one_half_last][one_half]

Field Notes by manasto

[/one_half][one_half_last]

Easy Reader 2 by cubicle17

[/one_half_last][one_half]

Reading by thebronzemedal

[/one_half][one_half_last]

abyss by parkerehret

[/one_half_last][one_half]

Luxury Notes by gillbitron

[/one_half][one_half_last]

Mindless by justincox

[/one_half_last][one_half]

Newsies by sgottit

[/one_half][one_half_last]

Quite Big by georgedunkley

[/one_half_last][one_half]

Circus by jiewmeng

[/one_half][one_half_last]

Akari by dylanrw

[/one_half_last][one_half]

peapod by parkerehret

[/one_half][one_half_last]

The Minimalist by minimalistco

[/one_half_last][one_half]

Chunk by thecityloop

[/one_half][one_half_last]

Glacial Simplicity by becojo

[/one_half_last][one_half]

Squared by mtjz

[/one_half][one_half_last]

Pink touch 2 by kcrnr

[/one_half_last][one_half]

Cafe by amwelles

[/one_half][one_half_last]

Floaty by permicah

[/one_half_last][one_half]

Simple 400 by maxfriedrich

[/one_half][one_half_last]

The Eames by minimalistco

[/one_half_last][one_half]

Mellow Yellow 2.0 by laurenashpole

[/one_half][one_half_last]

Ava-May by mikeballan

[/one_half_last][one_half]

Hush by conkers

[/one_half][one_half_last]

Colorful by 116boy

[/one_half_last][one_half]

Linen by jordansinger

[/one_half][one_half_last]

Shelf by jordansinger

[/one_half_last][one_third]

Ribbon by 116boy

[/one_third][one_third]

Boundless 1.1 by samstefan

[/one_third][one_third_last]

Simple Tabs by thecityloop

[/one_third_last]

2단

[one_half]

Other News by manasto

[/one_half][one_half_last]

Nostalgia by cubicle17

[/one_half_last][one_half]

Innovate by thijsjacobs

[/one_half][one_half_last]

Fluid by pixelunion

[/one_half_last][one_half]

Stationery by thijsjacobs

[/one_half][one_half_last]

Solstice by jakepaul

[/one_half_last][one_half]

pink triangle

[/one_half][one_half_last]

Urbana by 14thave

[/one_half_last][one_half]

Ride your bike by ryan–jay

[/one_half][one_half_last]

CS5 App by headbreeze

[/one_half_last][one_half]

Torn Paper by conkers

[/one_half][one_half_last]

Mordern1 by jiewmeng

[/one_half_last][one_half]

Not Bright by ablshd

[/one_half][one_half_last]

elegance by jiewmeng

[/one_half_last][one_half]

Royal Ribbon by wakecodesleep

[/one_half][one_half_last]

Pencil by conkers

[/one_half_last][one_half]

Dreams by jiewmeng

[/one_half][one_half_last]

Royal Cameleon by goroboto

[/one_half_last][one_half]

ffekt two by bustee

[/one_half][one_half_last]

pht by bustee

[/one_half_last][one_half]

Simple Things by danhauk

[/one_half][one_half_last]

Effector Theme by pixelunion

[/one_half_last][one_half]

Cut Clean by 116boy

[/one_half][one_half_last]

Atonement v2.0 by madebylipsum

[/one_half_last][one_half]

Chalkdust v.2.0 by mia-care

[/one_half][one_half_last]

XN by jxtn

[/one_half_last][one_half]

seattle by parkerehret

[/one_half][one_half_last]

Sam’s Theme by andrewstichbury

[/one_half_last][one_half]

Leatherbound Theme by gillbitron

[/one_half][one_half_last]

go CRAZY!! by notjq

[/one_half_last][one_half]

Enqueue by 14thave

[/one_half][one_half_last]

Vacant by samstefan

[/one_half_last][one_third]

Censorship Is Hip by ceekaadeetee

[/one_third][one_third]

Narsocrates by justincox

[/one_third][one_third_last]

Jellyfish v1.2 by mikeballan

[/one_third_last]

3단

[one_third]

Liquid Typo by sid05

[/one_third][one_third]

Prolix by 14thave

[/one_third][one_third_last]

From Baskerville by beautyandterrordance

[/one_third_last]

그리드(2단)

[one_half]

rainbow hipster v2.3 by kylielovestrees

[/one_half][one_half_last]

Cmpndm by dco1

[/one_half_last][one_half]

Sarah’s Theme by andrewstichbury

[/one_half][one_half_last]

Inkhorn by inkhorntheme

[/one_half_last][one_third]

TumblOS by mia-care

[/one_third][one_third]

Firsts by captainkrunk

[/one_third][one_third_last]

eu·pho·ri·a by kylielovestrees

[/one_third_last]

그리드(3단)

[one_half]

Silo by paulgiacherio

[/one_half][one_half_last]

Curator by andrewstichbury

[/one_half_last][one_half]

Discoid by andrewstichbury

[/one_half][one_half_last]

basik by psilocyb0rg

[/one_half_last]

그리드(4단)

[one_half]

Simbolic by happymonsterr

[/one_half][one_half_last]

OhMyGrid by helloauan

[/one_half_last]

그리드(반응형)

[one_half]

fnkyspclsprthm

[/one_half][one_half_last]

Retrobitch

[/one_half_last][one_half]

Jump by marcusmo

[/one_half][one_half_last]

Osteareda by happymonsterr

[/one_half_last][one_half]

xxx by psilocyb0rg

[/one_half][one_half_last]

Native Citizens by ceekaadeetee

[/one_half_last][one_half]

Stacky Ver. 3 by andrewstichbury

[/one_half][one_half_last]

xxx [invert]

by psilocyb0rg

[/one_half_last][one_half]

Hobo v2.0 by mikeballan

[/one_half][one_half_last]

Kinley Lite by andrewstichbury

[/one_half_last]

기타

[one_half]

Organ by simurai

[/one_half][one_half_last]

Shuffle by marcusmo

[/one_half_last]

덧) 근데 진짜 많네요-_-;;; 정리하느라 투자한 시간이…ㄷㄷ
덧2) 제가 쓰는 테마도 위에 있어 가슴이 아프군요 흑ㅠ
덧3) 왜 텀블러는 테마를 노출시키지 않는걸까요;;; 테마페이지에는 맨날 본것만 돌아다니는데ㅠ