Next.js 에서 iOS와 Android 사용자 핸들링 방법

웹사이트나 웹 애플리케이션을 개발할 때, 사용자 경험을 최적화하기 위해 iOS와 Android 사용자를 구분해서 처리해야 할 때가 있습니다.

 

특히, 카카오톡이나 라인, 인스타그램 같은 인앱 브라우저에서 서비스를 불러오는 경우, 사용자가 어떤 기기를 사용하느냐에 따라 구현한 내용과 다르게 동작하는 경우가 많습니다. 소셜 로그인이 되지 않는다거나 이미지를 다운받을 수 없거나 등이죠.

 

이번 포스팅에서는 Next.js에서 iOS와 Android 사용자를 구분하고, 각각의 사용자에게 맞는 행동을 취하는 방법을 소개하겠습니다.

 

 

전체 코드

아래는 iOS와 Android 사용자를 구분하여 처리하는 전체 코드입니다.

"use client";

import Editor from "components/Editor";
import { useEffect, useState } from "react";

export default function UI() {
  const [isIosUser, setIsIosUser] = useState(false);

  useEffect(() => {
    const userAgent = navigator.userAgent.toLowerCase();

    if (userAgent.match(/iphone|ipad|ipod/i)) {
      setIsIosUser(true);
    } else if (userAgent.match(/android/i)) {
      // sessionStorage를 사용하여 리다이렉트가 이미 발생했는지 확인
      const hasRedirected = sessionStorage.getItem("hasRedirected");

      if (!hasRedirected) {
        sessionStorage.setItem("hasRedirected", "true");
        const currentUrl = window.location.href;

        // 안드로이드 인앱 브라우저에서 외부 브라우저로 리다이렉트
        const redirectUrl =
          "intent://domain.co.kr/#Intent;scheme=https;package=com.android.chrome;S.browser_fallback_url=" +
          encodeURIComponent(currentUrl) +
          ";end";

        window.location.replace(redirectUrl);
      }
    }
  }, []);

  return (
    <main className="max-w-sm mx-auto p-4">
      <h1 className="text-2xl font-bold text-center">초코우유 마실래?</h1>
      <Editor isIosUser={isIosUser} />
    </main>
  );
}

 

이제 세부 코드들을 설명해보겠습니다.

 

사용자 에이전트를 통한 iOS와 Android 구분

위 코드에서는 useEffect 훅을 사용하여 컴포넌트가 렌더링된 후 iOS 또는 Android 사용자인지 확인합니다. 이때 각 플랫폼에 맞는 처리를 합니다.

 

1. 사용자 에이전트로 iOS 사용자 확인하기

const userAgent = navigator.userAgent.toLowerCase();

if (userAgent.match(/iphone|ipad|ipod/i)) {
  setIsIosUser(true);
}

 

이 부분에서는 navigator.userAgent를 이용해 현재 사용자의 디바이스 정보를 가져옵니다. 이후, iPhone, iPad, iPod과 일치하는 경우 isIosUser 상태를 true로 설정합니다. 이를 통해 Editor 컴포넌트에서 iOS 사용자인지 여부를 알 수 있게 됩니다.

 

2. Android 사용자를 위한 외부 브라우저 리다이렉트

else if (userAgent.match(/android/i)) {
  const hasRedirected = sessionStorage.getItem("hasRedirected");

  if (!hasRedirected) {
    sessionStorage.setItem("hasRedirected", "true");
    const currentUrl = window.location.href;

    const redirectUrl =
      "intent://domain.co.kr/#Intent;scheme=https;package=com.android.chrome;S.browser_fallback_url=" +
      encodeURIComponent(currentUrl) +
      ";end";

    window.location.replace(redirectUrl);
  }
}

 

Android 사용자인 경우, 먼저 sessionStorage를 사용해 이전에 리다이렉트가 발생했는지 확인합니다. 만약 리다이렉트가 이미 발생하지 않았다면, 현재 페이지 URL을 외부 브라우저(주로 Chrome)에서 열도록 리다이렉트 URL을 생성하고 window.location.replace를 통해 외부 브라우저로 이동시킵니다.

 

여기서 리다이렉트 URL이 무엇인지 궁금하실텐데요. 먼저, Intent는 Android만의 기능으로, 앱 간에 작업을 전달하거나 특정 작업을 수행하도록 지시할 때 사용됩니다. 이에 대해서는 구체적으로 정리된 글을 남깁니다.

 

Intent URL로 Android 외부 브라우저로 리다이렉트하기

 

 

마무리

이렇게 iOS와 Android 사용자를 다르게 처리한 이유는, iOS에서는 사용자를 외부 브라우저로 강제 이동시키는 것이 불가능하기 때문입니다. 따라서 iOS 사용자에게는 Editor 컴포넌트에서 별도로 iOS 환경에 맞는 처리를 해줍니다. Android에서는 인앱 브라우저에서 외부 브라우저로 강제로 이동시킬 수 있기 때문에 리다이렉트로 처리합니다.

 

물론 Android도 외부 브라우저 이동 없이 인앱 브라우저에서 그대로 동작시킬 수 있습니다. 하지만 인스타그램 인앱 브라우저의 경우 Android 사용자는 이미지 파일을 다운받을 수가 없습니다. 저 또한 이러한 이유로 외부 브라우저로 강제 이동시킬 수 밖에 없었죠.

 

결국 핵심은 각각의 플랫폼에서 최적화된 사용자 경험을 제공하는 것입니다. 이번 글에서 다룬 방법들을 활용하여 여러분의 프로젝트에도 적용해보시기 바랍니다.

 

---

 

이번 코드가 적용된 서비스 링크를 함께 남깁니다.

초코우유 밈 생성기