팔로워 늘이는 카드뉴스 디자인, 돈 안들이고 하는 법? 최소한 비용 들여서 만들기

Sang-eun Park
14 min readFeb 27, 2020

리모트로 인스타그램 뉴스카드 디자인 스타일 만들고 유지하기! 일러스트레이터, 구글 프레젠테이션, 그리고 아이패드에서도 가능한 ProCreate 사용하는 법까지!

디자인에 돈도 안들이고 팔로워를 늘일 수 있을까요? 늘릴 수 있습니다. 사진을 통일된 분위기로 늘 시선을 사로잡게, 질리지 않게 잘 찍을 수 있다면요. 그런데 사진보다 글을 많이 쓴다면? 글이 주요 콘텐츠라면? 물론 콘텐츠가 좋으면 사람들은 봅니다. 전단지가 좀 보기 힘들어도 세일 한다고 하면 유용한 정보니까 다들 읽잖아요. 그렇죠?

그렇지만 콘텐츠 자체로만 어필할 수 없다면? 유입률이 적다면 어떻게 하나요? 혹시 카드뉴스의 스타일이 항상 바뀌지는 않나요? 서체가 자주 변하나요? 레이아웃이 늘 변하나요? 일관된 스타일이 없는 디자인은 브랜드의 신뢰성을 낮춥니다. 디자인과 브랜드에 대한 소비자의 눈이 높아짐에 따라 자신이 팔로워하는 페이지, 구매하는 제품의 브랜딩이 자신을 대변한다고도 하죠!

다 좋다고요, 근데 돈이 너무 많이 드는 일 아닌가요? 이렇게 묻고 싶으신가요?

“ 인스타그램 디자인 가이드 어떻게? 하시나요? 통일성 없는 디자인 시스템이 브랜드의 정체성을 저해한다는 것을 아시나요? ”

꾸준한 디자인 아이덴티티를 지키려면 디자이너를 고용하거나 의뢰를 맡겨야 한다는 것을 알고 계실 거에요. 그런데 몇몇 문제를 겪어왔을 수도 있습니다. 어렵게 구한 디자이너가 오래 일하지 않아 다음 사람이 오면 디자인 스타일이 바뀌는데 그 격차가 커서 다른 디자인 같은 경험 해보셨나요? 또한 디자이너를 오랫동안 고용할 수 없어서 곤란하셨나요? 아니면 아예 시도 조차 못하고 계신가요?

까짓거, 내가 직접 만들면 시간도 절약되고 좋지 뭐. 하고 어도비 프로그램을 직접 배우시고 있나요? 아니면 그렇게 할 생각이세요? 디자인 프로세스나 가이드를 가지고 계신가요? 그런 프로세스를 만들 시간이 없나요? 낭비라고 생각하세요? 생각보다 어렵지는 않으시던가요? 디자인 분야에 종사하는 사람들이 있는 만큼 복잡한 프로그램을 배우고 디자인 감각을 익히는데는 많은 시간이 들죠.

디자인 할 사람 없다, 프로세스 만드는데
오래 걸린다, 얘기할 시간이 없다.
협업 도구를 배우기 어렵다.

그동안의 솔루션!
이미지에 워터마크 붙이기, 그냥 만들어지는 대로 두기, 어도비 등 프로그램 설치해서 배우고 시행착오 겪기.

만약 한번 만든 디자인이 지속 가능하다면 어떨까요? 브랜드 정체성이 없는 단계에도 디자인 스타일 하나를 계속 유지할 수 있다면? 여기 그런 방법이 있습니다.
언제든 어디에서든 열 수 있고, 프로그램을 설치하지 않아도 됩니다. 다운 받지 않아도 되고요! 케나다에서든 인도네시아에서든 태국에서든 영국에서든 다 똑같이 나올거에요. 텍스트만 바꾸거나 꾸미기 프로그램을 쓰듯이 오브젝트를 마우스로 이동하기만 하면 되어요. 원격으로 떨어진 상황에서 담당 디자이너도 확인하기 참 편하답니다. 그래서 이게 뭐냐고요?

구글 협업도구를 아시나요? 무료! 어디서나! 언제나! 노 다운로드! 편집 가능

구글에서 광고 외주 받지 않았어요~ 홍보글도 아닙니다. 저희 Welko에서 써보니 편했어요. Welko는 일본에서 리모트 근무를 하고있는 Chinatsu와 한국에서 출근하고있는 Sang-eun이 진행하고 있는 인스타그램 플랫폼 채널이에요. 디자이너인 Sang-eun은 여러 프로젝트에 소속되어있어 인스타그램 카드뉴스를 매 번 편집할 수는 없었어요. 그렇다고 Chinatsu가 어도비를 사비로 설치해서 배우기엔 비효율적이었죠. 그런데 101Global에서는 구글 협업도구를 사용하여 1달간 7번의 워크숍을 진행한 경험이 있었어요. 그렇게 구글 프레젠테이션을 활용한 카드뉴스 Kit를 개발하게 되었답니다!

리모트 워크, 디지털 노마드, 수정가능, 지속가능, 관리가능, 추가가능!

도대체 이게 무슨 말이냐, 말로만 해서는 감이 잡히지 않으실 거에요. 그래서 저희 Welko가 한 방법을 보여드리고, 샘플 구글 프래젠테이션도 공유해드리려고 해요! 마스터 페이지를 활용하여 실시간 수정 및 소통이 가능한 방법을 보여드릴게요.

글이 길어져 지루함을 벌써 느끼셨다면, 따뜻한 차 한잔 가져오세요~
나중에 마저 읽어야지.. 하고 링크를 저장하고 탭을 닫았을 때, 다시 그 탭을 방문할 확률이 얼마나 될까요? 만약 그렇게 이 글을 다시 방문해주셨다면 꼭 댓글을 남겨주세요! 정말 기쁠거에요.

일러스트레이션을 구글 프레젠테이션으로 옮기는 법!

1.Welko의 런칭 초반 2~3일 모습!

1. 첫 웰코의 인스타그램 페이지

지금은 47의 팔로워, 1주 평균 370회의 프로필 방문률, 매일 50~70개의 하트를 받고, 한국어 카드뉴스는 9.6%의 프로필 방문률을 가진 웰코의 초반 모습이에요! 팔로워 1에 팔로잉1이 보이시죠? 자, 그럼 여기서 저 카드뉴스에 대해 말해볼게요.
*페이스북 광고를 통한 링크 클릭률은 보통 2%대에요! 이에 비교해서 9%대면 상당히 높죠?><

2. Product Owner Chinatsu의 첫 디자인을 가지고 첫 카드뉴스 디자인을 하고 있는 Sang-eun의 스크린 캡쳐

2. 일러스트레이터로 카드뉴스를 디자인하세요.

디자인 프로그램 어도비 일러스트레이터의 이런 화면을 본 적이 있으신가요? 글을 바꾸려면 무엇을 해야하는지 아시나요? 확대하려면 무엇을 클릭해야하는지 알고 계신가요? 마케터나 라이터에게 이것을 가르칠 생각이신가요? 배우는 데에 얼마나 오래 걸릴까요? 한 번 배움의 시간을 가진 뒤 얼마나 오래 같은 조직에서 일하게 될까요? 당장 써야하는데 말이죠. 가뜩이나 2020년 2월 하순, 지금처럼 리무트 근무가 당장 필요한 시기에 말이에요!

3. 구글 프레젠테이션, 문서를 처음 생성했을 때 페이지!

3. 구글 프레젠테이션의 새문서를 만드세요.

구글 계정 가지고 계신가요? 구글 프레젠테이션에서 새 문서 하나를 만들어보세요! 와. 새 하얗네요! 이렇게 빈 것을 어떻게 활용하라는 거지? 싶으실 거에요. 글을 다 읽고도 잘 모르겠다 싶으시면 댓글을 남겨주세요. Welko가 도와드릴게요.

먼저, 이 페이지를 보시면 이게 뭐지? 싶으시죠? 16:10 비율이 아니잖아요? 1:1 비율! 맞아요, 인스타그램 카드뉴스처럼 정사각형으로 만들었습니다! 이것은 파일>페이지 설정에서 와이드스크린 16:10을 맞춤을 선택해서 가로 세로 길이를 똑같이 맞춰주시면 만들 수 있어요. Welko는 인스타그램에 최적화 하기위해 1080픽셀로 설정했습니다.

4. 어도비 일러스트레이터에서 완성된 카드뉴스 디자인

4. 동일한 디자인 요소를 파악하세요.

자, 다시 한번 어도비 일러스트레이터로 가볼게요. 이렇게 디자인이 완성되어 있나요? 여기서는 이미 어도비 프로그램을 다룰 수 있는 사람의 도움을 받으면 좋아요. 아, 물론 이 시나리오는 일러스트레이터로 만들어진 작업물을 가지고 있을 경우에 해당되어요! (없다면 당장 디자이너를 섭외해 보면 어떨까요? 그리고 이 글을 보여주시는 거에요!)

여기에서 반복되는 것들이 보이시나요? 상단에 웰코나 한국어 Quiz, 이런게 보이실 거에요! 그런데 그것 뿐만이 아니라 여기에 쓰인 모든 이미지들이 다 모듈처럼 쓰일 수 있어요! 다 파편화 시켜서 쓸 수 있다는 말이죠. 여기서 내용이 바뀌어도 항상 유지되는 디자인 스타일을 모두 파악해보세요!

5. 디자인 그래픽요소 나누기! 각각의 아트보드에 담아주세요.

5. 아트보드에 그래픽를 나눠 남고 PNG로 추출하세요.

Welko의 한국어 뉴스카드는 이렇게 분리되었어요! 보시면, 늘 배경에 같이 쓰이는 요소들이 뭉텅이로, 그리고 부분으로 나눠져 있는 것을 보실 수 있어요. 일러스트레이터를 쓰는 법을 몰라도, 우리 다들 프레젠테이션에서 막 도형을 움직일 수 있다는 것은 알잖아요? 그걸 이제 구글 프레젠테이션에서 사용해 볼거에요! 일러트스레이션에서 만든 모든 요소를 File>Export해주세요! 그리고 모든 오브젝트는 배경이 투명해야하기 때문에, PNG확장자로 뽑아주셔야해요.

6. 구글 프레젠테이션에 담은 그래픽 모듈 키트!

6. 구글 프레젠테이션에 PNG 파일을 모두 옮겨 정돈하세요.

이 화면은 PNG로 뽑은 것들을 정돈하여 배치해둔 키트에요! 모두 다 드래그가 가능하고, 배경이 투명해서 오브젝트만 보입니다. 이제부터는 저기 지구 반대편 아르헨티나나 브라질에서도 같은 화면을 볼 수 있게 된거에요!!

7. 일러스트레이터 이미지의 포지션 그대로! 그래픽 모듈 키트로 만들기!

7. 카드뉴스 디자인 대로 키트를 사용해 배열하세요.

이제 여기서부터 팁을 더 드릴게요. 먼저 일러스트레이터에서 만든 화면을 배경에 붙이세요. 그리고 오브젝트 아무거나 클릭 > 서식옵션 > 조정 > 투명도에 들어가서 JPG든 PNG로 되었든 일러스트레이터에서 추출한 이미지의 투명도를 낮추세요. 그리고 6번 이미지에서 보여드린 키트들을 드래그앤 드롭하고, 텍스트 박스에 글도 똑같이 쳐서 키트로 모든 위치를 맞추어 보세요. 그렇게 모든 화면을 다 바꾸고, 이 슬라이드들을 복붙해 가며 내용만 바꿔서 쓸 수 있어요! 이렇게 카드뉴스의 디자인 시스템을 옮겼습니다.!

그런데 문제가 있을 수 있어요. 뭔가 하나 움직이려하면 어디를 클릭해야하는지 숨죽여서 계속 봐야한다는 거죠! Command+option+(+)를 해서 화면을 막~! 확대해도 찾기가 어려워요. 그래서 준비했어요, 마스터페이지 활용방법!!!

마스터 페이지? 그거 어려운거 아니야? ㅠㅠ 안써보면 그럴수도, 한번 써보시면 이렇게 속 편할 수가 없다!

인디자인이나 XD, 스케치를 써본 디자이너분들이라면 마스터페이지가 뭔지 다들 아실거에요. 그렇지만 이 글을 읽는 분들 중에는 모르는 분도 계시겠죠? 아니면 벌써 마이크로 소프트사의 프레젠테이션 문서로 써보신 분도 있을거에요! 마스터 페이지는 말 그대로, Master라는 단어로 표기되고, 모든 화면에 적용될 수 있는 스탠다드 같은 거에요. 그래서 이 영역에 도형을 하나 두고, 일반 화면에 돌아와서 클릭을 하면 마우스로 잡히지가 않는답니다. 꽝꽝 얼어버려 있는 거에요.

구글 프레젠테이션에는 슬라이드 > 마스터 수정에서 찾으실 수 있어요.

8. 마스터 페이지에 들어갔을 때 모습!

8. 마스터 페이지에 키트 갖다 붙이세요.

그러면 원래 있던 마스터 페이지가 열릴거에요! 안에 웰코 카드뉴스는 제가 편집하고 있던 화면이에요! 그 외에는 이런식으로 짙은 회색 배경에 흰색 종이가 열린답니다. 여러 패널이 있기 때문에 여기서 각각 카드뉴스 한장의 스타일을, 어디에 쓰여도 바뀌지 않는 기본 포맷을 설정하시면 되어요. 여기서는 연보라색이 배경과 글자 A, 웰코 로고와 한국어Quiz가 되겠죠?

여기서 중요한 것을 말씀드릴게요. ‘얼죽아’라고 쓰여있는 글은 마스터페이지 밖에 나가서 일반 페이지에서는 수정이 불가능해요. 수정을 가능하게 하는 텍스트박스를 만들고 싶다면, 기존 마스터 페이지들에 있는 ‘마스터 제목 스타일을 수정하려면 클릭하세요.’에 텍스트 스타일을 입히고 사이즈를 조절해서 만들어야해요! 하나씩 하다보면 어렵지 않으니 차근차근 해보세요.

9. 마스터 페이지의 텍스트의 스크롤! 텍스트 박스가 좁아지면 생겨요.

9. 마스터 페이지의 텍스트의 스타일을 조정하세요.

단, 이렇게 긴 스크롤 압박이 있을 수도 있어요! >< 하하하핳. 텍스트 상자를 잡아서 이동하고 위치를 맞추는게 어려우시겠지만.. 화이팅!!! 할 수 있어요!

10. 위치(그리드)를 하나씩 조절하는 화면..!

10. 위치를 조절하세요.

이렇게 한 단어와 위치에 필요한 만큼의 텍스트 박스를 수정하고, ‘얼’자를 삭제했어요. 이제는 ‘죽’과 ‘아’를 삭제하기 위해 그 하단에 텍스트 스타일을 복붙해야겠어요.

11. 완성된 마스터 페이지

11. 마스터 페이지를 완성합니다.

이게 바로 완성된 마스터 페이지입니다! 이제 스타일이 모두 만들어졌어요!

12. 편집 화면에서 보이는 마스터페이지

12. 텍스트를 수정하여 콘텐츠를 만드세요.

일반 화면으로 오면, 이렇게 제목을 추가하려면 클릭해서 글자를 쓰라는 글로 나오죠. 오른쪽 슬라이드 썸네일 (노란색으로 활성화 되어있는 칸)을 보시면, 페이지가 비어있는 것을 보실 수 있어요.

13. 3가지 스타일로 완성된 마스터 페이지

13. 마스터페이지를 이용하여 슬라이드별로 디자인을 적용하세요.

이렇게 여러가지 버전의 카드뉴스 스타일을 다 적용하면, 필요에 맞게 레이아웃 적용에서 선택해서 사용하실 수 있어요!!

14. 만들어진 파일을 추출하는 법!

14. 완성된 화면의 이미지를 추출하여 사용하세요.

만들어진 이미지를 어떻게 Export할지 까지 알려드릴게요! 이 이미지를 따라 하시면 되어요! 프레젠테이션 모드를 활용하시면, 서체가 굴림체로 바뀌어버리는 안타까움을 겪지 않고 텍스트에 입힌 스타일 그대로 출력하실 수 있습니다!

15. ProCreate를 이용해 아이패드에서 작업할 수 있어요!

15. ProCreate로 아이패드에서 작업하세요.

참고로 구글 프레젠테이션에서 만들어진 오프젝트들은 아이패드의 ProCreate에서도 똑같이 쓸 수 있답니다!! Welko의 Project Owenr, Chinatsu는 개인 아이패드로 텍스트를 편집하고, 스타일을 조금씩 바꿔서 사용하고 있어요! 디자인을 확인해야 할때는 구글 프레젠테이션에서 작업하고 Sang-eun이 확인한 후 발행하고 있답니다.

시스템을 활용하여 만들어가고 있는 Welko의 페이지! | 2020.02.27
Welko- Google Presentation Kit Example

이 글을 쓰는 2월 말에는 코로나바이러스의 여파로 한국에서도 리모트 근무 체제 전환이 많이 이루어지고 있어요! 중국과 일본에서도 이루어지고요. 급변하는 상황속에서 우리는 떨어지면 안되는데.. 어떻게 일하지? 고민하시는 분들 많을 거에요. 인스타그램 카드뉴스! 이제는 이동에도 자유로운 방식을 사용해보세요! 텍스트에 외곽 테두리를 넣고 장식을 더한다거나, 그런건 할 수 없지만 이만하면 같은 스타일을 유지하는데에 효율적이지 않을까요?

여기에 Welko가 만들었던 구글 프레젠테이션을 공유해드릴게요! 사본을 만들어서 시작해 보셔도 좋아요! 궁금하고 이해가 안되거나 설명이 더 필요한 점은 댓글로 남겨주시거나, Welko 인스타그램을 통해 디엠을 보내주셔도 좋아요! 그럼 즐겁게 새로운 시도를 해보세요! ❤ 댓글이나 다음 포스팅을 통해 만나요! 안녕!

--

--