스케치 파일 용량 줄이기
Flatten Selection to Bitmap 좋다
안녕하세요 마우스 마우스.
최근 스케치 그룹 질문 중에 의미있는것이 있어 간단하게 정리해보았습니다.
스케치 파일 용량 줄이는 테크닉은 밋업을 통해 몇 번 소개해 드렸는데 아직도 모르시는 분들이 많은거 같아 써 봅니다.
먼저 Unslash 에서 샘플 이미지를 가져왔습니다.
이미지 파일은 834kb 국민은행입니다. 그리고 위 이미지를 스케치에 넣고 size.sketch 로 저장합니다.
그리고 용량을 확인해 보면 무려 12.3mb가 됩니다.
왜 갑자기 이렇게 커진지는 저는 모릅니다.ㅠ
뭐.. 12mb 크기의 파일 운용하기건 사실 큰 문제 없습니다. 단 이런게 누적되면 파일이 50mb 100mb가 된다는 거고 추후에 관리및 운영 시 좋은 상황은 아닌거 같습니다.
스케치는 하나의 파일에 프로젝트 관련 모든 화면을 디자인하게 나온건데 비트맵 이미지 때문에 쉽지 않아 보입니다. 수백메가 단위의 파일도 최근에 많이 보곤합니다.
-
그리고, 스케치 파일 안에서 이미지 크기를 줄인다해도 크기는 줄어들어도 이미지 용량자체는 줄어들지 않습니다. 그래서 물리적으로 파일 용량을 줄일려면 Flatten Selection to Bitmap 이란 기능을 써서 해결이 가능합니다. Flatten Selection to Bitmap은 스케치 캔버스내의 모든 요소를 비트맵으로 만들어주는 기능이지만 비트맵에도 적용가능합니다.
우선 그전에 스케치 설정에서 배수를 지정해야 하는데,
설정에서 하단을 보면 비트맵 배수를 설정할 수 있습니다.
@1x = 1배수로서 PC 버전에 적합
@2x = 2배수로서 모바일 혹은 레티나 디스플레이에 적합
*3~4배수디바이스도 최근에 많은데 이미지는 로딩 최적화를 위해 보통 2배수로 작업해도 됩니다.
최적화 이전 이미지를 확대해 보면
1px 그리드안에 무수히 많은 픽셀이 있는게 보입니다.
그 뜻은 실제 이미지 크기는 보존되고 있지만 export 하는 경우 저렇게 고해상도로 반영은 안된다는 뜻입니다.
*1px 는 디스플레이 최소 물리 표시 영역입니다. 그래서 실제로 최소 1px 단위로 표되기 때문에 소숫점으로 작업된 모든 그래픽은 1px로 단위로 출력됩니다.
그래서 이미지에 Flatten Selection to Bitmap를 @1x로 적용하면 이렇게 픽셀 그리드안에 딱 맞아 떨어지게 됩니다.
@2x로 적용하면 이렇게 픽셀 그리드안에 4(가로 세로 x2)개의 픽셀이 딱 맞아 떨어지게 됩니다.
그래서 최종적으로 @1x 기준으로 적용하고 저장하게 되면 위와 같이 12mb 에서 1.5mb로 용량을 줄일 수 있습니다.
보너스로 이미지 크롭도 Flatten Selection to Bitmap으로 가능한데, 이미지를 아드보드에 넣은 상태에서 적용하면 아트보드에 노출되는 만큼 이미지가 크롭됩니다.
-
읽어 주셔서 감사합니다.
