brunch

You can make anything
by writing

C.S.Lewis

by 전기환 Oct 22. 2018

입이 떡 벌어지는 NTY 콘텐츠 몇 개

이 정도는 되어야 공유할 맛 나지...


외쿡 언론사의 인터렉티브 콘텐츠를 보다가 많은 분들과 함께 보고 싶어서 급 글을 씁니다. 이번 글에는 3D로 표현한 콘텐츠만 모았는데 대부분 열 번 이상 본 것 들입니다. 워낙 멋져서리 디자인이나 개발할 때 참고한 부분도 상당히 많아요. 제목을 '내가 영감 받은 콘텐츠 모음'이라고 바꿔도 되겠구먼.


3D 콘텐츠만 모으다 보니 평소 애정 하는 SCMP의 콘텐츠가 하나도 없네요. 일러스트로 다 죽이는 곳인데 말이죠. (다음 글에서 만나요~)


뉴욕 타임스의 콘텐츠가 비교적 더 많아서 제목에 NYT를 넣었슴돠...이해해 주시길. 아래부터는 반말.






월스트리트 저널의 나스닥 3D - 링크

이 페이지로 말할 것 같으면 처음으로 해외 언론사의 벽을 느끼게 해 준 그런 녀석. 나스닥 버블을 주제로 만든 건데, 야마를 떠나서 표현방식이 뛰어나다. VR, AR을 효과적으로 사용했음. 모 기자가 이걸 보고는 반짝이는 눈망울로 "잭슨 우리도 이렇게 할 수 있나요? (데이터도 있고 야마도 잡았는데...)"라고 물어봐서 "어.. 음... 글쎄요" 라고 했던 기억이.

버튼을 누르면 롤러코스터를 타는 기분을 느낄 수 있다.


결국 대우조선해양의 주가로 비슷한 느낌의 콘텐츠를 만들기는 했는데 결론은 디자인만 비슷했음 ㅋㅋ

암튼 위 페이지도 three.js 라이브러리를 이용하여 만들어졌다는 사실. 


개인적으로는 NYT의 스노우폴 보다 이게 더 큰 자극이 되었다. 불현듯 언젠가는 VR 콘텐츠도 만들어봐야겠다는 생각이 드는구먼.






워싱턴 포스트 DMZ - 링크

그곳 판문점을 만들기 직전에 마주친 워싱턴 포스트의 DMZ 관련 페이지. 3D 효과도 뛰어나지만 워싱턴 포스트에서 우리나라의 DMZ를 이렇게까지 심도 있게 취재하다니 놀라웠다. (판문점 3D를 만들 때 페이지 레이아웃을 참고했다. 왼쪽에 기사를 뿌리고 3D 영역을 크게 보여주는)


맵을 이리저리 돌려 볼 수 있는데, 지형까지 리얼하게 표현했다는 게 신기했음. 캡처라 잘 안 보이지만 DMZ 주변 북한 포를 지도에 찍어놨다. 덜덜. 

스크롤을 하면 카메라가 스무스하게 주아아악~ 하고 움직인다.


Sea of Japan이 더 크게 써있는게 아쉽

이 페이지 역시 three.js로 제작. (F12를 누르면 콘솔 창에서 THREE.WebGLRenderer 87  가 뜨는 것을 볼 수 있다) 3D와 저널리즘이 만나면 정말 간지가 나는구나~!라는 생각을 했음. 그리하여 판문점 3D 제작에 대한 열정이 활활 타올랐지.







아 이제 나오나요 NYT

The Dawn Wall - 링크

아... 정말 너무 초간지. 디자인도 너무 깔끔하고. (영문이라 그렇겠...지?) 위 DMZ 페이지도 참 멋지지만 이 페이지를 보고는 정말 너무 깔끔하고 예뻐서 수십 번은 본 것 같다. 어떻게 만들었나 소스를 파 보기도 했음. 

역시나 three.js로 만들었고 2015년 작품(!)이라 버전이 낮다. (THREE.WebGLRenderer 69. 최신은 97 임)


맵핑 이미지 소스를 다운 받아보니 3000x4000 짜리 고해상도 이미지가 뙇. json으로 된 3d 파일에 이 거대 이미지를 둘렀다는 점. 아래 사진처럼.


이 페이지 레이아웃도 3D에 힘을 줬으니 기사 영역은 좌측으로 작게 갔다. 짧은 페이지인데 정말 인상 깊었던. 처음 봤을 때 "지렸다!" 연발. (주변에서 빨리 기저귀 차시라고...)


NYT 짱





또 NYT

2018 평창 동계 올림픽 최고의 선수 4인 - 링크

와 정말 이 콘텐츠도 두고두고 볼만하다. 즐겨찾기에만 가둬두기에는 너무 아까워!

TV 방송의 슬로우 모션으로도 캐치하기 힘든 선수들의 특징들을 스크롤로 아주 천천히 돌려가며 감상할 수 있다. 물론 모바일에서도 휭휭~ 잘 돌아간다. (역시나 THREE.WebGLRenderer 89 가 뜨는군) 


4명의 동계 올림픽 선수들이 어떻게 그런 기록을 냈는지 디테일하게 보여주는데... 정말 연출이 입이 떡 벌어진다. 스포츠 기사를 이렇게까지 공들여 만들다니 놀라웠다. 


이건 뭐 게임도 아니고 정말... 카메라 워킹이~ 

three.js로 여러 개의 콘텐츠를 만들어 봤지만 카메라를 다루는 게 참 쉽지 않던데.


암튼 꼭 한번 보시길~! (기저귀 차시고)



시간 관계상(?) 몇 개만 준비했습니다. 무조건 화려한 게 장땡은 아니지만 정말 이 정도 수준의 기사라면 두고두고 보고 싶지 않은가요? (내 즐겨찾기에 저~장~) 

우리가 만든 콘텐츠도 누군가의 즐겨찾기가 되기를 바래보면스어~ 오늘도 열심히 달려볼랍니다.








아래는 깍두기

사진과 스크롤로 끝내버렸다. 멋지다.


이 것은 차라리 다큐멘터리. 멋지다. 디자인도 구성도. 몇 년 지난 페이지인데도 이렇게 간지가 좔좔 흐른다냐.


매거진의 이전글 애플 에어팟프로 사이트 따라하기
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari