카드 게임 3종이 카드 그림 없이 나갈 뻔했습니다 — 공용 덱, 회전 모듈, 가로 배치를 한꺼번에 정리한 기록
프리셀·스파이더·피라미드를 출시하기 직전 점검에서, 세 게임의 개별 빌드에 카드 그림이 아예 들어 있지 않다는 걸 발견했습니다. 허브 안에서만 솔리테어의 덱을 빌려 쓰고 있어서 개별 앱에서는 글자만 적힌 더미 카드로 돌아갔습니다. 덱을 WebP 54장 0.5MB짜리 공용 패키지로 빼서 4종이 함께 쓰게 한 과정, 솔리테어에만 있던 회전 버튼을 공용 모듈로 옮기고 게임마다 가로 배치를 새로 짠 일, 세로에서 판 아래 60%가 비던 문제, S펜 폰이 PC 포인터로 잡혀 가로에 PC 무대가 켜지던 함정까지 18항목 점검의 결과입니다
Read in English Three Card Games Almost Shipped Without Card Images — Sorting Out a Shared Deck, a Rotation Module and Landscape Layouts in One Pass
카드놀이 허브를 채우려고 10월 22일에 프리셀·스파이더·피라미드 세 종을 만들었습니다. 원래는 허브에만 넣을 생각이었는데 개별 앱으로도 Play에 내기로 하면서 10월 23일에 출시 전 점검을 했습니다. 18항목을 봤고, 첫 항목이 출시를 막는 결함이었습니다.
카드 그림이 없었다
세 게임의 빌드 설정은 공개 폴더를 끄고 있었습니다. 카드 그림은 솔리테어의 공개 폴더에만 있었고, 허브 번들에서는 빌드 도구가 솔리테어의 덱 폴더 하나만 남기고 다른 카드 게임 페이지가 그걸 빌려 쓰게 해 두었습니다. 허브에서는 그림이 잘 나왔습니다. 그런데 개별 빌드에는 덱이 없으니 그림 확인이 실패하고 글자만 적힌 CSS 더미 카드로 조용히 떨어졌습니다. 허브에서만 보고 있었으면 몰랐을 일입니다.
고친 방법은 덱을 공용 패키지로 빼는 것입니다. PNG 54장 4.9MB였던 덱을 WebP로 다시 생성해 0.5MB로 줄이고, 모서리의 숫자와 무늬를 카드 폭의 3분의 1까지 키웠습니다. 네 게임이 같은 패키지를 공개 폴더로 가리키니 개별 빌드마다 덱이 실리고, 허브 번들은 전처럼 솔리테어 것 하나만 남겨 공유합니다. 카드 허브 전체가 1.2MB입니다.
가로 모드가 솔리테어에만 있었다
회전 버튼, 가로 배치, 네이티브 회전 호출이 전부 솔리테어 코드 안에만 있었습니다. 안드로이드 매니페스트는 세로 고정이라 폰을 눕혀도 돌지 않고, 앱 쪽에서 브릿지로 돌려야 합니다. 솔리테어의 그 블록을 플랫폼 공용 모듈로 옮기고 4종이 같은 버튼과 같은 저장 키 규칙을 쓰게 했습니다. 판에 들어갈 때 적용하고 나갈 때 세로로 되돌립니다. 토스에서는 브릿지가 있을 때만 버튼이 보입니다.
가로 배치는 게임마다 새로 짰습니다. 프리셀은 빈 셀 네 칸을 왼쪽 2×2, 파운데이션 네 칸을 오른쪽 2×2로 보내고 8열에 높이를 다 줍니다. 스파이더는 더미와 완성한 K 줄을 왼쪽 패널로, 피라미드는 더미와 버린 더미를 오른쪽 패널로 보냅니다.
세로에서 판 아래가 비었다
세로 모드에서 열에 쌓이는 카드 간격이 카드 폭에만 묶여 있어서, 판의 아래 60%가 빈 채로 열이 위에 몰렸습니다. 남는 높이를 열 간격에 흘려보내도록 바꿨습니다. 간격은 남는 높이를 열 최대 길이 12~13장으로 나눈 값까지 자동으로 늘어나고, 상한은 카드 높이의 0.55~0.6배입니다. 간격이 넓어지면 모서리 숫자가 전부 드러나서 가독성 문제도 같이 풀렸습니다.
무늬 구분은 4색 덱 옵션으로 보강했습니다. 다이아를 파랑, 클럽을 초록으로 그린 26장을 추가로 생성하고, 4종 공용 저장 키 하나로 홈 옵션에서 켭니다. 프리셀·스파이더처럼 카드가 작은 게임에서 특히 차이가 납니다. 선택한 묶음은 노란 띠와 그림자로 띄우고, 빈자리 표시의 투명도도 올렸습니다.
두 번의 폰 제보
출시 다음 날 “프리셀 가로모드 좌우 여백이 심하다”는 제보가 왔습니다. 가로에서 카드 크기가 폭에 걸려 정해지는데 프리셀은 셀 2×2 + 8열 + 파운데이션 2×2로 12칸 기준이라 760픽셀 폭 폰에서 카드가 50픽셀에 그쳤습니다. 가로 배치의 칸 수를 다시 셌습니다.
그다음 날 “4종 가로모드에 좌우 여백과 하단 배너”라는 제보가 스크린샷과 함께 왔습니다. 원인은 엉뚱한 데 있었습니다. 데스크톱 무대를 켜는 조건에 “정밀 포인터가 있으면”이 들어 있었는데, S펜이 있는 폰이 정밀 포인터로 잡혀 가로(폭 600 이상)에서 PC용 둥근 무대가 켜졌던 겁니다. 조건에서 포인터 검사를 떼고 화면 폭과 터치 여부로만 가르도록 바꿨습니다.
남은 것
- 피라미드 가로의 카드 크기는 패널 배치로 36픽셀에서 44픽셀까지 키웠지만 더는 못 키웁니다.
- 가로에서 되돌리기 버튼을 HUD로 옮기는 항목은 보류했습니다.
- 홈 옵션 UI는 4종이 같은 2열 격자로 통일됐고, 프리셀에는 판 번호로 시작하기와 자동 완성이 들어갔습니다.
정리
- 출시 전 점검이 아니었으면 세 게임이 그림 없는 카드로 나갈 뻔했습니다. 허브에서만 보면 보이지 않는 결함이었습니다.
- 덱은 공용 패키지 하나(WebP 54장 0.5MB)로, 회전은 공용 모듈로, 가로 배치는 게임마다 따로.
- 세로의 빈 공간은 간격을 높이에 맞춰 늘리는 것으로, 무늬 구분은 4색 덱으로.
- 폰 제보 두 건은 칸 수 계산과 포인터 조건이 원인이었습니다. 새 카드 게임은 같은 패키지와 규칙을 따릅니다.
만든 앱들은 GAMES와 APPS에 있고, 일부는 브라우저에서 바로 해볼 수 있습니다. 소식은 이 블로그와 인스타그램(@fadongkwon.soft) (새 창에서 열림)에서 전해드립니다.
수치는 2026년 10월 23~24일 작업 기준입니다. 카드 크기는 기기 폭과 열 수에 따라 달라집니다.