하루 한 번 T스토어 모바일 웹 분석

주말, 간단히 두뇌 예열 겸 간단한거 하나.

아래와 같은 모바일웹 이벤트 페이지는 어떻게 구성되었는지 분석해 본다.

이미지의 가로 사이즈는 800px 이었다.

아래 스샷은 스크린이 이미지 가로 사이즈보다 넓은 950px 에서의 뷰이며
양쪽 여백이 생기며 가로 정렬 되어 있음을 알 수 있다.

이미지들은 어떻게 잘라서 구성하였나?

TOP 이미지

본문

버튼

본문 하단

SNS 아이콘 버튼들

SNS 아이콘버튼들 구성 소스

각 <a id=""... 요소들은 아래와 같은 스크립트로 작동하게 되어 있다.

/* kakaotalk link plugin js 파일입니다 // */
var com=new Object();com.kakao=new Object();com.kakao.talk=new Object();var com={};com.kakao={};com.kakao.talk={};com.kakao.talk.KakaoLink=function(appid,appver,url,msg,appname,metainfo){this.msg=encodeURIComponent(msg);this.url=encodeURIComponent(url);this.appId=encodeURIComponent(appid);this.version=encodeURIComponent(appver);this.appname=encodeURIComponent(appname);if(typeof metainfo=="undefined"){this.type="link";}else{this.type="app";}
this.apiver="2.0";$(document).find("body").append("");$("#____kakaolink____").hide();try{if(isEmptyString(this.appId)||isEmptyString(this.version)||isEmptyString(this.url)||isEmptyString(this.appname)){throw"IllegalArgumentException";}}catch(e){if(e=="IllegalArgumentException"){}}
var sb=new com.kakao.talk.StringBuilder("kakaolink://sendurl?");sb.append("appid=").append(this.appId).append("&appver=").append(this.version).append("&url=").append(this.url).append("&type=").append(this.type).append("&apiver=").append(this.apiver).append("&appname=").append(this.appname);if(!this.isEmptyString(this.msg)){sb.append("&msg=").append(this.msg);}
if(typeof metainfo!="undefined"){sb.append("&metainfo=").append(JSON.KakaoStringify(metainfo));}
this.data=sb.toString();};com.kakao.talk.StringBuilder=function(value){this.strings=new Array("");this.append(value);};com.kakao.talk.StringBuilder.prototype.append=function(value){if(value){this.strings.push(value);}
return this;};com.kakao.talk.StringBuilder.prototype.toString=function(){return this.strings.join("");};com.kakao.talk.KakaoLink.prototype.isEmptyString=function(str){if(str.replace(/^\s*/,"").replace(/\s*$/,"").length==0)
return true;return false;};com.kakao.talk.KakaoLink.prototype.getData=function(){return this.data;};com.kakao.talk.KakaoLink.prototype.execute=function(callback){var clickedAt=+new Date;setTimeout(function(){if(+new Date-clickedAt<2000){var uagent=navigator.userAgent.toLocaleLowerCase();if(typeof callback=='function'){callback.call(this);}else if(uagent.search("android")>-1){$("#____kakaolink____").attr("src","market://details?id=com.kakao.talk");}else if(uagent.search("iphone")>-1){$("#____kakaolink____").attr("src","https://itunes.apple.com/kr/app/kakaotog-kakaotalk/id362057947?mt=8");}}},1500);$("#____kakaolink____").attr("src",this.data);};function MetaInfo(metainfo){this.metainfo=metainfo;}
JSON.KakaoStringify=JSON.KakaoStringify||function(obj){var t=typeof(obj);if(t!="object"||obj===null){if(t=="string")
obj='"'+obj+'"';return String(obj);}else{var n,v,json=[],arr=(obj&&obj.constructor==Array);for(n in obj){v=obj[n];t=typeof(v);if(t=="string")
v='"'+v+'"';else if(t=="object"&&v!==null)
v=JSON.KakaoStringify(v);json.push((arr?"":'"'+n+'":')+String(v));}
return(arr?"[":"{")+String(json)+(arr?"]":"}");}};
/* // kakaotalk link plugin js 파일입니다 */

$(function(){
	/* 아래 모바일용 웹 랜딩 주소로, 주소 변경시 아래 링크만 변경해 주시면 됩니다. */
	var url = "http://www.tstore.co.kr/images/event/EVENT_121207162141/preview/main.html";
	
	$("#twitter").click(function(){
		var href = "http://twitter.com/home?status=" + "T store 하루에 한개 유료앱이 무료!!" + encodeURIComponent(url);
		openWin(href , "twitter");
	});
	
	$("#facebook").click(function(){
		var href = "http://m.facebook.com/sharer.php?u=" + encodeURIComponent(url);
		openWin(href , "facebook");
	});

	$("#cyworld").click(function(){
		var href = "http://csp.cyworld.com/bi/bi_recommend_pop.php?url=" + encodeURIComponent(url) + "&title_nobase64=" + "T store 하루에 한개 유료앱이 무료!!" + "&writer=" + "Tstore";
		openWin(href , "cyworld");
	});

	$("#kakao").click(function(){
		var msg = "하루에 한 개 유료앱이 무료!!";
		var siteName = "Tstore 이벤트";

		var link = new com.kakao.talk.KakaoLink("", "", url, msg, siteName);
		link.execute();
	});

        function openWin(href , name){
		window.open(href , name);
	}
    });

    function alertConfirm(type){
	if(type == "1day"){
		/* 1일 후 경고 문구 로서 해당하는 일자로 문구 수정해 주시면 됩니다. */
		alert("1월 27일에 무료 제공될 예정입니다. 기대해 주세요.");
		/* 1일 후 상품으로 해당하는 상품 링크로 수정해 주시면 됩니다. */
		window.open('http://tsto.re/H900665576');
	} else if(type == "2day"){
		/* 2일 후 경고 문구 로서 해당하는 일자로 문구 수정해 주시면 됩니다. */
		alert("1월 28일에 무료 제공될 예정입니다. 기대해 주세요.");
		/* 1일 후 상품으로 해당하는 상품 링크로 수정해 주시면 됩니다. */
		window.open('http://tsto.re/H900420229');
	} else if(type == "3day"){
		/* 3일 후 경고 문구 로서 해당하는 일자로 문구 수정해 주시면 됩니다. */
		alert("1월 29일에 무료 제공될 예정입니다. 기대해 주세요.");
		/* 1일 후 상품으로 해당하는 상품 링크로 수정해 주시면 됩니다. */
		window.open('http://tsto.re/H900744453');
	}
    }

끝으로 전체 소스 첨부. TStore-DayByDay.rar