카페24 쇼핑몰 플러스앱을 운영하면서 웹 페이지에서 앱의 설정 메뉴를 열어야 할 때가 있지 않으신가요? 앱의 하단 네비게이션 대신 웹 페이지에서 직접 네비게이션을 구성하고 있다면, 앱 고유 메뉴에 접근할 방법이 필요하죠.
플러스앱은 웹과 앱을 결합한 하이브리드 앱이다 보니, 앱의 하단 네비게이션을 사용하지 않고 웹 페이지 자체에서 네비게이션을 제공하는 경우가 많습니다. 동일한 고객 경험을 주기 위해서죠.
하지만 웹 페이지만으로 운영하게 되면 앱의 설정 화면, 알림 설정 같은 앱 고유 기능에 접근할 수 없게 됩니다. 저도 궁금해서 직접 확인해 봤습니다.
결론부터 말씀드리면, 웹페이지에서 링크로 앱의 메뉴를 호출하는 것이 가능합니다. 카페24 플러스앱에서는 Out-App Scheme이라는 방식을 제공하고 있어요.
웹 페이지의 링크에 특정 Scheme 값을 넣으면, 링크를 클릭할 때 앱의 설정 메뉴나 특정 화면을 바로 호출할 수 있습니다.
Out-App Scheme의 개념과 활용 방법, 그리고 주의할 점에 대해서 알아보도록 하겠습니다.
Out-App Scheme이란
Out-App Scheme은 웹 페이지에서 앱 내부의 특정 화면이나 기능을 호출할 수 있는 링크 방식입니다. 쉽게 말해, 일반적인 URL 링크처럼 <a> 태그에 Scheme 값을 넣으면 해당 링크를 클릭했을 때 웹 페이지가 아닌 앱의 특정 메뉴가 열리는 거예요.
카페24 플러스앱에서는 이 Out-App Scheme을 통해 설정 화면, 쿠폰함, 알림함, 알림 설정, 로그인 화면 등 앱 고유의 메뉴를 웹 페이지에서 호출할 수 있도록 지원하고 있습니다.
카페24 쇼핑몰에서 왜 필요한가
카페24 쇼핑몰의 플러스앱은 하이브리드 앱이에요. 쇼핑몰의 모바일 웹 페이지를 앱으로 패키징한 형태이죠. 그래서 앱의 화면 대부분은 웹 페이지로 구성됩니다.
여기서 문제가 생기는 경우가 있어요. 보통 앱에는 하단에 네비게이션 바가 있지만, 이 네비게이션은 웹 페이지 영역이 아니라 앱 자체에서 제공하는 영역이에요. 그래서 웹 페이지에서는 이 네비게이션에 접근할 수가 없죠.
많은 쇼핑몰에서는 웹 페이지와 앱에서 동일한 UX를 제공하기 위해 앱 고유의 하단 네비게이션을 숨기고, 웹 페이지에서 직접 네비게이션을 만들어 사용합니다. 이렇게 하면 웹과 앱 모두에서 동일한 네비게이션을 보여줄 수 있거든요.
하지만 이 방식을 선택하면 앱의 설정 메뉴에 접근하는 경로가 사라지게 됩니다. 앱의 설정 화면이나 알림 설정 같은 기능은 앱 네비게이션을 통해서만 접근할 수 있었으니까요. 바로 이때 Out-App Scheme이 필요합니다.
카페24 쇼핑몰 플러스앱에서 활용 방법
OUT app Scheme을 활용하는 방법은 간단합니다. 웹 페이지의 네비게이션이나 버튼에 일반 URL 대신 Scheme 값을 링크로 연결하면 돼요.
예를 들어, 웹 페이지의 하단 네비게이션에 “설정” 메뉴 버튼을 만들고, 해당 버튼의 링크에 설정 화면의 Scheme 값을 넣으면 됩니다. 고객이 이 버튼을 클릭하면 앱의 설정 화면이 열리게 되죠.
<a href="plus몰아이디://pushbox">앱 설정</a>카페24 플러스앱에서 제공하는 OUT app Scheme의 구체적인 Scheme 값과 호출 가능한 메뉴 목록은 카페24 공식 문서에서 확인할 수 있습니다.
Out-App Scheme 주소 형식
플러스앱의 Out-App Scheme 주소는 기본적으로 아래와 같은 형식을 따릅니다.
plus몰아이디://예를 들어, 플러스앱을 신청하고 사용하고 계신 몰아이디가 testmall인 경우 Scheme 주소는 다음과 같이 구성돼요.
plustestmall://plus 뒤에 카페24 쇼핑몰의 몰아이디를 붙이고, ://을 붙이는 것이 기본 구조입니다. 이 기본 주소 뒤에 호출하려는 화면의 경로를 추가하면 원하는 메뉴를 열 수 있죠.
주요 Out-App Scheme 목록
그럼 실제로 어떤 화면들을 호출할 수 있는지 살펴볼까요? 카페24에서 제공하는 주요 Out-App Scheme 목록은 다음과 같습니다.
| 호출 화면 | Scheme 주소 |
|---|---|
| 플러스앱 메인 화면 | plus몰아이디:// |
| 설정 > 쿠폰함 | plus몰아이디://coupon |
| 설정 > 알림함 | plus몰아이디://pushbox |
| 설정 > 알림 설정 | plus몰아이디://pushsetting |
| 설정 > 로그인 화면 | plus몰아이디://login |
만약 몰아이디가 testmall이라면 실제 사용하는 Scheme은 이런 식이 되겠죠.
| 호출 화면 | 실제 Scheme 예시 |
|---|---|
| 메인 화면 | plustestmall:// |
| 쿠폰함 | plustestmall://coupon |
| 알림함 | plustestmall://pushbox |
| 알림 설정 | plustestmall://pushsetting |
| 로그인 화면 | plustestmall://login |
웹 페이지의 HTML 소스코드에서 <a> 태그의 href 속성에 위 Scheme 값을 넣으면, 고객이 해당 링크를 클릭했을 때 앱의 해당 화면이 바로 열리게 됩니다.
그리고 제가 카페24 쇼핑몰에 1:1 문의를 해본 결과 필요한 상황을 문의하면 디자인 소스코드를 전달받을 수도 있을 것 같네요. 플러스앱 관련 커스터마이징이 필요하다면 적극적으로 문의해 보시는 것을 권장합니다.
Out-App Scheme 활용 시 알아둘 점
OUT app Scheme을 활용할 때 알아두면 좋은 사항들이 있습니다.
첫 번째로, 이 Scheme 링크는 앱 환경에서만 동작합니다. 모바일 웹 브라우저에서는 동작하지 않기 때문에, 앱 접속인지 웹 접속인지 분기 처리를 해주는 것이 좋아요. 앱이 아닌 환경에서 Scheme 링크를 클릭하면 오류가 발생하거나 아무 반응이 없을 수 있거든요.
두 번째로, 플러스앱의 버전에 따라 지원하는 Scheme이 다를 수 있습니다. 카페24에서 플러스앱을 업데이트하면서 새로운 Scheme이 추가되거나 변경될 수 있으니, 공식 문서를 참조하여 최신 정보를 확인하는 것이 좋습니다.
세 번째로, 다른 앱 패키징 솔루션을 사용하고 있다면 해당 솔루션에서 제공하는 별도의 Scheme 방식이 있을 수 있어요. 카페24 플러스앱의 OUT app Scheme은 카페24 플러스앱 전용이라는 점을 참고하세요.
웹 페이지에서 앱의 메뉴를 호출하는 것이 가능한지 고민하고 계셨다면, 이제 고민하지 마시고 카페24 플러스앱의 Out-App Scheme을 활용해 보세요. plus몰아이디:// 형식의 간단한 링크 설정만으로 웹 페이지에서 앱의 설정 화면, 쿠폰함, 알림 설정 등 앱 고유 기능을 바로 호출할 수 있습니다.
앱과 웹에서 동일한 고객 경험을 제공하는 것은 쇼핑몰 운영에 있어서 중요한 부분이죠. Out-App Scheme을 잘 활용하면 그 고객 경험의 일관성을 유지하면서도 앱의 기능을 충분히 활용할 수 있습니다.
