Android (155) 썸네일형 리스트형 [Compose] 스피닝 휠에 모션 블러를 적용해보자 - Ghost Frames, BlurMaskFilter, RenderEffect 비교 필자가 회사에서 업무를 진행하다 보면, 룰렛이나 럭키 드로우 같은 회전 UI를 만들어야 하는 경우가 가끔 있다. 단순히 빙글빙글 돌기만 하면 좀 밋밋한데, 빠르게 회전할 때 살짝 흐릿하게 처리되는 모션 블러가 더해지면 한층 더 그럴듯한 느낌이 난다는 것을 게임이나 시뮬레이션 앱을 보면서 느낀 적이 있다.막상 Compose에서 모션 블러를 어떻게 구현해야 하는지는 의외로 잘 정리된 자료를 찾기가 어려웠다. 최근 안드로이드 관련 기술 블로그를 확인하다가 ProAndroidDev의 "Motion Blur for a Spinning Wheel in Jetpack Compose" 글을 보게 되었고, 세 가지 다른 접근 방식을 비교하는 형태로 정리되어 있어서 매우 인상 깊었다.이번 글에서는 Jetpack Compo.. [Compose] iOS의 Large Content Viewer를 안드로이드에 - 접근성을 고려한 아이콘 프리뷰 구현 필자가 회사에서 업무를 진행하다 보면, 하단 네비게이션이나 툴바의 작은 아이콘들이 디자인적으로 깔끔하긴 한데 시력이 약한 사용자에게는 잘 안 보일 수 있겠다는 생각이 들 때가 있다. 특히 아이콘은 시스템 폰트 크기 설정과 무관하게 그려지기 때문에, Dynamic Type만으로는 보완이 잘 안 되는 부분이다.iOS에서는 이런 문제를 위해 Large Content Viewer라는 기능을 제공한다. 작은 아이콘이나 버튼을 길게 누르면 확대된 프리뷰가 화면에 표시되어, 어떤 아이콘인지 확인할 수 있도록 도와준다.최근 안드로이드 관련 기술 블로그를 확인하다가 eevis.codes의 "Adding navigation support to Large Content Viewer with Compose" 글을 보게 되었고.. [Compose] 스티커 캔버스를 만들어보자 - 복합 제스처, Spring 물리, 필오프(Peel-Off) 애니메이션 필자가 회사에서 업무를 진행하다 보면, 포토 에디터나 화이트보드 같은 화면에서 사용자가 직접 요소를 자유롭게 배치하고 크기·각도를 조절할 수 있는 UI가 필요한 경우가 종종 있다. 카카오톡 사진 편집기의 스티커 기능이나 인스타그램 스토리의 텍스트 배치를 떠올리면 익숙한 형태이다.막상 직접 구현해 보려고 하면 드래그·핀치·회전이 동시에 일어나는 복합 제스처를 다뤄야 하고, 거기에 자연스러운 물리 애니메이션까지 얹어야 해서 진입 장벽이 꽤 높게 느껴진다.최근 안드로이드 관련 기술 블로그를 확인하다가 Adit Lal의 "Building StickerExplode Part 1" 글을 보게 되었고, 거기서 다루는 패턴을 정리해 두면 실무에서 응용하기 좋겠다는 생각이 들었다.이번 글에서는 Jetpack Compos.. [Compose] Canvas로 원형 다이얼(Dial) 컴포넌트를 직접 구현해보자 필자가 회사에서 업무를 진행하다 보면, 가끔 일반적인 슬라이더(Slider) 대신 원형 다이얼 형태의 컨트롤이 필요한 경우가 생긴다. 시계 타이머나 온도 조절기, 음량 노브 같은 UI가 대표적인 예시이다.최근 안드로이드 관련 기술 블로그를 확인하다가 Sina Samaki의 "How to create dials in Jetpack Compose" 라는 글을 보게 되었다. 원글에서는 ChromaDial 라이브러리를 소개하고 있었는데, 라이브러리를 추가하지 않고도 Canvas 만으로 충분히 구현이 가능해 보여서 직접 한 번 만들어 보고자 한다.이번 글에서는 Jetpack Compose의 Canvas를 활용해 기본 다이얼부터 범위 제한·스냅·멀티턴·그라데이션·바퀴별 오버레이까지 6가지 형태의 다이얼을 직접 구현.. [Compose] Shared Element Transitions로 화면 간 요소를 부드럽게 전환해보자 필자가 회사에서 업무를 진행하다 보면, 디자이너로부터 "리스트 아이템을 클릭하면 그 아이템이 그대로 상세 화면으로 확장되는 애니메이션을 넣어주세요" 같은 요청을 받게 된다. iOS에서는 Hero Animation으로 비교적 익숙하게 만들 수 있는 효과인데, 안드로이드에서는 예전 View 시스템 시절에 Shared Element Transition을 구현하느라 한참 헤맸던 기억이 있다.최근 안드로이드 관련 기술 블로그를 확인하다가 Compose의 Shared Element Transitions 가이드를 보게 되었고, Compose에서는 SharedTransitionLayout 한 줄로 매우 깔끔하게 처리된다는 것을 알게 되었다.이번 글에서는 Jetpack Compose의 SharedTransitionLay.. [Compose] Material 3의 SwipeToDismissBox를 구현해보자 필자가 회사에서 업무를 진행하다가, 메일 앱처럼 리스트 아이템을 옆으로 스와이프해서 삭제·즐겨찾기 같은 동작을 트리거하는 UI가 필요한 일이 생겼다. 예전에 Material 2의 SwipeToDismiss를 써본 적이 있어서 그대로 가져다 쓰려 했는데, 막상 코드를 작성해 보니 FractionalThreshold가 Deprecated 되어 있었고 Material 3에는 새로운 API가 따로 존재하고 있었다.최근 안드로이드 관련 기술 블로그를 확인하다가, Material 3의 SwipeToDismissBox 가이드 글을 보게 되어 이번 기회에 한 번 정리해보고자 한다.이번 글에서는 Material 3의 SwipeToDismissBox를 사용해 단방향·양방향·조건부 스와이프와 M2 스타일의 복잡한 배경 애니.. [Compose] TextMeasurer와 Canvas로 커스텀 텍스트 효과를 만들어보자 - Faded, Warped, Typewriter 필자가 회사에서 업무를 진행하다 보면, 가끔 디자이너로부터 "이 텍스트가 물결처럼 움직였으면 좋겠어요" 또는 "타자기처럼 한 글자씩 타이핑되는 효과를 넣어주세요" 같은 요청을 받게 된다. 일반 Text 컴포넌트로는 절대 만들 수 없는 효과들이고, 이런 요청을 받을 때마다 어떻게 해야 할지 고민이 깊어지는 것 같다.Jetpack Compose는 기본 Text 컴포넌트 외에도 저수준 텍스트 API를 제공하고 있는데, 최근 기술 블로그를 확인하다가 Segun Famisa의 글에서 TextMeasurer와 Canvas를 조합해 커스텀 텍스트 효과를 구현하는 방법을 알게 되었다.이번 글에서는 TextMeasurer와 Canvas를 활용해 페이드, 웨이브, 타이핑 등의 텍스트 효과를 직접 구현해보고자 한다.핵심 A.. [Compose] TabRow와 ScrollableTabRow 사이에서 고민될 때, SubcomposeLayout으로 반응형 탭을 만들어보자 필자가 회사에서 업무를 진행하다 보면, 화면 상단에 탭을 배치하는 일이 자주 있다. Jetpack Compose에서는 보통 TabRow나 ScrollableTabRow 둘 중 하나를 선택해서 사용하게 되는데, 어느 한쪽으로 정해버리면 항상 무언가가 아쉬웠던 것 같다.짧은 레이블에는 TabRow가 좋고, 긴 레이블에는 ScrollableTabRow가 좋은데, 다국어 지원이나 동적으로 받아오는 카테고리 이름의 경우에는 어떤 것을 사용해야 할지 런타임에서나 알 수 있는 경우가 있다.최근 Jetpack Compose 관련 블로그를 보다가, Joe Birch의 글에서 SubcomposeLayout을 활용한 반응형 TabRow 구현 방식을 알게 되었다. 이번 글에서는 SubcomposeLayout을 사용해 콘텐츠 .. 이전 1 2 3 4 ··· 20 다음