jquery 타임라인 만들기

간단한 타임라인을 만들어 보았다.

<div class="Box" style="background:#e5e5e5;position:fixed;top:0px;left:0px;">
	<ol class="timeline">
		<li style="left:33px"><a href="#time1"><span class="details">타임라인입니다. project1</span></a></li>
		<li style="left:60px"><a href="#time2"><span class="details">타임라인입니다. project2</span></a></li>
		<li style="left:120px"><a href="#time3"><span class="details">타임라인입니다. project3</span></a></li>
		<li style="left:200px"><a href="#time4"><span class="details">타임라인입니다. project4</span></a></li>
		<li style="left:350px"><a href="#time5"><span class="details">타임라인입니다. project5</span></a></li>
		<li style="left:500px"><a href="#time6"><span class="details">타임라인입니다. project6</span></a></li>
	</ol>
</div>
<div class="news">
	<div id="time1" style="background:#feafc7">news1news1<br>news1news1<br>news1news1<br>news1news1<br></div>
	<div id="time2" style="background:#cdaffe">news2news2<br>news2news2<br>news2news2<br>news2news2<br></div>
	<div id="time3" style="background:#afbefe">news3news3<br>news3news3<br>news3news3<br>news3news3<br></div>
	<div id="time4" style="background:#b3feaf">news4news4<br>news4news4<br>news4news4<br>news4news4<br></div>
	<div id="time5" style="background:#fedfaf">news5news5<br>news5news5<br>news5news5<br>news5news5<br></div>
	<div id="time6" style="background:#afe7fe">news6news6<br>news6news6<br>news6news6<br>news6news6<br></div>
</div>
.Box{height:110px;width:100%;float:left;display:block;}
.news {padding-top:114px}
ol.timeline {height:130px;background:#333}
ol.timeline:before {content:'';position:absolute;top:39px;left:0;height:4px;width:100%;background:#777A7B}
ol.timeline li {position:absolute;top:33px;left:33px;display:block;width:6px;height:6px;border:4px solid #777A7B;border-radius:10px;cursor:pointer; background:#eee;}
ol.timeline li:before {}
.details {position:absolute;left:0;top:22px;width:100px;padding:5px;border-radius:3px;border-left:1px solid rgba(0,0,0,.1);border-right:2px solid rgba(0,0,0,.1);border-bottom:2px solid rgba(0,0,0,.1);font-size:12px;background:#cacacc;}
ol.timeline li:hover {width:7px;height:7px;color:#333;left:33px;}
ol.timeline li:hover .details {display:block;}
ol.timeline li.slted {z-index:999}
    $('.timeline li a').bind('click.smoothscroll', function(e) {
        e.preventDefault();
        
        // Get the current target hash
        var target = this.hash;
        
        // Animate the scroll bar action so its smooth instead of a hard jump
        $('html, body').stop().animate({
            'scrollTop' : $(target).offset().top - 130
        }, 500, 'swing', function() {
            //window.location.hash = target;
			$(window).on("target");
        });
    });

높이나 수치는 바꿔서 사용하면 될것이다.

http://jsfiddle.net/jini/9f0nf4db/2/

.animate() 속성

.animate() 를 이용하여 마우스 오버시 통통 튀는 효과를
만들어보자.

기본 구문

$("선택자").animate({"속성명":"속성 값"},시간,"가속도 함수");

만들어보자.

html

<div></div>

css

div{width:300px;height:300px;background:gray}

jquery

$(document).ready(function(){
  
  $("div").on("mouseenter",function(){
      $("div").animate({"width":"500px","height":"500px"},800,"easeOutBounce");
  });
  $("div").on("mouseleave",function(){
      $("div").animate({"width":"300px","height":"300px"},200,"easeOutBounce");
  });
              
});

js plugin
http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js 추가해줘야 한다.

http://codepen.io/yujiniP/pen/YyKEmY

.attr() 속성

버튼을 클릭하면 이미지가 변경되는 jquery를 만들어보았다.

기본구문

$("선택자").attr({"속성명":"속성 값"});

html

<button class="btn1">이미지 변경1</button>
<button class="btn2">이미지 변경2</button>
<p class="frame"><img src="http://yuggi1004.cafe24.com/dizzo/job/images/n_img1.gif" alt="1"></p>

css

button {margin:10px}
.frame {width:200px;margin:10px}
.frame img {width:100%}

jquery

$(document).ready (function(){
 
 $(".btn1").on("click",function(){
    $(".frame img").attr({"src":"http://yuggi1004.cafe24.com/dizzo/job/images/n_img1.gif","alt":"1"});
 });
 $(".btn2").on("click",function(){
    $(".frame img").attr({"src":"http://yuggi1004.cafe24.com/dizzo/job/images/n_img2.gif","alt":"2"});
 });
 
});

http://codepen.io/yujiniP/pen/GpKoQL

구글, “효과없는 모바일 전면 광고” 중단

대부분의 모바일 웹 사용자가 브라우저가 아닌, 웹 사이트에서 만든 자체 앱을 사용해 사이트를 방문하라는 불쾌한 전면 광고를 경험한다. 구글은 이러한 전면 광고를 사용하지 않기로 결정했다.

사용자가 모바일 브라우저를 통해 구글 플러스 서비스를 사용할 때, 구글 플러스 전용 앱을 내려받아 방문하라는 전면 광고를 반기지 않는다는 국제 사용자 연구 결과가 발표된 후, 구글은 정식으로 연구를 의뢰했다.

그 결과 구글 플러스 앱을 내려받으라는 전면 광고가 끼어들 때, 사용자의 약 9%만이 실제로 ‘앱 다운로드 받기’ 링크 버튼을 누를 뿐이며, 69%의 사용자가 해당 구글 플러스 앱 탐색을 진행하지도, 구글 플러스 앱 다운로드 링크를 누르지도 않고 페이지를 꺼 버리는 것으로 나타났다.

 

 

구글은 작년, 그 후속 연구로 전면 광고를 삭제하고 대신 덜 거슬리는 형태의 앱 광고를 내보내는 실험을 진행했다. 이후 구글 플러스 모바일 앱 설치율은 크게 영향받지 않았으나 구글 플러스 모바일 활성 사용자가 17% 증가했다는 결과가 나왔다.

구글 플러스 소프트웨어 엔지니어 데이비드 모렐은 “전면 광고를 영구히 제거하기로 결정했다. 구글 플러스 서비스 사용자 증가가 유효한 변화로 나타날 것이라고 믿는다”고 밝혔다. 모렐은 구글이 다른 모바일 사이트도 전면 광고 삽입을 재고해 보기를 권한다고 덧붙였다.

로컬 서치 협회의 전략 및 인사이트 부회장 그렉 스털링은 구글의 이번 결정이 매우 당연하다며, “스마트폰 사용자에게 있어 중간에 삽입되는 전면 광고의 화면 장악은 매우 불쾌한 경험이며, 개발자나 퍼블리셔 모두에게 적절한 수단이 아니다. 전면 광고의 대안을 찾는 것이 모두의 관심사”라고 분석했다.

 

 

 

요즘 웹이든 모바일이든 모든기기를 통해 우리는 엄청난 광고를 접하게 된다.

의도를 했던 안했던,  유혹의 길로 빠지게 되는 일도 종종있다.;;

물론 도움이 되었던 적도 있지만, 그렇지 않은 경험이 더 많을 것이며,

왠지 모를 짜증이 밀려오기도 한다.(나만 그런가…..)

광고는 pc에서만으로도 충분하다..

구글의 결정이 새로운 트랜드를 가져오길 기대해본다.

그냥 내 생각!!!

(이런 여기에도 광고가;; …)

 

 

http://www.itworld.co.kr/

jquery .keydown을 이용한 무빙~

html


<img src="http://i1061.photobucket.com/albums/t480/ericqweinstein/mario.jpg"/>

css


img {position:relative;left:0;top:0;}

jquery


$(document).ready(function() {
    $(document).keydown(function(key) {
        switch(parseInt(key.which,10)) {
			case 65:
				$('img').animate({left: "-=30px"}, 'fast');
				break;
			case 83:
				$('img').animate({left: "+=30px"}, 'fast');	
				break;
			case 87:
				$('img').animate({top: "-=30px"}, 'fast');
				break;
			case 68:
				$('img').animate({top: "+=30px"}, 'fast');	
				break;
			default:
				break;
		}
	});
});

완성 !!

http://codepen.io/yujiniP/pen/MwPxwP

창의적 순간을 만나기 위한 4가지 방법

일상 속에서 번뜩이는 창의적 순간을 만나기 위한 4가지 방법

창의성이란 것은 어떤 순간의 힘이며 이 창의성은 후천적으로 기를 수 있는 성질의 힘입니다. 구름, 곤충, 새, 꽃 등 새로운 것에는 무엇이든 주의를 기울이는 어린 아이들은 언제나 흥미와 호기심이 왕성합니다. 창의성을 발휘하기 위해서는 주위의 새로운 것들에 대해 늘 흥미를 가지고 호기심을 가지는 자세가 필요합니다. 즉 창의성을 발휘하기 위해서는 다른 분야에도 과감하게 도전할 수 있어야 합니다.

아인슈타인과 같은 과학자도 물리학적 발견의 절정기에 바이올린으로 고전음악을 연주했다고 합니다. 예술이나 과학, 정치와 같이 복잡한 영역들은 과감히 도전하는 사람들의 시야를 확대해줍니다. 그렇다면 우리가 일상 속에서 흥미와 호기심을 키울 수 있는 방법은 없을까요? 반복되는 일상 속에서 번뜩이는 창의적 순간을 만날 수 있는 방법을 알아봅니다.

1. 매일 무언가에 집중하세요.

보이는 것, 들리는 것 그리고 읽는 것을 수동적으로 받아들이지 말고 능동적으로 보고 듣고 읽어야 합니다. 길을 걷다가도 잠시 걸음을 멈추고 낯선 자동차를 바라보고 매일가는 음식점의 매일 먹는 메뉴 보단 새로운 종류의 음식을 맛보고, 컴퓨터에서 눈을 떼고 사무실에서 동료들이 하는 말에 귀를 기울여 보세요.

모든 것을 다 알고 있다고 생각하지말고 지금 보고 듣고 읽고 있는 것의 본질을 생각하고 고민해보시기 바랍니다. 삶이란 것은 경험의 흐름입니다. 더 많은 경험을 하고 더 많이 느낄 수록 우리의 삶은 풍요로워질 수 있습니다.

 

 

 

2. 매일 누군가를 놀라게 하세요.

매일 누군가에게 뜻밖의 이야기를 하거나 평소에 하지 못했던 말을 하거나 평소에 묻지않던 질문을 해보세요. 이전에는 가보지 않던 전시회나 음식점 또는 박물관을 가보세요. 그리고 중요한 것을 당신의 외모를 바꿔보는 것입니다. 헤어스타일, 패션스타일 또는 안경을 바꿔보세요.

우리에게 익숙하고 편해진 습관은 에너지를 축적하는데 도움은 되지만 무언가를 찾고 있을 때는 미래의 가능성에 제한이 될 수 있습니다.

 

 

 

3. 매일 자신의 경험을 기록하세요.

창의적인 사람들은 대부분 꾸준히 메모하는 습관이 있습니다. 아직 메모하는 습관이 없다면 매일 저녁에 그날 경험했던 가장 놀라운 일을 기록하고 며칠 후에 자신이 쓴 것을 읽어보며 지난 경험을 떠올려 보시기 바랍니다.

우리의 삶은 풍요롭게 하는 가장 좋은 방법은 가장 기억에 남고 재미있고 또 중요한 사건들이 몇시간 후에 사라지지 않도록 붙잡아 두는 것입니다. 그 기록들이 당신의 경험을 더욱 풍부하고 깊게 만들어 줄 것입니다. 당신의 가장 중요하고 놀라웠던 일을 나중에 언제든지 되살려볼 수 있도록 꼭 지금 기록하는 습관을 들이세요.

 

 

 

4. 흥미가 당기는 일을 따르세요.

어떤 아이디어가 떠올랐을 때 보통의 우리들은 그 아이디어에 잠시 관심을 가질 뿐입니다. 우리는 너무 바빠서 또는 나와는 상관없다고 생각하며 떠오른 아이디어에 대해 더이상 생각해보지 않습니다. 하지만 세상에는 아직도 우리가 잘 모르는 분야가 많고 다양하게 배우지 않으면 어느 것이 우리가 가진 잠재력에 가장 적합한지 알 수 없습니다.

배움에 대한 길을 다양하게 열어놓고 흥미가 당기는 분야가 생기면 과감히 따라가보시기 바랍니다. 경험의 질은 투자한 노력과 시간에 비례해 향상됩니다. 무슨 일을 하던지 분명한 기대와 목적을 가지고, 행동의 결과에 주목하고 진행 중인 일에 집중하세요. 그러면 우리가 하는 그 일을 더 즐겁고 창의적으로 할 수 있습니다.

 

 

 

출처- http://www.attrest.com/

브랜드 이미지와 가치를 높이는 콘텐츠 마케팅

브랜드 이미지와 가치를 높이는 콘텐츠 마케팅

콘텐츠 마케팅이란 고객에게 가치있는 콘텐츠를 만들어 고객의 인지도와 발견 가능성을 높이고, 브랜드 이미지를 향상시키며, 고객과의 관계를 구축하여 가망고객과 영업기회를 발굴하는 것을 말합니다. 북미기업의 경우 B2C보다 B2B에 콘텐츠 마케팅을 적극적으로 활용하고 있습니다.

 

콘텐츠 마케팅은 어떤 걸까요? 실제 사례를 통해 컨텐츠 마케팅이 기업에 어떤 영향을 끼치는지 알아보겠습니다.
먼저 피셔탱크의 사례입니다. 피셔탱크는 산업용 철제탱크 제조회사로 전통적인 영업방식인 기존 고객의 소개, 콜드콜 등을 통한 마케팅을 하고 있었습니다. 피셔탱크는 웹디자인을 개선하고 고객에게 유용한 지식을 담은 문서를 제공하고 블로그, 소셜 미디어 등을 운영하며 검색최적화를 적용한 결과 웹사이트의 방문은 119%가 증가했고 검색을 통한 방문 70%, 소셜미디어에서의 방문 48배 증가, 가망고객 전환 39배 증가, 견적요청 5배 증가 효과를 얻을 수 있었습니다.

 

또 다른 기업 팔로마 테크놀로지스의 경우 전자부품 패키징 시스템 공급사로 기존 웹사이트를 운영하며 검색엔진최적화로 어느정도의 방문고객을 확보하고 있었지만 영업성과로 연결되지않는 것이 고민이었습니다. 이를 해결하기 위해 블로그를 개설하고 블로그에 전문 분야의 글을 게시하고 이런 지식자료를 제공하며 연락처를 받는 행동요청을 적용하고 전체적인 관리시스템을 업그레이드 한 결과 1000개가 넘는 회사 웹사이트 링크와 많은 검색어에서 구글의 첫페이지에 노출되고 검색을 통한 방문수 20배 증가, 우베사이트 방문수 20배 증가, 가망고객 목표 2~3배 달성 효과를 얻을 수 있었습니다.

 

콘텐츠마케팅은 역피라미드의 형태로 설명이 될 수 있는데 처음 인지단계에서는 많은 사람들이 웹사이트를 방문하거나 소셜미디어를 통해 방문하며 콘텐츠에 대한 인지를 하고 다음은 원하는 콘텐츠를 찾았을 경우 콘텐츠에 관심을 보이고 회원가입을 하거나 소셜 미디어에 Follow를 하게 되는 관심단계에 도달하게 됩니다. 다음으로 관심단계를 지나 추가적인 정보를 요청하거나 견적을 요청하는 고려단계를 지나 실제적인 구매가 이루어 지는 구매와 관계지속 단계로 이동하게 됩니다.

 

콘텐츠 마케팅의 4단계

 

즉 처음 사이트를 우연히 방문하는 많은 방문객들 중 일부가 콘텐츠에 관심을 가지고 회원가입이나 Follow 등과 같은 행동을 하게 되고 이 중 일부가 추가적인 정보나 견전을 요청한 후 이들 중 최종적으로 해당 콘텐츠를 마음에 들어하는 방문객이 해당 상품이나 콘텐츠를 구매하거나 지속적인 관계를 맺게 됩니다. 이것이 바로 콘텐츠 마케팅의 핵심적인 프로세스라고 할 수 있습니다.

 

콘텐츠마케팅은 기존의 매스 마케팅이나 텔레마케팅과 달리 브랜드 인지도, 브랜드 이미지, 가망 고객 창출, 고객 관계, 자산 또는 비용에 대해 긍정적인 효과를 줄 수 있습니다.

 

콘텐츠마케팅의 장점으로는 콘텐츠라는 자산이 쌓일 수록 더 많은 노출이 이루어지고 이로 인해 브랜드에 대한 인지도가 향상되는 효과를 얻을 수 있고 콘텐츠가 쌓일 수록 단순 판매자에서 해당분야의 전문가로서의 인지도를 얻게 되고 보다 전문적인 글이 많아질 수록 해당 분야의 리더로서의 이미지를 얻을 수도 있는 장점이 있습니다. 또 영업에 직접적인 효과가 없는 매스마케팅이나 직접적으로 영업 성과에 연결되지만 브랜드에 부정적인 이미지를 남길 수 있는 텔레마케팅과 달리 스스로 정보를 찾기위해 자발적으로 검색을 하고 사이트에 접속함으로써 기업의 영업에 직접적으로 연결되는 긍정적인 효과도 있습니다.

 

마케팅 담당자는 콘텐츠마케팅을 하기위해 “우리 제품의 장점이 무엇일까?”라는 고민을 통해 상품의 개선에 대한 통찰을 얻을 수도 있고 “이 콘텐츠를 보는 사람은 누구일까?”라는 고민을 하며 사실 기반의 마케팅과 영업을 체계화 시킬 수 있게 됩니다.

 

국내의 경우 대부분 방송, 신문 등의 대중 매체 광고를 통해 영업을 하거나 텔레마케팅을 통해 직접적인 영업을 하는 전통적인 방식의 마케팅에 머물러있어 마케팅 자체가 비효율적이거나 브랜드에 부정적인 영향을 미칠 가능성이 있습니다.

 

효율성이 낮거나 브랜드에 부정적인 영향을 끼치는 마케팅은 브랜드의 낮은 인지도나 낮은 선호도로 이어지고 이로인해 적정 마진을 받기 어려워집니다. 그러다보면 우수한 인재를 영입하는데 어려움을 겪게되고 글로벌 시장에서도 입지가 좁아질 수 밖에 없습니다. 영업적인 측면에서도 가망 고객이 부족하여 매출이 일어나지않고 당장의 영업에만 급급한 악순환이 반복되게 됩니다.

 

콘텐츠 마케팅을 잘 활용하면 위와 같은 상황을 극복하고 브랜드의 인지도와 발견 가능성을 개선시키고 브랜드 이미지를 향상시키며 가망 고객을 증가시키는 효과를 얻을 수 있습니다.

 

콘텐츠 마케팅을 효과적으로 활용하기 위해서는 여러분의 콘텐츠 마케팅에콘텐츠, 채널, 커넥션의 3가지 요소를 적절히 활용할 수 있어야 합니다.

 

Contents Channel Connection
웹사이트의 내용 웹사이트 웹사이트 회원가입
프레젠테이션 소셜미디어 소셜네트워크 연결
블로그 뉴스레터 등 이메일 구독
보고서 RSS 연락처 제공
동영상 이메일
사진
인포그래픽
팟캐스트

 

 

반응형 웹? 적응형 웹?

반응형 웹디자인과 적응형 웹디자인의 차이

반응형 웹디자인(RWD, Responsive Web Design)적응형 웹디자인(AWD, Adaptive Web Deisgn)이라는 두 기술의 차이점과 각각의 특징에 대해 알아보겠습니다.

 

반응형 웹디자인(RWD, Resposive Web Design)이란?

반응형 웹디자인은 사용자의 사용환경과 행동패턴에 유기적으로 적절하게 반응하는 웹요소들에 대한 총체적 디자인을 말하며 Screen Size, Resolution, Orientation 등 사용자의 단말 환경에 반응하여 해당 단말에 반응하여 웹페이지를 변화시키는 것이라고 할 수 있습니다. 즉 화면의 너비에 따라 유동적으로 변화하는 유동형 레이아웃을 사용하고 유연하게 사이즈가 변하는 이미지와 미디어쿼리 등을 사용하여 특정 환경에 반응하여 스스로 변화하는 기법입니다.

 

테드 홈페이지

 

주로 반응형 웹디자인에서는 % 단위를 사용하여 웹사이트의 폭을 유동적으로 변화시킵니다. 해상도의 변화에 따라 컨텐츠의 폭이나 오브젝트의 배열에 변화를 주기도 합니다. 아래의 영상을 보면 쉽게 이해가 될 듯 합니다.

적응형 웹디자인(AWD, Adaptive Web Design)이란?

적응형 웹디자인은 반응형 웹디자인과는 달리 몇 개의 해상도를 미리 지정하여 디바이스가 지정된 해상도에 속하면 그 해상도에 정의된 스타일로 표현하는 기법으로 유동적으로 변화하는 반응형 웹디자인과는 달리 각각의 디바이스에 보다 최적화시키거나 다양한 디자인을 시도할 수 있는 장점이 있습니다.

 

sk 홈페이지

 

적응형 웹디자인 영상

 

굳이 두 개의 기술을 구분하고 싶다면

아래의 이미지와 같인 반응형 웹은 브라우저 가로 폭의 변화에 따라 변화되는 웹사이트, 적응형 웹은 브라우저 가로폭의 크기를 줄일 때 즉각적으로 반응하지 않고 정해진 해상도가 되면 레이아웃이 변하는 웹사이트 정도라고 생각하면 될 듯합니다. ^^

반응형 웹과 적응형 웹의 차이 비교

 
추가로 반응형웹에선 px단위보다 em를 주로 사용한다.
유동적인 디바이스 작업이기에

px > em 으로 em > px 로 바꿔주는 사이트

http://pxtoem.com/

 

 

 

 

출처 – http://www.attrest.com/

bootstrap

부트스트랩(Bootstrap)이란?

혹시 이 글을 여러분은 부트스트랩(Bootstrap)을 들어보셨나요?
부트스트랩은 트위터의 웹 디자이너와 개발자가 만든 오픈형 UI 플러그인이라고 할 수 있습니다. 전 세계의 웹제작자들에게 편리성을 주고자 만들어졌으며 보다 편리하고 빠르게 레이아웃을 구성하고 다양한 인터페이스를 사용할 수 있습니다. 부트스트랩은 클래스로 미리 정의된 스타일시트와 자바스크립트로 구동하는 플러그인의 라이브러리입니다. 미리 정의 된 클래스를 이용해 쉽게 웹디자인을 하고 완성도 높은 다양한 UI를 만들 수 있습니다. 보통 웹사이트를 제작할 때 필요한 UI 디자인은 하나하나 적용하고 직접 코딩하는 것이 일반적입니다. 하지만 미리 정의된 스타일시트를 이용해 이 과정을 단축시킬 수 있고 그 퀄리티가 굉장히 뛰어납니다. 웹사이트를 너무 쉽게 만들 수 있어서 우려의 목소리도 나오고 있지만 워드프레스, 어썸폰트, 부트스트랩, 제이쿼리등 훌륭한 프레임워크, 플러그인등을 이용해 웹사이트의 제작이 간소화 된다면 단점 보다 장점이 더 많습니다.

부트스트랩(Bootstrap) 장점

부트스트랩은 정말 쉽고 빠르며 다양한 응용이 가능합니다.
요즘 웹사이트 제작시에 모바일 환경을 빼 놓고 이야기하는 경우는 거의 없으며 이런 환경적인 요인으로 반응형웹의 제작빈도가 굉장히 높아지고 있습니다. 부트스트랩은 이런 모바일 환경과 반응형웹 제작에 더욱 유리하게 사용할 수 있습니다. 그리고 수 많은 테마가 존재하기 때문에 테마만 적용해도 손쉽게 웹사이트의 외형을 만들 수 있습니다. 욀관된 UI를 통해 개발에 필요한 부담을 많이 줄여줍니다. 기업의 입장에서 보면 시간 단축은 곧 비용 절감입니다.

부트스트랩(Bootstrap) 전망

국내에서 부트스트랩의 활용은 해외에 비하면 높은 편이 아닙니다.
부트스트랩은 국내의 사용자에게 익숙한 UI는 아니기 때문입니다. 국내외 웹사이트 UI를 비교하면 큰 차이가 있습니다. 독창적인 우리나라만의 UI가 있는 느낌인데 해외에서는 간결하고 깔끔하면서 여백이 많은 UI를 선호합니다. 워드프레스와 그누보드, 제로보드를 단순 비교해도 UI의 차이가 있는데 결국 국내 누리꾼들이 아직 부트스트랩의 UI에 적용하기에는 조금 무리가 있는 편입니다. 워드프레스의 국내 사용률이 해외와 비교했을 때 굉장히 낮은 것도 비슷한 이유라고 할 수 있습니다. 부트스트랩은 웹퍼블리싱을 직업으로 갖고 있거나 준비하는 분이라면 꼭 짚고 넘어갈 필요성은 있습니다. HTML과 CSS를 모르는 사람이 접하기에는 무리가 있고 개발자들을 위해 개발 된 플러그인이기 때문입니다. 개발이나 코딩을 하시는 분이라면 어렵지 않게 부트스트랩을 활용하고 적용 할 수 있을 것입니다.

부트스트랩 시작하기 – http://bootstrapk.com/

출처 – http://tocs.kr/220257300947

모바일웹, 웹앱, 하이브리드앱, 네이티브앱의 개념

_모바일 웹

그냥 웹인데 모바일 화면에 맞게 구성한 웹
당연히 pc로도 볼 수 있으나 pc는 고려 안했으므로
http://m.naver.com/
등등.. m 으로 시작하는 웹사이트들을 모바일웹이라고 합니다

_웹앱

웹앱에 대한 설명들을 찾아보면 모바일웹과 네이티브앱의 장점을 합친거란 말이 있는데
설명이 너무 애매해서 무슨 말인지 알 수 없죠

‘한약파르풰 같은 맛이다’
이러면 누가 알아볼까요

그래서 직접 봅시다
http://app.chosunbiz.com/plugins/apps/www/i.html?server_no=2&c=0

조선비즈 웹앱입니다

마치 진짜 앱 같죠. 하지만 결국 웹입니다.
다시말해
모바일웹하고 근본적인 차이는 없지만 겉모습과 구동방식을
마치 앱인것처럼 착각하도록 꾸며놓은 것을 웹앱이라고 합니다

그렇다고 이미지들을 그냥 저렇게 같다놓고 링크들만 걸어놓은건 아니고
구동도 앱처럼 되어야하니 웹앱도 나름 만드는 방식이 있습니다

여하튼 정확한 설명은 웹기술로 네이티브앱을 최대한 흉내냈다고 하면 될것 같습니다
그러므로
웹의 실시간 업데이트 + 만들기 쉬움 등의 장점과
네이티브앱의 깔끔하고 역동적인 구동방식 등의 장점이 합쳐졌다고 할 수 있죠

하지만 당연히 네이티브앱의 성능보단 떨어지고
카메라등의 폰의 하드웨어 기능은 쓸 수 없습니다

_하이브리드앱

이름 그대로 웹와 네이티브앱이 진짜 합쳐진 것을 하이브리드앱이라고 합니다
합체를 시키는 방법이야 하기 나름인데

가장 간단한 형태론 네이티브앱을 구동시키면 정해진 웹페이지를 불러오는 방식이죠
복잡한 형태로는 네이티브앱안에 html이나 이미지를 미리 넣어놓고 일부는 내장된 html을 읽어서
화면에 뿌려주고 일부는 웹에 접속해서 정보를 가져옵니다

어느 방식을 택하던 간에 기본적인건 네이티브앱이 먼저 실행되어서
웹기술로 만들어진 것을 불러온다는 것입니다

하이브리드앱의 장점은
진짜 알맹이들은 웹기술로 쉽고 빠르게 만들고
몇몇 네이티브앱만이 할 수 있는 부분들을 추가시켜줍니다
스토어 등록이나 카메라 기능등..

그리고 알맹이가 웹기술이니까 ios와 안드로이드 두가지 기술은 껍데기에만 적용하여
아이폰앱과 안드로이드앱을 각각 따로따로 만들 필요도 없으며
웹 하나를 수정하면 각 플래폼들 전체에 적용되므로
유지보수도 굉장히 용이합니다

단점은
네이티브앱보다 훨씬 성능이 떨어지는 것은 말할 것도 없지만
웹앱보다도 속도등 성능이 떨어지는 수가 있습니다 (네이티브앱이 웹앱을 구동시키는 거니까)
또한 웹을 주력으로 아이폰,안드로이드등 플랫폼에 관계없이
호환할 수 있다곤 하지만 이들에 대한 이해가 얇은 상태에서 웹만 믿고
툴등을 사용해서 구현하다가 안드와 아이폰의 화면이 각각 다르게 나온다던지
기기업데이트에 따라 화면이 바뀐다던지 하는 문제가 발생하면
유지보수가 용이하긴 커녕 도리어 문제분석자체가 안되어
시간이 몇배 더 걸릴 수 있습니다

_네이티브앱

폰에 설치해서 쓰는, 쉽게 말해 컴퓨터에서 까는 프로그램의 모바일 버전
성능, 기능 모두가 위의 것들을 압도하지만
프로그램 언어에 대한 이해가 필요하므로
개발 시간이 길고 비용이 많이 듭니다

출처 – http://belll.tistory.com/19