입이 떡 벌어지는 NTY 콘텐츠 몇 개
이 정도는 되어야 공유할 맛 나지...
외쿡 언론사의 인터렉티브 콘텐츠를 보다가 많은 분들과 함께 보고 싶어서 급 글을 씁니다. 이번 글에는 3D로 표현한 콘텐츠만 모았는데 대부분 열 번 이상 본 것 들입니다. 워낙 멋져서리 디자인이나 개발할 때 참고한 부분도 상당히 많아요. 제목을 '내가 영감 받은 콘텐츠 모음'이라고 바꿔도 되겠구먼.
3D 콘텐츠만 모으다 보니 평소 애정 하는 SCMP의 콘텐츠가 하나도 없네요. 일러스트로 다 죽이는 곳인데 말이죠. (다음 글에서 만나요~)
뉴욕 타임스의 콘텐츠가 비교적 더 많아서 제목에 NYT를 넣었슴돠...이해해 주시길. 아래부터는 반말.
이 페이지로 말할 것 같으면 처음으로 해외 언론사의 벽을 느끼게 해 준 그런 녀석. 나스닥 버블을 주제로 만든 건데, 야마를 떠나서 표현방식이 뛰어나다. VR, AR을 효과적으로 사용했음. 모 기자가 이걸 보고는 반짝이는 눈망울로 "잭슨 우리도 이렇게 할 수 있나요? (데이터도 있고 야마도 잡았는데...)"라고 물어봐서 "어.. 음... 글쎄요" 라고 했던 기억이.
버튼을 누르면 롤러코스터를 타는 기분을 느낄 수 있다.결국 대우조선해양의 주가로 비슷한 느낌의 콘텐츠를 만들기는 했는데 결론은 디자인만 비슷했음 ㅋㅋ
암튼 위 페이지도 three.js 라이브러리를 이용하여 만들어졌다는 사실.
개인적으로는 NYT의 스노우폴 보다 이게 더 큰 자극이 되었다. 불현듯 언젠가는 VR 콘텐츠도 만들어봐야겠다는 생각이 드는구먼.
그곳 판문점을 만들기 직전에 마주친 워싱턴 포스트의 DMZ 관련 페이지. 3D 효과도 뛰어나지만 워싱턴 포스트에서 우리나라의 DMZ를 이렇게까지 심도 있게 취재하다니 놀라웠다. (판문점 3D를 만들 때 페이지 레이아웃을 참고했다. 왼쪽에 기사를 뿌리고 3D 영역을 크게 보여주는)
맵을 이리저리 돌려 볼 수 있는데, 지형까지 리얼하게 표현했다는 게 신기했음. 캡처라 잘 안 보이지만 DMZ 주변 북한 포를 지도에 찍어놨다. 덜덜.
스크롤을 하면 카메라가 스무스하게 주아아악~ 하고 움직인다.
Sea of Japan이 더 크게 써있는게 아쉽이 페이지 역시 three.js로 제작. (F12를 누르면 콘솔 창에서 THREE.WebGLRenderer 87 가 뜨는 것을 볼 수 있다) 3D와 저널리즘이 만나면 정말 간지가 나는구나~!라는 생각을 했음. 그리하여 판문점 3D 제작에 대한 열정이 활활 타올랐지.
아 이제 나오나요 NYT
아... 정말 너무 초간지. 디자인도 너무 깔끔하고. (영문이라 그렇겠...지?) 위 DMZ 페이지도 참 멋지지만 이 페이지를 보고는 정말 너무 깔끔하고 예뻐서 수십 번은 본 것 같다. 어떻게 만들었나 소스를 파 보기도 했음.
역시나 three.js로 만들었고 2015년 작품(!)이라 버전이 낮다. (THREE.WebGLRenderer 69. 최신은 97 임)
맵핑 이미지 소스를 다운 받아보니 3000x4000 짜리 고해상도 이미지가 뙇. json으로 된 3d 파일에 이 거대 이미지를 둘렀다는 점. 아래 사진처럼.
이 페이지 레이아웃도 3D에 힘을 줬으니 기사 영역은 좌측으로 작게 갔다. 짧은 페이지인데 정말 인상 깊었던. 처음 봤을 때 "지렸다!" 연발. (주변에서 빨리 기저귀 차시라고...)
NYT 짱또 NYT
와 정말 이 콘텐츠도 두고두고 볼만하다. 즐겨찾기에만 가둬두기에는 너무 아까워!
TV 방송의 슬로우 모션으로도 캐치하기 힘든 선수들의 특징들을 스크롤로 아주 천천히 돌려가며 감상할 수 있다. 물론 모바일에서도 휭휭~ 잘 돌아간다. (역시나 THREE.WebGLRenderer 89 가 뜨는군)
4명의 동계 올림픽 선수들이 어떻게 그런 기록을 냈는지 디테일하게 보여주는데... 정말 연출이 입이 떡 벌어진다. 스포츠 기사를 이렇게까지 공들여 만들다니 놀라웠다.
이건 뭐 게임도 아니고 정말... 카메라 워킹이~
three.js로 여러 개의 콘텐츠를 만들어 봤지만 카메라를 다루는 게 참 쉽지 않던데.
암튼 꼭 한번 보시길~! (기저귀 차시고)
시간 관계상(?) 몇 개만 준비했습니다. 무조건 화려한 게 장땡은 아니지만 정말 이 정도 수준의 기사라면 두고두고 보고 싶지 않은가요? (내 즐겨찾기에 저~장~)
우리가 만든 콘텐츠도 누군가의 즐겨찾기가 되기를 바래보면스어~ 오늘도 열심히 달려볼랍니다.
아래는 깍두기
사진과 스크롤로 끝내버렸다. 멋지다.
이 것은 차라리 다큐멘터리. 멋지다. 디자인도 구성도. 몇 년 지난 페이지인데도 이렇게 간지가 좔좔 흐른다냐.
