<div id="readability-page-1" class="page"><div id="ArticleView"> <p><span>Compose는 다양한 UI 컴포저블을 제공합니다. 그중에서 자주 사용되는 컴포저블은 Text, Button, Image입니다. 이를 기본 컴포저블이라고 부르도록 하겠습니다. 사실 기본 컴포넌트라고 부르고 싶지만 공식 문서에서 사용하는 표현을 차용하려고 합니다. 전반적으로 컴포넌트, 컴포저블, 컴포저블 함수의 구분에 대해 지나치게 집착하지는 않겠습니다. 실제로 대부분 특별하게 구분하지 않는 경우가 많고, 지금 당장 그게 중요한 것은 아니니까요. 그렇다고 해서 무분별하게 혼용하지도 않을 겁니다. 저만의 기준을 가지고 최대한 일관성 있도록 유지할 예정입니다.</span></p><h3><span><b>Text</b></span></h3><p><span>Text는 문자열을 화면에 표시하는 가장 기본적인 컴포저블입니다.</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/26BCs5c8xpOxB1LUbea9ACq-x4M.png&quot;,&quot;width&quot;:&quot;300&quot;,&quot;height&quot;:&quot;45&quot;,&quot;originalName&quot;:&quot;스크린샷 2025-08-28 024321.png&quot;}]}"><p><img alt="스크린샷 2025-08-28 024321.png" src="https://img1.daumcdn.net/thumb/R1280x0.fpng/?fname=http://t1.daumcdn.net/brunch/service/user/2Kn8/image/26BCs5c8xpOxB1LUbea9ACq-x4M.png"> <span></span></p></div><p><span>Text() 함수 파라미터에 문자열을 지정하면 해당 문자열이 화면에 표시됩니다. 위 예제처럼 이름 있는 인자를 활용해도 되고 그냥 문자열을 넘겨주어도 됩니다. 하지만 가급적 이름을 직접 지정해 주는 것이 좋겠죠?</span></p><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/vMXY5fLLPBIkJFHmJ3-Ri4i26ug.png&quot;,&quot;width&quot;:&quot;400&quot;,&quot;height&quot;:&quot;60&quot;,&quot;originalName&quot;:&quot;&quot;}]}"><p><img alt="" src="https://img1.daumcdn.net/thumb/R1280x0.fpng/?fname=http://t1.daumcdn.net/brunch/service/user/2Kn8/image/vMXY5fLLPBIkJFHmJ3-Ri4i26ug.png"> <span></span></p></div><p><span>Text()의 파라미터 중에 style이라는 파라미터가 있습니다. 해당 파라미터의 타입은 TextStyle입니다. 이 파라미터를 사용하면 앞서 사용했던 color, fontSize, fontWeight 같은 스타일 속성들을 하나의 묶음으로 만들어 사용할 수 있습니다.</span></p><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/7W2dKPsAkIjd3jc68frd4u6XbPE.png&quot;,&quot;width&quot;:&quot;400&quot;,&quot;height&quot;:&quot;60&quot;,&quot;originalName&quot;:&quot;&quot;}]}"><p><img alt="" src="https://img1.daumcdn.net/thumb/R1280x0.fpng/?fname=http://t1.daumcdn.net/brunch/service/user/2Kn8/image/7W2dKPsAkIjd3jc68frd4u6XbPE.png"> <span></span></p></div><p><span>사실 </span><span><b>이렇게 재사용할 것이라면 컴포저블 함수를 재사용하는 것이 낫죠</b></span><span>. 그냥 이렇게도 사용할 수 있다 정도로 보면 됩니다. 그러면 TextStyle과 겹치는 다른 스타일 속성 color, fontSize, fontWeight이 함께 존재하면 어떻게 될까요?</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/yPE1HsnZfH7vkN9Mm_WyN7QURYI.png&quot;,&quot;width&quot;:&quot;400&quot;,&quot;height&quot;:&quot;60&quot;,&quot;originalName&quot;:&quot;&quot;}]}"><p><img alt="" src="https://img1.daumcdn.net/thumb/R1280x0.fpng/?fname=http://t1.daumcdn.net/brunch/service/user/2Kn8/image/yPE1HsnZfH7vkN9Mm_WyN7QURYI.png"> <span></span></p></div><p><span>TextStyle에는 빨간색으로 지정을 했고, color에는 파란색으로 지정을 했습니다. 결과는 파란색이 적용되었네요. 왜 그럴까요? style 파라미터를 '기본 스타일 템플릿'이라고 생각하고, color나 fontSize 같은 개별 파라미터들을 '개별적으로 덮어쓰는 설정'이라고 생각하면 됩니다. </span><span><b>개별 파라미터가 style 파라미터보다 항상 우선순위가 높은 것</b></span><span>입니다.</span></p><h3><span><b>Button</b></span></h3><p><span>Button은 사용자가 클릭했을 때 특정 동작을 실행하게 만드는 컴포저블입니다.</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/wY8IGin3k7Clb6C4IgXCnanUFQg.png&quot;,&quot;width&quot;:&quot;300&quot;,&quot;height&quot;:&quot;168&quot;,&quot;originalName&quot;:&quot;스크린샷 2025-08-28 024227.png&quot;}]}"><p><img alt="스크린샷 2025-08-28 024227.png" src="https://img1.daumcdn.net/thumb/R1280x0.fpng/?fname=http://t1.daumcdn.net/brunch/service/user/2Kn8/image/wY8IGin3k7Clb6C4IgXCnanUFQg.png"> <span></span></p></div><p><span>Button()은 크게 무엇을 할 것인지 정하는 부분과 어떻게 보일 것인지 정하는 부분으로 나뉩니다. 무엇을 할 것인지는 onClick라는 함수 타입 파라미터를 통해 정의하면 됩니다. 어떻게 보일 것인지는 content 파라미터에 정의하면 되는데, 후행 람다(Trailing Lambda)이기 때문에 Button 함수의 바디에 정의할 수 있습니다. 지금은 Text()를 사용하면 Login이라는 글자가 보이도록 정의되어 있습니다. 그렇기 때문에 글자색을 바꾸고 싶으면 Text()의 color 파라미터에 원하는 색상을 지정해 주면 됩니다.</span></p><p><span>그렇다면 Button()의 색상을 바꾸려면 어떻게 해야 할까요? Button()의 파라미터에도 color가 있습니다. 하지만 Text()의 color 파라미터와는 타입이 다릅니다. Text()의 color는 Color 타입입니다. Button()의 color 파라미터의 타입은 ButtonColors입니다. 따라서 다음과 같이 지정할 수 있습니다.</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/ypsaOHdhJPIVrIDdrTalVgBVf_0.png&quot;,&quot;width&quot;:&quot;300&quot;,&quot;height&quot;:&quot;167&quot;,&quot;originalName&quot;:&quot;스크린샷 2025-08-28 030214.png&quot;}]}"><p><img alt="스크린샷 2025-08-28 030214.png" src="https://img1.daumcdn.net/thumb/R1280x0.fpng/?fname=http://t1.daumcdn.net/brunch/service/user/2Kn8/image/ypsaOHdhJPIVrIDdrTalVgBVf_0.png"> <span></span></p></div><p><span>그러면 왜 Color 타입을 사용하지 않을까요? Button() 컴포저블을 설계하기 나름이겠지만 현재 구조에서는 버튼의 활성화, 비활성화 상태처럼 여러 가지 상태에 따른 처리를 ButtonColors 타입을 통해 편리하게 할 수 있도록 구성되어 있습니다. 다음과 같이 disabledContainerColor를 통해서 비활성화 상태일 때의 배경색을 지정할 수 있습니다.</span></p><p><span>그런데 말입니다. ButtonColors의 파라미터 중에 contentColor라는 것이 있습니다. 이름을 보니 content의 색상을 지정하는 것 같습니다. 그런데 지금 content는 Text()이고 글자색이 별도로 지정된 것은 없어서 테마에 따라 흰색으로 나오고 있습니다. 그러면 이 상황에서 contentColor와 color를 모두 지정하면 어떻게 될까요? 이것은 앞서 본 Text()의 TextStyle과 비슷합니다. contentColor는 content 영역 전체에 적용하길 기대하는 색을 지정하는 것이고 별도로 필요한 색상을 지정하려면 개별 컴포저블에서 color를 다시 지정해 줄 수 있는 것이죠. 따라서 다음과 같이 Text()에 color의 우선순위가 높게 적용되는 것을 볼 수 있습니다.</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/uGtqhdhlxYSjLf8Hm_d1QoewQlo.png&quot;,&quot;width&quot;:&quot;300&quot;,&quot;height&quot;:&quot;169&quot;,&quot;originalName&quot;:&quot;스크린샷 2025-08-28 115353.png&quot;}]}"><p><img alt="스크린샷 2025-08-28 115353.png" src="https://img1.daumcdn.net/thumb/R1280x0.fpng/?fname=http://t1.daumcdn.net/brunch/service/user/2Kn8/image/uGtqhdhlxYSjLf8Hm_d1QoewQlo.png"> <span></span></p></div><h3><span><b>Image</b></span></h3><p><span>Image는 이미지 리소스를 화면에 표시하는 역할을 하는 컴포저블입니다.</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/RUwhwh6dr8CwpTKhvROBkxEoOwI.png&quot;,&quot;width&quot;:&quot;298&quot;,&quot;height&quot;:&quot;298&quot;,&quot;originalName&quot;:&quot;스크린샷 2025-08-29 025716.png&quot;}]}"><p><img alt="스크린샷 2025-08-29 025716.png" src="https://img1.daumcdn.net/thumb/R1280x0.fpng/?fname=http://t1.daumcdn.net/brunch/service/user/2Kn8/image/RUwhwh6dr8CwpTKhvROBkxEoOwI.png"> <span></span></p></div><p><span>가장 기본적인 형태는 위와 같습니다. painter 파라미터에는 화면에 표시할 이미지를 지정하면 됩니다. 일반적으로는 painterResource()를 사용하여 앱 내부의 Drawable 리소스를 불러오는데, 이 함수는 Painter 타입의 객체를 반환합니다. 따라서 사용하고자 하는 이미지 파일을 drawable 폴더에 준비해야 합니다. 이 외에도 비트맵 이미지를 그리는 BitmapPainter, 벡터 이미지를 그리는 VectorPainter와 같은 Painter 타입도 있습니다. contentDescription 파라미터는 이미지에 대해 설명하는 글입니다. 시각 장애가 있는 사용자가 TalkBack과 같은 스크린 리더를 사용할 때 화면의 이미지를 소리로 읽어주는 역할을 합니다. 접근성을 위해 중요한 요소입니다.</span></p><p><span>이미지 리소스는 앱 내부에 포함된 정적 이미지만 있는 것이 아닙니다. URL을 통해 외부 서버에서 가져오는 네트워크 이미지, 사용자가 촬영한 갤러리나 카메라 앱에서 가져오는 이미지 등도 사용할 수 있습니다.</span></p> </div></div>

서준수

Compose는 다양한 UI 컴포저블을 제공합니다. 그중에서 자주 사용되는 컴포저블은 Text, Button, Image입니다. 이를 기본 컴포저블이라고 부르도록 하겠습니다. 사실 기본 컴포넌트라고 부르고 싶지만 공식 문서에서 사용하는 표현을 차용하려고 합니다. 전반적으로 컴포넌트, 컴포저블, 컴포저블 함수의 구분에 대해 지나치게 집착하지는 않겠습니다. 실

Compose 기본 UI 컴포저블

댓글