Bootstrap free template 소개


관련 자료

https://themequarry.com/category/free

 

Free High Quality Website Templates | ThemeQuarry

DETAILS DEMO

themequarry.com

https://material-dashboard-laravel.creative-tim.com/home

 

Material Dashboard Laravel by Creative Tim

Material Dashboard Laravel is a Free Material Bootstrap Admin Preset for Laravel with a fresh, new design inspired by Google's Material Design.

material-dashboard-laravel.creative-tim.com

https://www.pikeadmin.com/demo/

 

Pike Admin - Free Bootstrap 4 Admin Template

Orders 1,587 15 New Orders

www.pikeadmin.com

 



https://www.themequarry.com에서 무료 카테고리로 들어가면 여러가지 공짜 템플릿을 살펴 볼 수가 있다.

 

[그림] 템플릿 화면

 

 

 

 

웹에서 지도 연동 라이브러리 - LeafLetJS


관련 자료

https://leafletjs.com/

 

Leaflet — an open-source JavaScript library for interactive maps

Leaflet is a modern, lightweight open-source JavaScript library for mobile-friendly interactive maps.

leafletjs.com

https://github.com/Leaflet/Leaflet

 

Leaflet/Leaflet

:leaves: JavaScript library for mobile-friendly interactive maps - Leaflet/Leaflet

github.com

 

 



 

 

[그림] LeafLetJS logo

 

 

 

[그림] leaftlet을 사용해 연동한 지도 화면

 

 

 

Free bootstrap template - 추천 무료 부트스트랩 템플릿


관련 자료

https://github.com/ColorlibHQ/AdminLTE

 

ColorlibHQ/AdminLTE

AdminLTE - Free Premium Admin control Panel Theme Based On Bootstrap 3.x - ColorlibHQ/AdminLTE

github.com

https://adminlte.io/

 

Free Bootstrap Admin Template | AdminLTE.IO

Bootstrap is raking over the world and so is React. Therefore, we decided to showcase these outstanding React Bootstrap templates May 20, 2019

adminlte.io

https://github.com/weituotian/AdminLTE-With-Iframe

 

weituotian/AdminLTE-With-Iframe

AdminLTE With Iframe- 基于AdminLTE适合中国国情的网站模版. Contribute to weituotian/AdminLTE-With-Iframe development by creating an account on GitHub.

github.com

https://weituotian.github.io/AdminLTE-With-Iframe/pages/index_iframe.html

 

AdminLTE 2 | with iframe

 

weituotian.github.io

https://themequarry.com/

 

Premium Website Themes & Templates | ThemeQuarry

DETAILS DEMO

themequarry.com



 

 

The MIT License (MIT) 라이센스로 배포가 되고 있는 무료 부트스트랩 템플릿이다. ( 링크

 

[그림] AdminLTE 템플릿 대쉬보드 화면

 

다른 github에서 "weituotian"라는 분이 iframe용으로 탭 네비게이션 관리자 페이지를 만들었다. 탭 네비게이션이 필요한 사람은 이 템플릿을 사용해도 되겠다.

 

[그림] AdminLTE with iframe 대쉬보드 화면

 

Google 웹 개발자를 위한 점검 사이트 Web.dev 사이트


관련 자료

https://web.dev/

 

web.dev  |  web.dev

Get the web's modern capabilities on your own sites and apps with useful guidance and analysis from web.dev.

web.dev

 



 

[그림1] web.dev 사이트

 

 구글에서 만든 web.dev 사이트는 웹사이트에 대한 감사를 실행하고 성능과 웹 접근성 테스트 SEO에 대한 점검 리포트를 작성해 준다. 이 도구로 얼마나 잘 만들어 졌는제를 측정할 수 있는 도구이다.

 

아래는 네이버 사이트를 측정해 본 리포트이다.

 

 

[그림1] 네이버 점검 리포트

 

CSS Framework 기능별, 지원 브라우저별 정리 사이트


참조 URL
  1. http://usablica.github.io/front-end-frameworks/compare.html
















Twitter BootStrap

트위터 부트스트랩 한글화 사이트

강력한 프론트엔드 프레임워크


참조 URL
  1. http://bootstrapk.com/BS3/
  2. http://bootstrapk.com/BS3/components
  3. http://getbootstrap.com/


 영어을 한글로 번역해 놓은 참 고마운 사이트이다.

http://bootstrapk.com/BS3/components 에서는 여러가지 예제들로 어떻게 구성이 되는지 보여주고 있다.







인터랙티브로 말하는 웹과 웹앱 개발에 필요한 MVC 프레임웍의 기초 지식

( jQuery template )


참조 URL
  1. https://github.com/BorisMoore/jquery-tmpl



인터랙티브로 말하는 웹과 웹앱 개발에 필요한

 MVC 프레임웍의 기초 지식

jQuery data binding )


참조 URL
  1. https://github.com/jquery/jquery-datalink
  2. http://blog.naver.com/PostView.nhn?blogId=loudon23&logNo=30096650420&parentCategoryNo=36&viewDate=
  3. http://jsfiddle.net/rniemeyer/4FdcY/
  4. http://blog.outsider.ne.kr/532



2013/09/21 - [HTML5] - 인터랙티브로 말하는 웹과 웹앱 개발 에서 언급이 되었던 DataBinding에 대해서 좀더 알아 보도록 하겠다.



Data Binding을 이용하면 편리하게 객체값에 대해서 DOM과 동기화를 수행할 수 있다. 예로 사용자가 웹 페이지에서 값을 입력하면 입력된 값을 자바스크립트로의 값으로 변환해야 한다. 그리고 반대로 자바스크립트의 값이 변경 되면 웹 페이지에도 반영을 해야 한다. 지 작업을 개발자가 일일이 수행해야 했다. 그렇지만 jQuery의 DataLink를 이용하면 two-way 방향으로 자동으로 동기화가 되게 된다. 개발자는 코드로 보여주는 것이 이해가 빠르므로 아래 코드를 살펴보자.

(여기서 소개하는 jQuery의 DataLink는 약 2년정도 전에 발표가 되었으며 AngularJS나 KnockOutJS의 DataBinding의 개념을 이해 시키기 위해 소개하는 기술임을 알아두기 바란다.)


<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/jQuery.DataLink.js"></script>
 
<script>
    // 객체 선언
    var person = { };
 
    $().ready(function () {
        // 데이터와 HTMl을 연결 시킨다.
        $("form").link(person, {
            firstName: "firstName",
            age: "age",
        });
 
        // person의 firstName이 비어 있는지 체크
        logWrite(person.firstName);
 
        // datalink로 firstName에 새로운 값을 넣는다.
        // 내부적으로 링크되어 있는 노드에 값이 변경됨을 알려 준다.
        $(person).setField("firstName", "새로운 값");
        $(person).setField("age", "30");
 
        // 값이 변경 되었는지 체크한다.
        logWrite('person : ' + JSON.stringify(person));
        // 자바스크립트의 객체만 변경 하였으나 HTML 노드의 값이 변경이 제대로 되었는지 체크
        logWrite('input text : ' + $("#firstName").val());
 
        // Form안에 있는 input 테크에서 값이 변경이 되면 실행
        $("form").change(function () {
            // person의 값을 로그에 찍어 준다.
            logWrite('person : ' + JSON.stringify(person));
        });
    });
 
    // 로그로 저장이지만 HTMl 노드에 보여주는 역할을 한다.
    function logWrite(msg) {
        $('#log').append('<li>' + msg + '</li>');
    }
 
    // 버튼 클릭시 객체의 값을 변경
    function personNameChange(str) {
        $(person).setField("firstName", str);
    }
</script>
 
<form name="person">
    <label for="name">Name:</label>
    <input type="text" id="firstName" name="firstName" />
    <input type="text" id="age" name="age" />
    <button onclick="personNameChange('클릭으로 객체 값 변경'); return false;">객체 값 변경</button>
    <br />
    <ul id="log"></ul>
</form>

[코드1] jquery의 datalink를 이용해서 DOM과 연결하는 코드


- $("form").link(person, { }) : Datalink의 확장 메소드로 자바스크립트의 person 객체와 DOM ( HTML Tag )을 연결한다.

- $(person).setField("firstName", "새로운 값") : person 객체에 값을 변경하고 내부적으로 연결된 DOM의 값을 변경하여 준다.

- logWrite('person : ' + JSON.stringify(person)) : person의 값을 JSON 형식으로 만들어서 로그에 저장한다.



이제 양방향으로 연결되었으니 화면으로 확인해 보자.



[그림1] jQuery의 Datalink로 연결된 화면


1. 처음에는 person.firstName의 값이 할당되어 있지 않기 때문에 'undefined' 로그에 출력 되었다.

2. person의 값이 정상적으로 할당이 되었는지 체크한 로그

3. person의 변경된 값으로 input 값이 바로 변경되었는지 체크한 로그

4, 5. 사용자가 input에 값을 변경한 그래도 person의 값이 반영된 로그

6. '객체 값 변경' 버튼을 눌러 person의 값을 변경하였을 때 정상적으로 DOM에 반영된 로그


위와 같이 Data binding을 사용하면 사용자의 값을 추적하는 번거로운 작업을 개발자가 아닌 라이브러리에서 관리가 되므로 좀더 많은 시간을 비지니스 로직에 투자할 수 있다.











인터랙티브로 말하는 웹과 웹앱 개발


참조 URL
  1. http://k2unip.tistory.com/103
  2. http://helloworld.naver.com/helloworld/179084
  3. http://calmglow.egloos.com/4792335
  4. http://googledevkr.blogspot.kr/2013/07/webapp-with-google-drive.html
  5. http://webapp.pe.kr/rb/
  6. http://h5bak.tistory.com/2


N사이트 사전으로 '인터랙티브'의 의미를 알아 보면 ['상호간'의 뜻을 지닌 인터(Inter-)와 '활동적'의 뜻을 지닌 액티브(Active)의 합성어로, 상호활동적인, 곧 쌍방향이라는 의미를 지닌다. 사용자가 마치 컴퓨터와 대화를 하듯이 입력출력을 할 수 있는 프로그램으로...]라고 정의 되어 있다. 실제 개발에서 인터랙티브한 웹( 또는 웹앱)을 지원하기 위해서는 사용자의 반응에 빠르게 응답할 수 있도록 설계되어야 할 것이다. 이번에는 웹과 웹앱 개발에서 사용자의 반응에 빠르게 반응할 수 있도록 해주는 방법에 대해서 개략적으로 알아 보도록 하겠다.

우선 웹과 웹앱에 대한 기본적인 구동에 대한 차이점을 아래 "그림1, 2"로 흐름을 알아 보도록 하자.

[그림1] 일반적인 웹 페이지 네비게이션 흐름


일반적인 웹은 웹 페이지에 필요한 자바스크립트나 CSS 또는 이미지들을 사용자의 네비게이션의 이동마다 전체적으로 다시 다운받아 브라우저에서 초기화를 진행하고 랜더링을 하는 구조다. 위 '그림1' 에서와 같이 왼쪽에서 오른쪽으로 페이지 이동이 일어 나고 그때마다 모든 파일을 서버에서 다운받고 있다. 이런 구조가 지금까지 대 부분의 웹 페이지에서 일어나는 흐름이다. 대표적으로 N 사이트의 모바일 전용 사이트(m.naver.com)에서도 이와 같은 구조로 되어 있다.


[그림2] 웹앱 네비게이션 흐름


웹앱은 기본적으로 UI에 필요한 자바스크립트와 CSS 그리고 이미지들을 최초 초기화때에 모두 가져온다. ( 또는 웹앱으로 배포된 앱은 같이 배포가 되어 있다.) 그리고 UI 이외의 요소인 데이터만 웹 서버를 통해 추가적으로 가져와서 사용자의 반응에 따라 필요한 UI를 페이지 전환 없이 사용자에게 보여준다. 

사용자의 입장에서 어떤 구조가 더 빠르게 반응할 수 있는지는 굳이 증명 하지 않아도 알 수 있을 것이다. 그래서 요즘에는 웹에서도 위와 같은 구조를 지원하기 위해 여러가지 라이브러리들이 개발되고 있다. 이런 라이브러리들을 아래에서 웹앱 개발을 지원하는 프레임웍에 대해서 먼저 검토하고 알아 보도록 하겠다.

웹앱 개발을 지원하는 대표적인 프레임웍은 "Sencha Touch"와 "jQuery Mobile"이 있다. Sencha Touch는 가장 화려한 UI와 편리한 기능들을 제공하는 컴포넌트들이 있어서 어렵지 않게 웹앱을 만들 수 있다. 그렇지만 Sencha Touch를 사용하면 다른 라이브러리와의 연동이 상당히 제한되어 개발자의 창조적인 사고에 영향을 받을 수 있다. 그와 반대로 jQuery Mobile은 유명한 jQuery 진영에서 개발된 프레임웍이며 기존 그대로 jQuery를 사용하여 개발 할 수 있다. 그리고 수많은 오픈소스 진영에서 활발하게 개발되고 있어서 앞으로의 발전이 가장 많이 될 것으로 기대하고 있다. 그리고 jQuery Mobile는 제일 많은 플랫폼을 지원하고 있어서 한번만 개발하여 배포만 거의 모든 환경에서 사용할 수 있을 것이다. 


[그림3] 센차터치 데모 예시

( http://www.sencha.com/products/touch )



[그림4] jQuery Mobile 사이트에서 모바일 화면을 구성하는 화면

( http://jquerymobile.com/ )


jQuery Mobile 사이트에 들어가 보면 '그림3'과 같이 웹에서 직접 UI를 그려보고 테스트를 할 수 있도록 지원하고 있다. 필자가 드래그 앤 드롭으로 Header, Footer, Link, Button... 등등을 넣어서 테스트한 화면을 '그림4'에서 처럼 확인할 수 있다. 그리고 오른쪽 위 상단에 'Download HTML'을 클릭하면 내가 편집한 화면을 그대로 다운로드 받는 것을 지원한다. 다운로드 받은 파일을 압축해제 하면 '그림5'와 같은 파일을 확인할 수 있다.



[그림5] 다운로드 받은 압축 파일을 해제한 폴더 화면



이 파일을 바탕으로 구현하고자 하는 웹앱을 완성하면 될 것이다. 그리고 이런 방법외에도 아래 '그림6'처럼 갤러리를 제공하고 있어서 디자인이나 레이아웃 또는 기법들을 검토할 수 있는 웹 사이트까지 제공하고 있다.



[그림6] jQuery Mobile로 만든 사이트 갤러리


이 갤러리를 이용해서 내가 만들 웹앱에 대한 영감을 얻어 사용자에게 좀더 편리하고 완성된 웹앱을 만드는 밑거름으로 사용하기를 바란다.



이제 일반적인 웹 페이지에 대해서 접근해 보도록 하겠다. 웹 개발이 발전하면서 일반 웹에서도 웹앱과 같은 구조를 지향하기 위한 방법론이 거두되면서 SPA라는 개념이 나오게 되었다. 위키 피디아에서 SPA( http://en.wikipedia.org/wiki/Single-page_application )를 '데스크탑 애플리케이션에 더 가까운 더 유연한 사용자 경험을 제공하는 것을 목표로 하나의 웹 페이지로 만든 웹 응용프로그램 또는 웹 사이트이다'라고 되어 있다. SPA의 형식이야 어떻든 웹앱과 전체적인 구조와 비슷하게 같이 가져 간다는 것이다. 그리고 SPA를 지원하기 위해서 여러가지 프레임웍과 라이브러리가 생겨나게 되었다.


웹앱이나 SPA는 하나의 웹 페이지에서 여러개의 비지니스 로직을 포함하기 위해 방대한 자바스크립트의 관리가 힘들게 되었다. 그래서 자바스크립트를 모듈화 해주는 프레임웍과 비 동기적으로 자바스크립트를 가져와 실행되도록 해주는 비동기 지원 라이브러리의 등장이 있었고 각각의 특징들을 모아 자바스크립트 MVC(Model-View-Controller) Framework이 등장하고 End-to-End 방식으로 지원하는 프레임웍까지 등장하게 되었다. 


 역할

 라이브러리 명 

 모듈화 지원

 - Backbone.js ( http://backbonejs.org/ ) 

 비 동기 로드 지원

 - RequireJS ( http://requirejs.org/ ) 

 MVC(Model-View-Controller) 프레임웍 

 - AngularJS ( http://angularjs.org/ )

 - knockoutJS ( http://knockoutjs.com/ )

 End-to-End 프레임웍

 - Meteor ( http://www.meteor.com/ ) on Node.js

 - Derby ( http://derbyjs.com/ ) on Node.js

[표1] 역할 별 자바스크립트


※ 자바스크립트 MVC는 서버사이드에서 처럼 브라우저단에서도 데이터와, 뷰와 로직 처리를 분리하여 개발 및 확장, 유지보수성을 높이고 최저 품질을 높이기 위한 방법을 지원하자는 취지로 만든 프레임웍이다.

※ End-to-End 프레임웍은 Node.js 진영에서 지원되는 프레임웍으로 서버에서 브라우저까지 모두 자바스크립트로 개발할 수 있도록 되어 있다.

※ AngularJS, KnockOutJS는 Databinding을 지원한다. DataBinding이란 자바스크립트의 객체값으로 HTML의 테그와 양 방향 통신을 하여 일치 시켜 주는 작업을 지원하는 것을 말한다. 그래서 개발자는 HTML 테그를 컨트롤 할 필요 없이 자바스크립트 객체 값만 변경 시키면 UI는 저절로 변경이 일어난다. ( '그림9' 참조 )



[그림7] MVC를 지원하는 AngularJS


[그림8] MVC를 지원하는 KnockOutJS



[그림9] KnockOutJS에서 Databinding의 예시 ( http://learn.knockoutjs.com/#/?tutorial=custombindings )



이런 라이브러리들은 개발자의 사소한 실수를 줄이고 고 품질의 코드를 작성 할 수 있도록 개발자를 고양시켜 주기도 한다. 여기서 언급된 라이브러리들이 생소하다면 지금 부터라도 하나 하나씩 접해 보면서 자기만의 것으로 만들어 보기를 적극적으로 권해 드린다.


마지막으로 필자가 생각하는 라이브러리를 익혀 나가는 순서는 아래와 같다.


- Backbone으로 모듈화 및 기본적인 MVC의 개념을 잡고

- Requirejs로 비 동기적으로 js을 불러와 네트워크 트래픽을 분산 시키는 기법을 익히고

- Backbone + Require 또는 AngularJS + RequireJS(KnockOutJS + RequireJS)의 조합으로 MVC를 좀더 심화 시킨다.

  (AngularJS는 구글에서 KnockOutJS는 MS에서 서포트 해주고 있다.)


이와 같은 순서로 점진적으로 고급기법들을 익혀 나가다 보면 사용자에게 보다 빠르고 에러가 나지 않는 신뢰할 수 있는 웹페이지를 제공할 수 있을 것이고 핵심 로직에만 집중할 수 있기에 보다 높은 품질의 코드를 작성할 수 있게 될 것이다. 그렇게 된다면 프로그래머로서 현재 보다 더 만족스러운 삶을 살 수 있을 것이라고 기대하면서 이 글을 마치겠다.




Adobe Animation Edge CC


참조 URL
  1. http://html.adobe.com/edge/animate/
  2. http://helpx.adobe.com/creative-cloud/learn/start/animate.html



 Adobe에서 HTML5에서 애니메이션을 쉽게 만들 수 있는 툴을 제공하고 있다. 플래시나 Silverlight 같은 타임라인으로 애니메이션을 만들도록 하고 있다.




[동영상1] Adobe Edge로 애니메니션 만드는 예제














+ Recent posts