Customer Satisfaction
고객만족센터
친절하고 빠른 응대와 실시간 정보공유로
최적화된 의사 소통의 공간과 정보제공의 장을 제공해 드립니다.

FAQ

FAQ

솔루션을 이용하는 회원님들이 가장 많이 문의하시는 내용.

게시글 검색
[APP관련] 하이브리드 APP 소스 적용 방법 안내, APP에서 사용 가능한 함수 안내 
조회수:1602
2020-08-25 19:11:47

 

켈리컴퍼니 솔루션을 통해 반응형웹 및 모바일웹구축시 하이브리드 앱 적용에 대해서 알아보도록 하겠습니다.

 

1. 관리자 모드로 로그인 후 [APP관리 > 고객APP 관리 > 마켓 등록 요청]에서 APP 개발의뢰를 합니다.

의뢰시 아래와 같이 이미지는 사이즈에 맞춰서 첨부해주셔야 합니다.

샘플파일 안내 : http://wdev.kellycompany.kr/admin/img/app_sample.zip

 

 

 

* 본 서비스는 부가서비스이므로 비용은 별도로 문의 바랍니다.

 

2. 앱개발이 완성 되었다면 실제 설치 테스트를 해야 하므로 스마트폰으로  홈페이지로 접속해 보시기 바랍니다.

 

 

 

3. 앱을 설치하고 실행하면 아래와 같이 앱이 실행됩니다.

 

 

 

위 화면은 아이폰5s에서 캡쳐한 화면입니다. 보시면 뭔가 이상하다라는 느낌이 많이 들겁니다.

그리고 스마트폰 특성상 자바스크립트 실행이 PC보다 느리기 때문에 각종 메뉴 펼침 및 페이지 이동이 느리다라는것을 느끼실겁니다.

이런점을 보안하기 위해  추가적으로 작업해줘야 할것이 몇가지 있습니다.

(신규 반응형웹 및 모바일웹은 기본적으로 하이브리드 앱까지 고려해서 코딩되어 있기 때문에 따로 수정 할 부분은 없습니다.  단, 맞춤제작 또는 예전에 구축한 모바일웹인경우 수정해주세요)

 

4. 웹용 네비게이션 메뉴 삭제

모바일웹에서 네비게이션 메뉴는 다양한 스크립트를 포함하고 있기 때문에 터치가 잘안되거나, 느린경우가 많습니다.

이런 네비게이션을  네이티브앱으로 처리하는것이 효과 적입니다.

네비게이션이 출력되는 부분을 찾아서 아래와 같이 소스 수정해주세요.

(보통 네이게이션 소스는 스킨에 있는 경우가 많으므로 [디자인관리 > 고급 디자인 관리 > 스킨 관리]으로 이동해서 확인 바랍니다.)

 

 

수정전 : <header id="header">수정후 : <header id="header" cond="!$app_conn_yn">

 

그리고 앱에서 어떻게 출력되는 지확인 바랍니다.

 

 

위 캡쳐화면을 보면 모바일웹에서 출력되던 메뉴바가 없어졌습니다.

 

원리는 소스에 추가했던  $app_conn_yn 은 앱으로 접속한경우 1을 반환하고 일반 PC 및 모바일웹으로 접속한경우 0을 반환하고 있습니다.

그래서  cond="!$app_conn_yn"  태그 삽입시 앱이 아닌경우에만 실행하게 되는것입니다. (앞에 느낌표 (!)를 붙이게 되면 조건문이 '참'인경우에는 실행하지 않고, '거짓'인경우에만 실행하도록 하는 반대 구문입니다.)

 

5. 앱용 네비게이션 메뉴 만들기

상단 네비게이션이 출력되지 않도록 처리했기때문에 어떤 페이지도 이동 할수 없는 상황이므로 앱용  네비게이션을 만들어 보도록 하겠습니다.

[APP관리 > 고객APP 관리 > 기본 환경설정]으로 이동해서 아래 같이 환경설정값을 설정 해주세요.

 

 

위 설정값중 "오른쪽 메뉴 사용"은 [사용함]으로 선택하고,  접속 주소는 /APP/menu_right.htm 을 입력합니다.

나머지 로고 및 색상, 아이콘 이미지는 여러분의 취향대로 수정하시기 바랍니다.

그리고 아래 [Right 서브 메뉴] 탭을 클릭 후 [샘플디자인]을 참고해서 소스를 불러와서 취향에 맞게 수정 하시기 바랍니다.

 

 

여기까지 작업 하였다면, 실제 앱에서 어떻게 구동되는지 확인해보시기 바랍니다.

(환경설정 및 디자인 소스 수정시 반드시 앱을  완전히 종료 후 다시 실행해줘야 합니다.)

 

 

이렇게 해서 일반웹에서 사용하던 네비게이션메뉴를 우측 메뉴에 모두 넣을 수 있습니다.

 

 

6. 페이지 전환 효과 구현

고객이 스마트폰으로 웹서핑시 아무래도 PC보다 느리기 때문에 답답함을 많이 느끼실겁니다.

예를 들어 메인 페이지에서 다른페이지로 이동 후 뒤로가기 버튼 클릭시 다시 로딩해야 하므로, PC보다 2~3배 느릴수 밖에 없습니다.

이런 점을 보안하기 위해 이전 페이지를 보존하는 방법이 있습니다.

예를들어 메인페이지에서 아래와 같은 단순링크를 앱용으로 변경하세요.

 

수정전 : <a href="/shop_info/usage.htm">이용약관</a>수정후 : <a href="/shop_info/usage.htm"|cond="!$app_conn_yn" href="javascript:app_inweb_url('이용약관','/shop_info/usage.htm')"|cond="$app_conn_yn" >이용약관</a>

 

소스에 대해서 잠깐 설명 드리겠습니다.
$app_conn_yn 변수는 앱으로 접속한경우 1을 반환하고, 그렇지 않은경우 0을 반환하게 되어 있습니다.

즉 앱으로 접속시 소스는 아래와 같이 적용 됩니다.

 

<a href="javascript:app_inweb_url('이용약관','/shop_info/usage.htm')" >이용약관</a>

 

앱이 아닌경우 아래와 같이 적용 됩니다.

 

<a href="/shop_info/usage.htm">이용약관</a>

 

이렇게 소스를 수정하고 앱에서 접속해서 [이용약관]버튼을 클릭해보시기 바랍니다.

위 화면을 보면  새로운 모달뷰가 나오면서 페이지 로딩이 되고, 상단 툴바에서 뒤로가기 버튼 클릭시 모달뷰가 닫히면서 보존하고 있던 메인페이지를 그대로 보여주고 있습니다.

 

 

7. 로그인 모달뷰 만들기

로그인 페이지를 앱처럼 만들어 보겠습니다.

기존 로그인 페이지 이동 주소를 다음과 같이 수정해주세요.

 

수정전 : <a href="/login">로그인</a>수정후 : <a href="/login"|cond="!$app_conn_yn" href="javascript:app_login()"|cond="$app_conn_yn" >로그인</a>

 

app_login() 함수는 켈리컴퍼니 솔루션안에 내장된 함수 이며, 이 함수 실행시 앱에서는 아래와 같이 로그인 모달뷰가 나타나게 됩니다.

 

 

하지만 막상 실행해보면 사이즈가 맞지 않고 일반 로그인 페이지가 출력되고 있습니다.

아무래도 앱용 로그인폼을 따로 디자인해야 할것 같네요.

[디자인관리 > 고급 디자인 관리 > 세부 화면 디자인]으로 이동해서  "로그인 폼"의 소스를 아래와 같이 수정해주세요.

 

 

기존 소스

 

{$login_form_s} <div class="sub_hgroup member_login">  <div class="eng">MEMBER LOGIN</div>.... 생략..... </div>{$login_form_e}

 

수정후 소스

 

{$login_form_s}<div cond="!$app_conn_yn"> <div class="sub_hgroup member_login">  <div class="eng">MEMBER LOGIN</div>.... 생략..... </div></div>

 

<div cond="$app_conn_yn">
 <div class="sub_hgroup member_login">
  <div class="eng">MEMBER LOGIN</div>
.... 생략.....
 </div>
</div>
{$login_form_e}

 

 

위 소스에서 $app_conn_yn 변수 역활을 유심히 보시기 바랍니다.

앞서 말씀드렸듯이 앱으로 접속시 1을 반환하고 그렇지 않은경우 0을 반환하게 되므로 $app_conn_yn 의 값에 따라 소스가 다르게 출력되게 수정해줘야 합니다.

 

즉 한페이지에  일반 모바일웹용 디자인과  앱용 디자인이 같이 있고 $app_conn_yn 변수에 따라 다르게 출력 되고 있는것입니다.

이런식으로 디자인 소스 수정하게 되면 아래와 같이 앱용 로그인폼이 됩니다.

 

 

 

8.  타사이트를 기본 브라우져 여는 방법

앱안에서 제휴사 사이트 및 외부 사이트를 링크를 걸게되면 앱안에서 이동하기때문에 자칫 앱이 엉뚱한 사이트로 빠져버릴수도 있습니다.

이런점을 보안하기 위해 특정 링크에 대해서는 앱안에서 이동하는게 아닌 스마트폰의 기본 브라우져로 이동해야하는경우가 있습니다.

 

수정전 : <a href="http://www.naver.com">네이버 바로가기</a>수정후 : <a href="http://www.naver.com"|cond="!$app_conn_yn" href="javascript:app_default_browser
('http://www.naver.com')"|cond="$app_conn_yn" >네이버 바로가기</a>

 

 

 

9. 타사이트를  앱안에서 새창으로 여는 방법

위에서 설명드린 app_default_browser() 함수는 기본 브라우져를 띄운 상태에서 다시 앱으로 돌아오려면 바탕화면으로 갔다가 다시  앱을 실행해야하는 불편함이 있을수 있습니다. (이런 불편함은 곧 앱 사용률의 저하로 이어지게 되죠.)

이런점을 보안하기 위해 앱안에서 타사이트를 새창으로 띄우려면 app_outweb_url('제목','이동경로')함수를 이용하면 됩니다.

 

수정전 : <a href="http://www.naver.com">네이버 바로가기</a>수정후 : <a href="http://www.naver.com"|cond="!$app_conn_yn" href="javascript:app_outweb_url('네이버','http://www.naver.com')"|cond="$app_conn_yn" >네이버 바로가기</a>

 

 

 

 

위 캡쳐화면과 같이 네이버로 이동하더라도 [뒤로가기] 버튼 클릭시 바로 앱 화면으로 바로 돌아올수 있기 때문에 앱을 사용하는 고객입장에서는 서핑하기가 편리해집니다.


PS. 위에서 설명드린 app_inweb_url('제목','이동경로') 함수와 app_outweb_url('제목','이동경로') 함수는 사용방법과 동작은 동일하지만 지원되는 기능이 다릅니다.

app_inweb_url() 함수는 켈리컴퍼니 솔루션에서 제공되는 GPS기능, SNS연동기능, 외부API연동, 각종 모달뷰등이 지원되는 반면에 app_outweb_url()은 순수 기본 브라우져이기 때문에 아무런 기능이 작동 되지 않습니다.

즉 내부 사이트 이동은 app_inweb_url()함수를 이용해야 하고 타사이트 이동은 app_outweb_url()을 사용하는것이 좋습니다.

 

 

 

10. 지원되는 함수 안내

위에서 설명드린 함수이외에 제공되는 함수는 다음과 같으며, 사용방법은 위 설명과 동일 합니다.

 

<a href="javascript:app_home()">홈으로</a><br><a href="javascript:app_login()">로그인</a><br><a href="javascript:app_logout()">로그아웃</a><br><a href="javascript:app_default_browser('http://www.naver.com')">기본브라우져 열기</a><br><a href="javascript:app_inweb_url('이용약관','/shop_info/usage.htm')">내부 모달뷰 열기</a><br><a href="javascript:app_outweb_url('네이버','http://www.naver.com')">타사이트 모달뷰 열기</a><br><a href="javascript:app_submenu_hide()">현재 활성화되어있는 모달뷰를 닫습니다.</a><br><a href="javascript:app_reload()">현재 모달뷰 새로고침</a><br><a href="javascript:app_page_all_reload()">모든 모달뷰 새로고침</a><br><a href="javascript:app_minishop_admin()">판매자 관리자모드 바로가기 (오픈마켓전용)</a><br><a href="javascript:app_toast(3,'출력 메세지')">안내 메세지를 풍선말처럼 출력 합니다.</a><br><a href="javascript:app_menu_left()">왼쪽메뉴 열기</a><br><a href="javascript:app_menu_right()">오른쪽메뉴 열기</a><br><a href="javascript:app_menu_bottom()">하단메뉴 열기</a><br><a href="javascript:app_close()" cond="$device_os=='android'">종료 (안드로이드만 지원)</a><br>

 

 

위 함수는 2015.01.30 이후에 앱제작 요청한경우 모든 기능을 사용 가능 합니다.

앞으로  GPS 추적 방법,  거리순으로 업체정보 출력 등 다양한 기능이 추가될 예정이오니, 업데이트시 본 매뉴얼을 다시 참고 바랍니다.

 

 

게시글 검색
  • 번호
    제목
    날짜
    조회수