첫 앱 출시기 6 — 공유할 리포트는 따로 그렸다
물타기 계산기의 리포트 공유를 텍스트에서 이미지로 바꿨습니다. 공유 전용 카드를 그리면서 기기 설정과 스크롤 위치를 분리하고, 긴 리포트와 숫자가 잘리는 문제를 고쳤습니다.
들어가며
물타기 계산기의 계산 결과는 처음에 텍스트로 공유했습니다. 2026년 8월 29일에는 이미지로 바꿨습니다. 메신저의 미리보기 안에서 결과를 볼 수 있게 하려는 선택이었습니다.
화면 밖에 그린 공유 전용 카드
앱 화면을 그대로 찍지는 않았습니다. 뒤로 가기 화살표와 공유 버튼까지 보낼 필요는 없고, 스크롤을 어디에 두었는지에 따라 잘리는 내용도 달라집니다. 공유 전용 ShareCard에 종목, 평단가 변화, 투입 금액, 본전까지 필요한 변화를 모았습니다.
화면에는 보이지 않는 카드를 한 장 그렸습니다. drawWithContent 안에서 GraphicsLayer.record로 그릴 내용을 기록하되 화면에 drawContent()를 호출하지 않았습니다. 카드를 스크롤 영역 안에 넣으면 보이지 않아도 자리를 차지해서 화면을 밀었습니다. 그래서 화면 위에 겹치는 별도 영역으로 옮겼습니다.
긴 리포트의 아래쪽이 화면 높이에 맞춰 잘리지 않도록 wrapContentSize(unbounded)도 필요했습니다. 공유 그림은 화면 한 장보다 길 수 있었습니다.
앱의 글자 크기와 이미지의 글자 크기
공유 카드는 폭 1080px로 만들었습니다. 그리는 영역의 density를 3, fontScale을 1로 고정했습니다. 앱에서 읽는 화면은 사용자의 글자 설정을 따르고, 다른 사람에게 보내는 이미지의 배치만 일정하게 만들었습니다.
그렇게 별도 카드를 만들고도 숫자가 한 번 잘렸습니다. 굵게 표시한 값이 +161.85…처럼 나왔습니다. TextAutoSize로 줄여 보고 softWrap = false도 줬지만, 그 배치에서는 기대한 축소가 일어나지 않았습니다. 결국 숫자 칸을 64에서 88로 넓혔고, 동작하지 않던 자동 축소 설정은 제거했습니다.
공유 파일과 앱으로 돌아올 주소
완성한 파일은 캐시의 share/ 아래에 두고 FileProvider로 전달했습니다. 공유할 때마다 새 파일을 쌓지 않도록 같은 이름을 덮어썼습니다. 받는 앱이 읽을 수 있게 인텐트에 읽기 권한을 넣고, 공유 선택 창에도 같은 권한을 전달했습니다.
카드 위에는 앱 아이콘과 이름, twinklelabs.kr을 넣었습니다. 이날 기록에는 QR을 넣을지가 미정으로 남아 있는데, 이후 추가한 공유 QR과 App Links 작업은 별도 글에 적었습니다.
마치며
다크 테마로 만든 그림을 밝은 대화창에 보냈을 때의 대비는 당시 확인하지 못했습니다. 리포트를 이미지로 만드는 작업과, 그 이미지가 실제 대화창에서 읽기 좋은지는 확인할 화면이 달랐습니다.