웹 퍼블리싱이요? 일단 지르고 수습해
'안녕, 봄과 함께 온 꼬마들' 인터랙티브 뉴스 제작기
메인 이미지오늘은 '안녕, 봄과 함께 온 꼬마들'의 제작 비하인드를 풀어보려 합니다. 데이터 작업은 없었고 웹페이지 퍼블리싱으로 참여했습니다. 인터랙티브 뉴스 제작 인력이 없어서 그동안 제작 요청이 들어오면 거절했습니다만. 이 기사는 인터랙티브로 만드는 이유가 명확했기 때문에 일단 해보겠다고 질렀습니다. 그 이유는 차차 얘기하기로 하고 우선 기사를 소개합니다.
기사 링크 >> https://www.khan.co.kr/kh_storytelling/2022/spring-for-children/
아마 '살람! 1만km의 등교길' 시리즈를 보신 분들이라면 어디서 본 내용인데? 하셨을 겁니다. 그 기획의 인터랙티브 뉴스 버전입니다. 제목처럼 아프간 특별기여자의 자녀들 이야기입니다. 그중에서도 울산에 정착한 이들이 주인공인데요. 몇몇 어른들이 그들의 학교 배정을 반대했지만 끈질긴 설득 끝에 아이들은 지금 학교에 다니고 있습니다. 어른의 우려와 달리 아이들은 금방 친해졌다고 합니다.
1. 제작을 결심한 이유와 고민한 이유
가끔 '굳이 인터랙티브로 만들었어야 했나?' 하는 기사들을 만납니다. 그저 우리가 이 기사에 진심입니다 라는 마음만 알 수 있는 경우들이죠. 저는 인터랙티브 페이지를 만들려면 명확한 이유가 있어야 한다고 생각합니다. 예를 들어 기사에서 다루는 데이터 양이 많아 한 번에 다 보여주긴 힘들 때, 인터랙티브 요소를 넣어 사용자에 따라 세부 데이터를 조회할 수 있도록 만드는 것이죠.
이번 기사는 '3가지(다리어, 영어, 한국어) 언어로 지원되는 글'이 이유였습니다. 일반 기사에서 3가지 언어를 다 보여주기에는 ①길이가 많이 길어지고 가독성이 떨어지며 ②네이버 포털에서 다리어를 지원하지 않아 글자가 깨질 우려가 있었습니다. (확인 결과 네이버 포털에서 다리어는 깨지지 않았습니다. 다행!) 그래서 자유 형식인 별도의 페이지를 만드는 게 최선이라는 결론이 나왔습니다. 무엇보다 3가지 언어로 지원하려는 취지도 감동이었습니다. 기사를 쓴 선배가 '한글로만 기사를 쓰면 우리끼리 볼뿐이고 정작 이 기사가 필요한 아프간 사람들은 이 기사를 읽을 수가 없다. 그들도 읽을 수 있는 기사가 되면 좋겠다'라고 말했습니다. 이걸 듣자 제작해보자고 답할 수밖에 없었습니다.
좋은 글, 좋은 취지, 이쯤 되니 문제는 제 실력뿐이었습니다. 제작 인력이 없어서 혼자 만들어야 하는데 하던 일이 아니다 보니 실력이 문제, 이걸 만드는 동안 원래 하던 일을 못한다는 게 문제였습니다. 하겠다고 한 일을 무를 순 없었고 매일 그래도 해야지 어떻게?를 되뇌이며 작업에 임했습니다. 욕심에 과제와 발표가 매주 있는 수업을 수강신청했다가 시험 기간에 호되게 혼나는 대학생이 된 기분이었습니다.
2. D 선배: 레퍼런스 없이 시작도 말아야
인터랙티브 페이지의 주된 이미지 레퍼런스는 로이터의 Gender & Language 입니다. 한글에는 그런 표현이 없지만 외국어 중에는 여성 단어, 남성 단어가 구분된 것들이 있죠. 여러 나라의 언어에서 성별에 고정적인 단어를 찾고 젠더 다양성을 위해 어떤 표현으로 대체할 수 있는지를 얘기하는 기사입니다.
Gender & Language에서 발췌다양한 언어와 언어에 색을 입히는 부분을 차용했습니다. 물론 자세한 디자인적 고민은 디자이너 선배가 해주셨습니다. 저는 콘셉트를 잡기 위한 레퍼런스를 전달했을 뿐입니다.
두 번째 레퍼런스는 워싱턴포스트의 The war next door: Confilct in Mexico is displacing thousands 입니다. 이 기사에서 사진의 배치를 따왔습니다.
The war next door: Confilct in Mexico is displacing thousands에서 발췌이번 기사 취재에는 사진 기자가 동행해 좋은 사진이 많았습니다. 페이지를 제작하겠다고 결정한 날에 사진 기자가 찍어온 사진들을 보는데 너무 좋아서 사진을 많이 넣어야겠다고 생각했습니다. 그래서 위 기사처럼 사진들을 화면에 꽉 차게, 많이 배치시켰습니다.
3. 사용한 js 플러그인과 코드
먼저 Owl Carousel을 사용했습니다. 애용하는 플러그인인데 사진 여러 장을 보여줄 때 유용합니다.
짠 이렇게요. 사용 방법은 공식 사이트에 들어가서 파일을 다운로드하고 작성 중인 index.html에 다운로드한 css와 js파일을 연결하는 것입니다.
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>
위 4개 문장을 html 파일 상단에 붙여 넣으면 됩니다. href에 들어있는 파일 경로를 잘 확인해야 합니다.
깃헙을 이용하는 방법도 있어 보이지만 저는 파일을 받는 게 마음이 편하더라고요. 사용 코드는 위의 사이트 Demos 부분에 잘 나와있습니다. 여러 버전이 제공되고 있고 코드도 나와있습니다. Setup 부분을 js파일에 넣으시고 html 부분을 html 파일에 넣으세요. margin 정도, loop 여부 등 옵션 변경은 API에서 Options를 확인하면서 값을 바꾸시면 됩니다.
다음으로는 메인 이미지 뒤편에서 흩날리는 꽃잎입니다. CodePen에서 Sarah Higley 씨가 만든 코드를 가져와 사용했습니다. Falling Leaves 여기에서 코드를 확인할 수 있습니다. 역시나 각각 맞는 곳에 코드를 넣어주면 짠하고 나타납니다.
페이지에 들어가 보시면 꽃잎이 휘날리는 모습을 보실 수 있습니다. 꽃잎 모양은 이미지에 맞게 바꿨는데 border-radius를 조절해서 만들었습니다.
.leaf-scene div {
background: #ff8945;
border-radius: 0% 60%;
transform-style: preserve-3d;
}
이런 식으로 css에서 .leaf-scene 클래스에 있는 요소를 건드리면 꽃잎이 수정됩니다. 빨리 떨어지면 낙엽 같아 보인다는 디자이너 선배의 말에 속도(maxSpeed)도 줄였습니다. 속도는 js에서 수정할 수 있습니다.
이런 좋은 코드들이 이미 만들어져 있어서 가져다 쓰기만 하면 된다는 게 큰 위안이었습니다.
배운 것도 많고 결과물도 만족스러운 작업이었습니다. 코드에 대해서는 봐줄 사람이 없다는 게 큰 불안이었지만 한번 해냈으니 다음은 더 쉽겠죠. 물론 저는 제작 보조 정도로 있고 제작 인력이 충원됐으면 합니다. 책임을 지기엔 아직 배울 게 많다고 느껴집니다. 데이터 공부를 더 하고 싶기도 하고요! 제작에 도움을 주신 디자이너 선배와 팀장 선배에게 감사를 전하며 마칩니다.
