by
Apr 07. 2019
16화: 난 도움받지 않으면 콘텐츠를 만들 수 없어
콘텐츠라는 이름의 합작품 (Feat. 다이나믹 HTML)
- 다이나믹 웹 관련해서 확인할 게 있는데 시간 되실까요?
조심스럽게 운을 뗐다. 언제나 그렇지만, 타인에게 도움을 요청하는 것은 쉽지 않다. 사적인 것은 물론, 업무의 영역에서도 마찬가지였다. 특히 이번 경우는, 내가 잘 모르는 영역의 콘텐츠를 제작해야 했기에 도움이 절실했다.
협업을 진행하는 동료들도 당연히 각자의 주된 업무가 있는 상황이었고, 내가 진행하는 프로젝트의 '다이나믹 HTML(Dynamic HTML)' 콘텐츠 제작에 힘을 실어주는 상황이었다. 그래서 최대한 혼선 없게 진행하겠노라 다짐했다.
그렇게, 약 한 달 간의 다이나믹 웹 콘텐츠 제작기가 시작되었다.
1.
프로젝트에 따라 다르지만, 우리 회사의 AE(account executive)들은 SNS나 DA 광고, 바이럴 등을 진행하는 '퍼포먼스 마케터'의 역할과 채널별 콘텐츠를 기획하고 제작하는 '콘텐츠 마케터'의 역할을 겸하고 있다. 나 같은 경우에는 3년째 그룹사의 콘텐츠 채널을 운영하고 있다 보니 콘텐츠 마케터로서의 비중이 큰 편이었다.
콘텐츠 마케터의 역할에 집중한 만큼, 꽤 다양한 콘텐츠를 경험할 수 있었다. 보편적인 블로그 형태(사진+글)의 콘텐츠부터 카드뉴스, 인포그래픽 등 다양한 이미지 콘텐츠를 만들었고, 인터뷰, 모션그래픽 등의 영상 콘텐츠도 제작했다.
콘텐츠의 기본이 되는 '글쓰기'의 경우도 업무적인 부분 이외에 꾸준히 발전시켰다. 브런치에 글을 쓰거나, 마케팅 매거진에 기고를 하는 등 타인에게 보여주고, 피드백을 받을 수 있는 글을 쓰며 실력을 쌓았다. 그 과정에서 공동저자로 책을 내기도 하면서 사회초년생 시절에 비하면 장족의 발전을 했다.
디자인을 기획하는 것도 글만큼은 아니지만 관심이 있고, 재미를 느끼는 편이다. 재미있는 콘셉트를 잡거나, 새로운 레퍼런스를 찾는 등 기존에 만든 콘텐츠보다는 잘 만들겠다는 생각으로 임했던 것 같다.
이처럼 글을 쓰거나 디자인을 기획하는 일에 나름의 소질과 재미를 가지고 있었고, 어느 정도 수준의 경험치를 쌓아온 만큼 콘텐츠를 만드는 일에는 자신이 있었다. 퍼포먼서 마케터로서의 역량과 경험이 부족한 만큼, 이러한 자신감은 나의 약점을 보완할 수 있는 강점이었다.
다만, 이번의 경우는 예외였다.
2.
다이나믹 HTML(동적 HTML, 이하 DHTML)이란, 정적 마크업 언어인 HTML과 클라이언트 기반 스크립트 언어(자바스크립트 같은), 그리고 스타일 정의 언어인 CSS를 조합하여 대화형 웹 사이트를 제작하는 기법을 의미한다. 쉽게 말해, 움직임이 없는 (정적인) HTML을 유저의 스크롤이나 클릭 행위에 따라 움직이는 효과를 넣은 것이라고 보면 된다.
흔히 요즘 많이 부르는 '인터랙티브' 콘텐츠라고도 할 수 있으며, 최근에는 중앙일보나 경향신문과 같은 언론사에서도 많이 만들고 있다.
웹사이트, 스크립트 언어, CSS 등의 단어에서 유추할 수 있듯이 DHTML은 '개발의 영역'이다. 기본적인 내용이 되는 '기획'은 콘텐츠 마케터의 영역이지만, 어디까지나 최종적으로 기획을 구현하는 것은 '개발'이며, 애초에 기획도 개발의 가능 유무에 따라 달라지기 때문에 개발 요소가 가장 중요하다고 볼 수 있다.
이러한 특징 때문에 이번 DHTML 콘텐츠는 그동안 만들어왔던 콘텐츠와는 결이 완전히 달랐다. 개발의 'ㄱ'자도 모르기 때문에 나의 기획을 실제로 구현할 수 있을지, 구현할 수 있다면 그 과정이 얼마나 걸릴지는 전혀 감을 잡을 수 없었다. 그렇기에 협업은 불가피했다.
공식적인 팀은 아니었지만, 이번 DHTML 콘텐츠를 만들기 위해 필요한 인력을 구성했다. 콘텐츠의 기획과 클라이언트와의 커뮤니케이션은 내가 진행하고, 기획 내용을 비주얼로 구현해주는 C 디자이너님과 개발을 통해 콘텐츠를 제작해줄 외주 개발사, 그리고 나와 외주 개발사간의 커뮤니케이션을 진행해주실 옆 부서의 E 팀장님까지 함께 콘텐츠를 제작하게 되었다.
3.
내가 기획한 DHTML 콘텐츠는 '퀴즈' 형태의 콘텐츠였다. 다양한 정보를 수집하고, 문제와 보기를 만들며, 정보를 제공해줄 해설 내용 등도 구성했다. 다양한 레퍼런스를 찾고, 실제로 콘텐츠를 소비해보면서 어떤 흐름으로 인터랙티브를 만들지 고민했다.
콘텐츠의 들어갈 내용이 정해진 다음에는 디자인 기획을 했다. 퀴즈 형태의 콘텐츠였기 때문에 '모의고사' 콘셉트의 디자인을 생각했고, 각 문제의 필요한 사진을 배치했다. 퀴즈의 끝에서는 유저들이 재미를 느꼈으면 좋겠다는 생각이 들어 퀴즈 점수별 결과값 디자인에도 신경을 많이 썼던 것 같다. 이 시점에서 나는 C 디자이너님에게 디자인 작업을 넘겼고, 오래되지 않아 생각했던 대로의 결과물이 나왔다.
기획 내용과 디자인까지 나온 다음에는 E 팀장님과 외주 개발사간의 개발 작업이 본격적으로 진행됐다. E팀장님께서는 콘텐츠의 레이아웃이나 흐름을 파악할 수 있는 와이어프레임(wire-frame)을 잡았고, 우리 측에서 정리된 내용을 개발사에 전달했다. 이때까지만 해도 예상보다 작업이 빠르게 진행되었기 때문에 안심을 했었는데, 진짜 게임은 이때부터 시작이었다.
개발이라는 것은 생각보다 훨씬 많은 환경을 반영해야 했다. 개발 작업을 통해 제작된 코드를 어떤 사이트에 업로드할 것인지부터 PC와 모바일 버전을 별도로 개발할 것인지, 삽입되는 텍스트는 통째로 이미지로 만들 것인지 등 고려해야 할 사항이 많았다. 나는 해당 프로젝트의 PM(Project Manager)인 만큼 어느 정도는 의사결정을 내려야 할 부분들이 있었는데, 아는 내용이 많지 않았기에 매번 선택의 어려움을 겪었다.
또한, DHTML의 코드가 업로드되는 웹사이트와의 호환에서 계속해서 문제가 발생했다. 한 가지 오류를 수정하면, 또 다른 오류가 발생하고, 계속 수정하고 전달하기를 반복했다. 그 과정에서 이메일 스레드(Email Thread)는 어느새 30을 돌파하고 있었다.
- E 팀장님: 알겠습니다. 전달 준 CSS 파일 보면서 최종적으로 확인 요청할게요. 최최최최최최최최최종이라고
- 나: (오류 또 발생) 역시 끝날 때까지 끝난 게 아니라고 하더니...
비록 반복되는 핑퐁 작업에 힘도 빠지고, 스트레스를 받기도 했지만 우리는 위와 같이 최대한 유머(?)를 잃지 않으려고 노력했던 것 같다. 그래도 '어쨌든 막은 오른다'라고 했던가, 겨우겨우 모든 오류를 잡아내고 결국 DHTML 콘텐츠를 완성했다. 아직도 뭔가 더 남아있을 것 같다는 생각도 들지만, 일단은 콘텐츠 발행을 앞두고 있는 상황이다.
아마도 이제 정말 끝일 거다. 한 달이라는 시간 동안 기나긴 마라톤을 달려온 것 같은 느낌이다.
