< 소개 >
안녕~~ 🌱
사례글 미루다가 급하게 쓰는 하이호야 🌱
제가 식물요정 컨셉의 앱을 만들고 있어서
그래서 이 사례글에서 간혈적으로 식물요정 흉내를 낼 수도 있어. 🌱
역겨워도 참아줘 🌱
아무튼 저는 20기 안드로이드 앱 스터디에 들어가 있어.
mAIN APP으로 식물요정 앱을 만들고 있는데요,
사례글 2번에서 제시한 문제인 테스트 비효율 + 반응형 버그를 해결해서
이렇게 사례글로 정리해 🌱🌱
(이 사례글은 ai 도움 한 30% 정도만 받았고 나머지는 직접 썻어!)
< 진행 방법 >
✅ 문제 상황1: 반응형 깨진다
크롬으로 켜서 볼 때는 괜찮았는데, 폰으로 보면 화면이 자꾸 깨졌어.
당장 내 폰으로 봐도 화면이 깨지더라... 🌱
저번주에도 몇 번 이 문제 해결하려고 했는데, 이상한 여백이나 만들어지고 UI 망가지고 잘안됐어.
단순히 "반응형 고쳐줘"라고만 하면 안되었던 거지.
여기 이상한 여백은 수정 실패의 여파야. 🌱
✅ 해결책: Device Preview 도입
설치
반응형 테스트할 때 쓰는 무언가를 설치하면 오류 LOG가 나오겠지! 깔아보자 라는 생각으로 조사해봤는데, 생각보다 쉬운 해결책이 있어서 깔았어.
Device Preview란 Flutter 앱 안에서 다양한 기기 화면을 시뮬레이션할 수 있는 패키지야.
앱을 실행하면 옆에 패널이 뜨고, 거기서 iPhone SE, Pixel, iPad 등 여러 기기를 선택할 수 있어. 실제로 빌드 안 해도 바로바로 확인 가능!
이제 나는 폰 하나만 가지고도 다른 폰에서 어떻게 보이는지 알 수 있는거지! 친없찐도 가능!
설치방법 : pubspec.yaml에 최신 버전 스펙을 넣으면 돼.
pub는 플러터 버전 npm 같은 거라고 알고 있어. 🌱
https://pub.dev/ 여기서 최신버전 검색하자.
https://pub.dev/packages/device_preview
로그 확인 🌱
저의 스승 퍼플렉시티에게 로그를 냅다 던졌더니, 오류 메세지 잘 뜨는 거 맞다면서 분석해줬어요.
그걸 클로드코드에게 던졌더니
숫자만 냅다 바꾸려고 해서;;
혼쭐을 내었어. 🌱
Device Preview로 기기 바꿔가며 테스트 해보니 이후에 잘 해결 완료!
이렇게 폰에서 볼 때 픽셀 오류 깨지는 문제 해결~~~
✅ 문제 상황2: 나머지 반응형 버그들
1. 설정 화면 텍스트 넘침
설정 화면에서 "Google Gemini API 키" + "사용 중" 뱃지 조합이 작은 화면에서 넘쳤어.
해결: 텍스트가 길면 ...으로 줄여주는 설정 추가.
2. 레이아웃 여백 100px 문제
여러 화면에서 상단바랑 콘텐츠 사이에 100px 정도 빈 공간이 있었어.
아까 올린 사진의 그것..
원인: 패딩이 이중으로 들어가고 있었음 (SafeArea + 고정 높이가 겹침)
시행착오: 엄청 시도함......
결국 고침.
3. 식물 상세보기 화면 어색함
프로필 이미지가 흰 시트에 안 걸쳐져 있어서 붕 떠 보였어.
이따구 현상 실존;_;
고쳤더니 이런 문제가;;
이런 문제도;;
겨우 고쳤나 싶더니 이름이 프로필 이미지에 너무 붙어있었음.
결국 고치기 완료...
해결:
프로필 이미지 걸침 비율: 20% → 50%로 조정
이름이랑 프로필 사이 간격도 넓힘
이것도 숫자 조정하면서 여러 번 시도함. "이 정도면 괜찮겠지?" 했는데 막상 보니까 또 어색하고... 반복.
쓸 내용 2가지 더 있는데 글이 길어져서 다음 4회 글로 이어서 쓸게 🌱
다음은:
안드로이드 스튜디오 가상 폰 활용
바텀시트 수정
< 🌱 핵심 교훈 >
1. 테스트 환경 없으면 버그 못 찾음
Device Preview 없었으면 아이폰에선 어떻게 보이는지 몰랐을 거야.
다양한 화면 크기 테스트는 필수!
2. 고정 간격은 반응형의 적
간격을 20px, 30px 이렇게 고정하면 큰 화면에서만 예쁨. 자동 조절되는 옵션을 쓰는 게 좋음.
< 🌱 결과 >
반응형 버그 총 4개 수정 완료
iPhone SE ~ Galaxy까지 다양한 화면에서 UI 정상 동작
이제 Device Preview로 수시로 체크 가능
< 다음 사례글 예고 >
사례글 4: 반응형과 테스트 이어서... (안드로이드 스튜디오 가상 폰 활용 + 바텀시트 수정)
사례글 5: AI 응답 품질 잡기
사례글 6: 앱 출시 준비 log + 사례글 작성 도움 받기
