iMessage 용 스티커팩 만들기 가이드

이 문서는 iMessege 용 스티커팩을 준비하는 디자이너를 위해 작성되었습니다.

스티커팩 준비하기

크게 3가지 종류가 있습니다.

준비해야 할 이미지 사이즈화면에 실제로 보이는 사이즈
small300px x 300px100px x 100px
regular408px x 408px136px x 136px
large618px x 618px206px x 206px

준비해야 하는 이미지 사이즈는, 실제 보이는 이미지의 3배 크기의 이미지를 준비합니다. 레티나 디스플레이 아이폰에서 좀 더 선명하게 보이기 위해서 입니다.

파일포맷은 배경이 투명한 png 파일 포맷으로 합니다. 하나의 파일이 500kb 를 넘으면 안됩니다.

준비해야 하는 스티커의 최소 갯수는 없습니다.

애니메이션 준비하기

애니메이션은 위 사이즈와 동일한 gif 파일을 만들어도 됩니다. 좀 더 잘 하려면, Xcode 에서 APNG파일을 만들 수 있습니다. 이 때에는 PNG 파일로 이미지 낱장을 준비한 다음 Xcode 를 사용하는 개발자에게 의뢰하도록 합니다.

gif 애니메이션과 APNG 파일의 차이는 APNG 파일이 좀 더 메시지나 이미지 위에서 지저분하지 않게 잘 보이게 된다고 합니다. 하지만, 그런 디테일이 필요 없다면, gif 로 해도 무방합니다.

아이콘 준비하기

아이콘이 의외로 좀 많이 필요 합니다.

 @2x@3x
iPad Pro148 x 110 px
iPad134 x 100 px
iPhone120 x 90 px180 x 135 px
Messages64 x 48 px96 x 92 px
54 x 40 px81 x 60 px
Settings 58 x 58 px87 x 87 px
App Store1024 x 1024 px
1024 x 768 px

모두가 다 필요하냐구요? 네 모두 필요 합니다. 모두 다를 필요 없고 모두 같은 모양이지만, 사이즈만 다르면 됩니다.

주의할 사항은 파일 타입은 png 로 하되, 배경이 투명이면 안됩니다. 보통은 흰색 아니면 원하는 색을 넣어 줍니다. 그리고, 필요한 경우 아이콘은 자동으로 라운드 처리가 됩니다. 그래서 귀퉁이 부분은 라운드 될 수 있다는 점에 주의합니다. (미리 라운드 처리 하면 안됩니다.)

유료, 무료, 인앱 구매

앱스토어 올릴 때, 유료로 할 지 무료로 할 지 선택할 수 있습니다. 원한다면 부분적으로 인앱 구매로 처리할 수 있습니다. 이 부분은 앱스토어 올리기 전 결정하면 됩니다.

좀 더 고민하기

Sticker 는 기존 메시지버블에 떼어 붙이거나, 아니면 다른 스티커 위에 붙일 수 있는 개념입니다. 그래서, 메시지버블에 붙였을 때 잘 어울리거나, 아니면, 여러개의 스티커를 붙여서 하나의 스티커가 되는 조각단위로 디자인 하면 좋습니다.

메시지 버블에 조금 어울리는 스타일?
조각 단위 스티커 사용 예. 얼굴과 눈모양을 별도의 스티커로 만들면, 얼굴을 사용자가 원하는 대로 만들어 낼 수 있다.

이미지 외곽에는 흰색 아웃라인을 그려주면 좋습니다. 대부분은 흰색 배경의 채팅창을 쓰지만 모두가 그런 것은 아닙니다. 어두운 배경의 채팅창을 쓰는 경우도 있습니다. iOS의 메시지앱에서 스티커를 터치하면 흰색배경에 스티커를 볼 수 있고, 여기서 한번 더 터치하면, 검은 배경에 전체 화면으로 스티커를 보여줍니다. 이 때, 흰색 배경만 고려했다면, 애매한 부분이 더 확연히 들어날 보입니다.

자세히 보면 외곽에 흰색 테두리가 보인다.
흰색 배경에서는 문제 없이 잘 보인다.
검은색 배경이 되면 상황은 달라진다. 보기가 많이 어렵다.

참고 페이지

덤으로 Telegram 용 스티커팩 만들기

  • 사이즈 : 512×512
  • 파일포맷 : 투명 png

위 사이즈로 이미지를 준비하면 됩니다. 문제는 Telegram 에서는 무료 스티커팩 만 만들 수 있습니다. 아직 유료는 지원하지 않습니다.