전 세계 휴대폰의 약 75%가 안드로이드 폰이며, 인터넷 사용자의 75%는 휴대폰으로만 인터넷에 접속합니다. 이는 곧 안드로이드 앱 시장이 매우 크다는 것을 의미합니다.
freeCodeCamp.org 유튜브 채널에서는 초보자를 위한 안드로이드 앱 개발 크래시 코스를 공개했습니다. 안드로이드 개발이 처음인 분들에게 딱 맞는 강의입니다.
강사 소개
이 강의는 라훌 판데이(Rahul Pandey)가 제작했습니다. 그는 페이스북의 안드로이드 리드이자 스탠퍼드 대학교 강사로 활동하고 있는 현직 전문가입니다.
강의에서 배우는 내용
이 강의에서는 팁 계산기(Tip Calculator) 앱을 직접 만들면서 안드로이드 개발을 배웁니다. 사전 경험이 전혀 없어도 괜찮으며, 강의를 마치면 실제로 구글 플레이 스토어에 출시할 수 있는 수준의 앱을 완성하게 됩니다.
핵심 학습 내용은 다음과 같습니다.
- XML을 이용한 사용자 인터페이스(UI) 구성
- 코틀린(Kotlin) 프로그래밍 언어로 앱 로직 작성
- ConstraintLayout(제약 레이아웃)을 활용한 화면 배치
- 이벤트 리스너를 통한 사용자 입력 처리
기본 금액과 팁 비율을 입력하면 앱이 자동으로 팁과 총액을 계산해 줍니다. 또한 팁 비율에 따라 색상이 변하는 애니메이션과 앱 하단의 푸터(footer)까지 구현하여 완성도를 높입니다.
강의 주요 커리큘럼
1. 프로젝트 설정과 기본 구조 이해
안드로이드 스튜디오(Arctic Fox 버전 기준)에서 빈 액티비티(Empty Activity) 템플릿으로 새 프로젝트를 생성하는 방법부터 시작합니다. 최소 SDK는 API 21로 설정하며, 시작 코드를 먼저 실행해 에뮬레이터에서 정상 동작을 확인한 후 본격적인 개발에 들어갑니다.
안드로이드에서 '액티비티(Activity)'는 하나의 화면을 의미합니다. 이 강의에서 다루는 핵심 파일은 두 가지입니다.
- MainActivity.kt: 화면의 비즈니스 로직을 담당
- activity_main.xml: 화면의 UI 레이아웃 정의
2. ConstraintLayout으로 UI 구성하기
화면에는 총 8개의 뷰(View)를 배치합니다. 왼쪽의 4개 TextView는 라벨 역할을 하고, 오른쪽에는 금액 입력용 EditText, 팁 비율 조절용 SeekBar, 팁과 총액을 표시하는 2개의 TextView가 위치합니다.
ConstraintLayout은 중첩된 뷰 그룹 없이 평탄한(flat) 뷰 계층 구조로 복잡한 레이아웃을 만들 수 있게 해줍니다. 깊게 중첩된 뷰 계층은 성능 저하와 UI 지연(잭크, jank)을 유발할 수 있기 때문에, ConstraintLayout은 모든 컴포넌트를 가로·세로로 제약(constraint)하여 다양한 화면 크기에서도 유연하게 대응할 수 있도록 도와줍니다.
3. 코틀린으로 비즈니스 로직 구현
이 앱에는 제출(Submit) 버튼이 없습니다. 대신 SeekBar나 EditText의 값이 변경될 때마다 실시간으로 팁과 총액이 재계산됩니다.
OnSeekBarChangeListener: SeekBar 값 변경 감지TextWatcher: EditText 텍스트 변경 감지
코틀린의 익명 클래스(object 표현식)를 통해 이러한 인터페이스를 구현하며, computeTipAndTotal() 메서드에서 기본 금액과 팁 비율을 가져와 계산한 뒤 UI를 갱신합니다.
4. 버그 수정과 출력 포맷팅
금액 입력란을 모두 지우면 빈 문자열을 Double로 변환하려다 NumberFormatException이 발생하는 버그가 있습니다. 이를 해결하기 위해 입력값이 비어 있는지 먼저 확인하고, 비어 있다면 팁과 총액 표시를 초기화한 후 조기 반환(early return)하도록 수정합니다.
또한 통화 표시이므로 소수점 둘째 자리까지만 보여주도록 %.2f 포맷팅을 적용해 가독성을 높입니다.
5. 색상 테마와 개인화
모든 안드로이드 앱에 반드시 존재하는 AndroidManifest.xml 파일에서 앱 테마를 확인할 수 있습니다. colors.xml에 새로운 색상을 정의하고 themes.xml에서 참조함으로써 상태바 색상, 기본 색상, 배경색을 원하는 대로 변경할 수 있습니다. Adobe Color(color.adobe.com) 같은 도구를 활용하면 조화로운 색상 조합을 쉽게 찾을 수 있습니다.
화면 하단에는 "Made with ❤ by ..." 형태의 푸터를 추가해 앱에 개성을 부여합니다.
6. 인터랙티브 색상 애니메이션
팁 비율에 따라 설명 문구가 달라집니다. 0~9%는 'Poor(나쁨)', 10~14%는 'Acceptable(무난)', 15~19%는 'Good(좋음)', 20~24%는 'Great(훌륭함)', 25% 이상은 'Amazing(굉장함)'으로 표시되는데, 이는 코틀린의 when 문(자바의 switch와 유사)으로 구현합니다.
색상은 선형 보간(linear interpolation) 개념을 적용합니다. 모든 색상은 정수로 표현할 수 있으므로, 안드로이드에서 제공하는 ArgbEvaluator를 사용하면 최악의 팁일 때 빨간색에서 최고의 팁일 때 밝은 초록색까지 부드럽게 변화하는 애니메이션을 손쉽게 만들 수 있습니다.
이 강의에서 다루지 않는 것들
강의 범위를 관리하기 위해 일부러 단순하게 유지한 부분들이 있습니다.
- 여러 화면: 네비게이션이나 백 스택(back stack) 처리 없음
- 네트워킹: API나 서버 통신, 비동기 프로그래밍 없음
- 저장소: 데이터베이스, 디스크, 클라우드 저장 없이 메모리에서만 처리
이 세 가지는 더 복잡한 안드로이드 앱에서 다루게 되지만, 첫 앱을 빠르고 간단하게 완성하는 데 집중하기 위해 제외되었습니다.
확장 아이디어
완성된 팁 계산기를 발전시키고 싶다면 다음 아이디어를 시도해 보세요.
- N인 분할 계산: 함께 식사한 인원수를 입력받아 총액을 나누는 기능 추가
- 반올림 버튼: 잔돈 계산 없이 최종 금액을 올림/내림하는 버튼 추가
- 디자인 개선: 색상과 레이아웃을 자유롭게 커스터마이징
확장 기능을 추가한 후에는 거의 그대로 구글 플레이 스토어에 출시할 수 있습니다. 이 팁 계산기가 여러분의 안드로이드 개발 여정의 출발점이 되기를 바랍니다.
전체 강의는 freeCodeCamp.org 유튜브 채널에서 약 1시간 분량으로 무료로 시청할 수 있습니다.