Video: Lynx 틱톡의 새로운 프레임워크를 써봤다...!
Channel: 노마드 코더 Nomad Coders
Duration: 5m 34s
Source: subtitle (auto, ko)
Transcript:
바이트댄스가 출시한 새로운 크로스 플랫폼 프레임워크인 Links를 사용해 봤습니다 . 한 번 코드를 작성하면 iOS, Android, 웹에서 모두 렌더링할 수 있다는 점에서 Flutter 및 React Native의 직접적인 경쟁자입니다. 꽤 흥미롭다고 해야겠네요 . 우리가 최근에야 알게 된 사실이지만 , Links는 바이트댄스 내부에서 이미 꽤 오랫동안 사용되어 왔습니다. 그래서 첫 공개 출시 시점에 이미 버전 3이 나온 것입니다. 링크 기능은 이미 실제 운영 환경에서 사용되고 있습니다. 이 기술은 틱톡의 검색 화면, 틱톡 스튜디오 앱, 틱톡 라이브, 그리고 틱톡 샵과 같은 더욱 복잡한 화면에 적용됩니다. 즉, 매우 중요한 화면에서 사용되고 있다는 뜻입니다. 바이트댄스에 수익을 가져다주는 화면들. Links 외에도 React Links, RS Speed, Brim JS라는 세 가지 프로젝트를 오픈소스로 공개했는데, 이에 대해서는 나중에 자세히 살펴보겠습니다. 작동 방식 면에서 Links는 Flutter보다는 React Native에 더 가깝습니다.

Flutter는 Unity와 같은 비디오 게임 엔진처럼 UI를 렌더링합니다 . 앱은 기본적으로 Flutter 엔진이 UI를 그리는 캔버스와 같습니다. 바로 이런 이유 때문에 Flutter에서는 모든 플랫폼에서 픽셀 단위로 완벽한 화면을 구현하고 온갖 화려한 효과와 애니메이션을 만들 수 있습니다. 하지만 바로 그 이유 때문에 진정한 네이티브 UI를 얻을 수 없고, Flutter의 iOS 위젯이 Temu처럼 보이며 실제 iOS 위젯과는 거리가 먼 것입니다 . 이 또한 엔진이 네이티브 UI 요소를 사용하지 않기 때문입니다. 그것은 모든 것을 스스로 그려야 합니다. 반면, React Native와 같은 링크는 네이티브 UI 요소로 연결되는 다리 역할을 합니다. Links 텍스트 컴포넌트를 사용하면 iOS에서는 UI 텍스트 뷰가, Android에서는 텍스트 뷰가, 웹에서는 X 텍스트 사용자 지정 HTML 요소가 렌더링됩니다. 조회수, 이미지 수 등도 마찬가지입니다. Links를 React Native와 차별화하는 것은 다른 어떤 프레임워크도 시도하지 않은 매우 흥미로운 아키텍처 설계 방식입니다.

Links에는 코드를 실행할 수 있는 두 가지 런타임이 있습니다 UI 작업 및 우선순위가 높은 이벤트를 처리하는 코드가 실행되는 메인 스레드 런타임이 있습니다. 그리고 사용자 코드가 실행되는 백그라운드 런타임 환경이 있습니다. 메인 스레드 런타임은 링크에 최적화된 C++ JavaScript 엔진인 Brim JS로 구동됩니다. 메인 스레드 런타임과 백그라운드 런타임의 분리는 Links를 매우 빠르게 만드는 두 가지 기능을 가능하게 합니다 . 첫 번째는 즉시 첫 프레임 렌더링(IFR)입니다. IFR 덕분에 앱 시작 시 흰색 화면이 나타나지 않습니다 이 영상에서 보시는 것처럼 첫 번째 프레임은 즉시 렌더링됩니다. 앱이 실행되고 시작 화면이 나타난 후 첫 번째 프레임이 즉시 렌더링됩니다 . 흰 화면이 없습니다. 이 두 개의 슬로우 모션 영상을 보면 차이점을 더 잘 알 수 있습니다. 여기에는 Expo React Native로 개발된 앱 하나 와 Links로 개발된 앱 하나, 이렇게 두 앱 모두 홈 화면에서 피보나치 수열을 계산하는 기능을 수행하고 있습니다.

이는 상당히 무거운 작업입니다. 보시다시피, 스플래시 화면 이후 Links 앱은 첫 번째 프레임을 즉시 렌더링하는 반면, Expo React Native 앱은 여전히 흰색 화면을 보여줍니다. 두 번째 기능 은 메인 스레드 스크립팅(MTS)입니다. MTS를 사용하면 애니메이션이나 제스처 처리와 같이 필요한 경우 코드를 메인 스레드에서 실행하도록 선택할 수 있습니다. 이 코드를 예로 들어 보겠습니다. 이는 스크롤 이벤트를 처리하는 핸들러로, 스크롤 위치에 따라 요소를 이동시킵니다 . 참고로, 이것은 CSS를 사용하여 구현한 것으로 , 링크 구성 요소의 스타일을 지정하는 데 사용하는 방식입니다. 이 코드를 기본값인 백그라운드 스레드에서 실행하면 애니메이션이 느려집니다. 여기서는 요소가 스크롤 위치를 따라잡는 데 시간이 좀 걸리는 것을 볼 수 있습니다. 애니메이션을 부드럽게 만들기 위해 코드를 메인 스레드로 옮길 수 있습니다 . 이를 위해 코드에 메인 스레드 지시문을 추가하기만 하면 됩니다. 이러한 변경 후 애니메이션이 부드러워지며, 메인 스레드에서 실행되는 코드와 백그라운드 스레드에서 실행되는 코드의 차이를 이 비디오에서 확인할 수 있습니다.

CSS 측면에서 Links는 웹과 매우 유사하게 style 속성을 직접 변경하거나 클래스 및 .css 파일을 사용하여 구성 요소의 스타일을 지정할 수 있도록 지원합니다. 보시다시피, Links React 패키지의 루트 컴포넌트를 가져오는 부분이 있습니다. 그 이유는 핵심 엔진인 Links가 React에 특화된 것이 아니기 때문입니다. 프레임워크에 구애받지 않습니다. React Links는 오픈소스로 공개된 React 기반 링크 프레임워크입니다. React Links는 React 코드를 가져와 Links 엔진을 호출하여 UI를 렌더링합니다. 즉, 누군가 Vue나 Svelte를 사용해서도 동일한 기능을 하는 프로젝트를 만들 수 있다는 뜻입니다. React Links를 사용하면 가져오기 방식이 달라집니다. div 대신 웹용 뷰를 사용하고, React Native에서 뷰를 가져오는 대신 view를 사용합니다. 또한, 행사마다 명칭이 다릅니다. Links의 빌드 도구는 RS Speedy라고 합니다. 이것은 Rust 웹 번들러인 RS Pack을 기반으로 합니다.

지금까지 들은 모든 내용을 듣고도 궁금증이 생겨 Links를 한번 사용해보고 싶다면 얼마든지 해보세요. 하지만 몇 가지 주의해야 할 점이 있습니다. 링크와 리액트 링크는 아직 매우, 매우, 매우, 매우, 매우, 매우, 매우, 매우, 매우 , 매우 미완성된 상태입니다. 현재 기본 제공되는 요소는 뷰, 텍스트, 이미지, 스크롤 뷰, 목록, 페이지 이렇게 6개뿐입니다. 입력, 버튼 또는 모델이 없습니다. React Navigation과 같은 내비게이션 라이브러리는 없습니다 . React Router만 지원되며, 카메라 접근, 위치 정보, 연락처 등을 위한 네이티브 모듈은 제공되지 않습니다 . 틱톡에서 이미 링크를 사용하고 있는 걸 보면, 내부적으로 자체 개발한 모듈이 많이 있을 거라고 확신해요 . 그러니 어쩌면 머지않아 오픈소스로 공개될지도 모릅니다. 전반적으로 Links는 매우 흥미로운 프로젝트라고 생각합니다. 코드를 작성하고 메인 스레드로 쉽게 전달할 수 있다는 점이 정말 마음에 들고, 이는 매우 흥미로운 아키텍처 설계라고 생각합니다.

그리고 링크와 리액트 링크를 분리한 점이 마음에 듭니다. 누군가 Vue Links, Svelte Links, Swift Links 같은 링크를 만들어낸다면 정말 멋질 것 같아요. 또한, 경쟁은 좋은 것입니다. 프레임워크들이 경쟁할 때, 개발자들이 이득을 본다. 시청해 주셔서 감사합니다 . 다음 영상에서 뵙겠습니다. 안녕. 시청해 주셔서 감사합니다. 안녕.