[Sketch] 디지털 디자인 툴 iOS App에 들어가는 사진 작업하기

iOS 어플리케이션 작업을 하면서 UI작업이 생각보다 많다는 것을 알게 되었습니다.

'iOS Image SIze and Resolution Guide'

위 'iOS Image SIze and Resolution Guide'에 따르면, iPhone X, 8 Plus, 7 Plus, 6s Plus는 3배율 이미지를 사용하고, 이외 디바이스는 모두 2배율 이미지를 사용하고 있습니다.

만약 40 x 40 px 이미지가 필요할 경우 40x40(@2x), 80x80(@3x)두가지 이미지를 준비해 어플리케이션을 작성하면 픽셀 수는 차이가 나지만 디바이스에서 볼 때는 같은 크기의 이미지를 확인할 수 있게됩니다.

저같은 경우 포토샵으로 작업을 하다보니 매번 제일 큰 이미지를 만들어서 저장하고, 배율에 맞춰 줄여가며 작업을 진행하다보니 시간이 상당히 오래 걸렸습니다.

걸리는 시간을 단축하기 위해서 프로그램을 구글에서 찾아보기 시작했습니다.

상당히 유명한 디지털 디자인 툴을 하나 찾아서 직접 사용해보았고, 이미지 작업을 어떻게 하는지 소개해드리려고 합니다.

'Sketch' 라는 프로그램입니다. Sketch는 벡터기반의 이미지도 수정을 할 수 있기때문에 일러스트로 먼저 작업을 하고 Sketch로 이동시켜서 작업을 하면 편하다고 하네요.

저는 30일 체험판으로 다운을 받아 진행하였습니다.

먼저, Sketch를 실행하고 작업하려는 이미지를 불러줍니다.

저는 카카오톡 아이콘을 공유 버튼으로 만들기 위해서 불러왔습니다.

그리고 아이콘을 클릭해줍니다.

저는 80x80 픽셀의 이미지가 필요하기 때문에 가로, 세로 크기를 모두 80으로 맞추었습니다.

이제 이미지를 저장해보겠습니다. 우측 하단에 'Make Exportable'을 선택합니다.

기본으로 1배율 설정이 되어있습니다. 빨간 박스 우측 상단에 '+'버튼을 선택합니다.

1배율을 없애고, 2배율 3배율을 추가하였습니다. 자동으로 접미사를 배율에 맞게 자동으로 넣어주기때문에 특별한 경우를 제외하면 수정할 필요는 없을 것입니다.

저장되는 형태는 현재 파일명, 예를들어 'KakaoIcon'이었다면 'KakaoIcon@2x', 'KakaoIcon@3x'두가지 이미지가 저장됩니다.

이제 저장을 진행해볼까요? 하단에 'Export 파일명'을 선택해주세요.

그리고 저장하려는 경로를 설정하고 'Export'를 선택하면 저장이 완료됩니다.

위에서 말씀드린대로 파일이 제대로 저장되었는지 확인 해보겠습니다.

@2x, @3x 접미사가 붙은 이미지가 저장된 것을 확인할 수 있습니다. 80x80의 3배 크기인 240x240 이미지가 저장되었습니다.

개인적으로 프로젝트를 진행하다보니 디자이너에게 이것저것 요청하기가 쉽지 않아서 직접 작업을 진행할 수 있는 프로그램을 찾았는데 아주 딱 맞는 프로그램을 찾은 것 같아 기쁩니다.

포토샵으로 작업하려면 크기변경 - 저장 - 크기변경 - 저장과 같은 여러 동작을 해야하지만, 'Sketch'의 경우에는 이 작업을 한번에 설정하고 이미지를 저장할 수 있는 최고의 프로그램이라고 생각합니다.

지금은 체험판 버전을 사용중이지만 체험판 기간이 끝나면 정식 버전으로 구매할 생각입니다.

1년에 99$이고, 이 정책은 업데이트 지원을 1년간 지원해준다는 뜻이기 때문에 1년이 지나도 업데이트를 못할 뿐 프로그램을 계속 이용할 수는 있습니다.

이미지 작업이 까다로웠는데, 많은 분들이 사용해보시고 편리함을 느껴보셨으면 좋겠네요.

일주일간 고생하셨습니다.