<div id="readability-page-1" class="page"><div id="ArticleView"> <p><span>모바일 앱에서 스크롤이 가능한 리스트 형식의 UI는 매우 흔한 형태입니다. 화면이 작은 모바일 특성상 스크롤을 통해 다양한 정보를 표현하는 방식이 효율적입니다. 이러한 UI를 위해서 기존 안드로이드 View에서는 주로 RecyclerView를 주로 사용했습니다. Compose에서는 LazyColumn, LazyRow가 이를 대체할 수 있습니다. 여기서는 가로보다 더 자주 사용되는 세로 스크롤을 지원하는 LazyColumn에 대해 알아봅니다.</span></p><h3><span><b>LazyColumn</b></span></h3><p><span>LazyColumn은 세로 스크롤이 가능하며 화면에 보이는 항목만 렌더링 하여 리스트를 효율적으로 처리하는 컴포저블입니다.</span></p><div data-app="{&quot;type&quot;:&quot;gridGallery&quot;,&quot;caption&quot;:&quot;&quot;,&quot;displayOption&quot;:&quot;InnerCenter&quot;,&quot;images&quot;:[{&quot;url&quot;:&quot;http://t1.daumcdn.net/brunch/service/user/2Kn8/image/jbh0MVBAnLbkjVz1NgZhBAIx0cw.png&quot;,&quot;width&quot;:&quot;300&quot;,&quot;height&quot;:&quot;669&quot;,&quot;originalName&quot;:&quot;Screenshot_20250907_225825.png&quot;}]}"><p><img alt="Screenshot_20250907_225825.png" src="https://img1.daumcdn.net/thumb/R1280x0.fpng/?fname=http://t1.daumcdn.net/brunch/service/user/2Kn8/image/jbh0MVBAnLbkjVz1NgZhBAIx0cw.png"> <span></span></p></div><p><span>정말 간단하게 리스트를 표시할 수 있습니다. RecyclerView를 사용하려면 XML은 물론이고 Adapter와 ViewHolder까지 필요합니다. 그것에 비해서 LazyColumn은 아주 쉽게 구현할 수 있습니다. </span></p><p><span>라인 1: 리스트에 보여줄 데이터를 만듭니다.</span></p><p><span>라인 5: 세로 방향으로 스크롤 가능한 리스트를 생성하는 LazyColoumn를 선언합니다.</span></p><p><span>라인 6~8: items()는 LazyColumn의 확장 함수로 리스트의 각 항목을 UI로 렌더링 합니다. 내부 람다 { item -&gt; Text(text = item) }는 각 항목을 Text로 표시합니다. item은 listData의 각 요소를 의미하며, 여기서는 'Item #0'부터 'Item #99'까지 순차적으로 전달됩니다.</span></p><h3><span><b>LazyListScope DSL</b></span></h3><p><span>LazyColumn { ... } 또는 LazyRow { ... } 내부에서 사용하는 블록은 LazyListScope.() 타입입니다. 이 DSL은 다음과 같은 함수들을 제공합니다.</span></p><div data-app="{&quot;type&quot;:&quot;gridGallery&quot;,&quot;caption&quot;:&quot;&quot;,&quot;displayOption&quot;:&quot;InnerCenter&quot;,&quot;images&quot;:[{&quot;url&quot;:&quot;http://t1.daumcdn.net/brunch/service/user/2Kn8/image/AijsSvd3N9Hj-2adN_pfnCASgfU.png&quot;,&quot;width&quot;:&quot;639&quot;,&quot;height&quot;:&quot;190&quot;,&quot;originalName&quot;:&quot;스크린샷 2025-09-08 023803.png&quot;}]}"><p><img alt="스크린샷 2025-09-08 023803.png" src="https://img1.daumcdn.net/thumb/R1280x0.fpng/?fname=http://t1.daumcdn.net/brunch/service/user/2Kn8/image/AijsSvd3N9Hj-2adN_pfnCASgfU.png"> <span></span></p></div><p><span>단일 항목은 말 그대로 하나의 항목만 추가하는 것입니다. 앞선 예제에서 사용한 것은 items(list) { item -&gt; ... }의 형태로 리스트 요소를 항목으로 추가한 경우입니다. 리스트 대신에 count에 Int 값을 주면 해당 개수만큼 항목이 추가됩니다. 다음과 같이 사용할 수 있습니다.</span></p><div data-app="{&quot;type&quot;:&quot;gridGallery&quot;,&quot;caption&quot;:&quot;&quot;,&quot;displayOption&quot;:&quot;InnerCenter&quot;,&quot;images&quot;:[{&quot;url&quot;:&quot;http://t1.daumcdn.net/brunch/service/user/2Kn8/image/o-9u8vHnHbIfxAY-xClfO1Uz_Gw.png&quot;,&quot;width&quot;:&quot;340&quot;,&quot;height&quot;:&quot;81&quot;,&quot;originalName&quot;:&quot;스크린샷 2025-09-08 015353.png&quot;}]}"><p><img alt="스크린샷 2025-09-08 015353.png" src="https://img1.daumcdn.net/thumb/R1280x0.fpng/?fname=http://t1.daumcdn.net/brunch/service/user/2Kn8/image/o-9u8vHnHbIfxAY-xClfO1Uz_Gw.png"> <span></span></p></div><p><span>리스트 요소와 인덱스에 동시 접근이 필요한 경우 다음과 같이 사용할 수 있습니다.</span></p><div data-app="{&quot;type&quot;:&quot;gridGallery&quot;,&quot;caption&quot;:&quot;&quot;,&quot;displayOption&quot;:&quot;InnerCenter&quot;,&quot;images&quot;:[{&quot;url&quot;:&quot;http://t1.daumcdn.net/brunch/service/user/2Kn8/image/ZXoDpE8qhjyHU1H0fNyLvf3A3Hw.png&quot;,&quot;width&quot;:&quot;372&quot;,&quot;height&quot;:&quot;510&quot;,&quot;originalName&quot;:&quot;스크린샷 2025-09-08 020100.png&quot;}]}"><p><img alt="스크린샷 2025-09-08 020100.png" src="https://img1.daumcdn.net/thumb/R1280x0.fpng/?fname=http://t1.daumcdn.net/brunch/service/user/2Kn8/image/ZXoDpE8qhjyHU1H0fNyLvf3A3Hw.png"> <span></span></p></div><p><span>stickyHeader는 말 그대로 고정된 헤더를 추가합니다. 스크롤이 될 때 헤더는 상단에 고정된 헤더 아래 항목들만 스크롤이 됩니다.</span></p><div data-app="{&quot;type&quot;:&quot;gridGallery&quot;,&quot;caption&quot;:&quot;&quot;,&quot;displayOption&quot;:&quot;InnerCenter&quot;,&quot;images&quot;:[{&quot;url&quot;:&quot;http://t1.daumcdn.net/brunch/service/user/2Kn8/image/ynE_ChrkaAAuf319i9Zvnf7FmIE.png&quot;,&quot;width&quot;:&quot;604&quot;,&quot;height&quot;:&quot;212&quot;,&quot;originalName&quot;:&quot;스크린샷 2025-09-08 023436.png&quot;}]}"><p><img alt="스크린샷 2025-09-08 023436.png" src="https://img1.daumcdn.net/thumb/R1280x0.fpng/?fname=http://t1.daumcdn.net/brunch/service/user/2Kn8/image/ynE_ChrkaAAuf319i9Zvnf7FmIE.png"> <span></span></p></div><p><span>위와 같이 헤더 아래에 항목을 추가하면 됩니다. 지금은 항목이 적어 스크롤이 발생하지 않겠지만 많아지면 항목만 스크롤이 됩니다. 아래와 같은 화면을 만들어서 직접 확인해 보면 이해하는데 도움이 됩니다.</span></p><div data-app="{&quot;type&quot;:&quot;gridGallery&quot;,&quot;caption&quot;:&quot;&quot;,&quot;images&quot;:[{&quot;url&quot;:&quot;http://t1.daumcdn.net/brunch/service/user/2Kn8/image/yAoG93VmxPJONsr4gOrLh8PnzWY.png&quot;,&quot;widthRatio&quot;:&quot;48.193045618192585%&quot;,&quot;width&quot;:&quot;600&quot;,&quot;height&quot;:&quot;448&quot;,&quot;originalName&quot;:&quot;스크린샷 2025-09-08 021930.png&quot;},{&quot;url&quot;:&quot;http://t1.daumcdn.net/brunch/service/user/2Kn8/image/p4yjlwcnyVugdTtgGvH7bP-9XsU.png&quot;,&quot;widthRatio&quot;:&quot;51.8069543818074%&quot;,&quot;width&quot;:&quot;609&quot;,&quot;height&quot;:&quot;423&quot;,&quot;originalName&quot;:&quot;스크린샷 2025-09-08 022109.png&quot;}]}"><p><img alt="스크린샷 2025-09-08 021930.png" src="https://img1.daumcdn.net/thumb/R1280x0.fpng/?fname=http://t1.daumcdn.net/brunch/service/user/2Kn8/image/yAoG93VmxPJONsr4gOrLh8PnzWY.png"></p><p><img alt="스크린샷 2025-09-08 022109.png" src="https://img1.daumcdn.net/thumb/R1280x0.fpng/?fname=http://t1.daumcdn.net/brunch/service/user/2Kn8/image/p4yjlwcnyVugdTtgGvH7bP-9XsU.png"></p></div><h3><span><b>지연 렌더링</b></span></h3><p><span>LazyColumn은 화면에 보여야 하는 아이템만 생성(compose)하고 벗어나면 제거(dispose)합니다. 보여야 할 때까지 Lazy 하게 동작하는 것이죠.</span></p><p><span>화면 크기와 아이템의 높이를 계산하여 현재 화면에 표시될 수 있는 n개의 아이템과 스크롤 시 즉시 보여야 할 약간의 버퍼 아이템만 렌더링 합니다. 스크롤하여 화면 밖으로 사라지는 아이템은 컴포지션 트리에서 제거되고, 화면에 진입하는 새로운 아이템은 새롭게 컴포지션 됩니다. 이 방식은 기존의 RecyclerView처럼 View를 재활용하는 구조가 아닙니다. 필요할 때 생성하고 필요 없을 때 제거하는 방식입니다. 따라서 수천, 수만 개의 아이템을 가진 리스트도 메모리 부담 없이 안정적으로 다룰 수 있습니다.</span></p><h3><span><b>자동 레이아웃 관리</b></span></h3><p><span>LazyColumn은 내부적으로 가시 영역(viewport)의 아이템을 측정(M</span><span>easure</span><span>), 배치(Place)하고 높이, 여백, 정렬을 모두 자동으로 관리합니다. LazyColumn의 레이아웃 메커니즘은 다음과 같이 동작합니다.</span></p><p><span>측정: 먼저 부모로부터 전달받은 크기 제약 조건(Constraints)을 파악한 후, 화면에 표시되어야 할 항목들을 순서대로 측정하여 각 항목의 높이를 계산합니다.</span></p><p><span>배치: 측정된 높이를 기반으로 각 항목을 수직 방향으로 정렬하여 화면에 배치합니다. 이 과정은 화면에 실제로 표시될 수 있는 항목만을 대상으로 수행됩니다.</span></p><p><span>스크롤 처리: 사용자가 스크롤을 하면 스크롤된 거리(offset)만큼 전체 아이템의 위치를 이동합니다. 이때 Compose는 현재 가시 영역을 기준으로 새롭게 화면에 진입하는 항목을 컴포지션 하고, 화면에서 벗어난 항목은 컴포지션 트리에서 제거합니다.</span></p><h3><span><b>Column과의 차이</b></span></h3><p><span>세로 스크롤을 할 수 있는 또 다른 컴포저블로 Column이 있습니다. 두 컴포저블 모두 리스트 형태의 UI를 구성할 수 있지만 컴포지션 방식과 성능 측면에서 중요한 차이점이 존재합니다. 어떤 차이점이 있을까요? 먼저 Column은 자식 컴포저블을 모두 즉시 컴포지션 합니다. 즉, 리스트에 포함된 모든 항목이 화면 표시 여부와 관계없이 한꺼번에 렌더링 됩니다. 이로 인해 메모리 사용량이 증가하고 성능 저하가 발생할 수 있습니다. 하지만 LazyColumn은 앞서 살펴봤듯이 지연 렌더링을 통해 화면에 보이는 항목만 컴포지션 하고 보이지 않는 항목은 컴포지션 트리에서 제거합니다. 따라서 성능면에서 LazyColumn이 훨씬 유리합니다. 또한 스크롤 처리 방식에서도 차이가 있습니다. Column은 기본적으로 스크롤이 불가능하며 Modifier.verticalScroll()을 명시적으로 지정해야 스크롤이 활성화됩니다. 반면 LazyColumn은 자체적으로 스크롤 기능을 내장하고 있어 별도의 설정 없이도 스크롤 가능한 리스트를 구성할 수 있습니다.</span></p><div data-app="{&quot;type&quot;:&quot;gridGallery&quot;,&quot;caption&quot;:&quot;&quot;,&quot;displayOption&quot;:&quot;InnerCenter&quot;,&quot;images&quot;:[{&quot;url&quot;:&quot;http://t1.daumcdn.net/brunch/service/user/2Kn8/image/NsvGWRRmIPUKqwQbEAHtR9FoxfA.png&quot;,&quot;width&quot;:&quot;682&quot;,&quot;height&quot;:&quot;156&quot;,&quot;originalName&quot;:&quot;스크린샷 2025-09-08 050101.png&quot;}]}"><p><img alt="스크린샷 2025-09-08 050101.png" src="https://img1.daumcdn.net/thumb/R1280x0.fpng/?fname=http://t1.daumcdn.net/brunch/service/user/2Kn8/image/NsvGWRRmIPUKqwQbEAHtR9FoxfA.png"> <span></span></p></div> </div></div>

서준수

모바일 앱에서 스크롤이 가능한 리스트 형식의 UI는 매우 흔한 형태입니다. 화면이 작은 모바일 특성상 스크롤을 통해 다양한 정보를 표현하는 방식이 효율적입니다. 이러한 UI를 위해서 기존 안드로이드 View에서는 주로 RecyclerView를 주로 사용했습니다. Compose에서는 LazyColumn, LazyRow가 이를 대체할 수 있습니다. 여기서는 가

Compose LazyColumn - 하루 10분 Compose (10)

댓글