인터랙티브 뉴스 페이지 제작기
안녕하세요. (구)고라니 (현)아름름 인사드립니다
처음 브런치를 열었을 때에는 분명 고라니였는데... 팀의 반장이신 누런 돼지님께서 아름름이라는 본명급의 별명을 밝혀주시는 바람에... 다시 아름름으로 돌아왔습!... 사실은 이 글이 첫 글이랍니다.
오늘은 가장 최근에 만들었던 인터랙티브 페이지인 <제빵왕 김탁구는 없다> 페이지를 소개해 볼까 합니다.
우선 저도 눈물부터 닦고 시작하겠습니다. (주룩)
http://news.khan.co.kr/kh_storytelling/2017/bread/index.html
제빵기사와 가맹점주, 협력업체, 파리바게뜨 본사까지 다양한 당사자들의 목소리로 '불법파견' 사태를 돌아봤다.
news.khan.co.kr
바로 이 페이지입니다.
올해 가을, 고용노동부는 파리바게뜨 가맹점에서 일하는 제빵기사 4362명과, 카페 기사 1016명을 직접 고용하라는 시정 명령을 내렸는데요. 프랜차이즈 업계의 불법 파견 논란에 대한 정부의 첫 판단으로 많은 주목을 받았습니다.
경향신문은 <빵집 이야기> 기획을 통해 파리바게트 제빵기사, 가맹점주, 파견업체, 파리바게뜨 본사의 이야기를 들어봤는데요
지면 4회로 구성된 이 기획이 너무 좋았고, 또 취재를 너무 열심히 한 나머지... 아까우니 온라인에서는 8회 분량으로도 내놓는 것이 어떨까? 그렇다면 그렇다면 웹 페이지도 만들자! 가 되어서 일사천리로 저희들도 기획 페이지를 만들게 되었습니다.
사실, 처음 글을 읽었을 때는 별다른 아이디어가 떠오르지 않았습니다.
일반적인 기사 뷰 페이지처럼 만들자니 좋은 글이 너무 아깝고, 다른 방법을 찾자니 어떻게 해야 할지 모르던 중에... 누런 돼지 선배가 이런 사이트를 알려주셨습니다.
패럴렉스 스크롤을 사용해 스토리 텔링을 하는 웹 페이지인데요.
글의 내용과 찰떡처럼 어울리는 이미지들이 눈을 즐겁게 합니다. 그림이 참 고퀄이에요!
사실, 그렇게 놀라운 건 아니죠. 패럴렉스 스크롤 사이트는 이미 2014년 즈음부터 쏟아지기 시작해 아마도 익숙하실 겁니다. 그래도 저희는 해보지 않았던 작업이었기에 나름대로 긴장을 가지고 작업을! (설마 저만 그런 건가요)
누런 돼지 선배께서 정리해주신 스크립트를 기반으로 제가 그림을 그리고, 전체적인 레이아웃 디자인을 잡으면, 금손 후배가 퍼블리싱을 하며 구현을 해 주는 협업이었는데요
문제는 저였습니다
네... 늘 시작부터 문제가 일어납니다.
못 쓰고 버린 그림이 너무 많았습니다.
패럴렉스 스크롤을 사용해 스토리 텔링을 하려면 그림이 표현하는 글의 양이 적절해야 합니다. 그런데 저는 처음이라 그런지 그 간극을 맞추기가 너무 어려웠습니다.
이미지 컷이 너무 많으면 스크롤과 함께 작업 시간이 길어지고, (한 문장을 표현하는데 스크롤 5-6번을 해야 한다면 이 페이지에서 나가고 싶어 질 겁니다) 컷이 너무 적으면 스토리 텔링이 어렵고, 사이트가 헐렁해집니다. (책을 읽는데 10페이지마다 그림이 한 장씩 나오면, 별로 예쁘지도 않고 재미도 없잖아요~)
동화책 수준으로 만들면 딱 좋을 것 같은데...! 이게 참 어려웠습니다. 앞부분은 그림이 너무 많고, 뒷부분은 힘이 떨어져서 그림이 점점 줄어들고... 아이디어는 떨어지고... 역시, 전문 일러스트레이터는 아닌 저의 표현력의 한계가 이렇게 드러나나 싶었지만
금손 후배님의 퍼블리싱 덕분에, 사이트는 짜임새 있게 완성될 수 있었습니다. 그렇습니다. 그림이 별로 일 땐 CSS와 javascirpt 가 화려하면 되는 것입니다.
물론, 작업은 쉽지 않았습니다. 스크롤을 따라서 불이 켜지고, 배경색이 변하고, 이미지가 전환되고. 카톡이 오는 것처럼 표되하고, 카드 모양의 이미지가 뒤집어지고, 문이 닫히는 효과를 스크롤 시점에 맞게 구현해 내는 것도 어려운데! 한 페이지 안에서 소화하다 보니 로딩 시간이 길어져 페이지는 버벅거렸고, 반응형 페이지이기 때문에 모바일 환경까지 또 고려해야 하는 어려운 상황에 놓였지만.
이 어려운걸 금손 후배는 해내지 말입니다 ㅠㅠ
그리하여, 약 일주일 만에 만들어진 옥동자 <제빵왕 김탁구는 없다 - 빵집에 담긴 한국사회>를 살짝궁 다시 소개합니다.
http://news.khan.co.kr/kh_storytelling/2017/bread/index.html
제빵기사와 가맹점주, 협력업체, 파리바게뜨 본사까지 다양한 당사자들의 목소리로 '불법파견' 사태를 돌아봤다.
news.khan.co.kr
메뉴를 클릭하시면 지면보다 더 많은 이야기가 들어간 기사를 읽으실 수 있습니다 :-)
파리바게뜨에는 한국 사회의 단면들이 켜켜이 쌓여 있다. 할 말 못 하는 노동자, 기술은 배우지 못하고 부품으로 전락하는 젊은이들, 본사 앞에 쪼그라드는 프랜차이즈 가맹점, 부속품처럼 노동자들을 이리저리 돌려 넣으면서도 ‘고용’은 하지 않는 기업, 그 사이의 인력공급업체, 브랜드 앞에 살길 찾기 힘든 동네 가게... 제각각 입장이 다르지만 한 가지 분명한 것은, 우리 모두 이 아웃소싱의 그물에 걸린 물고기가 되어 살아가고 있다는 사실이다.
처음 이 기획기사를 읽고 나서 참 많은 생각이 들었는데요, 여러분께도 조금이나마 전해졌으면 좋겠습니다.