아이콘 깨짐 문제 배포 후 캐시 갱신 문제로 문의드립니다

이 글의 성격은 무엇인가요?

질문 / 문제 해결

내용을 설명해주세요

[배포 정보]

  • 앱 이름: tarot-talk
  • 최근 배포 ID: 019d891e-e0da-78c5-a524-202d3a45f9b3
  • 배포 버전: 55번

[수정 내역]

  • 아이콘 깨짐 문제 해결을 위해 vite.config.ts에
    base: ‘./’ 설정 추가
  • 빌드 결과물(dist/web/index.html, JS 번들)에서
    자산 경로가 ./assets/… 상대 경로로 정상 변환 확인
  • granite CLI로 배포 완료 (deploymentId 발급됨)

[증상]

  • 빌드 결과물은 완벽하게 상대 경로로 변환됐는데
  • 실제 토스 앱 미니앱 화면에서는 여전히 옛날 빌드의
    깨진 아이콘 화면(alt=“App Icon” 텍스트)이 표시됨
  • 토스 앱 완전 종료/재실행해도 동일
  • 시간이 지나도 갱신되지 않음

[질문]

  1. deploymentId 019d891e-e0da-78c5-a524-202d3a45f9b3가
    현재 LIVE 상태인지 확인 부탁드립니다
  2. 새 배포가 실제로 미니앱에 반영되는 시간이 얼마나 걸리나요?
  3. CDN 캐시를 강제로 갱신하는 방법이 있나요?
  4. granite 빌드에서 base: ‘./’ 설정이 권장되는 방식인가요?

appName (선택)

tarot-talk

안녕하세요 :slight_smile:
새 배포는 미니앱 출시 이후 바로 반영됩니다.
샌드박스앱 테스트시 아이콘이 잘 보이셨나요 ? 아이콘은 네비바의 아이콘이 아닌, 앱 내부 아이콘을 말씀하시는거죠 ?

안녕하세요 Dylan님, 답변 감사합니다.

네, 말씀하신 대로 네비게이션 바 아이콘이 아니라 앱 내부 UI에서 사용하는 브랜드 아이콘입니다. src/App.tsx 안의 태그가 불러오는 이미지인데, 실제 토스앱 화면에서 해당 이미지가 로드되지 않고 alt=“App Icon” 텍스트가 그대로 노출되고 있습니다.

추가로 확인한 내용 공유드립니다.

[현재 구성]

  • vite.config.ts에 base: ‘./’ 설정 추가
  • src/App.tsx에서 import brandIcon from ‘./assets/brand-icon.png’ 방식으로 이미지 import
  • 형태로 사용
  • brand-icon.png 파일 정상 (84,483 bytes, PNG 매직 넘버 확인)

[빌드 결과물]

  • dist/web/index.html은 ./assets/… 상대 경로로 정상 변환됨
  • dist/web/assets/brand-icon-D8TJmnHp.png 해시 파일로 정상 생성됨
  • JS 번들도 new URL() 방식으로 변환 확인

[런타임 확인]
개발자 도구(Elements 탭)로 확인해보니 실제 렌더링된 태그의 src가 /src/assets/brand-icon.png 로 찍히고 있고, Console 탭에서는 Failed to load resource: status 400 에러가 나오고 있습니다. 빌드 결과물의 해시 경로가 아닌 소스 경로가 그대로 요청되는 상황이라 혼란스럽습니다.

55번 배포(deploymentId: 019d891e-e0da-78c5-a524-202d3a45f9b3)가 현재 LIVE 상태로 정상 반영되어 있는지 먼저 확인 부탁드릴 수 있을까요? 그리고 이런 경우 토스 미니앱 환경에서 이미지 자산을 처리하는 권장 방식이 있다면 안내 부탁드립니다.

감사합니다.

안녕하세요 Dylan님, 답변 감사합니다.

드리신 답변과 관련해서 먼저 말씀드리고 싶은 조금 다른 문제가 있어 도움 부탁드립니다.

출시 검토 요청 시 계속 동일한 사유로 반려되고 있습니다:
“브랜드 아이콘 설정이 정상적으로 되어 있는지 확인해주세요. granite.config.ts에 콘솔에 등록한 아이콘과 동일한 아이콘을 등록해야 해요.”

여러 차례 파일을 교체하며 재배포해봤지만 결과가 동일합니다. 현재 시도한 내용은 다음과 같습니다.

[현재 설정]

  • granite.config.ts에 appIcon: ‘./brand-icon.png’ 로 설정됨
  • 프로젝트 루트에 brand-icon.png 파일 존재
  • static.toss.im/appsintoss/29567/008498c3-fc47-4e73-a6f6-9a5af9ea09b0.png 에 접속해서 받은 파일을 그대로 사용했습니다 (7,143바이트)
  • 원래 저는 PNG로 업로드했는데, 해당 URL에서 받은 파일을 확인해보니 실제로는 JPEG 형식(확장자만 .png)으로 저장되어 있었습니다

[확인이 필요한 사항]

  1. 현재 deploymentId 019d891e-e0da-78c5-a524-202d3a45f9b3 이후 여러 번 재배포했는데, 검수 시스템이 비교하는 "콘솔에 등록된 아이콘"은 정확히 어떤 파일인가요? 제가 참조한 URL의 파일이 맞나요?

  2. PNG로 업로드해도 토스 서버가 JPEG로 변환해 저장하는 것 같은데, 그렇다면 granite.config.ts가 가리키는 파일은 실제로 어떤 형식/파일이어야 하나요?

  3. 검수가 비교하는 방식이 바이트 단위 해시 비교인지, 아니면 시각적 동일성 확인인지 궁금합니다.

추가로 앱 내부 UI 아이콘도 실제 토스앱에서 로드가 안 되는 문제가 있어서, 현재는 임시로 태그를 주석 처리한 상태입니다. 이건 아이콘이 아니라 브라우저(토스 웹뷰)가 /src/assets/brand-icon.png 경로로 요청을 보내고 400 에러를 받는 상황이었고, 빌드 결과물(dist/web)에는 해시가 붙은 정상 경로로 생성되었는데도 그러했습니다.

두 문제 모두 해결 방향을 안내해주시면 감사하겠습니다. 며칠째 같은 사유로 계속 반려되고 있어 어떤 파일이 정답인지 확신이 없는 상황입니다.

granite 에는 상대 경로가 아닌 웹 url 주소 입력 부탁드립니다.

샌드박스 환경에서는 정상적으로 브랜드 아이콘이 노출되시는지 궁금합니다!