[2편] 텅 빈 화면에 카메라를 띄우다: XML 뼈대 구축과 '투명도 오버레이'의 마법

📐 1. 디자인의 뼈대, XML과의 첫 만남

HTML과 CSS로 화면을 짜려던 계획을 전면 수정하고, 안드로이드의 순수 UI 설계 방식인 XML을 마주했습니다. 처음엔 외계어 같았지만, 가만히 들여다보니 웹 개발의 <div>나 <img> 태그와 크게 다르지 않다는 걸 깨달았습니다.

제가 머릿속으로 그렸던 직관적인 화면을 구현하기 위해 activity_fit_overlay.xml 파일에 다음과 같은 핵심 부품들을 배치했습니다.

1. PreviewView: 실제 스마트폰 카메라가 비추는 화면을 보여주는 도화지
2. ImageView: 과거 사진(가이드라인)을 불러와 카메라 화면 위에 덮어씌울 투명 셀로판지
3. SeekBar: 과거 사진의 투명도를 쓱쓱 조절할 수 있는 슬라이더 바
4. ConstraintLayout: 화면을 9등분 하여 정확한 수평/수직을 맞출 수 있는 3x3 하얀색 격자선(그리드)

<!-- 핵심 기능인 과거 사진 오버레이 (반투명 셀로판지 역할) -->
<ImageView
    android:id="@+id/guidelineOverlay"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:alpha="0.4" 
    android:src="@android:drawable/ic_menu_gallery"
    android:scaleType="centerCrop" />

특히 android:alpha="0.4"라는 단 한 줄의 코드가 이 앱의 정체성을 만들어냈습니다. 사진의 투명도를 40%로 낮춰서, 뒤에 있는 실시간 카메라 화면이 비치게 만드는 마법 같은 속성이었죠.

🧠 2. Kotlin으로 숨결 불어넣기 (기능 연동)

UI를 예쁘게 그려놨으니, 이제 버튼을 누르면 실제로 동작하게 만들 차례입니다. MainActivity.kt 파일에서 Kotlin 코드를 작성하며 가장 신기했던 부분은 '투명도 조절 바(SeekBar)'의 구현이었습니다.

// 투명도 조절 바(슬라이더) 작동 코드
alphaSeekBar.setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener {
    override fun onProgressChanged(seekBar: SeekBar?, progress: Int, fromUser: Boolean) {
        // 슬라이더를 움직일 때마다 투명도(alpha) 값을 0.0 ~ 1.0 사이로 실시간 변경!
        guidelineOverlay.alpha = progress / 100f
    }
    override fun onStartTrackingTouch(seekBar: SeekBar?) {}
    override fun onStopTrackingTouch(seekBar: SeekBar?) {}
})

사용자가 슬라이더를 좌우로 움직이면, 그 값(0~100)을 받아와서 실시간으로 겹쳐진 사진의 투명도(alpha)를 바꿔주는 로직입니다. 코드가 너무 직관적이라 놀랐습니다. "아, 이래서 바이브 코딩으로 앱 개발이 가능하구나!" 싶었죠.

🚨 3. 트러블 슈팅: "앱이 켜지자마자 죽어요!" (권한 문제)

순조롭게 코드를 작성하고 떨리는 마음으로 가상 휴대폰(에뮬레이터)에서 초록색 실행 버튼(▶️)을 눌렀습니다.
그런데 화면이 번쩍하더니 앱이 시작되자마자 강제 종료(튕김)되어 버렸습니다.

• 현상: 앱 실행 즉시 크래시(Crash) 발생 및 강제 종료.
• 원인 분석: 에러 로그(Logcat)를 살펴보니 SecurityException이라는 무서운 빨간 글씨가 있었습니다. 안드로이드는 보안이 생명이라, 앱이 사용자의 카메라나 갤러리(저장소)에 접근하려면 반드시 사전에 '허락(권한)'을 받아야 하는데 그 과정을 빼먹은 것입니다.
• 해결 방법: 안드로이드의 호적등본 같은 파일인 AndroidManifest.xml에 카메라와 저장소 접근 권한을 명시해주었습니다.

<!-- 카메라 및 갤러리 접근 권한 선언 -->
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" android:maxSdkVersion="28" />

권한을 추가하고 다시 실행하니, 드디어 화면에 "카메라 권한을 허용하시겠습니까?"라는 팝업이 뜨고, [허용]을 누르자 제가 설계한 카메라 화면이 짠! 하고 나타났습니다.

🎉 4. 첫 화면의 감동, 그리고 남은 과제

격자선을 켜고 끄는 기능, 3초/5초 타이머 기능, 그리고 갤러리에서 어제 찍은 사진을 불러와 반투명하게 겹치는 기능까지! 이 모든 것이 제가 구성한 레이아웃 위에서 완벽하게 돌아갔습니다.

하지만 여기서 만족할 수 없었습니다. 눈바디 앱의 진짜 묘미는 "찍자마자 어제 사진과 오늘 사진을 나란히 두고 비교하는 것"이니까요.

다음 편에서는 단순히 사진을 찍는 것을 넘어, 찍은 직후 화면이 스르륵 바뀌며 과거와 현재를 2분할로 비교해 주고, 내친김에 파이썬(Python) 서버와 연동해 AI 자세 분석까지 도전해 본 과정을 다뤄보겠습니다.

---

다음 편에 계속... (3편: 내친김에 AI까지? 파이썬 서버 연동으로 '자세 분석' 기능 달기)