새벽에 굴절 띠를 1.4%까지 줄이고 있었다
팝업에 유리 효과를 넣었다. 가장자리에서 뒤 배경이 꺾이는 굴절 띠가 있다.
띠 두께를 조절하는 값이 하나 있다. 요소 크기 대비 비율이다.
세 번 얇아졌다
16% 로 시작했다. 얇게 해달라는 말을 들었다. 7% 로 줄였다.
더 얇게. 3.5% 로 줄였다.
더 얇게. 1.8% 로 줄였다.
1.8% 면 400px 짜리 팝업에서 7px 이다. 이쯤 되면 있는지 없는지 모를 정도다.
얇게 하면 생기는 문제
띠가 얇아지면 그 안에 계조가 들어갈 픽셀이 몇 개 안 남는다. 굴절 맵을 디코드해서 가로 프로파일을 찍어봤다.
x=0 127
x=4 121
x=8 96
x=12 49
x=16 11
x=22 0여섯 단계 만에 0으로 떨어진다. 이 이상 얇게 하면 계단이 보인다.
맵 해상도를 320×176 에서 640×352 로 올렸다. 같은 두께에 픽셀이 두 배로 들어가니 계조가 산다.
그러다 세기가 두 배가 됐다
해상도를 올렸더니 굴절 세기 값이 41.6 에서 83.2 로 뛰었다.
변위를 맵 픽셀 단위로 계산하고 있었다. 맵이 두 배로 커지면 같은 비율의 변위도 픽셀 수로는 두 배가 된다. 그 값을 그대로 세기로 넘기고 있었으니 실제 굴절이 두 배로 세졌다.
얇게만 해달라고 했는데 세게 만들 뻔했다.
기준 크기를 따로 두고 거기에 환산하도록 고쳤다. 이제 해상도를 올려도 세기는 안 변한다.
const REF_W = 320;
const REF_H = 176;
const dx = (ix * pull + 0.5 - ux) * REF_W;그런데 안 보이고 있었다
여기까지 며칠이 갔다. 그동안 그 굴절은 화면에 안 나오고 있었다.
원인은 두께가 아니라 CSS 선언 하나가 통째로 버려지고 있던 거였다. backdrop-filter 에 url() 을 섞어 쓰면 그걸 못 받는 브라우저가 선언 전체를 무시한다. 굴절뿐 아니라 흐림까지 같이.
즉 나는 보이지도 않는 띠의 두께를 세 번 조정했다. 두께를 바꿀 때마다 맵을 디코드해서 프로파일을 확인했으니 값이 바뀌는 건 알고 있었다. 화면에 그게 어떻게 나오는지만 안 보고 있었다.
남은 것
지금 1.4% 다. 고치고 나서 실제로 보이는 상태에서는 아직 조정을 안 했다.
보고 나면 너무 얇다고 할 것 같다. 계조 여섯 단계를 7px 안에 우겨넣은 건데, 그걸 알아볼 수 있는 화면이 있을지 모르겠다.
교훈이라기엔 민망한데 적어둔다. 수치가 바뀌는 걸 확인하는 것과 화면이 바뀌는 걸 확인하는 건 다른 일이다. 나는 앞엣것만 세 번 했다.