🍰 디저트 아틀리에

할머니 손님의 얼굴이 빈 원으로 나오던 이유

“말순 할머니 얼굴이 안 나와.” 제보는 이 한 줄이었습니다. 그림 파일은 멀쩡했습니다.

개발노트 · 화면 · CSS

먼저 그림을 의심했습니다

손님 반응 창에는 그 주에 왔던 손님들이 한 줄씩 뜹니다. 이름 옆에 42px짜리 동그란 얼굴이 붙는데, 다른 손님은 다 나오는데 말순 할머니 자리만 연한 분홍색 빈 원이었습니다.

가장 먼저 한 일은 그림이 깨졌는지 확인하는 것이었습니다. 이 게임은 그림을 전부 base64로 인코딩해서 파일 하나에 넣기 때문에, 인코딩이 어디선가 잘렸을 가능성이 있었습니다. 그래서 CSS에 박혀 있는 문자열을 꺼내 다시 파일로 만들어 열어 봤습니다.

face-0  len=57984  sig=RIFF/WEBP
face-1  len=51436  sig=RIFF/WEBP   ← 할머니
face-2  len=39352  sig=RIFF/WEBP
face-3  len=56788  sig=RIFF/WEBP

네 장 다 정상적인 WebP였습니다. 열어 보니 흰머리를 곱게 올린 할머니가 또렷하게 그려져 있었습니다. 그림은 문제가 아니었습니다.

원인은 «너무 멀리서 보고 있었다»는 것

그림 네 장은 전부 512×512 크기의 상반신 그림입니다. 여백이 넓고, 얼굴은 위쪽 일부만 차지합니다. 그런데 이걸 42px 동그라미에 통째로 넣고 있었습니다. 얼굴이 십몇 px로 줄어듭니다.

머리가 검고 옷이 분홍인 손님은 그 크기에서도 뭔가 보입니다. 그런데 말순 할머니는 흰머리에 흰 레이스 옷, 배경도 흰색이었습니다. 연분홍 원 안에서 아무것도 구분되지 않았습니다.

같은 화면에서 다른 손님들은 왜 잘 보였을까요. 그 손님들은 사진을 쓰는 방식이 달랐습니다. transform: scale(2.25)로 얼굴만 확대해서 담고 있었습니다. 그림을 쓰는 손님과 CSS 얼굴을 쓰는 손님이 서로 다른 규칙으로 그려지고 있었던 겁니다.

고쳤는데 다른 자리는 여전히 비어 있었습니다

그래서 CSS 얼굴에도 같은 확대를 걸었습니다. 배경 이미지로는 이렇게 씁니다.

background-size: 225%;
background-position: 50% 14%;

반응 창은 고쳐졌습니다. 그런데 확인하는 김에 영업 화면의 반응 칸도 열어 봤더니, 거기서는 네 얼굴이 전부 비어 있었습니다. 새로 만든 문제가 아니라 원래부터 그랬던 것이었습니다.

계산된 값을 찍어 보니 이랬습니다.

background-size     : auto      ← 225% 가 아님
background-position : 0% 0%     ← 50% 14% 가 아님

512px 그림을 원래 크기로, 왼쪽 위 모서리부터 보여 주고 있었습니다. 그 모서리는 흰 여백입니다. 흰 여백만 30px 동그라미에 담기고 있었던 겁니다.

범인은 CSS 축약형이었습니다

그 자리의 스타일에 이런 줄이 있었습니다.

.rp-entry .av { … background: linear-gradient(180deg,#fff,#ecd…) }

background는 축약형입니다. background-color만 바꾸려고 쓴 것 같지만, 실제로는 background-size와 background-position을 포함한 모든 배경 속성을 초기값으로 되돌립니다. 그리고 이 선택자는 두 겹(.rp-entry .av)이라, 한 겹인 .rp-face보다 우선합니다.

즉 제가 .rp-face에 아무리 크기를 적어도, 그 자리에서는 축약형이 이깁니다. 그림 주소만 두 겹짜리 선택자에서 지정돼 있어서 그림은 들어오는데 크기는 초기화된 상태가 됐습니다. 배경이 나오긴 하는데 엉뚱한 곳을 보고 있었던 이유입니다.

고치는 방법은 크기 지정도 같은 무게로 올리는 것이었습니다. 얼굴 번호와 함께 적어 두 겹으로 맞췄습니다.

.rp-face.face-0, .rp-face.face-1,
.rp-face.face-2, .rp-face.face-3 {
  background-size: 225%;
  background-repeat: no-repeat;
  background-position: 50% 14%;
}

결과

남은 것

이 일로 배운 건 두 가지입니다. 하나는 «안 보인다»가 «없다»는 뜻이 아니라는 것입니다. 데이터는 멀쩡히 있는데 보여 주는 창이 엉뚱한 곳을 향하고 있을 수 있습니다.

다른 하나는 background 같은 축약형을 색 하나 바꾸려고 쓰면 안 된다는 것입니다. background-color라고 정확히 적었으면 이 문제는 없었을 겁니다. 이 프로젝트에는 이런 축약형이 아직 여러 군데 남아 있어서, 비슷한 자리를 찾을 때마다 하나씩 좁히고 있습니다.

← 개발노트 목록