질문/조언팁/리소스 공유

웹관련 지식이 많지 않은 일반적인 저와 같은 웹마스터들의 경우 직접 원하는 것을 구현하는 것은 쉽지 않지만 또 검색을 조금만 해보면 의외로 쉽게 구현 가능한 것들이 많습니다. 

 

오늘 소개하는 것도 비교적 쉽게 직접 구현이 가능한 범위에 있어 소개해 드리려고 합니다. 지금 소개하는 것은 저희 사이트에 적용한 용도 외 다양한 용도로 사용할 만한 것들이 많이 포함되어 있어 소개하게 되었습니다.

 

1.이 팁을 활용하여 다른 곳에 응용할 수 있는 중요 부분

  • 엘리먼트를 고정된 위치에 출력하는 기술(html/css)
  • 특정한 위치에서 엘리먼트가 나타나고 사라지는 기술(javascript)
  • useragent를 확인하고 활용하는 방법
  • cookie를 사용해서 출력을 제어하는 방법(javascript,php)

 

 

 

2.저희 사이트에 적용한 사례의 스크린샷

 

Screenshot_20190101-114524.png

 

하단의 앱다운로드 링크가 화면의 하단에 고정된 위치에 노출되는 것을 구현했습니다. fixed 된 위치에 노출을 시키면 방문자는 반대로 동적인 노출을 보게 됩니다. 해당 링크만 고정되어 있어 스크롤시 계속 따라다니는 어떤 화면에서도 계속 보이는 효과가 나타나는 것이죠.

 

이것은 적극적인 노출이면서 보기 싫은 사람에게는 부담이 되는 노출 방식 일 수 있습니다. 그 만큼 방문자에게 인지시키는 효과는 크다는 것을 의미합니다.

 

따라서 close 하는 버튼에 쿠키를 생성하게 해서 close 후 쿠키만료까지는 다시 뜨지 않게 해 주는 것이 좋습니다.

 

 

이때 생성된 쿠키를 이용하여 반대로 다소 부담이 덜한 고정된 위치가 아닌 위치에 비슷한 용도의 링크가 다시 나타나도록 응용하면 좋습니다.

 

 

Screenshot_20190101-114502.png

 

먼저 나타났던 레이어를 닫고 나면 생성된 쿠키를 이용해 php 조건에 쿠키값을 사용해 다른 링크가 다시 노출되도록 해 놓았습니다. 저 앱설치 링크는 맨 아래에 노출되는 것이라 사용자가 저 위치까지 갔을때만 보이는 것이라 크게 부담이 가지 않습니다. 저것을 쿠키와 연동되게 해 놓은 것은 보다 강력한 노출이 있을때는 보이지 않아도 되어서 연동해 놓았습니다.

 

 

 

 

3.실제 적용한 소스의 소개

 

저희가 적용한 케이스는 https://xetown.com/thirdparties/300571 의 푸시앱 모듈을 사이트에 설치하고 아이폰,안드로이드 앱을 제작해 배포해서 사용하고 있는 상태에서 적용한 것임을 참고해주세요.

 

 

 

대략 사용하고자 하는 곳 레이아웃  html  하단에  출력하고자 하는 엘리먼트를 작성합니다. css에서 출력위치를 조정하므로 굳이 위쪽에 작성할 필요는 없습니다. 

 

 useragent 확인해서 담아두기

 

{@ $useragent=getenv("HTTP_USER_AGENT");}

 

 

 

<[email protected]($is_app=="N")-->  // 저희가 사용하는 푸시앱에서 앱을 구분하는 기능을 제공합니다.
<div class="appdowndiv">
<div class="appdown_bottom">
<[email protected](preg_match('/iphone|iPhone/',$useragent))--> // 아이폰과 안드로이드에 맞추서 링크를 제공하기 위해 useragent를 확인해서 조건을 걸어줍니다. 단 이보다 위쪽에 에이전트를 불러오는 것을 먼저 코드로 작성해야 합니다.
<div style="text-align:center;margin-bottom:15px;">
<a href="아이튠즈앱링크주소" target="_blank" class="appdownlink"><img src="./images/appdown.png"></a>
</div>
<[email protected](preg_match('/android|Android/',$useragent))-->
<div style="text-align:center;margin-bottom:15px;">
<a href="market://details?id=com.id.app" target="_blank" class="appdownlink"><img src="./images/appdown.png"></a>
</div>
<[email protected]>
<[email protected](preg_match('/iphone|iPhone|android|Android/',$useragent))-->
<a href="javascript:;" class="appdown_close"><img src="./images/ico_appclose.png" style="width:32px;height:32px;"></a>
<[email protected]>
</div>
</div>
<[email protected]>

 

 

주석 없는 소스 입니다.

<[email protected]($is_app=="N")-->
<div class="appdowndiv">
<div class="appdown_bottom">
<[email protected](preg_match('/iphone|iPhone/',$useragent))-->
<div style="text-align:center;margin-bottom:15px;">
<a href="아이튠즈앱링크주소" target="_blank" class="appdownlink"><img src="./images/appdown.png"></a>
</div>
<[email protected](preg_match('/android|Android/',$useragent))-->
<div style="text-align:center;margin-bottom:15px;">
<a href="market://details?id=com.id.app" target="_blank" class="appdownlink"><img src="./images/appdown.png"></a>
</div>
<[email protected]>
<![email protected](preg_match('/iphone|iPhone|android|Android/',$useragent))-->
<a href="javascript:;" class="appdown_close"><img src="./images/ico_appclose.png" style="width:32px;height:32px;"></a>
<[email protected]>
</div>
</div>
<[email protected]>

 

 

 

 

사용하는 레이아웃의 css에 아래 내용을 적당히 수정해서 넣어줍니다.

 

.appdowndiv{position: fixed;left: 0;bottom: 0;width: 100%;min-height: 80px;z-index: 100;display:none;}
.appdown_bottom{position: relative;width: 183px;height: 53px;margin: 0 auto;padding-top: 12px;min-height: 80px;z-index: 1000;}
.appdownlink{}
.appdownlink img{width: 100%;}
.appdown_close{top: 5px;right: -6px;width: 32px;height: 32px;display: block;position: absolute;}

 

 

 

 

이 고정된 위치의 레이어 버튼이 특정한 스크롤 위치에서 나타나고 사라지고 그리고 close 버튼을 누를때 사라지며 쿠키가 만들어지는 등의 작업은 javascript 가 필요합니다.  레이아웃의 윗쪽에 넣어주세요.

 

 

<script>
jQuery(function($){
//if mask is clicked
$('.appdown_close').click(function(e){
e.preventDefault();
setCookie('appdown_cookie', 'true', new Date(Date.now() + 86400000));
$('.appdowndiv').remove();
});
if(getCookie('appdown_cookie') == 'true'){
$('.appdowndiv').remove();
}
else {
$(".appdowndiv").hide();
$(window).scroll(function () {
  if($(window).scrollTop() > 500) {
   $('.appdowndiv').show();
  } else {
   $('.appdowndiv').hide();
  }
 });
 }
});
</script>

 

 

 

닫기를 눌렀을때 생성되는 쿠키는 하루입니다. 단위가 밀리세컨드라 86400000 값이 들어갔습니다. 이 값이 하루이니 적당히 조절해서 사용할 수 있습니다.

 

저희는 500px 정도 내려가면 나타나게 했습니다. 위로가기 버튼과 동시에 나타나거나 사라지거나 하게 기준을 동일하게 잡았습니다.

 

 

 

 

위 고정위치 버튼이 사라지면 다시 다른 곳에 링크가 보이게 php에 사용하려면

 

$_COOKIE['appdown_cookie']=='true' 를 조건으로 걸어 사용하면 두개가 교차로 보이게 구현을 할 수 있습니다.

 

 

  • profile
    와우! 이뻐요!
  • profile profile
    이미지야 각자 용동 맞게 사용해야 해서 뭐 이쁜건 각자 어떤 이미지를 쓰냐에 따라 다른거 같아요~ 대충 구해서 로고 넣고 글자 넣어서 썼어요.
  • profile profile
    포토샵을 잘다루시는것 같네요..
    저는 손재주가 없어서 같은 포토샵써도 뭔..쓰레기가 나와서..
  • profile profile
    아니에요 ㅋㅋ 그냥 레이어에 로고이미지 맞게 넣고 글자 몇자 타이핑 하면 끝이라... 실력이 거기까지라 그렇게만 해요 ㅋ
  • ?

    팁 감사합니다. 혹시 안드로이드앱만 제공하는 경우 ( 아이폰앱이 없는 경우 ) 아래와 같이 하면 맞는건가요?

     

    {@ $useragent=getenv("HTTP_USER_AGENT");}
    <[email protected]($is_app=="N")-->
    <div class="appdowndiv">
    <div class="appdown_bottom">
    <[email protected](preg_match('/android|Android/',$useragent))-->
    <div style="text-align:center;margin-bottom:15px;">
    <a href="market://details?id=com.id.app" target="_blank" class="appdownlink"><img src="./images/appdown.png"></a>
    </div>
    <[email protected]>


    <[email protected](preg_match('/Android/',$useragent))-->
    <a href="javascript:;" class="appdown_close"><img src="./images/ico_appclose.png" style="width:32px;height:32px;"></a>
    <[email protected]>
    </div>
    </div>
    <[email protected]>
     

  • ? profile

    네. 아이폰에는 노출하지 않으면 되죠. 밑에 조건도 대소문자 맞춰서 하실 거면 같이 해주세요.

     

    아이폰,안드로이드 다르게 하실 게 아니라면 사실 

    <[email protected]($is_app=="N")-->  여기 조건에 && 로 한번에 추가하시고 밑에는 조건을 따로 안거셔도 무방합니다.

  • profile
    멋지네요~! ㅎㅎ
    좋은 정보 감사합니다.
    이정도면 개발자라고 하셔도 될 듯...
  • profile profile
    개발자라고 하고 저희 사이트에 적용한것 돈받고 의뢰 받아볼까요??? ㅋㅋ
    진료는 의사에게 약은 약사에게.... ㅋㅋ 전 사이트 운영 열심히할께요 ㅋ

서버에 요청 중입니다. 잠시만 기다려 주십시오...