드디어 Expo ZK55이 나왔고, 이와 함께 Expo Router의 새로운 버전이 출시되었어요. 이 새로운 버전은 사용해야 하거나 최소한 알고 있어야 할 다양한 네이티브 API를 사용할 수 있게 해줍니다. 짧은 영상이 될 테니 끝까지 시청해주세요. 그리고 콘텐츠가 마음에 드시면 좋아요와 구독 부탁드립니다.00:00

자, 시작하겠습니다. 이번 영상에서는 네이티브 탭을 포함한 여러 새로운 API들을 자세히 설명해 드릴 텐데요. 화면 상단, 측면, 심지어 하단에 아이템을 배치할 수 있는 새로운 툴바도 소개할 예정입니다.00:15

iOS 26에서 새롭게 도입된 하단 액세서리로, 아마도 애플 뮤직이나 일부 전환 효과에서 본 적이 있을 겁니다. 마지막에 폼 시트를 멋지게 만들 수 있도록 돕는 추가 기능도 하나 있습니다.00:27

드디어, 그리고 본격적으로 시작하기 전에, 고품질 React Native 앱을 개발하고 싶으시다면, App Store와 Play Store에 배포하고 최고의 실습을 통해 더 빠르게 반복하는 방법을 배우고 싶으시다면, 제 React Native 강좌와 프리미엄 자료들을 꼭 확인해 주세요.00:38

최근에 새로운 모듈을 추가했는데, 이 모듈에서는 사용자 정의 네이티브 모듈과 네이티브 뷰를 구축하는 방법을 알려드리며, 필요할 때 플랫폼별 기능을 활용하실 수 있도록 돕습니다.00:53

그리고 내보내기 라우터에 대해 더 깊이 알아보고 싶거나, 인증 흐름이나 딥 링크와 같이 실제 애플리케이션에서 필요한 기능들을 다루고 싶다면, 설명란에 프로모 코드를 포함한 링크를 남겨두겠습니다. 자, 바로 시작해 볼까요?01:03

네, 첫 번째 특징은 네이티브 탭입니다. 이제 안드로이드와 iOS 모두에서 시스템 탭 바를 사용할 수 있게 되었는데요. 이는 탭이 자동적으로 리퀴드 글래스와 같은 시스템 레벨의 동작에 반응하게 된다는 뜻입니다. 인키고에서 가져온 예시를 보여드리겠습니다.01:18

그런데, Inkigo는 프리미엄 자료이며, 전체 소스 코드는 codewithbetter.de에서 프로 멤버를 위한 것으로 제공됩니다.01:31

인키고는 '최소화 동작' 속성(prop)을 사용하여 사용자가 스크롤을 내릴 때 자동으로 탭 바를 최소화합니다. 그리고, 타투 시뮬레이션이 이 앱의 핵심 기능이기 때문에 카메라 탭에 대해 역할 검색을 사용합니다.01:37

이것은 탭이 다른 요소들과 시각적으로 분리되도록 하는 기본 시스템 동작 세트를 적용합니다.01:50

코드로 어떻게 보이는지 보여드리겠습니다. 여기 제 탭 레이아웃이 있는데, Expo Router의 새로운 버전과 네이티브 API가 가진 단순함이 정말 마음에 듭니다.01:56

보시는 것처럼 꽤 조립 가능합니다. 특별한 건 없고, 이 코드 조각을 강조하고 싶을 뿐입니다.02:06

탭에 역할 검색을 전달하고 있기 때문에, 수동으로 아이콘을 덮어쓰고 선택된 탭일 때 camera.fill로 설정합니다. 그렇지 않으면 확대경으로 덮어씌워지는데, selected 속성을 설정하면 그걸 수정할 수 있습니다.02:14

다음은 스택 툴바입니다. 이 새로운 구성 요소는 네이티브 프러미티브를 사용하여 버튼, 메뉴, 스페이서, 심지어 사용자 정의 뷰까지 배치할 수 있게 해줍니다. 이제 더 이상 트릭 없이 헤더 왼쪽, 헤더 오른쪽 메뉴를 쉽게 만들 수 있습니다.02:31

이곳의 주요 기능 중 하나는 배치 프로프(placement prop)인데, 이 기능을 통해 툴바 아이템들을 화면의 왼쪽, 오른쪽, 또는 아래쪽에 배치할 수 있습니다. 인키고(Inkigo)에서는 이 프로프를 여러 곳에서 활용하고 있으며, 애니메이션에서 보시는 것처럼요.02:45

화면 전환 시 부드러운 시스템 레벨 트랜지션이 나타납니다. 코드를 한번 살펴보겠습니다. 이것은 제 홈 화면이고, 주요 액션입니다.02:56

정말 깨끗하게 잘 보이네요. 배치가 오른쪽으로 설정되어 있고, 제 색상 변형은 노란색이 두드러져서 iOS 26에서 훌륭한 느낌을 줍니다.03:04

유리 효과를 적용할 수 있으며, 버튼 레이블 스타일까지 변경하여 툴바가 버튼을 감싸고 오른쪽으로 배치할 수 있습니다. 이것이 전부입니다.03:16

스택 툴바에 대해 이야기하면서, 그 위치를 강조하지 않을 수 없습니다. 이 위치는 여러 가지 UI 가능성을 열어주며, 숨겨진 속성(prop)과 함께 사용하면 아름다운 애니메이션 전환과 완벽한 리퀴드 글래스 지원을 얻을 수 있습니다.03:28

여기에도 완전히 인터랙티브한 요소들, 예를 들어 메뉴나 사용자 정의 뷰를 배치할 수 있습니다. 인키고에서는 문신 상세 정보 화면에서 추가 정보를 보여주기 위해 사용하고 있는데, 전환이 얼마나 부드러운지 확인해 보세요.03:42

정보 버튼을 누르면 이런 UI를 자바스크립트 기본 기능만으로 구현하는 것은 매우 어려웠습니다. 네이티브 API를 사용하면 시스템 애니메이션, 레이아웃 동작, 시각적 효과를 얻을 수 있기 때문입니다.03:54

무료로 제공되기 때문입니다. iOS 26에서 이것이 매우 중요한 이유가 바로 그것이죠.04:06

자, 이제 하단 액세서리에 대해 이야기해 보겠습니다. iOS 26에서 애플은 액세서리를 탭 바에 연결할 수 있는 새로운 API를 도입했습니다. 확장되면 액세서리는 탭 바 위에 위치합니다.04:12

탭 바가 최소화될 때, 액세서리가 함께 부드럽게 움직입니다.04:26

사용자는 탭을 터치하거나 화면 상단으로 스크롤하여 최소화된 상태에서 빠져나올 수 있습니다. 솔직히, 인키고에서는 아직 뚜렷한 활용 사례를 찾지 못했지만, 실시간 업데이트나 장시간 실행되는 프로세스에는 아주 적합하다고 생각합니다.04:30

기억해 주시면 좋겠습니다. 일반적으로 이 작업을 애플리케이션 내에서 실시간으로 진행되는 활동으로 생각하시는 것이 좋은 방법입니다.04:44

그 경우 정적인 컨트롤에는 이것을 사용하는 것을 추천해 드리지 않습니다. 보통 하단 스택 툴바가 더 좋은 선택이라고 생각합니다. 그리고 이것은 실제로 구현하기 매우 쉽습니다. 코드를 보여드리겠습니다. 여기 있습니다.04:49

탭 내부에 적용할 수 있으며, 간단히 네이티브 탭의 바텀 액세서리를 호출하여 뷰를 생성하고, 리액트 네이티브에서 인스턴스화하여 프레서블을 추가하는 등 원하시는 모든 기능을 구현할 수 있습니다.05:00

이걸 추가하는 건 정말 간단합니다.05:12

업 줌 전환을 보시면 제 얼굴에 미소가 번지는 것을 알 수 있을 거예요. 이 API는 제 앱의 완성도를 한 단계 끌어올려 주거든요. 아름다운 인터랙티브 애니메이션을 통해 앱의 흐름을 자연스럽게 연결해 주는 효과가 아주 훌륭합니다.05:19

그리고 잉키고의 경우, 앱이 문신 이미지 중심으로 만들어졌기 때문에 이것은 필수적인 기능이었습니다. 썸네일에서 스타일과 상세 화면으로 이동할 때, 딱딱한 화면 전환이 아닌 물리적으로 연결된 느낌을 받게 됩니다.05:33

iOS 18에서 줌 전환이 새롭게 등장했어요. 사용자가 전환을 잡아서 드래그하거나 심지어 애니메이션 중간에 멈출 수도 있죠. 그래서 자연스럽게 느껴지는 거예요. 그리고 코드는 생각보다 접근하기 쉬운 편이랍니다.05:45

제가 보여드릴게요. 아, 그리고 참고로, 이 중에서 더 자세히 알고 싶으시다면, 관련 블로그 게시물을 상세하게 작성했어요. 설명란에 링크를 남겨드릴 테니, 복사해서 붙여넣을 수 있는 코드 예제가 포함되어 있습니다.05:57

줌 전환 효과를 만들려면, 링크 안에서 Apple의 줌 기능을 호출하신 후, 그 안에 프레서블(pressable) 요소를 포함시키시면 됩니다.06:06

그리고 이건 애니메이션을 생성하는 기능일 뿐이고, 추가적으로 애플 줌 타겟이 필요하며, 제 경우에는 이미지 미리보기를 위한 화면이 설정되어 있습니다. 대략 이런 모습입니다. 정말 간단한 기능입니다.06:13

네, 이제 보너스 부분으로 넘어가 보겠습니다. 이 부분은 실험적인 내용이며, 새로운 API라기보다는, Expo Router 최신 버전에서 Flex 1이 제대로 작동하도록 수정하는 것에 가깝습니다.06:28

네이티브 바텀 시트를 말씀드리겠습니다. 리액트 네이티브로 개발하신 경험이 있으시다면, 바텀 시트가 얼마나 불편할 수 있는지 잘 아실 겁니다. 최근 리액트 네이티브 스크린 업데이트 덕분에 이제는 덴트(detents)를 포함한 완벽한 네이티브 바텀 시트를 사용할 수 있게 되었습니다. 하지만, 특히 콘텐츠를 하단에 고정하는 것과 같은 스타일링은 역사적으로 어려움이 있었습니다.06:39

전에 버그가 있었는데, 이제 수정되었습니다. 이제 일반 Flex 1을 사용하여 콘텐츠를 하단에 고정할 수 있으며, 실제로 작동합니다. Inkigo는 사용자가 확장할 때 나타나는 작은 이스터 에그 구현에 이것을 사용합니다.06:54

서명 양식입니다. 예를 들어, 이 화면은 41과 61번 항목에 대한 자세한 내용이 담긴 양식 화면을 사용합니다. 그리고 중요한 점은 간단합니다.07:06

네이티브 시트 내에서 하단 정렬된 액션을 원하신다면, 이제 안정적으로 구현 가능합니다. 더 이상 임시방편적인 방법이나 레이아웃 점프 현상 없이, 간단하게 플렉스로 처리할 수 있습니다.07:15

잉키고는 현재 실제 운영 중인 애플리케이션이며, 실제로 매달 200달러 이상의 꾸준한 수익을 창출하고 있습니다. 정말 흥미롭네요.07:23

지금 바로 다운로드하실 수 있습니다. 실제 애플리케이션에서 이러한 패턴이 어떤 느낌인지 경험해 보시고 싶으시면, 설명란에 링크를 남겨두겠습니다. 링크는 설명란에 있습니다. 그리고 다시 한번 말씀드리지만, 모든 코드와 설명을 한 곳에서 확인하고 싶으시다면, 아래 블로그 게시물 링크에서 훨씬 더 자세한 내용을 확인하실 수 있습니다.07:31

그리고 인키고 소스 코드를 전체적으로 사용하고 싶으시다면, 코드비베토 프로멤버들이 접근 권한을 얻고, 제 모든 강의, 개인 GitHub 조직, 그리고 React Native에 대해 이야기할 수 있는 개인 디스코드에도 참여하실 수 있습니다. 진정으로 네이티브한 느낌의 애플리케이션을 개발하는 것에 진지하시다면, 제 React Native 강의를 확인해 보세요.07:45

저의 뉴스레터에도 팁, 실험, 그리고 업데이트 소식을 공유하고 있어요. 관련 링크들은 설명란에 모두 담겨 있습니다. 혹시 가시기 전에 댓글로 어떤 네이티브 API를 가장 좋아하시는지 알려주시면 좋겠습니다.08:00

그리고 혹시 이번에는 안드로이드에 대한 심층적인 집중 분석을 원하시면 말씀해주세요. 관심 있으시면 기꺼이 해 드릴 수 있습니다. 좋아요와 구독 잊지 마시고 다음 영상에서 만나요.08:09

시원하게 지내세요.08:17