📝 기능 설명
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
📎 우선 확인 대상
-
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.png가 1024x1024 캔버스 안에서 충분한 좌우 여백을 가지도록 조정합니다.
- 긴 워드마크가 Android 스플래시 아이콘 표시 영역을 벗어나지 않도록 실제 로고 표시 폭을 줄입니다.
app.json의 expo-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 번들에 사용될 수 있습니다.
📝 기능 설명
Android 앱 실행 시 스플래시 화면에서 LinClean 워드마크의 좌우가 잘려 보이는 문제를 수정합니다.
현재 스플래시 이미지는 긴 가로 워드마크를 사용하고 있어 Android 스플래시 아이콘 표시 영역에서 양 끝이 잘릴 수 있습니다.
Expo 공식 문서 기준
expo-splash-screenconfig 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의 원본 크기와 실제 로고 표시 영역을 확인했는가?app.json의expo-splash-screen설정을 확인했는가?imageWidth,resizeMode,backgroundColor설정이 현재 스플래시 이미지에 적절한지 확인했는가?imageWidth값을 별도로 조정하는 방향을 검토했는가?/android/app/src/main/res/...)를 직접 수정하지 않고 Expo 설정 및 이미지 기준으로 반영했는가?development빌드 프로필이 EASpreviewenvironment를 사용하도록 설정했는가?preview빌드 프로필이 EASpreviewenvironment를 사용하도록 설정했는가?preview-device빌드 프로필이 EASpreviewenvironment를 사용하도록 설정했는가?production빌드 프로필이 EASproductionenvironment를 사용하도록 설정했는가?10.0.2.2:8080또는 로컬 IP 기반 API URL이 preview 계열 EAS 빌드에 남아 있지 않은지 확인했는가?EXPO_PUBLIC_API_BASE_URL이 실제 배포 API 주소를 바라보는지 확인했는가?EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY가 현재 테스트하려는 Clerk 환경과 일치하는지 확인했는가?📎 우선 확인 대상
Expo 앱 설정
app.jsonexpo-splash-screenplugin 설정imageimageWidthresizeModebackgroundColorandroid전용 splash 설정스플래시 이미지
assets/images/splash-icon.pngassets/images/login_wordmark.pngEAS 빌드 설정
eas.jsondevelopmentpreviewpreview-deviceproductionenvironment설정API 환경 변수
EXPO_PUBLIC_API_BASE_URLapi/api-client.tsAPI_BASE_URLClerk 환경 변수
EXPO_PUBLIC_CLERK_PUBLISHABLE_KEYapp/_layout.tsxClerkProvider처리 방향:
assets/images/splash-icon.png가1024x1024캔버스 안에서 충분한 좌우 여백을 가지도록 조정합니다.app.json의expo-splash-screen설정에서resizeMode: "contain"을 유지합니다.imageWidth를 더 작게 지정하는 방식을 검토합니다.EAS 환경 설정은 빌드 프로필별로 명확하게 정리합니다.
처리 방향:
development,preview,preview-device는 EASpreviewenvironment를 사용하도록 설정합니다.production은 EASproductionenvironment를 사용하도록 설정합니다..env와 EAS environment가 다를 수 있음을 확인하고, 로컬 테스트용 env는 별도로 관리합니다.📎 추가 내용
.env값이 JS 번들에 사용될 수 있습니다.