온라인 매거진 만들어보기
매거진 Montage.gif 제작기
최근에 서촌 나들이를 하던 중 베어 카페에서 책보부상이라는 행사를 구경하게 됐다. 독립 출판 메이커들이 자신의 출판물을 공유하는 자리였는데 흥미로웠다.
특히 독립 출판된 매거진들이 재밌었는데 다들 각자의 위치에서 다양한 목소리를 내고 있었다. 고양이, 여행 등 다양한 주제의 매거진들을 보고 그 자리에서 바로 구매했다.
사온 매거진들을 하나씩 읽으면서 나도 매거진을 만들어보고 싶다는 생각이 들었다. 하나의 주제 혹은 컨셉에 파고드는 나만의 채널이 생기면 재밌을 것 같았다.
그런데 이전에 독립 출판을 한 책 무화과의 재고도 아직 소진이 안된 상황이기에 다시 독립 출판을 하는 건 좀 고민이 됐다. 그래서 고민을 하던 중 내 분야도 살릴 겸 온라인 매거진을 만들기로 결정했다.
마침 최근에는 팀으로 사이드 프로젝트를 하는 일이 대부분이라 나 혼자 작업을 하는 프로젝트가 적어서 좋은 기회로 보였다. 나 혼자서도 성장할 수 있는 기회.
혼자서 기획, 디자인, 개발 그리고 콘텐츠까지 모든 부분을 맡아서 만들어봐야지라는 생각을 했고 작업에 들어갔다. 작업 기한으론 약 2개월 정도 걸렸다.
모든 사이드 프로젝트가 그렇듯 진행하며 배운 점이 많기에 제작 기록을 남겨보려 한다. 각 파트별로 어떤 고민을 했는지 남겨볼 생각이다.
온라인 매거진 만들어보기
목차
기획
디자인
개발
콘텐츠
맺으며.
기획
어떤 매거진을 만들 것인가. 가장 중요한 문제였다. 아무리 매거진이 만들고 싶어도 아무 매거진을 만들 수는 없으니까.
일단 특정 주제에 집요하게 파고드는 매거진을 생각해봤는데 시간과 노력이 많이 들어갈 것 같았다. 사이드 프로젝트다보니 그만큼의 에너지를 쏟을 수는 없는 노릇이라 고민됐다.
그래서 주변에서 쉽게 콘텐츠 소재를 구할 수 있는 타입의 매거진으로 방향을 정하고 조사를 시작했다. 기존 매거진은 물론 SNS, 유튜브 콘텐츠들도 둘러봤다.
둘러보니 인터뷰 콘텐츠가 눈에 들어왔다. 특히 우리 주위에 있을 법한 사람들을 인터뷰한 콘텐츠들이 좋았다. 모두에게 각자만의 스토리가 있다는 느낌이 들어 특별하다는 생각.
인터뷰형 콘텐츠에 좋은 인상을 받고 나도 내 주위의 평범한 사람들을 인터뷰하는 매거진을 연재해보고 싶어졌다.
물론 인터뷰에도 시간이 들어가겠지만 한 분야를 전문적으로 파고드는 것보단 부담이 덜 됐다. 새로운 사람과 세계를 알아가는 재미도 있을 것 같고.
그런데 인터뷰형 콘텐츠는 이미 정말 많았다. 그렇기에 차별화가 필요했다. 그렇지 않으면 개성없는 매거진이 될 게 분명해보였다.
어떻게 차별성을 가져갈지 고민하던 중 이전에 마음에 두었던 움짤이 하나 떠올랐다. 예전에 에반게리온이라는 애니메이션을 보고 발견한 gif 이미지였는데 뭔가 마음에 들었다.
에반게리온 gif 이미지주인공(신지)의 실루엣 안에서 여러 이미지들이 빠르게 바뀐다. 안에서 바뀌는 이미지들은 신지와 깊은 관련이 있는 기억들로 신지를 구성한다.
이런 걸 보며 단일 gif 이미지를 통해 어떤 사람이나 브랜드를 드러낼 수 있지 않을까 싶었다. 위 이미지를 예로 들면 아래와 같은 느낌으로..
컬러: 실루엣 바깥쪽 붉은색
커버 이미지: 주인공(신지)의 실루엣
내용 이미지: 실루엣 안에서 돌아가는 이미지
에반게리온 이미지를 참고하여 내가 구성한 매거진의 기본 포맷은 아래와 같았다.
메인 컬러
- 인터뷰 대상자의 퍼스널/브랜드 컬러
커버 이미지
- 인터뷰 대상자의 실루엣 이미지
내용 이미지
- 인터뷰 대상자에게 중요한 이미지
- 10장 정도?
내용 이미지별 설명
- 대상자에게 선택한 이미지가 중요한 이유
인터뷰를 진행하기 전 대상자에게 메인 컬러와 커버/내용 이미지로 쓸 사진들을 받고, 인터뷰를 하며 각 이미지에 대한 설명을 마련하고자 했다.
그리고 그렇게 만들어진 결과물을 독자는 아래와 같은 흐름으로 경험하게 될 것이다.
1. 커버와 내용 이미지 합쳐진 gif 감상
2. 내용 이미지별 설명 확인
3. 어떤 사람 혹은 브랜드에 대해 이해
대단한 차별성은 아니지만 잘 진행되면 포맷면에서 어느 정도 유의미한 차이를 갖지 않을까 싶었다. gif를 활용해서 온라인 매거진으로 하는 의미도 있었고.
어느 정도 뼈대를 세운 후 이름을 어떻게 가져갈까 고민하다 몽타주(Montage)라는 단어가 떠올랐다. 각각의 이미지들을 합쳐 의미를 만들어내는 포맷이었기 때문이다.
실제로 사전적 정의를 찾아보니 찰떡이라는 생각이 들었다.
몽타주(Montage)
따로따로 촬영한 화면을 적절하게 떼어 붙여서 하나의 긴밀하고도 새로운 장면이나 내용으로 만드는 일
온라인 매거진 몽타주.
나름 괜찮은 이름이었지만 뭔가 좀 아쉬웠다. 어떻게 하면 기획 의도를 좀 더 잘 드러낼 수 있을지 고민하다 뒤에 .gif를 붙이기로 했다.
그리고 그 결과 아래와 같은 이름과 설명이 나왔다.
Montage.gif
- 전체는 부분의 합보다 크다
이름이 나온 순간부터 본격적인 시작이라는 생각이 들어 설렜다. 아직 기획의 디테일이 정해지진 않았지만 얼른 만들어보고 싶어졌다.
그래서 피그마를 켜고 디자인에 들어가게 됐다. 놓친 부분이 있다면 만들며 고치면 된다는 생각을 갖고.
디자인
Montage.gif는 gif 이미지, 즉 움짤이 중요한 매거진이다. 그런데 위에서 봐서 알 수 있겠지만 움짤은 제법 요란스럽다.
그래서 gif 이미지 외의 요소에선 최대한 힘을 빼는 게 중요해보였다. 그렇지 않으면 독자의 눈이 피로해질 것 같았다.
심플 이즈 더 베스트라는 생각을 갖고 우선 폰트를 찾아봤다. 나의 소중한 친구 구글 폰트에 들어가 로고용으로 적당한 게 있나 둘러보았는데 눈에 들어오는 게 있었다.
바로 Outfit이라는 이름의 폰트였다. Outfit 폰트로 Montage.gif를 쳐보니 심플하면서도 힘이 있어보이는 로고가 만들어졌다.
Outfit폰트 적용만으로 로고가 완성되어 참 만족스러웠다. 이걸 디자인이라고 해야할지는 모르겠지만 로고 디자인이 끝나니 디자인의 반은 끝낸 것처럼 느껴졌다.
그 다음으로는 본문용 폰트였다. 본문용 폰트는 원래부터 써보고 싶었던 게 있어서 금방 정할 수 있었다. 바로 Pretendard라는 폰트였다.
페이스북에서 괜찮은 폰트라고 디자이너분들이 말씀하시는 것을 봐서 쓰고 싶었는데 Montage.gif에도 잘 어울렸다. 깔끔하고 가독성도 괜찮아보여 Pretendard를 바로 본문용 폰트로 채택했다.
폰트를 정한 후엔 웹사이트 디자인에 들어갔다. 그런데 아무래도 매거진이다보니 화면 디자인에 있어 고민이 많았다.
보통 매거진은 콘텐츠별로 레이아웃을 다양하게 가져가는데 그런 방식은 나한텐 좀 부담이 됐다. 콘텐츠 마련도 쉽지 않을 텐데 매번 디자인까지 새로 해줘야 한다니.
디자인은 물론 개발까지 내가 해야되는 상황이기에 더 문제였다. 일의 분량 이슈도 있고 내 개발 실력으로 콘텐츠의 레이아웃을 자유자재로 잡을 수 있을까 걱정도 됐다.
그래서 반대로 모든 콘텐츠의 레이아웃을 동일하게 가져가는 방향을 생각해보았다.
모든 콘텐츠의 레이아웃을 동일하게 가져가면서도 매거진으로써의 재미와 개성을 살리려면 어떻게 해야될까? 쉽지 않은 고민이었다.
며칠 고민을 하다 하나의 단어가 생각났는데 바로 Horizontal이었다. 콘텐츠들이 서로 같은 형태를 띠고 있는 것을 서로가 같은 Level이라는 것과 연결지어보면 어떨까 생각했다.
일반적인 매거진의 경우 매거진 안에 여러 주제(콘텐츠)가 종속되어 있는데 그것에서 탈피해보자는 아이디어였다.
수직, 수평 구조 차이각각의 콘텐츠들이 Montage.gif라는 매거진 안에 종속되지 않고 그 자체만으로 성립하길 바랐다. 각각의 콘텐츠가 하나의 독립적인 매거진인 것처럼 말이다.
물론 그런 과정에서 Montage.gif는 뒤로 조금 물러나게 되겠지만 그만큼 각 콘텐츠의 고유성이 강화될 것으로 보였다. 단적으로 웹페이지 화면 안에 한 사람 혹은 브랜드에 대한 이야기만 담겨있을 거니까.
그래서 정리하면 아래의 두 가지 방향성에 따라 매거진 웹페이지를 디자인하게 되었다.
심플하면서도
모든 콘텐츠의 레이아웃을 동일하게
그리고 그 결과 아래와 같은 디자인이 나왔다.
디자인 결과물앞서 말한 것처럼 심플함을 기준으로 폰트를 선택했으며 사용하는 색상도 흑백으로 제한했다. 그리고 화면 내 요소를 가급적 줄이고 라인을 활용하여 단순하게 디자인하려 노력했다.
동시에 콘텐츠의 고유성을 강조하기 위해 각 콘텐츠의 헤더 타이틀(사람/브랜드 이름)을 강조하고 각 화면에서 퍼스널/브랜드 컬러를 사용했다.
개인적으로는 디자인 결과물이 마음에 들었다. 내 부족한 디자인 능력을 이쁜 폰트가 잘 보완해준 것 같은 느낌..?
또 레이아웃이 단순한 것은 물론 콘텐츠별로 동일했기에 덕분에 개발 범위와 난도가 확 줄었다. 덕분에 조금 더 가벼운 마음으로 개발에 들어가게 되었다.
개발
모든 페이지의 레이아웃이 동일한 점 때문에 각 요소를 컴포넌트화하기 좋았다. 그렇기에 최대한 각 컴포넌트의 재활용성을 높이는 방식으로 설계를 했다.
설계를 마치고 개발을 진행하며 컴포넌트 재활용성의 가치를 다시금 확인할 수 있었다.
우선 거의 모든 컴포넌트가 만들기만 하면 반복적으로 쓰여 개발 시간이 확 줄었다. 또 중간중간 기획, 디자인적으로 일부 손을 볼 때 편리했다. 컴포넌트의 코드만 바꿔주면 모든 화면에서 다 반영이 되니까.
이런 장점이 있다보니 프로젝트 내내 어떤 걸 더 컴포넌트로 만들 수 있을까 고민을 많이 했다. 그리고 시행착오를 거쳐 다수의 실용적인 컴포넌트들을 만들 수 있었다.
하나의 View로 모든 화면 만들기모든 화면을 하나의 뷰로 만들 수 있어 뿌듯했다. 앞으로 서비스를 유지/보수할 때 편할 것 같다.
또 이번엔 기존에 안 해본 것들에도 좀 도전해봤다. 그것은 바로 유튜브 영상 플레이어와 TOC(Table Of Contents).
근데 만들다보니 도전이라 하기 민망할 정도로 쉬웠다. 리액트 선배들이 만들어놓은 모듈을 사용하니 너무 쉽게 구현할 수 있었다.
TOC 예시(우측 목차 참고)그래서 돌아보면 이번엔 개발적으로 크게 챌린징한 과제는 없었다. 근데 한 가지 알아봐야겠다는 생각이 들었다.
매번 어찌저찌 만들긴 하지만 리액트가 돌아가는 원리를 잘 몰라 주먹구구로 개발한다는 느낌을 받는다. 화면엔 정상적으로 표시되지만 뭔가 내부적으론 성능 이슈가 있지 않을까 싶다.
(필요 이상으로 렌더링을 한다든가..)
이런 부분을 해결하려면 리액트의 원리, 화면을 어떻게 그리는지 공부를 다시 해봐야될 것으로 보인다. 언제 한번 기회를 만들어 개념과 원리에 대해 익혀봐야지.
어쨌든 저번에 리액트로 앱 퇴준생을 만들 때는 진땀을 흘렸는데 이번엔 여유롭고 재밌게 했다. 그리고 이렇게 매거진의 틀을 만들고나니 더 설렜다. 이제 매거진에 영혼을 불어넣을 단계가 왔기에..
콘텐츠
Montage.gif는 사람 혹은 브랜드에 대한 인터뷰 매거진이다. 그래서 콘텐츠를 마련하기 위해선 인터뷰를 진행해야 한다.
근데 이번엔 매거진의 틀을 만드느라 시간을 많이 써서 누군가를 인터뷰할 시간이 없었다. 그래서 결국 초기 콘텐츠는 나와 내가 만든 앱 모지또를 통해 마련하기로 했다.
처음엔 나 자신을 인터뷰하는 느낌이라 콘텐츠 제작이 어렵지 않을 것으로 보였다. 그런데 얼마 가지 않아 그 생각이 틀렸다는 걸 알게 되었다.
우선 의미있는 내용 이미지를 선별하는 것에 어려움이 있었다. 나에 대한 콘텐츠를 만들기 위해 사진을 고르는데 어떤 걸 골라야할지 고민이 됐다.
그래서 내게 의미있는 사진을 이것저것 고르다보니 20장이 넘었다. 사진마다 설명을 달아야하기에 고른 사진 숫자를 줄여야했는데 그것도 쉽지 않았다.
생각해보니 아무런 기준 없이 '그냥' 나에게 의미있는 사진을 골라서 이런 문제가 생긴 것 같았다. 30년이라는 짧지 않은 시간을 산 나인데 의미있는 사진의 범위가 얼마나 넓겠는가.
이런 경험을 하니 나중에 다른 누군가를 인터뷰할 때는 콘텐츠 범위를 제한해야겠다는 생각이 들었다. 아래와 같이 조건을 더 붙이는 식으로.
'2022년' XX에게 의미있는 사진
YY에게 의미있는 '영화' 사진
이러면 내용 이미지를 조금 더 수월하게 선별할 수 있는 것은 물론 콘텐츠의 주제가 더 날카로워지는 효과도 있을 것으로 보인다.
또 다른 이슈는 gif 이미지를 '이쁘게' 만드는 문제였다. 위의 에반게리온의 사례처럼 괜찮은 gif 이미지를 만드는 게 생각처럼 쉽지 않았다.
가장 주요한 원인은 내용 이미지 간에 톤이 안 맞는 것에 있었다. 어떤 건 기본 카메라로, 어떤 건 카메라 어플로 찍은 거다보니 이미지마다 느낌도 각기 다를 수밖에 없었다.
(개중엔 그냥 화면 캡처된 이미지도 있었다.)
gif 이미지를 만들며 에반게리온의 경우 같은 그림체로 그려졌기에 괜찮게 나올 수 있었다는 걸 알게 되었다. 그럭저럭 볼 만한 결과물을 만드느라 어려웠다.
이런 경험을 하며 역시 직접 해보기 전까지는 모르는 게 많다는 걸 다시금 느꼈다. 이상과 현실은 다른 경우가 많기에 무엇이든 직접 해보며 그 싱크를 맞춰가야 한다.
어쨌든 결국엔 나와 모지또에 대한 콘텐츠를 만들어냈다. 나라는 사람 그리고 모지또라는 브랜드 콘텐츠를 통해 Montage.gif가 사람과 브랜드를 모두 다루는 매거진이라는 게 드러났으면 좋겠다.
근데 돌아보면 이번에 모든 과정 중에 가장 어려웠던 건 콘텐츠 제작이었다. 매거진이기에 생각해보면 당연한 일인데 처음에 너무 서비스 만드는 것처럼 접근했던 것 같다.
그래서 아쉬운 부분도 있지만 처음부터 완벽할 수는 없으니까. 앞으로 보완해나갈 수 있을 것이다. 그러기 위해 이번에 많은 것들을 학습하기도 했고.
앞으로는 다양한 사람과 브랜드에 대한 콘텐츠를 만들며 매거진을 풍성하게 채워나가고 싶다. 2022년엔 얼마나 연재할 수 있을지 기대가 된다.
매거진은 아래의 링크로 접속할 수 있습니다!
맺으며.
이번에 혼자 모든 영역을 담당해서 만들다보니 유기적으로 연결해서 고민할 때가 많아서 좋았다. 이게 혼자서 사이드 프로젝트를 하는 매력이 아닐까 싶다.
또 나에 대한 콘텐츠를 만드는 건 스스로를 돌아보는 기회도 되었다. 내게 중요한 사진들을 고르며 추억 여행을 했다.
이전에도 글로 쓴 적이 있지만 커리어 외에도 나에게 중요한 것들이 많은데 각박한 생활 속에 놓치고 살았던 것 같다.
돈, 커리어가 삶의 전부가 아니니 앞으론 그 외적으로도 재밌는 것들을 많이 만들며 살아가야지. 이것저것 안 재고 재밌는 것들을 만들다보면 더 많은 가능성으로 연결될 거니까.
올해 마지막 글이 될 것 같은데 매번 긴 글 읽어주시는 분들 감사드립니다!
Happy New Year!
