꽉이 신규 이미지 롤백 — OLD/NEW 포지션·표정 위치 비교 리포트

1 핵심 결론

🔍 결론부터: 그림 자체 품질 문제가 아니라 "여백(프레이밍)" 불일치 신규 원화(kkwaki.png 계열)는 기존 원화(quacki-angry.webp)보다 캔버스 안에서 캐릭터가 차지하는 비율이 눈에 띄게 작다(가로·세로 기준 약 5~9%p 더 넓은 여백). 앱의 렌더링 방식(objectFit:contain, 정사각형 프레임에 꽉 채워 표시)에서는 이 여백 차이가 그대로 "이 포즈(angry)만 오리가 살짝 작고 위쪽에 더 떠 보이는" 시각적 불일치로 나타난다 — 다른 포즈 (기뻐하는/우는/자는 등)는 전부 기존 원화 방식 그대로라 서로 비교됐을 때 더 두드러졌을 것으로 보인다.

2 배경

무엇을, 왜 비교했는가

사용자가 제공한 레이어 분리 원화(kkwaki_noface.png 몸통 + kkwaki_기본표정.png 표정 + kkwaki_블러셔.png 블러셔)를 앱의 "angry"(기본 서있는) 포즈 전용 베이스로 교체하고, 표정 옷장 아이템도 이 새 원화 기준으로 좌/우/입 조각화해 재구성했었다. 이후 사용자가 전체 롤백을 요청해 코드·데이터를 이전 상태로 되돌렸고, 이 리포트는 왜 새 이미지가 기존과 다르게 보였는지를 직접 두 원화를 같은 조건으로 렌더링해 측정한 결과다.

3 정량 비교 — 캔버스 대비 캐릭터 비율

각 원화를 앱과 동일한 방식(objectFit:contain, 정사각형 프레임)으로 렌더링했을 때 캐릭터 실루엣이 프레임 대비 차지하는 비율과 여백을 측정.

항목	OLD · quacki-angry.webp	NEW · kkwaki.png(노페이스+기본표정)	차이
원본 캔버스 크기	184 × 233px	384 × 493px	비율(가로/세로)은 0.789 vs 0.779로 거의 동일
캐릭터가 채우는 폭	86.4%	81.2%	−5.2%p
캐릭터가 채우는 높이	89.3%	83.0%	−6.3%p
좌측 여백	6.5%	10.7%	+4.2%p
우측 여백	7.1%	8.1%	+1.0%p
상단 여백	5.1%	7.9%	+2.8%p
하단 여백	5.6%	9.1%	+3.5%p

같은 정사각형 프레임 안에서 선형 크기로 약 5~7% 더 작게, 면적 기준으로는 약 12~15% 더 작게 렌더링된다. 또한 좌측 여백(+4.2%p)이 우측(+1.0%p)보다 더 많이 늘어나 캐릭터 무게중심이 기존보다 살짝 오른쪽으로 치우쳐 보이는 부작용도 함께 있다.

OLD vs NEW 캐릭터 크기 비교 — 동일한 정사각형 프레임(앱의 실제 렌더 박스와 같은 비율)에 두 원화를 각자의 방식대로 꽉 채워 표시한 것. 빨간 테두리(OLD)가 파란 테두리(NEW)보다 프레임을 더 넓게 채운다.

4 표정(눈·입) 위치 비교

앱은 200×200 좌표계(SVG viewBox) 위에 표정 조각을 얹는 방식이라, 두 원화 모두 이 좌표계로 환산해 "눈+입 영역의 중심이 어디에 오는지"를 비교했다.

원화	눈·입 영역 중심(viewBox 200×200 기준)	비고
OLD · quacki-angry.webp	x ≈ 107.3 y ≈ 72.7	이미지에 얼굴이 그대로 그려져 있어 좌표는 그림에서 직접 실측
NEW · kkwaki_기본표정.png	x ≈ 94.8 y ≈ 68.5	노페이스 몸통 기준으로 조각을 재배치한 계산값
차이	Δx ≈ −12.5 (≈ 프레임 폭의 6.3%) Δy ≈ −4.2 (≈ 프레임 높이의 2.1%)	NEW가 OLD보다 얼굴이 왼쪽·위로 치우침

⚠️ 참고 — 이 수치의 성격 OLD 쪽 좌표는 이미지 위에서 눈썹·눈·부리 윤곽을 격자 눈금으로 직접 재서 얻은 근사값이라 ±2~3px 정도의 오차가 있을 수 있다. 다만 위 3번 항목(캔버스 대비 크기 비율)은 알파채널 기반으로 정확히 계산한 값이라 신뢰도가 높고, 이번 시각적 위화감의 주된 원인은 이 크기·여백 차이로 보는 게 맞다 — 표정 위치 자체의 어긋남은 크기 차이가 만든 부수 효과에 가깝다.

5 왜 이런 차이가 생겼나

기존 8개 포즈 이미지(wave/angry/happy/cry/dizzy/sleep/shock)는 전부 캐릭터를 캔버스 가장자리 가까이(여백 5~7%)까지 꽉 채워서 내보낸 그림이었다. 반면 사용자가 이번에 새로 준 원화 (kkwaki 시리즈)는 같은 캐릭터를 그렸지만 캔버스 여백을 더 넉넉하게(8~11%) 두고 내보낸 파일이었다 — 그림 자체의 문제가 아니라 내보내기(export) 시점의 여백 설정 차이다. 앱은 각 이미지를 "정사각형 프레임에 꽉 채우기(objectFit:contain)"로만 그리기 때문에, 이 여백 차이가 고스란히 "이 포즈만 오리가 좀 작다"는 크기 차이로 드러난다.

6 결론 및 권장사항

✅ 현재 상태 요청대로 코드(public/index.html, src/worker.js)와 신규 이미지 파일, 표정 옷장 데이터(조각형 렌더링)를 전부 롤백 완료 — 지금은 기존 quacki-angry.webp 기반, 기존 방식(단일 이미지 오버레이)의 표정 7종이 그대로 살아있는 이전 상태로 돌아가 있다.

이 신규 원화를 나중에 다시 쓰고 싶다면, 아래 둘 중 하나만 해결하면 이번에 겪은 위화감은 사라진다 — 조각화 방식(좌/우/입 분리) 자체는 문제가 없었고, 순전히 여백 문제였다:

원화를 다시 내보낼 수 있다면 — 캐릭터가 캔버스의 86~90%를 채우도록(기존 포즈들과 동일한 여백 5~7%로) 다시 크롭해서 받는다. 가장 깔끔한 해결책.
원화를 그대로 써야 한다면 — 코드에서 이 포즈 전용으로 살짝 확대(scale ≈ 1.06~1.08)한 뒤 중앙 정렬을 다시 맞추는 보정 값을 하나 추가한다(관리자 위치조절 에디터의 "크기" 슬라이더 수준의 보정이면 충분).