오늘의 이야기

BarcodeVoucher0407 개발일기 #07

날짜: 2026-04-19
주제: Phase 2 마무리 + 레거시 QR 스캔 UX 폴리싱

QR Scanner

 

오늘의 목표

오늘은 Phase 2의 흐름을 유지하면서, 실제 사용 중 눈에 띄는 불편 요소를 줄이는 데 집중했다.
특히 레거시 QR 스캔 화면의 시스템바 겹침 문제와 버튼 가시성 문제를 해결하는 것이 핵심이었다.

---

배경: 왜 이 작업이 필요했나

기능 자체는 동작했지만, 실제 디바이스에서 아래 문제가 반복적으로 보였다.

• 상단의 뒤로가기/플래시 버튼이 상태바, 컷아웃 영역과 겹쳐 보이는 경우가 있음


• 하단 스캔 안내 문구(예: "바코드를 선에 맞춰주세요")가 네비게이션 바와 시각적으로 겹침


• ic_media_previous 아이콘이 "뒤로가기" 의미보다 "미디어 이전" 느낌에 가까워 직관성이 떨어짐

즉, 기능 완성도보다 실사용 UX 디테일을 끌어올리는 작업이 필요했다.

---

오늘 적용한 변경 사항

1) 레거시 스캔 화면 안전영역(insets) 보정

• 파일: app/src/main/java/com/billcorea/barcodevoucher0407/feature/scan/LegacyQrScanActivity.kt


• applySystemBarInsets에서 상단/하단 인셋을 분리 반영
  
  
  
  • 상단 인셋: 뒤로가기/플래시 버튼 margin 보정
  
  
  • 하단 인셋: 스캔 안내 문구(statusView) 패딩 보정
  
  
  
  

val topBars = insets.getInsets(
    WindowInsetsCompat.Type.statusBars() or WindowInsetsCompat.Type.displayCutout(),
)
val bottomBars = insets.getInsets(WindowInsetsCompat.Type.navigationBars())

(backButton.layoutParams as FrameLayout.LayoutParams).topMargin = baseBackTop + topBars.top
(flashButton.layoutParams as FrameLayout.LayoutParams).topMargin = baseFlashTop + topBars.top
statusView.setPadding(0, 0, 0, baseStatusBottom + bottomBars.bottom)

효과:

• 버튼/안내 문구가 시스템 UI와 겹치지 않고 안정적으로 배치됨

2) 뒤로가기/플래시 버튼 시인성 개선

• 파일: app/src/main/res/layout/activity_legacy_qr_scan.xml


• 변경 내용:
  
  
  
  • 버튼 배경을 원형 반투명으로 통일
  
  
  • padding, scaleType 조정으로 아이콘 가독성 향상
  
  
  
  


• 추가 리소스: app/src/main/res/drawable/bg_round_translucent_button.xml

<ImageButton
    android:id="@+id/btnBack"
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:background="@drawable/bg_round_translucent_button"
    android:padding="12dp"
    android:scaleType="centerInside"
    android:src="@drawable/ic_arrow_back_24" />

효과:

• 카메라 프리뷰 위에서도 버튼이 더 잘 보임

3) 뒤로가기 아이콘 교체 (media_previous -> arrow_back)

• 기존: @android:drawable/ic_media_previous


• 신규: @drawable/ic_arrow_back_24


• 추가 리소스: app/src/main/res/drawable/ic_arrow_back_24.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
        android:fillColor="#FFFFFFFF"
        android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,8 1.41,-1.41L7.83,13H20v-2z" />
</vector>

효과:

• 버튼 의미가 더 명확해져 사용자 혼란 감소

4) 리소스 lint 정리

• android:tint 관련 경고/오류 포인트 정리


• 현재 아이콘은 벡터 자체를 흰색으로 지정해 불필요 속성 제거

<!-- before -->
android:src="@drawable/ic_arrow_back_24"
android:tint="@android:color/white"

<!-- after -->
android:src="@drawable/ic_arrow_back_24"

효과:

• 리소스 검사 에러 없이 안정 상태 유지

---

Phase 2 진행 맥락 정리

agent.md 기준으로 Phase 2는 체크 완료 상태이며, 오늘 작업은 그중 2-3 UX 개선 항목의 완성도 보강에 해당한다.

이미 완료된 Phase 2 주요 축:

• 검색/필터/정렬


• 영수증 이미지 첨부


• 스캔 실패/중복 처리 UX 개선


• DataStore 설정화

오늘은 위 기능들을 실제 화면 품질 관점에서 다듬는 "마감 폴리싱" 성격이었다.

---

작업하면서 얻은 인사이트

• 기능 구현이 끝나도, 카메라 화면처럼 시스템 UI와 맞물리는 영역은 인셋 처리가 UX 품질을 크게 좌우한다.


• 아이콘은 단순 미관이 아니라 행동 의미 전달 그 자체다. (media_previous vs arrow_back)


• 작은 시각 개선(배경, 패딩, 배치)이 사용자 체감 품질을 빠르게 끌어올린다.

---

다음 계획

Phase 3로 넘어가며 아래 순서로 진행할 예정이다.

1. Kakao Map 연동(상세 -> 지도)


2. In-app Update 적용


3. 통계/리포트(월별 금액, 카테고리)

---

한 줄 회고

오늘은 "새 기능 추가"보다 "이미 있는 기능을 편하게 쓰게 만드는 작업"이 얼마나 중요한지 다시 확인한 하루였다.