# Skia 엔진, 브라우저와 앱을 그리는 2D 그래픽 라이브러리

- 게시: 2026.07.10
- 원문(HTML): https://trendbrief.news/articles/skia-%EC%97%94%EC%A7%84-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%99%80-%EC%95%B1%EC%9D%84-%EA%B7%B8%EB%A6%AC%EB%8A%94-2d-%EA%B7%B8%EB%9E%98%ED%94%BD-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC.html
- 발행: [트렌드브리프](https://trendbrief.news/)

> Skia는 구글이 주도하는 오픈소스 2D 그래픽 엔진으로, 크롬과 안드로이드, 플러터 같은 소프트웨어가 텍스트와 도형을 화면에 그릴 때 쓰인다. CPU·GPU 백엔드와 핵심 API 개념, 실무 성능에 미치는 영향을 정리했다.

## Skia 엔진은 정확히 무엇을 하나

Skia는 화면에 픽셀을 직접 칠하는 저수준 2D 렌더링 엔진이다. 버튼의 사각형, 아이콘의 곡선, 문단의 글자 하나까지 결국 누군가는 픽셀 좌표로 바꿔 화면 버퍼에 써야 하는데, 그 궂은일을 대신 맡는 부품이라고 보면 된다. 구글이 주도해 개발하고 C++로 작성된 오픈소스 라이브러리로 알려져 있다.

Skia가 맡는 그리기 작업은 대략 이렇게 나뉜다.

- 선과 곡선, 다각형 같은 벡터 도형과 복잡한 경로(path)
- 글꼴을 실제 글자 모양으로 바꾸는 텍스트 렌더링
- 이미지 디코딩과 합성, 크기 조정
- 그라디언트, 그림자, 블러 같은 효과와 필터
- 투명도 합성과 클리핑(잘라내기)

핵심은 이 모든 작업을 플랫폼마다 제각각인 그래픽 API 위에서 똑같이 돌아가도록 감싼다는 점이다. 개발자는 ‘사각형을 그려라’라고만 말하고, 그것을 어느 운영체제에서 어떤 저수준 API로 그릴지는 Skia가 안에서 알아서 처리한다. 덕분에 같은 렌더링 코드를 여러 환경에 재사용할 수 있다.

## 어떤 제품이 Skia를 쓰나

가장 널리 알려진 사용처는 웹 브라우저다. 크로미엄 기반 브라우저가 웹 페이지의 도형과 텍스트를 그릴 때 Skia를 쓰는 것으로 알려져 있고, 안드로이드의 그래픽 스택에서도 오래 쓰여 왔다. 즉 스마트폰 화면 상당 부분이 이 엔진을 거쳐 그려진다고 봐도 큰 무리가 없다.

앱 프레임워크 쪽에서도 쓰임새가 넓다.

- 플러터가 오랫동안 렌더링 백엔드로 Skia를 사용해 온 것으로 알려져 있다.
- 리액트 네이티브에서 Skia를 직접 다룰 수 있게 해주는 바인딩 라이브러리도 공개되어 있어, 커스텀 그래픽이나 애니메이션을 그릴 때 활용된다.
- 정밀한 벡터 렌더링이 필요한 그래픽 편집기나 데스크톱 앱에서 채택되는 경우도 있다.

정리하면 브라우저와 모바일 운영체제, 크로스 플랫폼 앱 프레임워크가 공통으로 기대는 그래픽 토대에 가깝다. 주니어라면 ‘내가 쓰는 UI 프레임워크 밑에 이런 공용 엔진이 깔려 있을 수 있다’ 정도만 감을 잡아도 충분하다.

## CPU와 GPU 백엔드는 어떻게 나뉘나

Skia는 같은 그리기 코드를 여러 백엔드로 내보낼 수 있다. 크게는 CPU가 한 픽셀씩 계산해 채우는 소프트웨어 래스터 방식과, 그래픽 카드에 일을 넘기는 GPU 방식으로 갈린다.

CPU 방식은 GPU를 쓸 수 없거나, 화면 밖 이미지를 미리 만들어 두는 것처럼 결과가 예측 가능하고 이식성이 좋아야 하는 상황에 어울린다. 반대로 화면을 초당 수십 번 다시 그리는 스크롤이나 애니메이션에서는 GPU 방식이 훨씬 유리하다. Skia의 GPU 경로는 내부적으로 OpenGL, Vulkan, Metal 같은 플랫폼 API 위에서 동작하는 것으로 알려져 있다.

GPU 백엔드는 세대에 따라 이름이 다르다. 오래 쓰인 백엔드와, 최신 그래픽 API에 맞춰 새로 설계된 백엔드로 나뉜 것으로 알려져 있다. 실무에서 이 이름을 외울 필요는 없지만, 같은 Skia라도 어떤 백엔드로 도느냐에 따라 성능과 버그 양상이 달라질 수 있다는 점은 기억해 둘 만하다. 특정 기기에서만 재현되는 렌더링 문제를 만났을 때, 백엔드 차이가 원인 후보에 오르기 때문이다.

## 핵심 API 개념 몇 가지

Skia를 직접 다루면 몇 가지 객체를 반복해서 만나게 된다. 이름은 언어 바인딩마다 조금씩 다르지만 개념은 비슷하다.

- 캔버스(Canvas): 실제로 그리기 명령을 받는 도화지다. 사각형과 경로, 텍스트를 그리라는 호출이 여기로 모인다.
- 페인트(Paint): 색과 선 두께, 안티앨리어싱, 필터처럼 ‘어떻게 그릴지’를 담는 설정 묶음이다.
- 패스(Path): 직선과 곡선을 이어 만든 도형의 윤곽이다. 아이콘이나 차트의 복잡한 모양을 표현할 때 쓴다.
- 서피스(Surface): 그린 결과가 실제로 저장되는 대상이다. 화면일 수도 있고, 메모리 속 오프스크린 버퍼일 수도 있다.

흐름은 대체로 ‘서피스에서 캔버스를 얻고, 페인트 설정을 준비한 다음, 캔버스에 도형과 텍스트를 그린다’로 이어진다. 이 구조를 알아두면 다른 그래픽 라이브러리를 볼 때도 개념이 쉽게 옮겨 붙는다. 이름만 바뀔 뿐 도화지·붓·모양·저장 대상이라는 뼈대는 비슷하기 때문이다.

## 실무에서는 언제 신경 쓰게 되나

대부분의 앱 개발자는 Skia를 직접 호출하지 않는다. UI 프레임워크가 알아서 감싸주기 때문이다. 그래서 이 엔진의 존재감은 보통 성능 문제나 렌더링 버그를 파고들 때 드러난다.

예를 들어 리스트를 빠르게 스크롤할 때 끊김이 생긴다면, 매 프레임 다시 그리는 비용이 큰 요소가 있는지 의심해 볼 수 있다. 그림자나 블러, 반투명 겹침은 보기엔 단순해도 렌더링 비용이 큰 편이라 남발하면 저사양 기기에서 프레임이 떨어지곤 한다. 화면 밖 버퍼에 미리 그려 재사용하는 캐싱이 왜 성능에 도움이 되는지도 이 그리기 파이프라인을 알면 자연스럽게 납득이 된다.

주니어라면 지금 당장 Skia의 함수 이름을 외울 필요는 없다. 대신 내 UI가 결국 저수준 그래픽 엔진을 거쳐 픽셀이 된다는 큰 그림을 갖고 있으면, 성능 튜닝이나 렌더링 이슈를 만났을 때 어디부터 들여다봐야 할지 감이 훨씬 빨리 잡힌다. 도구 이름보다 그 아래에서 벌어지는 일을 이해하는 편이 오래 남는 자산이 된다.

## 관련 글

- [Microsoft Clarity로 히트맵과 세션 녹화 분석 시작하기](https://trendbrief.news/articles/microsoft-clarity%EB%A1%9C-%ED%9E%88%ED%8A%B8%EB%A7%B5%EA%B3%BC-%EC%84%B8%EC%85%98-%EB%85%B9%ED%99%94-%EB%B6%84%EC%84%9D-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0.md)
- [SE-0532로 배우는 스위프트 에볼루션 제안 읽기](https://trendbrief.news/articles/se-0532%EB%A1%9C-%EB%B0%B0%EC%9A%B0%EB%8A%94-%EC%8A%A4%EC%9C%84%ED%94%84%ED%8A%B8-%EC%97%90%EB%B3%BC%EB%A3%A8%EC%85%98-%EC%A0%9C%EC%95%88-%EC%9D%BD%EA%B8%B0.md)
- [Metal 프레임워크로 시작하는 GPU 프로그래밍](https://trendbrief.news/articles/metal-%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC%EB%A1%9C-%EC%8B%9C%EC%9E%91%ED%95%98%EB%8A%94-gpu-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D.md)
- [웹마스터 도구로 사이트 색인과 크롤링 점검하기](https://trendbrief.news/articles/%EC%9B%B9%EB%A7%88%EC%8A%A4%ED%84%B0-%EB%8F%84%EA%B5%AC%EB%A1%9C-%EC%82%AC%EC%9D%B4%ED%8A%B8-%EC%83%89%EC%9D%B8%EA%B3%BC-%ED%81%AC%EB%A1%A4%EB%A7%81-%EC%A0%90%EA%B2%80%ED%95%98%EA%B8%B0.md)
- [ROAS 측정, 개발자가 짚어야 할 데이터 흐름](https://trendbrief.news/articles/roas-%EC%B8%A1%EC%A0%95-%EA%B0%9C%EB%B0%9C%EC%9E%90%EA%B0%80-%EC%A7%9A%EC%96%B4%EC%95%BC-%ED%95%A0-%EB%8D%B0%EC%9D%B4%ED%84%B0-%ED%9D%90%EB%A6%84.md)