투명 PNG를 오브젝트로 쓰면 안 보이는 사각형이 뒤를 가린다

메인 화면에 배경을 딴 PNG 네 장을 오브젝트로 띄웠다. 문어 다리, 두루마리, 광석, 빨간 버튼. 각자 깊이가 달라서 크기와 흐림이 다르다.

그중 제일 작고 뒤에 있는 하나가 눌리지 않았다. 눈에는 멀쩡히 보이는데 클릭이 안 먹었다.

아니었던 것

3D 레이어 순서를 의심했다. 오브젝트마다 translateZ 로 앞뒤를 만들어놨으니 그럴 만했다.

Z 값을 바꿔봤다. 그대로였다. 앞으로 끌어내도 안 눌렸다.

재보기

감으로 찍지 말고 재기로 했다. 오브젝트마다 격자로 점을 뿌리고, 각 점에서 elementFromPoint 를 호출해 자기 자신이 잡히는지 세는 코드를 짰다.

TTakochan  100%
합방지도    100%
지금, 세계  100%
BrainDancer 20%

셋은 온전한데 하나만 20% 다. 그리고 그 20% 마저 기울기를 주면 더 떨어졌다.

무엇이 막는지도 같이 찍게 했다. 문어였다.

원인

이미지는 배경이 잘려 있다. 문어 다리만 남고 나머지는 투명하다. 그런데 히트 영역은 여전히 사각형이다. 이미지 요소의 상자는 알파를 모른다.

문어는 앞쪽 레이어라 크다. 세로로 세워놔서 화면 왼쪽을 위아래로 길게 덮는다. 그 투명한 사각형이 뒤에 있는 작은 오브젝트를 통째로 덮고 있었다.

보이는 것과 눌리는 것이 다르다는 걸 알고는 있었는데, 그게 다른 오브젝트를 가릴 거라고는 생각을 못 했다.

잘라내려다 만 것

알파 경계만큼만 히트 영역을 줄이면 되겠다 싶었다. clip-path 로 자르면 된다.

먼저 네 장의 알파 경계를 쟀다. 캔버스에 그려서 불투명 픽셀의 최소·최대 좌표를 찾았다.

TTakochan    상 0.0%  우 5.0%  하 7.7%  좌 5.3%
합방지도      상 16.6% 우 4.7%  하 9.2%  좌 4.1%
지금, 세계    상 5.7%  우 12.2% 하 4.0%  좌 7.3%
BrainDancer  상 15.8% 우 16.7% 하 24.6% 좌 16.7%

문어의 경계 상자가 프레임의 90% 였다. 다리가 대각선으로 프레임을 거의 다 지나기 때문이다. 사각형으로 잘라봐야 줄어드는 게 거의 없다.

다각형으로 따면 되지만, 그러면 아트를 바꿀 때마다 다시 따야 한다. 접었다.

고친 방법

자리를 옮겼다. 앞쪽 사각형들이 안 닿는 곳을 찾으면 된다.

후보 위치를 격자로 훑으면서 네 오브젝트의 최악 도달률을 재는 코드를 짰다. 화면 밖으로 나가거나 헤더에 걸리는 자리는 실격 처리했다.

x=44 y=28  최악 도달률 86%
x=80 y=40  최악 도달률 86%
x=44 y=22  최악 도달률 84%
x=38 y=22  최악 도달률 76%

x=44, y=28 을 골랐다. 20% 에서 86% 가 됐다. 나중에 오브젝트 크기를 뷰포트에 묶으면서 다시 재보니 100% 가 나왔다.

남은 것

CSS 만으로 알파 기반 히트 테스트는 안 된다. 이건 앞으로도 안 될 것 같다.

그래서 이 구조에는 규칙이 하나 생겼다. 오브젝트를 옮기거나 크기를 바꿀 때마다 도달률을 다시 재야 한다. 겹치면 뒤엣것이 보이면서 안 눌린다. 눈으로는 절대 안 보이는 종류의 고장이다.

지금은 위치를 바꿀 때마다 다섯 가지 기울기에서 네 오브젝트의 도달률을 재는 스크립트를 돌린다. 아트 네 장 띄우는 데 이렇게까지 해야 하나 싶긴 한데, 한 번 당해보니 안 재고는 못 넘어간다.