Skip to content

[FIX] 스플래시 로고 잘림 및 EAS 빌드 환경 설정 정리 #86

@kbh0218

Description

@kbh0218

📝 기능 설명

Android 앱 실행 시 스플래시 화면에서 LinClean 워드마크의 좌우가 잘려 보이는 문제를 수정합니다.

현재 스플래시 이미지는 긴 가로 워드마크를 사용하고 있어 Android 스플래시 아이콘 표시 영역에서 양 끝이 잘릴 수 있습니다.
Expo 공식 문서 기준 expo-splash-screen config plugin의 image, imageWidth, resizeMode, backgroundColor 설정과 스플래시 이미지 원본의 안전 여백을 함께 확인하여, 실제 기기와 preview 빌드에서 로고가 잘리지 않도록 개선합니다.

또한 development / preview / preview-device 빌드에서 EAS environment를 일관되게 사용하도록 eas.json 설정을 정리합니다.
로컬 IP 또는 에뮬레이터 전용 주소에 의존하지 않고, EAS preview environment에 등록된 API URL 및 Clerk publishable key를 사용할 수 있도록 빌드 프로필을 정리합니다.

📋 구현할 Task

  • 현재 assets/images/splash-icon.png의 원본 크기와 실제 로고 표시 영역을 확인했는가?
  • Android 스플래시 화면에서 워드마크 좌우가 잘리는 재현 조건을 확인했는가?
  • app.jsonexpo-splash-screen 설정을 확인했는가?
  • imageWidth, resizeMode, backgroundColor 설정이 현재 스플래시 이미지에 적절한지 확인했는가?
  • 필요 시 Android 전용 imageWidth 값을 별도로 조정하는 방향을 검토했는가?
  • 스플래시 이미지 자체에 충분한 좌우 안전 여백을 확보했는가?
  • Android 생성 리소스(/android/app/src/main/res/...)를 직접 수정하지 않고 Expo 설정 및 이미지 기준으로 반영했는가?
  • development 빌드 프로필이 EAS preview environment를 사용하도록 설정했는가?
  • preview 빌드 프로필이 EAS preview environment를 사용하도록 설정했는가?
  • preview-device 빌드 프로필이 EAS preview environment를 사용하도록 설정했는가?
  • production 빌드 프로필이 EAS production environment를 사용하도록 설정했는가?
  • 기존 10.0.2.2:8080 또는 로컬 IP 기반 API URL이 preview 계열 EAS 빌드에 남아 있지 않은지 확인했는가?
  • EAS preview environment의 EXPO_PUBLIC_API_BASE_URL이 실제 배포 API 주소를 바라보는지 확인했는가?
  • EAS preview environment의 EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY가 현재 테스트하려는 Clerk 환경과 일치하는지 확인했는가?
  • preview-device 빌드에서 앱 실행 시 스플래시 로고가 잘리지 않는지 확인했는가?
  • preview-device 빌드에서 API 요청이 실제 배포 주소로 정상 전송되는지 확인했는가?
  • Clerk 초기화 오류 없이 로그인 화면 또는 인증 흐름이 정상 진입되는지 확인했는가?

📎 우선 확인 대상

  • Expo 앱 설정

    • app.json
    • expo-splash-screen plugin 설정
    • image
    • imageWidth
    • resizeMode
    • backgroundColor
    • 필요 시 android 전용 splash 설정
  • 스플래시 이미지

    • assets/images/splash-icon.png
    • assets/images/login_wordmark.png
    • 워드마크 좌우 여백
    • Android 스플래시 안전영역 내 표시 여부
  • EAS 빌드 설정

    • eas.json
    • development
    • preview
    • preview-device
    • production
    • environment 설정
  • API 환경 변수

    • EXPO_PUBLIC_API_BASE_URL
    • api/api-client.ts
    • API_BASE_URL
    • 로컬 fallback 주소와 EAS environment 주소의 적용 방식
  • Clerk 환경 변수

    • EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY
    • app/_layout.tsx
    • ClerkProvider
    • EAS preview environment에 등록된 Clerk key

처리 방향:

  • assets/images/splash-icon.png1024x1024 캔버스 안에서 충분한 좌우 여백을 가지도록 조정합니다.
  • 긴 워드마크가 Android 스플래시 아이콘 표시 영역을 벗어나지 않도록 실제 로고 표시 폭을 줄입니다.
  • app.jsonexpo-splash-screen 설정에서 resizeMode: "contain"을 유지합니다.
  • 필요 시 Android 전용 imageWidth를 더 작게 지정하는 방식을 검토합니다.
  • preview-device 빌드 기준으로 실제 기기 또는 에뮬레이터에서 스플래시 표시 결과를 확인합니다.
  • Expo 공식 문서 기준 development build에서는 스플래시 표시가 최종 standalone/preview 빌드와 다를 수 있으므로, 최종 확인은 preview-device 빌드에서 진행합니다.

EAS 환경 설정은 빌드 프로필별로 명확하게 정리합니다.

처리 방향:

  • development, preview, preview-device는 EAS preview environment를 사용하도록 설정합니다.
  • production은 EAS production environment를 사용하도록 설정합니다.
  • preview 계열 빌드에서 로컬 IP 또는 에뮬레이터 전용 주소에 의존하지 않도록 합니다.
  • 실제 배포 API 주소와 Clerk key는 EAS dashboard의 environment variables 기준으로 관리합니다.
  • 로컬 dev-client 실행 시 .env와 EAS environment가 다를 수 있음을 확인하고, 로컬 테스트용 env는 별도로 관리합니다.

📎 추가 내용

  • 이번 이슈에서는 스플래시 로고 잘림 문제와 EAS 빌드 environment 설정 정리만 다룹니다.
  • 스플래시 이미지 변경은 네이티브 리소스에 반영되어야 하므로 새 EAS 빌드가 필요합니다.
  • preview-device 빌드는 Metro 연결 없이 설치 후 바로 실행되는 내부 배포 빌드로 확인합니다.
  • development 빌드는 dev-client 성격이므로 로컬 Metro 실행 시 .env 값이 JS 번들에 사용될 수 있습니다.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions