매뉴얼

친절한 상담, 빠른 답변

견적문의, 기능상담 등 모든 궁금증을 해결해 드립니다.

Page : Home 고객지원 매뉴얼

총 202건, 8/21 페이지

[외부 API] 네이버 아이디 로그인 연동하는 방법

1. 네이버에 로그인 후 https://developers.naver.com/apps/#/wizard/register에서 애플리케이션을 등록합니다.

애플리케이션을 등록하려면 휴대폰 인증과 회사이름을 작성하셔야 합니다.

 

 

 

2. 애플리케이션 등록란에서 (네아로 - 네이버 아이디로 로그인)을 선택하여 추가합니다.

 

 

 

추가 후 하단에 보시면 [환경 추가] 선택 박스가 있습니다. 해당 박스에서 PC웹, Mobile 웹을 선택하여 추가해 주세요.

서비스 URL에는 적용할 홈페이지의 도메인 주소를 적용해주세요.

서비스 url 및 도메인에 www가 누락되는 경우 정상적으로 적용이 되지 않으니,

도메인을 설치한 경우 반드시 www를 붙여서 등록해주세요.

오류가 가장 많이 발생하는 경우이니 반드시 등록한 도메인과 동일하게 기재를 해주세요.

Callback URL에는 적용할 홈페이지의 도메인주소와 /API/naver/login_exec.php를 이어서 적어주시면 됩니다.

마찬가지로 www가 포함된 도메인이라면 www를 붙여서 등록해주세요.

 

 

 

주의! 네이버 로그인 연동하려면 실제 홈페이지 주소와 위 사이트 URL과 동일해야만 정상 작동 됩니다.

 

굿웹에이전시 솔루션에서는 http://id.good-web.co.kr 해도 접속 되고 도메인을 설치한 경우 http://www.mydomain.com 등 메인을 추가 설치 할수 있습니다.

예를들어 위 키발급시 사이트URL에 http://www.mydomain.com 으로 발급하는경우, http://www.mydomain.com 에서만 네이버 로그인 연동이 가능하지만 http://id.good-web.co.kr 에서는 로그인 되지 않습니다.

CallBackURL은 http://자신의도메인/API/naver/login_exec.php 을 입력하시면 됩니다.

 

4. 등록이 완료되면 Application으로 이동하여 등록한 내 애플리케이션을 선택합니다. 개요란에 보시면 Client ID와 Client Cecret 키가 있습니다. 2개의 키를 작성해두시거나 복사해 주세요.

 

 

 

5. 굿웹에이전시 솔루션 관리자 모드에서 "외부 API 연동" 모듈을 설치 합니다.

설치 방법은 [프로그램 SHOP > 프로그램 추가설치] 에서 찾아보시면 아래와 같이 설치 할수 있습니다. (자세한 설치방법은 굿웹에이전시 본사로 별도 문의 바랍니다.)

 

 

6. 설치 후 [프로그램 SHOP > 프로그램 환경설정 > 외부 API 연동]으로 이동 후 위에서 복사해두었던 ClientID, ClientSecret 정보를 붙여 넣습니다. (Ctrl + V)

 

여기까지 작업 했다면 연동 작업은 모두 마무리 되었습니다.

실제 로그인 페이지를 만들어 보겠습니다. (마지막에 네이버 검수요청을 하셔야 됩니다. 하단에 정보를 확인 바랍니다.)

 

 

5. [디자인관리 > 고급 디자인 관리 > 세부 화면 디자인] 으로 이동하고 아래와 같이 "로그인" 페이지를 선택 합니다.

 

소스 수정 모드에서 아래와 같이 네이버 로그인 버튼을 추가 합니다.

이때 임의로 로그인 버튼디자인을 수정하게 되면 네이버 규정상 승인 거절이 될 수 있으므로, 반드시 네이버 BI 디자인 그대로 사용할 것을 권장합니다.

 

<a href="javascript :naver_login_form()"><img src='/API/naver/img/naver_g_a_login.PNG' width=120 border=0></a><a href="javascript :naver_login_form()"><img src='/API/naver/img/naver_g_a_logout.PNG' width=120 border=0></a><a href="javascript :naver_login_form()"><img src='/API/naver/img/naver_g_b_login.PNG' width=70 border=0></a><a href="javascript :naver_login_form()"><img src='/API/naver/img/naver_g_c_login.PNG' width=200 border=0></a><a href="javascript :naver_login_form()"><img src='/API/naver/img/naver_w_a_login.PNG' width=120 border=0></a><a href="javascript :naver_login_form()"><img src='/API/naver/img/naver_w_a_logout.PNG' width=120 border=0></a><a href="javascript :naver_login_form()"><img src='/API/naver/img/naver_w_b_login.PNG' width=70 border=0></a><a href="javascript :naver_login_form()"><img src='/API/naver/img/naver_w_c_login.PNG' width=200 border=0></a>

 

   

   

 

++ 네이버 검수요청 방법 ++

 

네이버 버튼을 삽입한 후 검수 정보를 제출해야하는데요.

검수에 앞서 테스트 아이디를 등록을 하셔야 됩니다.

 

 

멤버관리에 접속을 하신뒤 테스트 아이디를 등록을 합니다. 이 아이디를 가지고 네이버 검수요청을 하시면 됩니다.

 

Application > 네아로 검수상태 페이지로 접속합니다.

 

 

1. 검수요청 가이드 부분에 체크를 합니다.

2. 제공 정보처 확인 부분에는 네이버 로그인 후 회원정보 수정 페이지를 캡쳐를 해서 올려주시면 됩니다.

위의 이미지는 개인정보라 블러처리를 했지만 실질적으로는 화면 그대로 캡쳐를 해서 올려주시면 됩니다.

 

  

 

서비스 적용 형태 확인 부분에는 단순 로그인 인증에 적용이라고 체크를 하시고  파일을 캡쳐를 해주셔야 되는데요

파일캡쳐부분은 아래 이미지처럼 캡쳐를 해서 올려주시면 됩니다.

그리고 추가 제출 서류 확인에는 없음으로 하고 하단에 검수요청을 하시면 됩니다.

검수기간은 대체적으로 1~2일정도 소요가 됩니다.

 

1. 네이버로그인 버튼이 적용된 화면 + 로그인버튼시 팝업

아래 이미지 처럼 로그인 페이지에서 네이버로그인 버튼 과 해당 버튼을 클릭했을때 팝업되는 창이 같이 나오도록 캡쳐합니다.

 

2. 로그인 시 개인정보 동의 화면 캡쳐

 

 

3. 동의 후 홈페이지 > 마이페이지의 회원정보 수정 화면

 

 

 

 

만약 아래와 같이 접근이 안되는경우 아래 사항을 점검 바랍니다.

 

1. 등록된 도메인 주소와 실제운영중인 도메인주소가 다른경우
예를들어 네이버에 등록된 주소가 http://abcd.good-web.co.kr 이고 실제 운영되는 사이트 주소가 http://www.mydomain.com 이라면 안됩니다. 그리고 띄어쓰기 및 대문자가 들어가면 되므로,

신경써서 입력하시기 바랍니다.

 

2. 이미지 첨부시 사이즈가 140px * 140px , 용량 500k 이하로 첨부해야 합니다. 그렇지 않은경우 위와 같이 이용 제한 페이지가 출력 됩니다.

 

3. 휴대폰 인증을 하지 않은경우

 

그래도 안된다면, 해당 애플리케이션을 삭제 후 다시 처음부터 시도해보시기 바랍니다.

 

 

수고하셨습니다.

[외부 API] 구글 로그인 연동

1. 구글에 로그인 후 개발자 센터에서 프로젝트를 등록합니다.

https://console.developers.google.com/

 

 

 

 

 

 

2. 프로젝트 등록 후 OAuth 동의 화면에 대한 설정을 합니다.

애플리케이션 이름과 승인된 도메인에 구글 로그인을 연동할 사이트 도메인을 http 를 포함하여 입력 후 저장버튼을 클릭합니다.

 

 

3. 동의 화면 설정 후 사용자 인증 정보에서 사용자 인증 정보 만들기를 클릭 한 후 OAuth 클라이언트 ID 를 클릭합니다.

 

 

4. OAuth 클라이언트 ID 만들기 화면에서

애플리케이션 유형은 웹 애플리케이션을 선택하고

승인된 자바스크립트 원본은 http를 포함한 사이트 도메인을 입력하고

승인된 리디렉션 URI 는 http를 포함한 http://사이트 도메인/API/google_api/login_exec.php 를 입력합니다.

 

 

5. 생성된 OAuth 클라이언트 이름을 클릭합니다.

 

 

6. 클라이언트 ID와 클라이언트 보안 비밀 번호를 확인 한 후

 

 

사이트 관리자 모드 [프로그램샵 > 프로그램 환경설정 > 외부 API 연동] 에서 값을 입력 합니다.

 

 

* 외부 API 연동  메뉴가 없을 경우 [프로그램샵 > 프로그램 SHOP > 프로그램 추가 설치] 에서 외부 API 연동을 설치하시면 됩니다.

 

 

7. [디자인관리 > 고급 디자인 관리 > 세부 화면 디자인] 페이지에서 MY PAGE - 로그인 페이지를 선택합니다. 

 

 

소스 수정 모드에서 아래와 같이 구글 로그인 버튼을 추가 합니다.

<a href="javascript:google_login_form()">구글 로그인</a>

 

수고하셨습니다.

[외부 API] [신규 기능업데이트] 외부 프로그램 연결하기
저희 솔루션에서는
다양한 프로그램을 직접 개발할 수 있도록 여러가지 프로그램을 제공하고 있습니다.
 
그 중 대표적인 것에는,
내가 원하는 정보를 입력받을 수 있는 맞춤전송폼과
목록형, 앨범형, 블로그형 등 다양한 형식으로 보여줄 수 있는 맞춤게시판이 있습니다.
 
그런데 만약,
이미 다른 사이트에서 개발해서 만들어 둔 프로그램을 솔루션에 적용하려면 어떻게 해야 할까요?
 
이전에는 해당 기능을 분석해서 맞춤게시판에 맞추어서 새로 작업을 하였습니다.
 
하지만 이미 완성되어 있는 프로그램을 솔루션에 맞게 재작업하는 것은
불필요한 시간과 비용의 낭비를 가져오게 됩니다.
 
그래서, 외부의 프로그램을 솔루션에 바로 적용할 수 있도록 해당 기능을 개발하게 되었습니다.
 
외부프로그램 연결을 사용하면,
타 사이트에 있는 프로그램을 손쉽게 연결할 수 있습니다.
 
이번 매뉴얼에서는 기능 설정 방법과 사용법을 알아보도록 하겠습니다.
 
1. 외부 프로그램 연결하기 기능의 위치는?
 
[디자인관리 > 전문가 환경설정 > 외부프로그램 연결페이지로 들어가주세요.
 
 
2. 외부 프로그램을 가져오는 방법은?
 
먼저 우측 하단에 있는 외부 프로그램 등록 버튼을 누르면,
다음과 같이 정보를 입력하는 페이지가 나온답니다.
 
여기서 고유코드, 제목, 외부 프로그램 URL 을 등록해주세요.
 
아참!
외부 프로그램 URL은 꼭 전체경로로 등록하셔야 정상적으로 연결이 됩니다.
 
 
 
전부 입력 후 저장 버튼을 누르면 다음과 같이 등록됩니다.
 
프로그램 URL을 보시면,
원본 URL(원본사이트의 URL 주소), 연결 URL(해당 사이트에서 사용하기 위한 URL주소) 정보를 확인할 수 있습니다.
 
그리고 이렇게 생성된 프로그램은 바로 아래에 있는 소스를 사용해서,
메인페이지, 세부페이지 구분 없이 원하는 페이지에 추가할 수 있습니다.
 
 
 
자~ 이렇게 외부프로그램이 간단하게 연결이 되었습니다.
 
하지만 연결된 페이지가 정상동작하려면,
실제로 해당 프로그램이 처리되는 페이지까지 함께 연결해주어야 합니다.
 
3. 외부프로그램의 처리 페이지를 연결해 봅시다.
 
먼저 외부프로그램의 소스를 확인해서 처리되는 페이지의 주소를 확인합니다.
 
예시 프로그램의 소스를 보면 <form> 이 동작할 때
/shop_contents/myreg_exec.php 에서 처리하도록 작업되어 있습니다.
 
이 부분을 복사해서 처리페이지를 연결해보도록 합시다.
 
 
또 다시 외부 프로그램 등록 버튼을 눌러주세요.
 
먼저, 고유코드와 제목을 입력한 후
외부 프로그램 URL 부분에 미리 복사해둔 정보를 입력해주세요.
 
반드시 도메인을 포함한 전체 경로를 등록해주세요!!
 
 
전부 입력후 저장 버튼을 누르면 처리페이지도 등록이 완료가 됩니다.
 
 
 
4. 위에서 추가된 url로 처리 페이지의 경로를 변경합니다.
 
외부 프로그램이 동작할 때 솔루션에서 만들어진 페이지를 거쳐서 처리가 되려면,
외부 사이트의 <form> 소스에서 경로를 변경해주어야 합니다.
 
/shop_contents/myreg_exec.php 로 등록되어 있던 부분을,
조금전 등록한 외부프로그램의 연결 URL로 변경해주세요.
 
/shop_etc/out_program_load.htm?out_code=exreg2
 
 
이제 외부프로그램 등록이 모두 완료되었습니다.
 
그럼 이번에는
이렇게 추가된 외부프로그램을 다른 페이지에서 사용할 수 있도록 추가해보도록 할께요.
 
5. 추가페이지를 하나 생성해서 연결해봅시다.
 
먼저,
위에서 만들어진 항목중 외부 전송폼 가져오기 의 소스를 복사합니다.
 
 
 
그리고 나서,
[디자인관리 > 고급 디자인 관리 > 추가 페이지 관리] 에서 페이지 새로 만들기를 클릭합니다.
 
기본 정보들을 입력한 후,
내용을 입력하는 부분에 방금 복사해둔 소스를 붙여넣습니다.
 
 
 
저장한 후,
방금 만든 페이지에 접속해봅시다.
 
원본사이트와 동일한 프로그램이 출력되는것을 확인할 수 있습니다.
 
 
 
 
6. 그럼 실제로 어떻게 동작하는 걸까요?
 
실제로 정보를 입력해보고,
어떻게 처리가 되는지 같이 확인해보도록 합시다.
 

1)
먼저 전송폼의 내용을 입력한 후 확인 버튼을 클릭합니다.
 
 
2)
'신청이 완료되었습니다.' 가 출력되는걸 보니 정상적으로 저장이 된 것 같네요.
 
 
 
3)
확인 버튼을 누르면 실제로 저장이 완료된 정보가 화면에 출력됩니다.
 
 4)
 
4)원본사이트에 들어가서 확인해보면
자료가 정상적으로 등록된 것을 확인할 수 있습니다.
 
 
 
7. 기본적인 처리 프로세스는 다음과 같습니다.
 
1)
연결된 외부 전송폼 가져오기 페이지에서 내용을 입력하고 저장을 합니다.
/shop_etc/out_program_load.htm?out_code=exreg
 
 
 
2)
원본사이트의 <form> 소스에 등록한 처리페이지가 동작합니다.
/shop_etc/out_program_load.htm?out_code=exreg2
 
 
 
3)
연결해둔 처리페이지가 동작한 이후,
다시 원본URL의 처리페이지로 이동해서 동작하게 됩니다.
http://manual.anybuild.kr/shop_contents/myreg_exec.php
 
 
8. 추가정보 전달하기
 
추가페이지 (또는 해당 소스를 붙여넣은 페이지)에서 다음 소스를 수정하면,
프로그램 동작시 원하는 정보를 추가로 전송할 수 있습니다.
 
$program_set[add_data] = ""; // name=value&name=value&name=value 와 같이 전달 할 값을 입력해주세요. 세션 및 디바이스 정보는 자동 전송 됩니다.
 
 
9. 주의사항
 
외부프로그램 연결 기능을 설명하기 위해서, 굿웹에이전시 솔루션으로 제작된 사이트를 이용하였습니다.
 
하지만 외부프로그램 연결 기능은
당사의 솔루션에서 가져온 프로그램만 동작하는것이 아니라...
외부의 어떠한 사이트에서 만든 프로그램도
동일하게 연결해서 사용할 수 있습니다.
 

이 때 주의할 점이 몇가지 있는데...
 
1)
외부사이트는 본인이 직접 수정이 가능한 사이트여야 합니다.
프로그램을 연결하는 과정에서 외부사이트의 원본소스를 수정할 수 있어야 정상적으로 동작하기 때문입니다.
 
2)
데이터를 주고받는 과정에서 처리페이지의 소스를 일부 수정해야할 수도 있습니다.
단순한 연결만으로는 완벽한 호환을 보장하지 않으므로,
데이터를 주고받을 때 자료가 변형되지 않도록 암호화 및 처리방식을 동일하게 수정해야할 수 있습니다.
 
 
 
 
 

지금까지 외부프로그램 연결하는 기능을 살펴보았습니다.
 
이제는 솔루션에 기능을 추가하기 위해서 재작업을 하지마시고,
외부프로그램 연결기능으로 간단하게 연결하셔서 사용하시기 바랍니다.
 
 
[APP 관련] 맞춤 xml 데이터 가져오기
맞춤 xml 데이터를 다른 페이지에서 가져올 수 있는 코드입니다.
 
{@$program_set[xml_code] = "xml_code"; // XML고유코드$my_xml_row = program_load(MY_XML);console.log($my_xml_row); // 데이터 확인하기@}
[APP 관련] 안드로이드 플레이 마켓에 APK 파일 등록 방법 안내

 

1. 구글 플레이 마켓에 등록 하려면 우선 크롬을 먼저 설치 해야 합니다.

아래 링크를 통해 크롬을 설치 해주세요.

https://www.google.com/intl/ko/chrome/browser/features.html

 

2. 크롬을 실행하고 아래와  같이 회원가입 합니다.

 

 

 

 

3. 회원가입 하신 후 로그인 하세요. 그리고 아래 링크로 이동 하세요.

https://play.google.com/apps/publish/signup/

 

 

 

4. 제목을 입력하고 [APK파일 업로드] 버튼을 클릭 합니다.

 

 

5. [프로덕션으로 첫 번째 APK 업로드] 버튼을 클릭 합니다.

 

컴파일된 APK 파일을 업로드 합니다.

 

 

 

6. APP에 대한 내용등을 입력 합니다.

 

 

7. 캡쳐 이미지 및 아이콘을 첨부합니다. 이때 아이콘 이미지 크기는 정확하게 수정한뒤 업로드 하시기 바랍니다.

 

 

 

 

 

 

8. 개인정보 취급 방침은 반드시 등록 하셔야 합니다. 그리고 저장 합니다.

 

 

9. [가격 및 배포] 탭에서  "대한민국"을 선택하고 각종 약관 동의 후 저장 합니다.

 

 

 

10. 출시 버튼을 클릭 합니다.

 

아래와 같이 출력된다면 모두 정상적으로 등록된것입니다.

최소 하루이상 기다려보시고 등록되었는지 확인해보시기 바랍니다.

간혹 거절 되는경우가 있는데 사유를 보시고 다시 업로드 하시면 됩니다.

 

 

11. APP 등록을 모두 마쳤다면 실제로 정상 등록 되었는지 확인 해봐야 합니다.

https://play.google.com/store 에서 앱제목으로 검색해보시기 바랍니다.

처음 앱을 등록하고 나면 첫페이지에 나오지 않고 뒤쪽에 나타나므로 잘 찾아 보시기 바랍니다.

검색량이 어느정도 나오면 아래와 같이 앞쪽으로 진열되므로, 진열순서에 대해서는 시간을 가지고 기다려 보시기 바랍니다.

 

 

해당 앱을 클릭해서 상세 보기 화면으로 이동 합니다.

 

13. 상세보기 화면에서 주소창에 있는 주소를 복사합니다. (ctrl+c)

 

 

 

14. 굿웹에이전시 솔루션 관리자 모드에서 [APP관리 > 고객APP 관리 > 기본환경설정]으로 이동 후 "플레이스토어 바로가기"에 붙여 넣어주세요 (ctrl+v)

 

이렇게 바로가기 url 을 등록 해놓게 되면, 고객이 모바일웹으로 접속시 아래와 같이 앱설치 팝업창이 뜨게 됩니다.

샘플 주소 :  http://hillstate01.good-web.co.kr/

 

 

수고 많으셨습니다.

 

[APP 관련] 윈도우에서 안드로이드 스튜디오 실행시 에러 발행시 해결방법 ( No JVM installation found. Please install a 64-bit JDK. )

No JVM installation found. Please install a 64-bit JDK.

If you already have a JDK installed, define a JAVA_HOME variable in Computer

> System Properties > System Settings > Environment Variables.

 

 

윈도우에서 안드로이드 실행시 위와 같이 에러 문구발생시 아래와 같이 설치해주세요.

1. 아래 사이트로 가서 최신 버젼 JDK를 다운받고 설치 합니다.

http://www.oracle.com/technetwork/java/javase/downloads/index.html

 

2.  내 컴퓨터 오른쪽 마우스 클릭 > 속성 > 고급시스템설정 에서 [고급]탭을 선택  후 [환경변수]를 클릭 합니다.

 

 

3. [새로만들기]를 클릭해서 JAVA_HOME 이라는 변수를 추가 합니다.

JAVA_HOME 은 JDK가 설치된 경로로 등록하시면 됩니다.  ( C:\Program Files\Java\jdk1.8.0_20 )

 

 

4. 이번엔 Path 를 찾아서 누른후 편집을 눌러주세요.

그후 ;%JAVA_HOME% 을 변수값 맨뒤쪽에 공백 없이 복사하여 붙여넣기 합니다. path  들과 구분하기 위해 ";" 세미콜론을 사용합니다.
Path-편집  -  ;%JAVA_HOME% 붙여넣기  -  확인클릭
 

 

 

5. 마지막으로 정상적으로 설정되었는지 테스트 해보세요.

( 윈도우키+r ) 입력 후 아래와 같이 cmd 실행해주세요.

 

명령 프롬프트 창에서 javac -version 입력해서 버젼 정보가 출력되면 정상적으로 설치 완료된 것입니다.

 

 

 

[APP 관련] 안드로이드 스튜디오 Error:The SDK Build Tools revision (19.0.3) is too low for project ':app'. Minimum requ

 

위와 같이 에러 발생시 아래와 같이 처리 해주세요.

 

아래 체크되어 있는 부분을 모두 선택해서  설치해주세요.

 

 

[APP 관련] 하이브리드 APP 소스 적용 방법 안내, APP에서 사용가능한 함수 안내

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

 

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

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

샘플파일 안내 : http://wdev.good-web.co.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 추적 방법,  거리순으로 업체정보 출력등 다양한 기능이 추가될 예정이오니, 업데이트시 본 매뉴얼을 다시 참고 바랍니다.

수고하셨습니다.

 

 

 

 

[APP 관련] [POS 연동] 매장에서 할인 쿠폰 발행 방법 (바코드 자동 생성)

* 본 매뉴얼은 pos 개발업체 또는 바코드 관련 개발이 가능한 경우에만 활용 가능 합니다.

 

오프라인매장에서 고객에게 할인 쿠폰을 발행하는 방법에 대해서 알아보겠습니다.

 

1. [APP관리 > 고객APP 관리 > Push 이벤트 관리]에서 아래와 같이 이벤트를 등록 합니다.

이때  바코드가 출력되도록 체크해주세요.

 

2. [APP관리 > 고객APP 관리 > APP 설치 현황]에서 고객에게 푸시 메세지를 전송 합니다.

 

3 스마트폰에서 푸시내용을 확인해보면 아래와 같이 바코드가 출력되고 있는것을 확인 할 수 있습니다.

 

 

바코드는 아래와 같은 양식으로 출력 됩니다.

[디바이스고유번호-이벤트번호]

예) 12345-123 , 4567-789

마이너를 기호(-) 를 중심으로 좌측은 디바이스고유번호가 되며, 우측은 이벤트 행사 번호 입니다.

만약 마이너를 기호(-)가 없이 숫자만 표시된다면, 푸시메세지 발송시 이벤트를 선택하지 않고 단일 발송한경우이며, 디바이스 고유번호만  출력하게 됩니다.

 

[APP 관련] [POS 연동] 매장에서 할인 쿠폰 발행 방법 (바코드 사용자 생성)

* 본 매뉴얼은 pos 개발업체 또는 바코드 관련 개발이 가능한 경우에만 활용 가능 합니다.

* 본 매뉴얼 보시기 전에  "바코드 간편 생성"을 먼저 확인해보시기 바랍니다. ( http://wdev.good-web.co.kr/bbs/faq/4716  )

 

간혹 pos 개발업체에서 임의로 바코드를 생성해야 하는경우가 있습니다.

이런경우 바코드를 임의로 생성 할수 있습니다.

 

 

1. [APP관리 > 고객APP 관리 > Push 이벤트 관리]에서 아래와 같이 이벤트를 등록 합니다.

이때 유형을 반드시 "HTML 소스입력" 으로 설정 하셔야 합니다.

아래는 위 입력된 소스 입니다.

 

매장오픈 기념 <br>1,000원 할인 행사 합니다. <br><br><p style='text-align:center'><img src='/API/barcodegen_v2.2.0/html/image.php?code=code128&o=1&dpi=72&t=30&r=3&rot=0&text={$bar_code}&f1=Arial.ttf&f2=12&a1=&a2=&a3={$bar_code}'><br><img src='/API/barcodegen_v2.2.0/html/image.php?code=code128&o=1&dpi=72&t=30&r=3&rot=0&text=ABCD123&f1=Arial.ttf&f2=12&a1=&a2=&a3=ABCD123'><br><img src="{@ echo qrcode_load($bar_code,3);  @}" /><br><br>디바이스 고유번호 : {$device_idx}<br>이벤트 고유번호 : {$event_idx}<br>자동생성 바코드 : {$bar_code}</p>

 

위 소스에 대해서 설명드리도록 하겠습니다.

해당 페이지에서 제공되는 기본 변수는  $device_idx, $event_idx, $bar_code  총 3가지 입니다.

이변수를 통해 바코드 및 큐알코드를 임의로 생성 할수 있습니다.

바코드는  &text=  와   &a3= 부분에 문자열을 입력하면 바코드로 자동 변환 되며 바코드 크기는 , &r=  값을 조절 하면 됩니다.

큐알코드는 qrcode_load() 에 문자열을 입력하면 자동으로 큐알코드가 생성되며, 크기조절은 뒤쪽 숫자값을 변경하면 됩니다.

 

2. [APP관리 > 고객APP 관리 > APP 설치 현황]에서 발송 테스트 해보시기 바랍니다.

 

3. 경우에 따라서는 회원정보가 필요 할수 있습니다. 이런경우 바코드를 2개 출력해야 합니다.

하나는 위 쿠폰관련된 바코드를 출력 하고 하나는 회원  고유번호를 출력해야 합니다.

회원 바코드는 아래 매뉴얼을 참고 해서 가져 올 수 있습니다.

http://wdev.good-web.co.kr/bbs/faq/4476

 

 

 

이렇게 생성된 바코드는 스캐너를 통해 인식후 별도 프로그램 처리해야 하는데 처리 방법은

관리자모드 로그인 후 [프로그램샵 > 프로그램 환경설정 > API 개발센터] 통해서 다양한 정보를 조회/수정/삭제 처리 할 수 있습니다.