내 소득을 '키'로 나타낸다면?
'인터랙티브' 뉴스 페이지 제작기
안녕하세요~ 오늘도 누런돼지 기자입니다.
이번에는 인터랙티브 뉴스 페이지 제작기를 올려볼까 합니다.
저희가 지금까지 만든 것 중에서, '탄핵'이나 '대선' 관련된 것을 빼고
가장 많은 조회수를 기록한, 공전의 '히트' 페이지!
바로 그것!
<내 소득을 '키'로 나타낸다면?> 입니다.
역시 '돈' 얘기는 만인의 관심사라는...
시작은 지면이었습니다. (요즘은 신문 안 보시는 분들이 더 많겠지만 ㅠ)
<부들부들 청년>이란 기획시리즈에서 소개된 이 그림이 눈길을 사로잡았습니다.
경향신문 2016년 1월27일자 4~5면<부들부들 청년> 시리즈 기사 보기
http://news.khan.co.kr/kh_series/khan_series.html?code=af174
우리나라 소득 분포를 바탕으로 김번 작가가 그린 것인데요.
이 멋들어진 그림을 어떻게 웹을 이용하는 독자들에게도 전달할 수 있을까 하는 고민이 나왔습니다.
'내 소득을 입력하면 여기 어딘가에 자기 위치를 찍어 보여주는 걸 만들면 어떨까?'
당시 팀장님의 말에 무릎을 탁 쳤습니다.
그러나 저 큰 그림을 웹에다 어떻게 옮길지가 고민이었습니다.
특히 모바일은 더 그랬습니다.
그때는 html과 jQuery를 막 익혀서 흉내내던 터라 과연 이걸 만들어 낼 수 있을까 의문도 들었습니다.
3D로 사람들이 화면을 걸어나오는 듯한 그래픽은 어떨까 하는 생각도 들었지만...
아시다시피... 그건 공상으로 끝났습니다ㅎㅎ
(언젠가는 하고 말겠다는...)
고민고민 끝에, 이 그림이 어차피 행진하는 사람들이기 때문에 그림을 그냥 차례로 나오도록 이동시켜 보여주자고 생각했습니다. 그럼 아주~ 약간은~ 행진하는 듯한 모습이 나오지 않을까 싶어서요. 물론 결과물을 보면 썩 그렇진 않습니다 ㅠ (역시 디자인 감각 제로다운 생각이었습니다 ㅠ)
우선 https://ovenapp.io/를 통해 대략적인 그림을 틀을 잡아봤습니다.
모바일 퍼스트를 추구하는 저로서는(ㅋㅋ) 모바일 디자인부터 했습니다.
다음은 PC 디자인
쉽게 말해 이 행진 그림을 확대해서 처음부터 화면 왼쪽에서 오른쪽으로 흐르게 한 다음, 자신의 위치가 되면 위치를 표시해 준 뒤 행진이 끝나면 전체적으로 자신의 위치가 어디인지 조망할 수 있도록 설계한다는 목표였습니다.
애초에 이 그림이 가능했던 것은 통합소득 100분위 자료가 나왔기 때문입니다.
쉽게 말하면 우리나라에서 소득이 있는 사람들(아쉽게도 자산·금융소득은 제외)을 일렬로 줄세운 자료입니다.
물론 한 명 한 명의 소득을 모두 공개하긴 어렵기 때문에 1%씩 구간별로 볼 수 있습니다.
상위 1%는 100명, 1000명 단위로 좀 더 자세하게 잘게 쪼개서 볼 수 있긴 합니다.
우선 이걸 기초 자료로 입력해야 합니다.
자바스크립트 변수로 선언해 줍니다.
누가 입력했냐고요?
누가 있겠습니까 ㅠ 눈 빠지는 줄 알았습니다 ㅠ
function bunpo(perc, icom, heht) {
this.perc = perc;
this.icom = icom;
this.heht = heht;
}
var income100 = [
new bunpo(0.00001,21298834000,122737.61),
new bunpo(0.001,4675895667,26945.52),
new bunpo(0.01,1222365822,7044.06),
new bunpo(0.1,598215520,3447.30),
new bunpo(0.15,444378020,2560.79),
new bunpo(0.2,368046590,2120.92),
... (중략)
new bunpo(1,175981730,1014.12),
new bunpo(2,131568038,758.18),
new bunpo(3,110169276,634.87),
new bunpo(4,98344423,566.72),
new bunpo(5,89629513,516.50),
new bunpo(6,82923539,477.86),
...(중략)
new bunpo(51,19208286,110.69),
new bunpo(52,18681056,107.65),
new bunpo(53,18160571,104.65),
...(중략)
new bunpo(83,5802084,33.44),
new bunpo(84,5409129,31.17),
new bunpo(85,5034922,29.01),
new bunpo(86,4696452,27.06),
new bunpo(87,4351248,25.07),
new bunpo(88,4018729,23.16),
new bunpo(99,308697,1.78),
new bunpo(100,2313,0.01),
new bunpo(0,0,0)
];
보시면 아시겠지만 상위 0.00001%, 그러니까 대략 상위 100명의 평균 소득은 2129억이고 키로 따지면 1227m 37cm 정도 된다... 이런 얘깁니다.
또 53% 구간의 평균 소득은 1816만571만원이고, 키는 104.65cm 되겠고요.
이용자의 소득을 입력받은 뒤 이 자료를 토대로 어느 위치인지 파악을 합니다.
그리고 위치를 토대로 그림의 어느 부분에 내 위치를 찍을 것인지를 결정하면 됩니다.
여기서 중요한 것은 키 행렬 그림입니다.
그림을 우선 두 개로 자르기로 했는데요. 이유는 두 가지입니다.
1. 그림의 발끝이 1227m인 거인, 그러니까 소득 최상위권이기 때문에 거기까지만 잘라서 쓰는 게 위치를 계산하기 편합니다. 위치 비율을 산정하려면 발 크기를 빼야 하기 때문입니다.
2. 그림을 가급적 고화질로 해야 그림을 확대했을 때도 한 사람 한 사람이 뭉개져서 보이지 않는데, 고화질로 할 경우 용량이 너무 크기 때문에 잘라야 한다고 생각했습니다.
그래서 A, B 두 개의 그림을 행진이 끝난 뒤 나중에 합쳐서 보여주겠다고 생각했는데...
결과적으로 거대한 오류의 협곡에 빠지는 계기가 되고 말았습니다 ㅠ
그냥 합쳐서 할 걸... ㅠ 나중에 그런 생각이 들었지만 이미 늦었죠.
이래서 머리가 좋아야 하나 봅니다 ㅠㅠ
일단 키 계산은 이렇습니다.
175cm / 3036만8002원이 기준이기 때문에 비례식으로 계산합니다.
height = ((income * 175) / 30368002.37734).toFixed(2);
소득 수준이 어느 범위 내에 있는지 아까 입력한 배열을 for 문으로 순회하면서 체크한 뒤 확정합니다.
이를 토대로 내 위치를 찍을 위치를 계산해 stand라는 변수에 할당합니다.
for(i = 0; i < income100.length-1; i++){
if (income <= 2313.273103 ) { point = 1; mypoint = 100; stand = ($("#paradeimg").width()*0.01); break; }
if (income >= 21298834000.00000 ) { point = 0; mypoint = 0.00001; stand = $("#paradeimg").width(); break; }
if (income100[i].icom >= income && income100[i+1].icom < income){
point = income100[i].perc / 100;
mypoint = income100[i].perc;
stand = ($("#paradeimg").width()-($("#paradeimg").width()*0.01)) * (1-point);
break;
}
}
그림 크기를 조정은 이렇게 했습니다.
우선 행진 그림(A)은 세로 크기를 화면의 절반 정도로 설정합니다.
그래야 사람 얼굴이 보이고, 행진한다는 실감이 날 테니까요.
발 그림(B)은 A크기를 토대로 비율을 맞춰 결정합니다.
$("#paradeimg").css({'height':(($(window).height()*0.5))+'px'});
$("#paradeimg2").css({'width':(((($(window).height()*0.5*6593)/1204)*1704)/6593)+'px'});
그림을 두 개로 나누는 바람에 계산이 복잡해졌습니다
행진이 끝나고 최종적으로 보여줄 그림 크기(lastpic)는 화면 크기와 같아야 합니다.
그래야 내 위치가 어딘지 전체적으로 조망이 가능하기 때문이죠.
그래서 그 전에 행진할 때의 그림 크기와 최종적으로 보여줄 그림 크기의 차이를 계산해 놓습니다.
그리고는 마지막에 그 크기만큼을 서서히 줄여서(14분의1로!) 확대됐던 그림을 화면 크기에 맞게 조정해 줍니다.
var pad = $(window).width() * 0.05;
var pic1X = $("#paradeimg").width();
var pic1Y = $("#paradeimg").height();
var pic2X = $("#paradeimg2").width();
var pic2Y = $("#paradeimg2").height();
var lastpic1X = ($(window).width() - (pad*2)) * 0.79;
var lastpic1Y = (pic1Y*lastpic1X)/pic1X;
var lastpic2X = ($(window).width() - (pad*2)) * 0.21;
var lastpic2Y = (pic2Y*lastpic2X)/pic2X;
var lastpic1_widthD = pic1X - lastpic1X;
var lastpic1_heightD = pic1Y - lastpic1Y;
var lastpic2_widthD = pic2X - lastpic2X;
var lastpic2_heightD = pic2Y - lastpic2Y;
네, 사실 제가 짜 놓고도 무슨 소린지 헷갈릴 정도가 되었습니다.
부디 이렇게 하시지는 말라는 취지로 기록을 남깁니다.
행진 모습 연출은 화면에 그림을 출력한 뒤 길이의 100분의 1만큼씩 왼쪽으로 당기면 됩니다.
setInterval 함수를 통해서 반복하면 되지요.
그러다 내 키가 등장하는 시점에 표시를 해 주고, 또 계속 행진을 시키고 마지막에 그림을 축소해서 보여주면 끝입니다.
최초 디자인한 것과는 많이 달라졌죠?
내 위치를 표시하는 사람은 좀 더 재미있는 이미지를 위해 역시 김번 작가가 그린 그림에서 차용했습니다. 아래에서 찾아보세요 ㅎ
일러스트 / 김번그럼 다음에는 좀 더 재미있는 이야기를 가지고 다시 찾아오겠습니다
