반응형 Android (Kotlin & Compose)8 인스타그램 뺨치는 UI? 10분 만에 끝내는 SNS 피드 앱 만들기 (Jetpack Compose 실습) 안녕하세요, '생각하는 개발자'입니다.드디어 Part 2의 마지막 여정입니다! 그동안 우리는 화면을 배치하고, 상태를 관리하고, 목록을 만들고, 화면을 이동하는 법까지 숨 가쁘게 달려왔습니다. 이제 이 조각들을 모아 '진짜 앱' 같은 SNS 피드 화면을 만들어 볼 시간입니다.이 실습을 마치면 "나도 이제 화면 하나는 뚝딱 만들 수 있겠는데?"라는 자신감을 얻게 되실 겁니다.[내부 링크: 이전 강의 복습하기]👉 [2-3] 무한 스크롤의 핵심, LazyColumn 완벽 가이드 (링크) ## 1. 실습 목표: 어떤 화면을 만드나요?우리가 오늘 만들 화면은 전형적인 SNS 피드입니다.상단: 사용자 이름과 프로필 이미지중간: 메인 포스팅 이미지 (심플한 컬러 박스로 대체 가능)하단: 좋아요, 댓글, 공유 아이콘.. 2026. 2. 9. [오늘의 코드 조각] [2-4] 앱의 지도를 그리다: Compose Navigation 기초 안녕하세요, '생각하는 개발자'입니다.지난 시간에는 LazyColumn으로 멋진 목록을 만들어봤습니다. 하지만 목록의 아이템을 클릭해도 아무 일도 일어나지 않는다면 반쪽짜리 앱이겠죠?사용자가 버튼을 눌렀을 때 다른 화면으로 이동하고, 다시 뒤로 돌아오는 기능을 구현하려면 **Navigation(내비게이션)**이라는 개념이 필요합니다. Compose에서는 이 '화면의 지도'를 어떻게 그리는지 핵심 3요소를 통해 알아보겠습니다.1. Compose 내비게이션의 3총사Compose에서 화면 이동을 구현하려면 딱 세 가지만 기억하면 됩니다.NavController: "운전사"입니다. 화면 이동을 명령(Maps)하고 뒤로 가기를 처리합니다.NavHost: "내비게이션이 보여줄 공간"입니다. 현재 어떤 화면을 보여줄.. 2025. 12. 23. [오늘의 코드 조각] [2-3] 더 긴 목록 보여주기: 리사이클러뷰 대신 LazyColumn 안녕하세요, '생각하는 개발자'입니다.인스타그램의 피드, 카카오톡의 채팅 목록, 유튜브의 동영상 리스트... 우리가 매일 쓰는 앱들은 수많은 데이터를 목록 형태로 보여줍니다.과거 안드로이드에서는 이런 목록을 만들기 위해 Adapter, ViewHolder 등 복잡한 코드를 잔뜩 작성해야 했습니다. 하지만 Jetpack Compose에서는 이름부터 재미있는 LazyColumn 하나로 이 모든 과정을 혁신적으로 줄였습니다. 1. 왜 그냥 Column이 아니라 'Lazy'인가요?Column은 안에 100개의 아이템이 있다면, 화면에 보이든 안 보이든 100개를 한꺼번에 다 그려버립니다. 데이터가 많아지면 앱이 버벅거리겠죠?**LazyColumn**은 이름처럼 '게으르게' 작동합니다. 지금 화면에 보이는 아이템.. 2025. 12. 22. [오늘의 코드 조각] [2-2] Compose 핵심 원리: 상태(State)와 동적 UI 안녕하세요, '생각하는 개발자'입니다.지난 포스팅에서는 Text, Button 등을 Column과 Row에 배치하여 화면의 뼈대를 만드는 법을 배웠습니다. 하지만 지금까지 만든 화면은 멈춰있는 그림과 같았죠. 버튼을 눌러도 아무런 반응이 없었습니다.이번 시간에는 Compose 앱에 생명을 불어넣는 마법, 바로 **상태(State)**에 대해 배울 겁니다. 이 개념을 이해해야만 사용자의 행동에 따라 숫자가 올라가고, 글자가 바뀌는 '진짜 앱'을 만들 수 있습니다.1. UI가 스스로 변하는 원리: 재구성(Recomposition)기존 안드로이드(XML) 방식에서는 버튼을 누르면 우리가 직접 "텍스트뷰의 글자를 '짠'으로 바꿔라!"라고 명령해야 했습니다. (textView.text = "짠")하지만 Compo.. 2025. 12. 21. [오늘의 코드 조각] [2-1] Compose 기본 UI와 레이아웃 안녕하세요, '생각하는 개발자'입니다.Part 1에서 우리는 코틀린이라는 언어를 통해 컴퓨터와 대화하는 법을 배웠습니다. 이제 그 언어를 사용해 사용자의 눈에 보이는 '화면'을 직접 그려볼 시간입니다.Jetpack Compose의 세계에서는 모든 UI 요소가 Composable 함수라는 '레고 블록'으로 만들어집니다. 우리는 이 블록들을 조립하여 원하는 화면을 구성하게 됩니다. 이번 시간에는 가장 기본적이면서도 중요한 UI 블록들과, 이 블록들을 원하는 위치에 배치하는 방법에 대해 알아보겠습니다.4.1. Composable 함수: UI를 그리는 레고 블록Composable 함수는 화면의 일부를 그리는 특별한 함수입니다. 일반 함수와 구분하기 위해, 함수 위에 @Composable이라는 주석(Annotat.. 2025. 8. 27. [오늘의 코드 조각] [1-3] 코틀린 객체지향 프로그래밍 안녕하세요, '생각하는 개발자'입니다.지난 시간에는 변수, 함수 등 코드를 구성하는 가장 작은 단위들을 배웠습니다. 하지만 앱이 복잡해지면 수많은 변수와 함수들이 뒤죽박죽 섞여 관리하기 어려워지겠죠.그래서 우리는 **객체지향 프로그래밍(Object-Oriented Programming, OOP)**이라는 강력한 설계 방법을 사용합니다. 말이 조금 어렵게 들리지만, 사실은 **'세상의 사물을 흉내 내어 코드를 정리하는 방법'**이라고 생각하면 쉽습니다. 이 개념을 이해하면 훨씬 더 체계적이고 재사용하기 좋은 코드를 작성할 수 있습니다. 3.1. 클래스와 객체: 붕어빵 틀과 붕어빵OOP의 가장 핵심적인 두 가지 개념은 바로 **클래스(Class)**와 **객체(Object)**입니다.클래스(Class): 객.. 2025. 8. 26. 이전 1 2 다음 반응형
