3.4 KiB
3.4 KiB
category, tags, title, description, last_updated
| category | tags | title | description | last_updated | |||
|---|---|---|---|---|---|---|---|
| Frontend |
|
Skia | Skia는 2D 그래픽 렌더링 라이브러리로, 크로스 플랫폼 프레임워크인 Flutter가 화면의 모든 픽셀을 직접 그리기 위해 채택한 핵심 엔진으로 잘 알려져 있습니다 [1-3]. | 2026-05-04 |
Skia
📌 Brief Summary
Skia는 2D 그래픽 렌더링 라이브러리로, 크로스 플랫폼 프레임워크인 Flutter가 화면의 모든 픽셀을 직접 그리기 위해 채택한 핵심 엔진으로 잘 알려져 있습니다 [1-3]. OS 플랫폼의 네이티브 UI 컴포넌트에 의존하지 않고 자체 캔버스에 UI를 렌더링하여 플랫폼 간 동일한 시각적 일관성을 제공합니다 [1, 4]. 최근에는 React Native 생태계에서도 복잡한 그래픽과 애니메이션 처리를 위해 통합되어 사용되고 있습니다 [5].
📖 Core Content
- Flutter의 핵심 렌더링 엔진: Flutter는 전통적으로 Skia 2D 그래픽 라이브러리와 통합되어 화면을 렌더링해왔습니다 [2, 3]. 이 접근 방식 덕분에 Flutter는 플랫폼(iOS, Android 등)에 종속되지 않고 픽셀 단위의 완벽한 제어가 가능하며, 복잡한 커스텀 그래픽과 애니메이션을 높은 성능으로 일관되게 표현할 수 있습니다 [1, 3, 6].
- React Native로의 확장 적용: React Native는 기본적으로 네이티브 UI 컴포넌트를 활용하지만,
react-native-skia와 같은 서드파티 라이브러리를 통해 Skia 엔진에 직접 접근할 수 있습니다 [5]. 이를 도입하면 React Native 환경에서도 고도의 맞춤형 렌더링 역량을 확보할 수 있어, 복잡한 그래픽과 애니메이션 구현 시 Flutter와의 커스터마이징 격차를 해소할 수 있습니다 [5, 7]. - Skia에서 Impeller로의 진화: Skia는 훌륭한 렌더링 도구였으나, 모바일 환경에서 애니메이션 실행 시 실시간으로 셰이더를 컴파일하면서 발생하는 끊김 현상(Shader compilation jank)을 유발하기도 했습니다 [8]. 이러한 한계를 극복하기 위해 Flutter는 Skia를 발전시켜 GPU 사용을 최적화하고 셰이더를 사전 컴파일하는 새로운 렌더링 엔진인 'Impeller'를 도입하여 대체해 나가고 있습니다 [7, 9, 10].
⚖️ Trade-offs & Caveats
- 네이티브 느낌(Native Feel)의 부재 가능성: Skia를 사용해 자체적으로 위젯을 그리는 방식은 UI의 완벽한 일관성을 보장하지만, 각 플랫폼(OS) 고유의 UI 컴포넌트 동작(예: 접근성 시맨틱, 텍스트 선택 동작, 특정 스크롤 물리 법칙 등)과는 미묘한 차이나 이질감을 발생시킬 수 있습니다 [11-13].
- 앱 크기 및 메모리 사용량 증가: Skia와 같은 독자적인 렌더링 엔진과 파이프라인을 애플리케이션 내부에 포함하여 배포해야 하므로, 네이티브 컴포넌트를 호출하는 방식에 비해 초기 앱 번들 크기가 커지고 메모리 오버헤드가 더 높게 발생합니다 [1, 14, 15].
- 런타임 성능 지연(Jank) 문제: Skia 렌더링 엔진 하에서는 복잡한 애니메이션이나 새로운 시각 효과를 처음 렌더링할 때 셰이더를 즉석에서 컴파일해야 하므로 프레임 드롭이나 눈에 띄는 끊김 현상(Jank)이 발생할 수 있는 부작용이 존재했습니다 [8, 16].
Last updated: 2026-05-03