앱에서 만든 이미지 인스타로 Toss
인스타에 보낼 이미지를 만들어냈다고 가정하고!!! 진행해보겠습니다
Facebook앱 ID 만들기
https://developers.facebook.com/ → 들어가셔서 새로 앱 만드셔야합니다 :)
[내 앱] → [해당 프로젝트] → [앱 설정] → [기본 설정] 순으로 들어가면 앱 ID가 있을겁니다.
요놈 복사해서 사용
Android / iOS 공통 사항
Anroid 암시적 intent 및 iOS 맞춤 URL 스키마를 사용하여 앱에서 사진, 동영상, 스티커를 Insta로 전달 가능
암시적 인텐트? URL 스키마?
•
둘 다 내 앱에서 다른 앱으로 콘텐츠를 넘겨주는 방법
암시적 인텐트 → 컨텐츠를 넘겨주긴하는데 정확히 어떤 앱에 넘겨줄 지 모르는 것, 아래 사진보면 어디로 보낼지 몰라 사용자가 고르게 되어있음
URL 스키마 → 전달 하려는 정확한 앱의 주소(여기서는 인스타그램이겠죠?)
1.
BACKGROUND LAYER
•
화면 전체를 채우며 사진, 동영상, 단색 or 컬러 그래디언트로 맞춤 설정 가능한 레이어
2.
STICKER LAYER
•
이미지를 포함 가능하고, 사용자가 직접 커스텀할 수 있는 레이어
공유 플로우
1.
사용자가 "이 사진을 공유하고싶어" 라고 요청
2.
시스템이 먼저 사용자의 요청을 받아줄 수 있는 앱이 있는지 체크
3.
앱이 있으면 실제로 그 앱을 열어주면서 사진 전달
데이터
1.
페이스북 앱 ID
2.
배경자산
3. 스티커 자산
•
이미지 자산(JPG, PNG)에 대한 URI → 640 * 480
•
배경 이미지 위에 스티커로 표시
•
URI는 기기의 로컬 파일에 대한 컨텐츠 URI이어야 함
4.
배경 레이어 상단 색상
5.
배경 레이어 하단 색상
Android 에서 전달
iOS에서 전달
1. URL 스키마 등록
Info.plist 에 있는 LSApplicationQueriesSchemes 키에 instagram-stories를 추가합니다.
주의할 것은 Array 타입으로 추가해줘야 합니다.
인스타그램 외의 다른 앱들도 추가될 수 있기 때문이에요!
2. Obj-C로 되어있는 코드 AI로 딸깍해서 Swift코드로 바꾸기
아쉽게도 공식문서에서는 Obj-C 코드로 가이드를 주고있네요 ㅜ(시대가 어느때인데..?)
3. 공유할 이미지 페이스트보드에 복사
이미지의 경우 NSData 타입이어야 하므로, 공유할 UIImage를 Data타입으로 변환해야합니다.
지원되는 형식은 JPG와 PNG!
코드
guard let image = textView.convertToUIImage(),
let imageData = image.pngData() else { return } // Data 타입으로 변경
let pasteboardItems: [String: Any] = ["com.instagram.sharedSticker.stickerImage": imageData]
let pasteboardOptions = [UIPasteboard.OptionsKey.expirationDate: Date().addingTimeInterval(300)]
// 스티커 레이어 이미지를 페이스트보드에 저장 (5분 뒤 페이스트보드에서 삭제됨)
UIPasteboard.general.setItems([pasteboardItems], options: pasteboardOptions)5가지의 페이스트보드 키 - 오타 주의(AI 시키면 오타 안납니다 ^0^)
스티커 레이어 - "com.instagram.sharedSticker.stickerImage" - NSData
배경 레이어 - "com.instagram.sharedSticker.backgroundImage" - NSData
배경 레이어 - "com.instagram.sharedSticker.backgroundVideo" - NSData
배경 레이어 - "com.instagram.sharedSticker.backgroundTopColor" - NSString
배경 레이어 - "com.instagram.sharedSticker.backgroundBottomColor" - NSString4. 복사된 이미지를 인스타 앱을 열어 전달
let urlScheme = URL(string: "instagram-stories://share")!
if UIApplication.shared.canOpenURL(urlScheme) {
UIApplication.shared.open(urlScheme)
}👨⚖️ 결과 → 바로 인스타로 보내는 방법 기각
인스타 특성상 먼저 로드 된 이미지가 레이어 최하단으로 배치되는데,
유저가 우리앱에서 이미지를 보내고(스티커용), 인스타에 스티커가 있는 상태에서 배경을 갤러리에서 불러오면 스티커가 가려짐....
