# 앱에서 만든 이미지 인스타로 Toss

> 인스타에 보낼 이미지를 만들어냈다고 가정하고!!! 진행해보겠습니다

# Facebook앱 ID 만들기

> [https://developers.facebook.com/](https://developers.facebook.com/) → 들어가셔서 새로 앱 만드셔야합니다 :)

[내 앱] → [해당 프로젝트] → [앱 설정] → [기본 설정] 순으로 들어가면 앱 ID가 있을겁니다.

요놈 복사해서 사용

![Image](https://upload.cafenono.com/image/slashpageHome/20260408/112413_pD6tc9aDOawZOdiUk8?q=80&s=1280x180&t=outside&f=webp)

# Android / iOS 공통 사항

> Anroid 암시적 intent 및 iOS 맞춤 URL 스키마를 사용하여 앱에서 사진, 동영상, 스티커를 Insta로 전달 가능

암시적 인텐트? URL 스키마? 

- 둘 다 내 앱에서 다른 앱으로 콘텐츠를 넘겨주는 방법

암시적 인텐트 → 컨텐츠를 넘겨주긴하는데 정확히 어떤 앱에 넘겨줄 지 모르는 것, 아래 사진보면 어디로 보낼지 몰라 사용자가 고르게 되어있음

![Image](https://upload.cafenono.com/image/slashpageHome/20260408/134331_x5Dh7ghtCIGGGZ7iOv?q=80&s=1280x180&t=outside&f=webp)

URL 스키마 → 전달 하려는 정확한 앱의 주소(여기서는 인스타그램이겠죠?)

![Image](https://upload.cafenono.com/image/slashpageHome/20260408/133159_iSuwxX1fIl85IZ2kTH?q=80&s=1280x180&t=outside&f=webp)

1. BACKGROUND LAYER

- 화면 전체를 채우며 사진, 동영상, 단색 or 컬러 그래디언트로 맞춤 설정 가능한 레이어

1. STICKER LAYER

- 이미지를 포함 가능하고, 사용자가 직접 커스텀할 수 있는 레이어

### 공유 플로우

1. 사용자가 "이 사진을 공유하고싶어" 라고 요청

2. 시스템이 먼저 사용자의 요청을 받아줄 수 있는 앱이 있는지 체크

3. 앱이 있으면 실제로 그 앱을 열어주면서 사진 전달

### 데이터

1. 페이스북 앱 ID

2. 배경자산

3. 스티커 자산

- 이미지 자산(JPG, PNG)에 대한 URI → 640 * 480

- 배경 이미지 위에 스티커로 표시 

- URI는 기기의 로컬 파일에 대한 컨텐츠 URI이어야 함

1. 배경 레이어 상단 색상

2. 배경 레이어 하단 색상

# Android 에서 전달

# iOS에서 전달

### 1. URL 스키마 등록

Info.plist 에 있는 LSApplicationQueriesSchemes 키에 instagram-stories를 추가합니다.

![Image](https://upload.cafenono.com/image/slashpageHome/20260408/141139_HN06P2FmiUHswmhoWy?q=80&s=1280x180&t=outside&f=webp)

주의할 것은 Array 타입으로 추가해줘야 합니다.

인스타그램 외의 다른 앱들도 추가될 수 있기 때문이에요!

### 2. Obj-C로 되어있는 코드 AI로 딸깍해서 Swift코드로 바꾸기

아쉽게도 공식문서에서는 Obj-C 코드로 가이드를 주고있네요 ㅜ(시대가 어느때인데..?)

### 3. 공유할 이미지 페이스트보드에 복사

이미지의 경우 NSData 타입이어야 하므로, 공유할 UIImage를 Data타입으로 변환해야합니다.

지원되는 형식은 JPG와 PNG!

코드

```javascript
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^)

```javascript
스티커 레이어 - "com.instagram.sharedSticker.stickerImage" - NSData
배경 레이어 - "com.instagram.sharedSticker.backgroundImage" - NSData
배경 레이어 - "com.instagram.sharedSticker.backgroundVideo" - NSData
배경 레이어 - "com.instagram.sharedSticker.backgroundTopColor" - NSString
배경 레이어 - "com.instagram.sharedSticker.backgroundBottomColor" - NSString
```

### 4. 복사된 이미지를 인스타 앱을 열어 전달

```javascript
let urlScheme = URL(string: "instagram-stories://share")!

if UIApplication.shared.canOpenURL(urlScheme) {
    UIApplication.shared.open(urlScheme)
}
```

# 👨‍⚖️ 결과 → 바로 인스타로 보내는 방법 기각

인스타 특성상 먼저 로드 된 이미지가 레이어 최하단으로 배치되는데, 

유저가 우리앱에서 이미지를 보내고(스티커용), 인스타에 스티커가 있는 상태에서 배경을 갤러리에서 불러오면 스티커가 가려짐....

 

> 참조

[https://developers.facebook.com/docs/instagram-platform/sharing-to-stories](https://developers.facebook.com/docs/instagram-platform/sharing-to-stories)

For the site tree, see the [root Markdown](https://slashpage.com/madein.md).