[iOS] iMessage 스티커팩 만들기 (+ 손쉽게 만들 수 있는 피그마 템플릿 무료제공!)

 

 

---

이번 포스팅에서 함께 만들었던 새로운 '용자의 여행' 아이메시지 스티커를 출시하였는데요.

오늘(2024.04.20) 스티커앱 중 6위에 달성했습니다!! 

많은 다운로드, 관심에 감사합니다!!

 

혹시 다운로드 안하신 분들은 다운로드하시고 귀여운 용자 스티커를 아이메시지에서 사용해보세요!! 

 

 

https://apps.apple.com/kr/app/%EC%9A%A9%EC%9E%90%EC%9D%98-%EC%97%AC%ED%96%89/id6479955955

‎용자의 여행

 

 

 

혹시 영어버전을 읽고 싶으시다면 아래 미디엄 링크에서 영어버전 포스팅을 읽으실 수 있습니다:) 

 

How to make iMessage sticker packs so easily! + Free Figma Template here!

---

 

시작하며

저는 예전에 고양이 사진으로 아이메시지 스티커를 만들었는데요. 

 

바로 이 스티커에요. 귀엽지 않나요.

 

주변에서 가장 많이 물어보시는 게, 아무래도 iOS 앱개발보다는 이런 아이메시지 스티커를 어떻게 만드는지를 가장 궁금해 하시더라고요.

 

본인이 키우는 강아지, 고양이 사진으로 만들 수 있는지, 혹은 직접 그린 그림으로 만드려면 어떻게 하는지에 대해서 많이들 물어보시는데, 이번에 새롭게 아이메시지 스티커를 만들면서 그 과정을 정리해보았습니다.

 

제가 예전에 만든 아이메시지 스티커는 아래 링크에서 무료로 다운받으실 수 있습니다 😃

 

https://apps.apple.com/id/app/%EC%95%99%ED%81%BC%EB%B0%9C%EB%9E%84-%ED%84%B1%EC%8B%9C%EB%8F%84%EB%83%A5-%EA%B9%80%EC%82%B0/id1660439943

‎앙큼발랄 턱시도냥 김산

 

 

 

 

0. 시작하기 전에 

아이메시지 스티커팩을 만들기 위해서는 준비물이 필요한데요.

macOS가 구동되는 맥북 또는 맥과 Xcode, 그리고 개발자 계정이 있어야합니다.  

 

• 애플 개발자 계정 멤버십 가입 (연간 129,000원)
• XCode 버전 체크 (14 버전 추천)
  • 현재 Xcode 최신 버전인 15.3 에서는 시뮬레이터에서 아이메시지 스티커가 보이지 않고 Xcode의 인스펙터 창에서 스티커 관련 설정이 없어져 있습니다.
  • https://xcodereleases.com/

 

위에 적어두었지만 현재 저는 Xcode 15.3과 14.3 버전을 둘 다 가지고 있는데요. 

아이메시지 스티커팩은 Xcode 14.3에서 작업하기가 수월하므로 14버전을 추천합니다.

 

1. 프로젝트 만들기 

 

1) [Create New Project… ]를 클릭하여 프로젝트를 생성합니다.   

 

 

2) iOS 탭에서 [Sticker Pack App]을 선택합니다.

 

 

3) 프로젝트 옵션을 설정해줍니다. 

• Product Name: 프로덕트 이름으로, 실제 앱스토어에서 보이는 이름은 아님.
• Team: 애플 개발자 계정
• Orgnaization Identifier : 조직의 식별자.
• Bundle Identifier: 프로덕트 이름과 조직 식별자가 조합된 번들의 식별자

 

2. 스티커 이미지 추가 

스티커 이미지 추가 

규격 확인하기 - 사이즈

 

• Small. 100 x 100 points @3x (300 x 300 pixels).
• Medium. 136 x 136 points @3x (408 x 408 pixels).
• Large. 206 x 206 points @3x (618 x 618 pixels).

참고: 휴먼 인터페이스 가이드라인

https://developer.apple.com/design/human-interface-guidelines/imessage-apps-and-stickers

iMessage apps and stickers | Apple Developer Documentation

 

위에 적힌 사이즈는 실제의 3x 사이즈로, 런타임에서 알아서 1x, 2x 사이즈를 만들어준다.

규격에 맞춰 이미지를 추가해줍니다. 

 

https://developer.apple.com/documentation/messages/adding-your-sticker-packs-to-messages/

Adding your sticker packs to Messages | Apple Developer Documentation

 

규격 확인하기 - 포맷

 

PNG, APNG, GIF, JPEG 를 스티커 이미지로 사용가능합니다. 

 

 

스티커 이미지 설정하기

정적 스티커 

 

Sticker Pack 폴더 내에 스티커로 사용할 이미지들을 드래그&드롭 합니다.

 

 

 

애니메이션 스티커 (Animated) 

 

Xcode 하단에 [+]버튼을 눌러 스티커 시퀀스를 추가할 수 있습니다.

애니메이션 프레임이 되는 이미지를 추가하여 애니메이션 스티커를 만들 수 있어요.

 

이렇게 재생 버튼을 눌러서 미리 볼 수 있습니다.

 

 

3. 시뮬레이터에서 미리 확인해보기

Xcode 상단에서 iPhone 시뮬레이터 기종을 선택하고,

상단 좌측의 ▶️ 버튼을 눌러서 시뮬레이터에서 스티커를 확인해볼 수 있습니다.  

 

아래와 같이 실제 아이메시지 앱에서 스티커를 미리 사용해볼 수 있습니다.

 

 

4. 앱 아이콘, 스크린샷 추가 

 

앱스토어 업로드를 위해 앱의 아이콘과 앱스토어용 스크린샷을 추가해줍니다.

 

앱 아이콘 추가

 

다양한 비율과 크기의 아이콘을 만들어 넣어주어야 합니다. 

지정된 사이즈별로 아이콘을 만들고, 사이즈가 맞는 위치에 드래그앤 드롭 해주세요. 

 

사이즈가 맞게 들어가지 않으면 노란색 느낌표 아이콘이 뜹니다. 

 

사이즈가 맞게 들어가면 아래처럼 보이게 될거에요. 

 

앱스토어 스크린샷 추가

• For iPhone —
  • 6.7" : 1290 x 2796 pixels 
  • 6.5" : 1284 x 2778 pixels 
  • 5.5" : 1242 x 2208 pixels
• For iPad — 
  • 12.9" : 2048 x 2732 pixels

일반적인 앱과 같이 아이폰 6.5" (또는 6.7") , 아이폰 5.5" 디스플레이에 맞는 스크린샷 이미지와 

아이패드 프로 6세대 12.9", 2세대 12.9" 인치 전용 스크린샷 이미지를 업로드해야합니다. 

 

아래 링크에서 스크린샷 명세를 자세히 확인할 수 있습니다.

https://developer.apple.com/help/app-store-connect/reference/screenshot-specifications/

Screenshot specifications - Reference - App Store Connect - Help - Apple Developer

 

5. 앱스토어에 업로드하기 

1) 앱 메뉴에서 [Product] > [Archive] 클릭합니다. 

 

2. Archive가 완료되면 아래와 같이 아카이브된 목록들이 뜨는데, 원하는 아카이브를 선택한 후 우측의 [Distribute App] 버튼을 선택합니다.

 

 

3. 팝업이 뜰텐데 이때 [App Store Connect] 옵션을 선택한 후 [Next] 버튼을 눌러줍니다.

 

4. 배포가 완료되면 앱스토어 커넥트에 접속합니다. 빌드가 바로 올라가지 않을 수 있으므로 혹시 접속하여 로그인했는데, 앱정보가 없을 경우 조금만 기다려봅니다. 

 

배포가 잘 되면, 앱스토어 커넥트에 접속하여 [Apps] 메뉴에 들어가면 아래와 같이 올린 아이메시지 스티커앱이 생겨있는 걸 확인할 수 있습니다. 해당 앱을 클릭합니다.  

 

 

 

5) Build 섹션에서 [Add Build]를 눌러줍니다.

 

6. 빌드 선택 팝업에서 빌드를 선택해줍니다. 숫자가 높은 빌드가 가장 최신 빌드입니다. 

빌드를 추가한 후에는 Missing Compliance를 클릭하여 채워줍니다. 

 

7. 이제 앱의 개인정보보호정책, 지원페이지, encryption, 앱 정보, 스크린샷 페이지등을 올리면 앱을 제출할 준비가 됩니다. 

 

 

8. 해당 페이지 우측 상단에 있는 [Submit to App Review] 버튼을 눌러 앱을 제출하면 아래와 같이, 앱이 리뷰를 받을 준비가 되었다는 화면이 뜹니다. 이제 앱 심사를 기다리고, 문제가 없어 리뷰를 통과하면 앱이 앱스토어에 올라가게 됩니다. 

 

 

 

# iMessage Sticker Pack 무료 피그마 템플릿 제공 

 

아이메시지 스티커, 앱 아이콘, 스크린샷을 편하게 만들 수 있는 피그마 템플릿을 만들었습니다.

아래 링크에서 편하게 사용해보세요! 

 

https://www.figma.com/community/file/1356287060715287825/imessage-stickerpack-starter-kit

iMessage Stickerpack Starter Kit | Figma

---

마치며 

 

 

오늘도 읽어주셔서 감사합니다. 

 

궁금하거나 나누고 싶은 얘기가 있으시면 댓글로 알려주세요!

재밌게 읽으셨다면 공감과 구독은 큰 힘이 됩니다. 

 

항상 감사합니다.