iOS 앱 출시 스크린샷 준비, 피그마&캔바 활용

2년 전에는 Previewed라는 사이트에서 앱 스크린샷을 준비했었습니다. 이번 글은 Figma와 Canva를 활용해 쉽게 스크린샷을 준비해보도록 합니다.

 
먼저 제가 만든 앱 스크린샷을 보여드립니다.
앱스토어에서 유튜브 앱을 참고하여 최대한 심플하게 만들었습니다.
 

여기서 잠깐, 스크린샷은 기기 기준의 스크린샷 원본이 아닙니다.

‘기기 스크린샷을 포함한 이미지’가 앱 배포 시 필요한 스크린샷입니다.

원본이어도 되지만 해상도, 이미지 사이즈를 맞출 수 없다면 원본이 아니어도 되는 겁니다.

앱 스크린샷 만들기 준비물

피그마와 캔바를 준비합니다.
피그마 : https://www.figma.com/
캔바 : https://www.canva.com/ko_kr/


앱스토어에 표시할 화면은 미리 캡처로 준비해두세요.

피그마에서 작업한 다음, 캔바로 넘어가서 보기 좋게 꾸밀 겁니다.

 

1. 피그마 플러그인 iMockup

https://www.figma.com/community/plugin/1305891870034170272

iMockup | Figma

이 플러그인으로 아이폰 프레임에 기기 캡처를 추가할 수 있습니다.
 
 

너무나 간편하게 만들 수 있습니다.

 

2. 피그마에서 아이폰 목업 추출

이렇게 만들어진 이미지를 Export합니다.

이미지를 클릭하면 오른쪽 사이드바 하단에 Export 섹션이 있습니다.

 

3. 캔바에서 후작업

추출한 아이폰 목업 스크린샷을 캔바에 업로드하고 꾸밉니다.

문구를 추가하거나, 다른 앱들의 미리보기를 보면서 예쁘게 꾸미는 겁니다.
 
이때 캔바에서 가장 먼저 중요하게 설정해야 하는 것이 있습니다.

앱스토어 커넥트에서 요구하는 스크린샷 이미지 사이즈
- 1242 x 2208
- 1290 x 2796
 

참고로 캔바에서 이미지 크기 변경은 캔바 유료를 써야 간편하게 됩니다. 저는 30일 무료 체험권 써서 이미지 사이즈 변경했습니다.
 
궁금한 점 있으시면 newme.developer 인스타그램이나 스레드로 메세지 주세요

*피그마 플러그인 부분 설명이 좀 부족한데, 처음이신 분들은 헤맬 것 같아요. 스크린샷 첨부해서 보여드리고 싶어서 나중에 추가해보도록 할게요.

일단 피그마 플러그인 사용 방법을 검색하시길!

앱 배포 많이 하는 개발자 되기 😎 응원합니다