📱 Expo로 iOS Share Extension 구현기

이 글은 “링크 저장 앱”을 만들면서 iOS Share Extension + Android 공유 인텐트를 붙인 개발기입니다.
Expo 쓰면서 “이거 되는 게 맞나…?” 했던 분들 대상으로 씁니다.

---

0. 문제의식: 왜 굳이 Share Extension까지?

링크 저장 앱을 만들다 보면 이런 UX가 꼭 필요해집니다.

1. Safari / Chrome에서 글을 읽다가
2. 🔘 공유 버튼 → 공유 시트 열고
3. 우리 앱 아이콘을 누르면
4. 바로 ‘링크 저장’ 화면이 뜨고, 앱 전환 없이 저장 끝 ✅

iOS에서는 이걸 Share Extension, Android에서는 Share Intent로 구현합니다.

이 글에서는 Expo(Managed + EAS Build) 환경에서

• iOS: expo-share-extension으로 커스텀 Share UI 만들고
• Android: expo-share-intent로 공유 인텐트 처리

까지 실제로 동작하는 구조를 예시 코드로 정리합니다.

---

1. Share Extension 한 줄 정의

“다른 앱에서 공유한 데이터를 받아, 작은 별도 프로세스로 처리하는 iOS 확장 앱”

특징만 요약하면:

1. 독립 프로세스

   • 메인 앱과 완전히 분리된 Target / 프로세스로 돌아감

2. 리소스 제한

   • 메모리·시간 제한이 있어서, 무거운 작업(대량 이미지 분석 등)은 매우 비추천

3. 공유 스토리지 필요

   • 메인 앱과 로그인 상태/데이터를 공유하려면

     • App Group / Keychain Access Group 같은 iOS 메커니즘을 써야 함

---

2. 어떤 라이브러리를 쓸 것인가

Expo에서 “다른 앱 → 우리 앱” 공유를 받으려면, 기본 expo-sharing으로는 안 됩니다.
공식 문서에도 “다른 앱에서 우리 앱으로 공유 받는 건 지원 안 함”이라고 박혀 있습니다.

그래서 커뮤니티 라이브러리를 씁니다.

2-1. 사용한 라이브러리

// package.json (예시)
{
  "dependencies": {
    "expo-share-extension": "^5.0.0",
    "expo-share-intent": "^5.1.0"
  }
}

버전은 예시입니다. 실제 프로젝트에서는 Expo SDK 버전에 맞는 버전 매트릭스를 꼭 확인하세요.

2-2. 역할 분담

라이브러리	플랫폼	UI 방식	UX
expo-share-extension	iOS 전용	✅ 별도 React Native UI	공유 시트 안에서 바로 처리
expo-share-intent	iOS + Android (하지만 우리는 Android에만)	❌ 별도 UI 없음, 메인 앱으로 딥링크	앱이 열리고 나서 처리 ([GitHub][4])

이번 구조는 이렇게 가져갑니다.

• iOS

  • expo-share-extension으로 커스텀 Share Extension

• Android

  • expo-share-intent로 공유 인텐트 → 메인 앱 라우팅

---

3. app.json / app.config 설정

3-1. 기본 Expo 설정 (예시)

// app.json (예시용)
{
  "expo": {
    "name": "MyLinkBox",
    "slug": "my-link-box",
    "scheme": "mylinkbox",
    "ios": {
      "bundleIdentifier": "com.mycompany.mylinkbox",
      "entitlements": {
        "com.apple.security.application-groups": [
          "group.com.mycompany.mylinkbox"
        ],
        "keychain-access-groups": [
          "ABCDE12345.*"
        ]
      }
    },
    "android": {
      "package": "com.mycompany.mylinkbox",
      "intentFilters": [
        {
          "action": "android.intent.action.SEND",
          "category": ["android.intent.category.DEFAULT"],
          "data": { "mimeType": "text/plain" }
        }
      ]
    },
    "plugins": [
      [
        "expo-share-extension",
        {
          "activationRules": [
            { "type": "url", "max": 1 },
            { "type": "text" }
          ],
          "backgroundColor": {
            "red": 255,
            "green": 255,
            "blue": 255,
            "alpha": 1
          },
          "appGroupIdentifier": "group.com.mycompany.mylinkbox"
        }
      ],
      [
        "expo-share-intent",
        {
          // iOS는 커스텀 Share Extension을 쓸 거라서 비활성화
          "disableIOS": true,
          "androidIntentFilters": ["text/*"],
          "androidMultiIntentFilters": []
        }
      ]
    ]
  }
}

3-2. 핵심 옵션 해설

🔸 activationRules (expo-share-extension)

iOS의 NSExtensionActivationRules를 추상화해 둔 옵션입니다.

"activationRules": [
  { "type": "url", "max": 1 },
  { "type": "text" }
]

• type: "url"

  • Safari에서 페이지 공유 시, URL이 있을 때 활성화

• type: "text"

  • 선택한 텍스트 공유에도 반응 (텍스트 안에 URL이 섞인 케이스까지 케어하고 싶을 때 유용)

• max

  • 동시에 받을 수 있는 항목 개수 (지정 안 하면 기본값 1)

🔸 appGroupIdentifier

"appGroupIdentifier": "group.com.mycompany.mylinkbox"

• 메인 앱 / Share Extension이 같이 쓰는 App Group ID
• 이 그룹 안의 공유 컨테이너에 파일·데이터를 같이 저장할 수 있습니다.

🔸 entitlements.keychain-access-groups

"keychain-access-groups": [
  "ABCDE12345.*"
]

• iOS Keychain 공유를 위한 그룹
• 실제로는 ABCDE12345.group.com.mycompany.mylinkbox 처럼 팀 ID + 그룹명 형태를 더 엄밀히 쓰기도 합니다.
• 글에서는 예시라 ABCDE12345.* 처럼 단순화했습니다.

🔸 expo-share-intent의 disableIOS

expo-share-intent는 기본적으로 iOS/Android 모두에 확장을 추가하지만,
우리는 iOS에서 expo-share-extension을 따로 쓰므로 iOS 쪽은 꺼 줍니다.

---

4. iOS Share Extension UI 만들기

4-1. 엔트리 포인트: index.share.js

// index.share.js
import { AppRegistry } from 'react-native';
import ShareExtension from './ShareExtension';

// 👇 이름은 반드시 "shareExtension"
AppRegistry.registerComponent('shareExtension', () => ShareExtension);

AppRegistry.registerComponent의 첫 번째 인자가 반드시 "shareExtension" 이어야 합니다.

4-2. ShareExtension 컴포넌트 (예시 버전)

// ShareExtension.tsx (예시)
import React, { useEffect, useState } from 'react';
import { InitialProps, close } from 'expo-share-extension';
import {
  View,
  Text,
  Button,
  ActivityIndicator,
  StyleSheet,
  TouchableOpacity,
} from 'react-native';

// ───────────────────────
// 1. 예시용 유틸 / API
// ───────────────────────
async function getAuthTokenFromSecureStore(): Promise<string | null> {
  // 실제 앱에서는 expo-secure-store + accessGroup 사용
  return 'dummy-token';
}

type Folder = { id: string; name: string };

async function fetchFolderList(token: string): Promise<Folder[]> {
  console.log('fetch folder with token', token);
  return [
    { id: 'inbox', name: '📥 인박스' },
    { id: 'read-later', name: '나중에 읽기' },
  ];
}

function extractUrlFromSharedContent(text?: string | null): string | null {
  if (!text) return null;
  const match = text.match(/https?:\/\/\S+/);
  return match ? match[0] : null;
}

function isValidUrl(url: string | null): boolean {
  if (!url) return false;
  try {
    new URL(url);
    return true;
  } catch {
    return false;
  }
}

async function saveLinkToServer(params: {
  url: string;
  folderId: string | null;
  token: string;
}) {
  console.log('save link', params);
  // 실제 앱에서는 여기서 API 호출
}

// ───────────────────────
// 2. ShareExtension UI
// ───────────────────────
type Props = InitialProps;

export default function ShareExtension(props: Props) {
  const { url, text } = props;

  const [token, setToken] = useState<string | null>(null);
  const [folders, setFolders] = useState<Folder[]>([]);
  const [selectedFolder, setSelectedFolder] = useState<Folder | null>(null);
  const [saving, setSaving] = useState(false);
  const [saved, setSaved] = useState(false);

  const sharedUrl = extractUrlFromSharedContent(url || text);

  useEffect(() => {
    (async () => {
      const t = await getAuthTokenFromSecureStore();
      setToken(t);
      if (!t) return;

      const list = await fetchFolderList(t);
      setFolders(list);
      setSelectedFolder(list[0] ?? null);
    })();
  }, []);

  const handleSave = async () => {
    if (!token) return;
    if (!isValidUrl(sharedUrl)) return;

    try {
      setSaving(true);
      await saveLinkToServer({
        url: sharedUrl!,
        folderId: selectedFolder?.id ?? null,
        token,
      });
      setSaved(true);

      setTimeout(() => {
        close(); // 1.5초 후 Share Extension 닫기
      }, 1500);
    } finally {
      setSaving(false);
    }
  };

  if (!token) {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>로그인이 필요합니다</Text>
        <Text style={styles.subtitle}>
          앱에서 먼저 로그인한 뒤 다시 공유해주세요.
        </Text>
        <Button title="닫기" onPress={close} />
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <Text style={styles.title}>링크 저장하기</Text>
      <Text style={styles.subtitle}>
        {isValidUrl(sharedUrl) ? sharedUrl : '유효한 URL이 없습니다.'}
      </Text>

      {/* 폴더 선택 (예시) */}
      <View style={{ marginVertical: 12 }}>
        {folders.map((folder) => (
          <TouchableOpacity
            key={folder.id}
            style={[
              styles.folderItem,
              folder.id === selectedFolder?.id && styles.folderItemSelected,
            ]}
            onPress={() => setSelectedFolder(folder)}
          >
            <Text>{folder.name}</Text>
          </TouchableOpacity>
        ))}
      </View>

      {saving ? (
        <ActivityIndicator />
      ) : saved ? (
        <Text>저장 완료! 🎉</Text>
      ) : (
        <Button
          title="저장하기"
          onPress={handleSave}
          disabled={!isValidUrl(sharedUrl)}
        />
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#fff',
    justifyContent: 'flex-start',
  },
  title: {
    fontSize: 18,
    fontWeight: '600',
  },
  subtitle: {
    marginTop: 8,
    color: '#555',
  },
  folderItem: {
    paddingVertical: 8,
    paddingHorizontal: 12,
    borderRadius: 8,
    borderWidth: 1,
    borderColor: '#ddd',
    marginBottom: 8,
  },
  folderItemSelected: {
    borderColor: '#4f46e5',
    backgroundColor: '#eef2ff',
  },
});

4-3. UX 핵심 포인트

1. 토큰 없이 들어온 경우

   • “로그인 필요” 메시지 + 닫기 버튼만 보여줌

2. URL 추출

   • props.url이 없고 텍스트만 올 수도 있으니 text에서도 정규식으로 URL 추출

3. 저장 후 자동 닫기

   • 저장 완료 → 짧게 피드백 → close() 호출로 Share Extension 종료

---

5. 인증 토큰 공유: SecureStore + Keychain Access Group

실제 서비스에서는 “Extension에서도 인증된 사용자로 API를 호출”해야 합니다.
이걸 해결하기 위해 iOS Keychain 공유를 씁니다.

5-1. 예시 코드

// secureStore.ts (예시)
import * as SecureStore from 'expo-secure-store';

const TOKEN_KEY = 'MY_APP_AUTH_TOKEN';
// 실제 프로젝트에서는 팀 ID가 포함된 값 사용 권장
const ACCESS_GROUP = 'ABCDE12345.*';

export async function saveAuthToken(token: string) {
  await SecureStore.setItemAsync(TOKEN_KEY, token, {
    accessGroup: ACCESS_GROUP,
  });
}

export async function getAuthToken() {
  try {
    const token = await SecureStore.getItemAsync(TOKEN_KEY, {
      accessGroup: ACCESS_GROUP,
    });
    return token;
  } catch (e) {
    console.error('failed to get token', e);
    return null;
  }
}

⚠️ 주의

• 실제 앱에선 keychain-access-groups entitlement와 accessGroup 값이 서로 일관되게 설정되어야 합니다.
• 팀 ID 접두(ABCDE12345.)를 어떻게 붙일지는 프로젝트마다 다를 수 있어서, 여기선 의도만 보이는 예시로 적었습니다.

---

6. Android: Intent Filter + expo-share-intent

Android는 Share Extension이 따로 없고, Intent Filter를 매니페스트(app.json)로 설정한 뒤, expo-share-intent 훅으로 데이터를 받습니다.

6-1. Android intentFilters (app.json 예시)

"android": {
  "intentFilters": [
    {
      "action": "android.intent.action.SEND",
      "category": ["android.intent.category.DEFAULT"],
      "data": {
        "mimeType": "text/plain"
      }
    }
  ]
}

6-2. 공유 데이터 처리 (Expo Router 예시)

// app/_layout.tsx (혹은 App.tsx)
import { useEffect } from 'react';
import { Platform } from 'react-native';
import { useRouter } from 'expo-router';
import { useShareIntent } from 'expo-share-intent';

export default function RootLayout() {
  const router = useRouter();
  const { hasShareIntent, shareIntent, resetShareIntent } = useShareIntent();

  useEffect(() => {
    if (Platform.OS !== 'android') return;
    if (!hasShareIntent || !shareIntent) return;

    const url = shareIntent.webUrl ?? shareIntent.text;
    if (!url) return;

    // 공유된 URL을 저장 화면으로 라우팅
    router.push({
      pathname: '/save',
      params: { url },
    });

    resetShareIntent();
  }, [hasShareIntent, shareIntent]);

  return (
    // ... 실제 앱 네비게이션/레이아웃
    null
  );
}

expo-share-intent는 네이티브 모듈이라 Expo Go에서는 동작하지 않고,
반드시 prebuild + dev client / EAS Build 환경에서 테스트해야 합니다.

---

7. 네이티브 코드 개념만 살짝 보기 (Swift 예시)

expo-share-extension을 쓰면 iOS 타겟/Swift 코드는 플러그인이 알아서 생성해 줍니다.
관심 있는 부분만 추상화해서 보면 대략 이런 구조입니다.

// ShareExtensionViewController.swift (개념 예시)
class ShareExtensionViewController: UIViewController {

  override func viewDidLoad() {
    super.viewDidLoad()
    loadReactNativeContent()
  }

  private func loadReactNativeContent() {
    getShareData { [weak self] sharedData in
      guard let self = self else { return }

      let rootView = reactNativeFactory!.rootViewFactory.view(
        withModuleName: "shareExtension", // index.share.js에서 등록한 이름
        initialProperties: sharedData
      )

      self.view.addSubview(rootView)
      rootView.frame = self.view.bounds
    }
  }

  private func getShareData(completion: @escaping ([String: Any]?) -> Void) {
    guard let items = extensionContext?.inputItems as? [NSExtensionItem] else {
      completion(nil)
      return
    }

    var result: [String: Any] = [:]

    // URL / 텍스트 추출 (단순화 예시)
    for item in items {
      for provider in item.attachments ?? [] {
        if provider.hasItemConformingToTypeIdentifier("public.url") {
          provider.loadItem(forTypeIdentifier: "public.url", options: nil) { value, _ in
            if let url = value as? URL {
              result["url"] = url.absoluteString
            }
            completion(result)
          }
        } else if provider.hasItemConformingToTypeIdentifier("public.text") {
          provider.loadItem(forTypeIdentifier: "public.text", options: nil) { value, _ in
            if let text = value as? String {
              result["text"] = text
            }
            completion(result)
          }
        }
      }
    }
  }

  func close() {
    extensionContext?.completeRequest(returningItems: [], completionHandler: nil)
  }
}

역할은 단순합니다.

1. extensionContext에서 공유된 데이터 파싱
2. React Native shareExtension 모듈을 띄우며 initialProperties로 전달
3. JS에서 close() 호출 시 네이티브에서 completeRequest로 Extension 종료

---

8. EAS Build에서 App Extension 인식시키기

Expo 공식 문서에 따르면, EAS Build가 app extension 타겟을 제대로 인식하게 하려면
extra.eas.build.experimental.ios.appExtensions 설정을 권장합니다.

{
  "expo": {
    "extra": {
      "eas": {
        "build": {
          "experimental": {
            "ios": {
              "appExtensions": [
                {
                  "targetName": "MyShareExtension",
                  "bundleIdentifier": "com.mycompany.mylinkbox.ShareExtension",
                  "entitlements": {
                    "com.apple.security.application-groups": [
                      "group.com.mycompany.mylinkbox"
                    ]
                  }
                }
              ]
            }
          }
        }
      }
    }
  }
}

• 이 설정이 있으면 EAS가

  • Share Extension용 Provisioning Profile까지 같이 생성해 줘서
  • “iOS 빌드만 돌리면 되게” 도와줍니다.

---

9. 내용 검증 & 주의할 점 요약

질문 주셨던 “틀린 내용이 있는지” 기준으로 정리하면:

1. expo-share-extension 사용 방식

   • activationRules, appGroupIdentifier, index.share.js에서 "shareExtension" 등록 등은
     공식 README와 일치합니다.

2. expo-share-intent 사용 방식

   • useShareIntent 훅 사용, disableIOS, androidIntentFilters 설정 모두
     공식 README와 패턴이 동일합니다.

3. “App Group을 통한 데이터 공유”라는 설명

   • iOS에서 메인 앱/Share Extension 사이 데이터 공유는

     • App Group (파일/컨테이너 공유) +
     • Keychain Access Group (SecureStore 등 키체인 공유)
       조합으로 구현하는 패턴이 맞습니다.

4. EAS Build + appExtensions 설정

   • extra.eas.build.experimental.ios.appExtensions를 통해
     EAS가 미리 extension 정보를 알고 서명/프로비저닝을 처리해 준다는 설명도
     최신 Expo 문서와 일치합니다.

5. 토큰 공유 코드에 대한 한 가지 주의

   • 예시에서는 이해를 위해 accessGroup: 'ABCDE12345.*'처럼 단순화했지만,
   • 실제 앱에서는 Apple Team ID + 그룹명이 포함된 정확한 Keychain 그룹 값을 써야 할 수 있습니다.
   • 이 부분은 각자 Apple 계정/기존 앱 구조에 따라 달라서, 글에서는 “패턴만” 보여주는 수준으로 두었습니다.

10. 🧪 링크 드라퍼, 정식 출시!

링크 드라퍼는 단순한 저장 툴이 아닙니다.
정리하고, 다시 꺼내보게 만드는 링크 관리 도구를 지향하고 있어요.

🔗 빠르고 간편한 링크 저장
iOS/Android 앱, 웹, 크롬 익스텐션 어디서든 바로 저장
🧠 폴더별로 깔끔하게 정리
읽을 거리, 레퍼런스, 쇼핑 후보까지 주제별 정리
🌐 폴더를 친구에게 공유
같이 보는 자료는 폴더 단위로 링크 한 번에 공유
⚡ 크롬 익스텐션 원클릭 저장
지금 보고 있는 페이지를 버튼 한 번으로 저장

👉 링크 드라퍼 앱 다운로드 (iOS / Android)
👉 링크 드라퍼 웹에서 사용하러 가기
👉 크롬 웹스토어에서 익스텐션 설치하기