사용자가 웹사이트와 앱 중 무엇을 이용하는지 확인하는 방법

웹사이트를 브라우저에서 보는 사용자와 앱을 통해 보는 사용자를 구분하면 유용한 경우가 많아요. 앱이 사용자에게 얼마나 잘 도입되고 있는지 분석하거나 앱 사용자에게 다른 콘텐츠를 표시하고 싶을 수도 있어요.

사용 사례가 여러 가지인 것처럼 이 목표를 달성하는 방법도 여러 가지예요. 하나씩 살펴볼게요.

사용자 에이전트 기준

사용자 에이전트는 브라우저가 페이지를 불러올 때마다 웹사이트에 보내는 짧은 문자열이에요. 사용자 에이전트에는 브라우저에 관한 정보가 포함되어 있어요. 예를 들어 Firefox 브라우저는 다음과 같은 사용자 에이전트를 보낼 수 있어요.

웹사이트는 이 정보를 통해 사용자가 Mozilla Firefox 브라우저 버전 47.0을 사용하고 있음을 감지할 수 있어요. 브라우저와 마찬가지로 앱도 자신을 식별하는 사용자 에이전트를 전송해요.

앱에서 사용하는 사용자 에이전트

앱에서는 몇 가지 사용자 에이전트를 사용해요.

• $regularUserAgent App-WebView ($operatingSystem) $version
  앱의 내부 브라우저(앱 안에 웹사이트를 표시하는 브라우저)에서 일반적으로 사용하는 사용자 에이전트예요. 이 사용자 에이전트를 사용하는 요청은 앱 사용자가 페이지 사이를 이동할 때 시작돼요.
• App-HttpClient $version
  사용자가 직접 시작하지 않은 앱 요청에 사용되는 사용자 에이전트예요. 예를 들어 앱은 웹사이트의 일부를 오프라인 사용을 위해 저장할 때 이 사용자 에이전트로 요청을 보내요. 현재 오프라인 모드는 기본적으로 비활성화되어 있으므로 이 사용자 에이전트를 사용하는 요청은 많이 표시되지 않을 가능성이 높아요.

$version은 앱의 내부 버전(예: 1.4.8+52)이고, $operatingSystem은 앱이 사용되는 플랫폼(예: ios 또는 android)이에요.

$regularUserAgent 는 해당 기기에서 예상되는 모바일 브라우저의 사용자 에이전트예요. 예를 들면 Mozilla/5.0 (iPhone; CPU iPhone OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148

따라서 앱이 iOS에서 사용할 수 있는 사용자 에이전트의 예시는 다음과 같아요. Mozilla/5.0 (iPhone; CPU iPhone OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 App-WebView (ios) 1.4.8+52

탐색 설정에는 $regularUserAgent가 WebView가 아닌 일반 브라우저의 사용자 에이전트처럼 보이게 하는 옵션도 있어요. 예를 들어 이 옵션을 사용하면 Mobile/15E148 뒤에 Safari/605.1.15가 추가돼요.

앱의 사용자 에이전트로 필터링하기

위의 사용자 에이전트 형식을 바탕으로 사용자 에이전트에 "App-WebView"가 포함되어 있는지 확인하면 웹사이트가 앱에서 로드되고 있는지 감지할 수 있어요. 운영체제도 확인하려면 사용자 에이전트에 "(android)" 또는 "(ios)"가 포함되어 있는지 추가로 확인하면 돼요.

예시: WordPress 웹사이트에서 서로 다른 콘텐츠 표시하기

기본 WordPress 편집기 사용하기

WordPress를 사용하고 있다면 "UserAgent Content Switcher" 플러그인을 사용할 수 있어요. 플러그인 이름에서 알 수 있듯이, 사용자 에이전트에 따라 사용자에게 서로 다른 콘텐츠를 표시할 수 있어요. 설정 방법과 사용 예시는 다음과 같아요.

1. 웹사이트에 플러그인을 설치하세요. 저희는 이 플러그인 또는 개발자와 제휴 관계가 없어요. 단지 직접 테스트해 본 결과 무료로 제공되며 정상적으로 작동하는 것으로 확인했어요.
2. 플러그인 설정 페이지에서 다음 설정으로 새 유형을 추가하세요.
   • 유형 이름: 앱
   • 쇼트코드 속성: app
   • 사용자 에이전트: App-WebView
3. 페이지 중 하나를 편집하고 코드 편집기로 전환하세요.
4. 이제 다음과 같이 앱에서만 표시되는 섹션을 만들 수 있어요.

   
   이 텍스트는 모든 사용자에게 표시돼요.
   
   [agentsw ua='app']
   이 텍스트는 앱 사용자에게만 표시돼요!
   [/agentsw]

   

Elementor 사용하기

Elementor를 사용하고 있다면 무료 Powerpack 플러그인과 powerpack-webtoapp 확장 플러그인을 대신 사용할 수 있어요. 사용 방법은 다음과 같아요.

1. WordPress 스토어에서 Powerpack 플러그인을 설치하세요.
2. powerpack-webtoapp 플러그인을 ZIP 파일로 다운로드한 후 설치하세요.
   powerpack-webtoapp 플러그인과 Elementor 웹사이트에서 Powerpack을 사용한다는 아이디어는 ALL IN APPLI에서 만들었어요. ALL IN APPLI는 이 플러그인을 사용해 여러 app-control-panel.com 앱을 관리하고 있으며, 이를 기꺼이 공유해 주었어요.
3. 이제 특정 요소가 앱에서만 표시되도록 설정할 수 있어요.

JavaScript 사용하기

사용자 에이전트 기준

물론 이전 섹션에서 자세히 설명한 것처럼 서버 측에서만 사용자 에이전트를 확인할 수 있는 것은 아니며, JavaScript에서도 확인할 수 있어요.

다음은 JavaScript를 사용하여 사용자가 앱과 브라우저 중 무엇을 사용하고 있는지 감지하는 예시예요.

const isApp = navigator.userAgent.includes("App-WebView");
if (isApp) {
    console.log("The user is using the app.");
} else {
    console.log("The user is using a browser.");
}
    

HTML 변경 사항을 확인하는 방법

앱은 일부 기능에 필요한, 눈에 보이지 않는 작은 변경 사항을 웹사이트의 HTML에 적용해요. 이러한 변경 사항을 사용하여 페이지가 앱에서 로드되었는지도 감지할 수 있어요.

이 방법은 다소 까다롭기 때문에 앱 헬퍼 스크립트의 executeWhenAppReady를 사용하는 것이 좋아요. 그런 다음 executeWhenAppReady 함수 안에 원하는 코드를 넣으면 페이지가 앱에서 로드된 경우에만 실행돼요. 이 방법의 작은 단점은 페이지가 앱에서 로드된 경우에도 코드가 실행되기까지 몇 밀리초가 걸린다는 점이에요.

앱에 코드 삽입하기

웹사이트 맞춤 설정 페이지에서 앱이 로드되는 모든 페이지에 삽입할 JavaScript 또는 CSS를 추가할 수 있어요. 활용 방법은 무궁무진하지만, 예시로 앱에서 이 텍스트를 초록색으로 표시해 볼게요.

<p id="red-text" style="color: red;">This text is red in the browser.</p>

이제 다음 JavaScript가 삽입되도록 설정할 수 있어요.

document.getElementById("red-text").style.color = "green";

또는 다음 CSS가 삽입되도록 설정할 수도 있어요.

#red-text {
    color: green !important;
}

보시는 것처럼 이 방법을 사용하면 웹사이트와 앱이 서로 다르게 작동하도록 만들 수도 있어요.