<대림동에서 보낸 서른 번의 밤>의 웹 호환성 문제에 대해 (2019-02-03)

daerim.md

아래 내용은 지난 2월 3일 webmaster@sisain.co.kr에 보낸 메일을 거의 그대로 전재한 것이다. 두 달 넘게 응답은 없었다.

10일 넘게 응답을 받지 못한 뒤 김동인 담당 기자에게 트위터로 연락을 시도했으나 이 또한 응답받지 못했다.

해당 기사는 현재도 여전히 파이어폭스에서 정상적으로 표시되지 않는다. (2019-04-15)

안녕하세요. <대림동에서 보낸 서른 번의 밤> 기사를 보고 사소하지만 중요할 수 있는 문제를 알려 드리고자 글을 씁니다.

본 기사는 (요즈음에는 뉴욕타임즈 따위가 너무 많이 써서 오히려 식상할 수 있는) 스크롤할 때마다 애니메이션이 튀어 나오는 인터랙티브 포맷을 쓰고 있습니다만, 해당 포맷이 구글 크롬에서만 테스트된 것으로 보입니다. 모든 브라우저를 테스트하진 않았습니다만 제가 사용하는 모질라 파이어폭스에서는 모든 바 차트가 빈 채로 표시되는 문제가 있습니다. 안타까운 점은 이 문제만 제외하면 본 기사는 파이어폭스에서도 아무 문제 없이 정확하게 표시되고 동작한다는 점입니다.

앞으로는 다른 브라우저에서의 작동 또한 확인을 부탁드리는 바이며, 제가 개인적으로 확인한 원인 및 해결 방법을 아래와 같이 알려 드립니다. 아래 내용은 기술적인 내용이 포함되어 있으므로 해당 담당자 분께 전달해 주시는 게 좋겠습니다.

---

빠른 수정: http://daerim.sisain.co.kr/src/daelim.js 에서 다음과 유사한 줄들을 고칩니다. 제가 확인한 바로는 다섯 군데 있는 것으로 보입니다. (chart1 2개, chart2 2개, chart4 1개)

korean.style.height = 100*(data[i].한국인/90000)+"%";
=>
korean.style.height = height*(data[i].한국인/90000)+"px";

이 문제는 CSS의 아주 미묘한 해석과 결부되어 있어 파폭과 크롬이 상당히 다르게 동작하는 흔치 않은 사례로 확인했습니다. 단순화된 코드로 풀이하면 다음과 같은 HTML으로 재현할 수 있습니다.

<div style="display:flex; align-items:flex-end; height:300px;
width:100px; background:yellow">
    <div style="background:blue; width:100px">
        <div style="background:green; height:50%"></div>
        <div style="background:red; height:20%;"></div>
    </div>
</div>

여기에서 파란색 div의 height는 안에 들어 있는 초록색과 빨간색 div의 height의 합으로 계산됩니다. 그러나 초록색과 빨간색 div의 크기는 이 div의 "감싸는 블록containing block" height의 비율로 계산되는데, 이 감싸는 블록이 무엇인지에 따라서 오동작할 수 있습니다.

• 크롬은 감싸는 블록을 노란색 div, 즉 플렉스 컨테이너flex container로 해석합니다. 따라서 초록색은 50% * 300px = 150px, 빨간색은 20% * 300px = 60px의 height를 가지게 되고 파란색 div는 150px + 60px = 210px의 height를 가지게 되어 윗쪽에 90px의 공간이 (의도한 대로) 생겨납니다.

• 파폭은 감싸는 블록을 파란색 div, 즉 플렉스 아이템flex item으로 해석합니다. 따라서 감싸는 블록의 크기가 그 안에 들어 있는 블록의 크기에 의존하게 되고, 이는 (CSS3 sizing module에서 이르듯) "불확정indefinite" 크기로 해석하여 다른 의존성이 없는 경우 0으로 해석됩니다. 따라서 다른 모든 게 멀쩡한데 해당 div만 사라져 보입니다(!).

제가 이해하는 바로는 파폭이 올바르고 크롬이 틀린 것으로 알고 있습니다. 감싸는 블록은 일반적으로 블록 컨테이너block container인데, 플렉스 아이템은 명백히 블록 컨테이너이기 때문입니다. 그런데 최근의 CSS는 표준끼리 충돌하거나 해석이 모호한 경우도 종종 있기 때문에(...) 저도 확신을 하지는 못하겠네요. 다행히도 해당 차트의 height를 (처음에 크기 결정하는 용도로) 자바스크립트에서 갖고 있으므로, 그냥 그걸 사용해서 계산하는 게 빠르고 간단한 해결책이 되겠습니다.