블로그 이미지
윤영식
Frontend Application Architecter, Full Stacker, KnowHow Dispenser and Bike Rider

Publication

Statistics Graph

Recent Comment

2013.11.27 14:37 HTML5, CSS3/CSS

개발자들이 서비스를 만들면서 어렵게 여기는 부분이 디자인이다. 특히 웹 서비스를 만들라 치면 어디서 부터 시작해야 할지 난감할 때가 있는데 이를 해소하고자 CSS Framework를 오픈소스로 제공하는 업체들이 늘어나고 있다. 가장 유명한 Twitter Bootstrap 부터 Pure까지 그 종류도 많은데 어떤 것들이 있는지 정리해 본다. 정리하면서 느끼는 것은 Bootstrap을 확장한 framework인 Bootflat, Maxmertkit같은 것이 좀 더 다양한 느낌의 모듈을 제공하고, Metro UI스타일의 Flat 디자인을 언젠가 꼭 써보고 싶다. 그리고 GroundWork, Foundation, Pure 도 테스트해 볼 필요가 있겠다. 그외의 웹 모듈은 선택한 CSS Framework에 Add할 수 있는지 확인 후 쓰면 되겠다 



Twitter Bootstrap

  - http://getbootstrap.com/

  - CSS 화면 레이아웃과 스타일 제공

  - 화면 구성을 위한 jQuery 접목된 JavaScript 컴포넌트 제공 

  - RWD (반응형 웹디자인) 제공 : RWD 25개 도구들

  - 다양한 곳에서 많이 사용하나 개인적으로 색감이 이젠 식상할 때가 된 듯함

  - Bootstrap 확장 툴박스들 소개  그외 정리한 툴들 (강추)

  - OpenTutorial 동영상으로 배우기

  - Bootstrap v3 으로 화면 만들기

  - 다양한 도구와 컴포넌트 목록 *강추

  - BootStrap Theme 바꾸는 방법




Semantic UI

  - http://semantic-ui.com/

  - Bootstrap같은 기계적인 용어보단 인간친화적인 CSS Class 명칭

  - 좀 더 상업적인 UI 제작에 필요한 다양한 웹 모듈 제공

  - 개인적으로 인간친화적인 따뜻한 색감을 좋아함




Zurb Foundation 

  - http://foundation.zurb.com/

  - 다양한 화면 레이아웃 템플릿 제공으로 빠른 포로토타입핑 가능

  - RWD 제공

  - 웹서비스 페이지 만들기 적합




BootSnipp

  - http://bootsnipp.com/

  - Bootstrap에서 사용하는 코드 템플릿 제공

  - 다른 Template 리소스 사이트들



Start Bootstrap Template

  - http://startbootstrap.com/

  - template을 가지고 시작해 보자 

  - BootPlus에서도 제공함 

  - CodeStrap 또 다른 변형

  - http://bootswatch.com/ 에서는 다양한 Theme 색감의 bootstrap 선택가능



Bootflat

  - http://www.flathemes.com/

  - Bootstrap v3.0 확장판이다 

  - Bootstrap css 파일과 확장된 css를 링크하므로 Bootstrap에서 모자란 부분을 보완할 수 있다

  - https://wrapbootstrap.com/ 의 테마들처럼 Bootstrap 확장 느낌이 난다 



BootPlus

  - http://aozora.github.io/bootplus/

  - Bootflat과 유사한 기능을 제공

  - CSS의 느낌을 좀 더 간결하게 표현함 



FlatStrap

   

  - http://flatstrap.org/index.html

  - Bootflat과 유사함 



LeapStrap

  - http://wilkesalex.github.io/leapstrap/

  - touch smart device 고려 



FuelUX

  - http://exacttarget.github.io/fuelux/

  - Bootstrap 스타일의 다양한 컨트롤러 



PixelKit 

  

  - http://pixelkit.com/

  - 프리미엄 UI Kits 을 Theme별로 제공을 한다 

  - 예제 Sweet Candy

  - 소스 : https://github.com/Pixelkit/PixelKit-Bootstrap-UI-Kits

  - 상용이다 



Maxmertkit

  - http://www.maxmert.com/

  - Bootstrap 과 유사한 느낌을 전달 CSS class가 항시 "-" 또는 "_"로 시작하여 다른 CSS Framework와 충돌방지 

  - Bootflat에서 제공하지 않는 3D 적인 디자인과 효과 좋음 

  - Bootstrap css 파일과 혼용하여 사용할 수 있는지 체크 필요



Metro UI CSS

  - http://metroui.org.ua/

  - MS의 Metro Flat 디자인 제공

  - Bootstrap에서 느끼지 못하는 깔끔함이 있음 

  - RWD 제공




GroundWork

  - http://groundwork.sidereel.com/

  - 웹페이지, 이미지 겔러리, 커머스사이트 레이아웃 예제 제공

  - 다양한 화면사이즈에 대한 테스트 제공 (RWD)

  - 개인적으로 좋아하는 약간 따뜻한 색감 

  - 웹 모듈은 많지 않고 다른 UI 툴과 연계해서 사용하면 좋을 듯함



Pure

  - http://purecss.io/

  - Yahoo 에서 만듦

  - 사이즈 작고 flat한 디자인으로 간결한 맛이 있음 



Ink v.2

  - http://ink.sapo.pt/

  - 빠르게 웹 인터페이스를 개발할 수 있는 툴이다 

  - RWD 제공

  - Bootstrap과 거의 유사

  - Drap 컴포넌트 제공 



UIKit

  - http://getuikit.com/

  - 30가지의 UI 모듈을 제공

  - 다른 CSS Framework엔 없는 효과를 준 모듈 존재



Amazing Web Library

  - http://a-web.me/

  - UIKit과 유사하지만 차트와 그리드에 대한 부분이 강력함 




Brick

  - http://mozilla.github.io/brick/

  - 모질라에서 제공

  - 모바일에 특화된 UX적인 효과 제공

  - 모바일 예제 데모를 충실히 보여줌 



MicroJS

  - http://microjs.com/ (강추)

  - 다양한 웹 컴포넌트 검색 

  - 파일 크기 명시



<참조>

  - 원문 : 10 Free UI Kit

  - 원문 : 18개의 CSS Framework

  - 50개의 Web Developer를 위한 리소스와 툴들

  - Twitter Bootstrap v3 이해하기

  - Yahoo Pure에 대하여

  - HTML5 free Layout Template을 얻고 싶다면

  - UI Kit Maker

  - 유용한 CSS 도구들 (필독)

저작자 표시 비영리 변경 금지
신고
posted by peter yun 윤영식

AngularJS는 구글이 후원하고 있고 2013년 구글I/O에서도 2개의 세션에서 소개가 될 정도로 관심이 높은 차기 웹 클라이언트단의 애플리케이션 개발을 위한 프레임워크이다. MVC -Model View Controller - 기반으로 역할을 나누고, SoC (separate of concer)이라는 관심의 분리를 위하여 모듈에 대한 DI (Dependency Injection)을 사용한다. 




1. AngularJS 어떻게 배워야 하지?

  - AngularJS에 대한 개념적 이해와 익히는 방법을 알아보자 

  - 전반적으로 다시 한번 복습해 보고

  - 이젠 AngularJS만의 길을 가보자 



2. AngularJS 스케폴딩 둘러보기 

  - SmartVisualization/app 폴더는 다음과 같다 

    + index.html : 최초 호출 페이지

    + bower_components : bower에 의해서 설치된 client에서 사용하는 library들. 

       bower 를 통해 install 하면 JavaScript 링크가 index.html에 자동 삽입된다 

    + scripts : angular javascript 파일 폴더들 

    + views : angular의 template 파일은 .html 확장자이다. 보통 partial 파일이라고 한다

       


  - index.html 가 메인 페이지이다 

    + ng-app 를 통하여 AngularJS 애플리케이션 명칭을 정의

    + ng-view 는 views 폴더의 partial html이 표현되는 영역이다. DOM을 보게 되면 해당 영역만 변경이 이루어 진다 

    + app.js 가 AngularJS의 메인 수행 파일이고 일반적으로 partial view에 대한 routing을 정의한다 

    + controller/main.js 은 AngularJS의 컨트롤러 파일이다. partial html 파일이 여러개 있더라도 동일한 controller를 사용할 수 있다. 

<!doctype html>

<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->

<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->

<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->

<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title></title>

    <meta name="description" content="">

    <meta name="viewport" content="width=device-width">

    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->


        <!-- build:css(.tmp) styles/main.css , 부트스트랩의 RWD까지 적용되어 있다 -->

        <link rel="stylesheet" href="styles/bootstrap.css">

        <link rel="stylesheet" href="bower_components/bootstrap-sass/bootstrap-responsive-2.3.2.css">

        <link rel="stylesheet" href="styles/main.css">

        <!-- endbuild -->

</head>

  <!-- yo angular:app SmartVisualization 명령수행으로 App 접미어를 붙여서 프로젝트 명칭을 만들었다 --> 

  <body ng-app="SmartVisualizationApp">

    <!--[if lt IE 7]>

      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>

    <![endif]-->


    <!--[if lt IE 9]>

      <script src="bower_components/es5-shim/es5-shim.js"></script>

      <script src="bower_components/json3/lib/json3.min.js"></script>

    <![endif]-->


    <!-- Add your site or application content here : ng-view 영역이 실제 partial html 파일로 대체되는 영역 -->

    <div class="container" ng-view=""></div>


    <!-- angular.js 자체에 light jquery를 내장하고 있지만 정식버전 jquery를 사용하고 싶다면 

          하기와 같이 angular 위에 놓으면 된다 -->

    <script src="bower_components/jquery/jquery.js"></script>

    <script src="bower_components/angular/angular.js"></script>


        <!-- build:js scripts/plugins.js, 사용하지 않는 부트스트랩 자바스크립트는 제거한다 -->

        <script src="bower_components/bootstrap-sass/js/bootstrap-affix.js"></script>

        <script src="bower_components/bootstrap-sass/js/bootstrap-alert.js"></script>

        .. 중략 ..

        <script src="bower_components/bootstrap-sass/js/bootstrap-scrollspy.js"></script>

        <script src="bower_components/bootstrap-sass/js/bootstrap-collapse.js"></script>

        <script src="bower_components/bootstrap-sass/js/bootstrap-tab.js"></script>

        <!-- endbuild -->


        <!-- build:js scripts/modules.js -->

        <script src="bower_components/angular-resource/angular-resource.js"></script>

        <script src="bower_components/angular-cookies/angular-cookies.js"></script>

        <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>

        <!-- endbuild -->


        <!-- build:js({.tmp,app}) scripts/scripts.js, 업무적으로 추가되는 파일은 이곳에 넣는다

              단, yo 명령으로 controller 또는 service를 생성하면 자동으로 파일명이 추가된다  -->

        <script src="scripts/app.js"></script>

        <script src="scripts/controllers/main.js"></script>

        <!-- endbuild -->

</body>

</html>


  - AngularJS 메인 애플리케이션 파일인 app.js 을 보자 

    + module : ng-app에서 정의한 SmartVisualizationApp 명칭이 들어가고 

      [] 에는 별도로 파일을 구분하였다면 의존관계에 있는 모듈을 정의 한다 

    + templateUrl : index.html 위치에서 partial html 상대위치를 정의한다 

    + controller : main.html 안의 model 제어를 위한 controller명칭을 정의한다 (controller/main.js 소스에 정의된 컨토롤러 명칭)

    + redirectTo : http://localhost:9000/ 을 넣으면 무조건 views/main.html이 보여지도록 그외의 url에 대한 redirect를 정의한다 

'use strict';


angular.module('SmartVisualizationApp', [])

  .config(function ($routeProvider) {

    $routeProvider

      .when('/', {

        templateUrl: 'views/main.html',

        controller: 'MainCtrl'

      })

      .otherwise({

        redirectTo: '/'

      });

  });


  - main.html 은 partial html 파일이다   

    + 이곳에 이동평균에 관련된 view가 정의될 것이다 

<div class="hero-unit">

  <h1>'Allo, 'Allo!</h1>

  <p>You now have</p>

  <ul>

      <li ng-repeat="thing in awesomeThings">{{thing}}</li>

  </ul>

  <p>installed.</p>

  <h3>Enjoy coding! - Yeoman</h3>

</div>



3. index.html 메인 뷰페이지 RWD 수행

  - RWDResponsive Web Design의 약어로 반응형 웹 디자인이라고 한다. 

    RWD의 목적은 사용자에게 최적의 뷰 경험을 제공하는데 있다. 

    웹 서비스를 만들 때 중요한 요소로 검색엔진 최적화, 웹 접근성, 반응형 웹 디자인을 필수로 고려해야 한다. (참조

  - RWD는 시각화 표현에 대한 부분이고 웹에서는 CSS가 이를 담당하며, 가장 유명한 CSS Framework으로 Twitter Bootstrap이 있다

    하지만 Bootstrap 이외에 GroundWorks, Zurb Foundation, Amazing Web Library 들도 있으니 구미에 맞는 것을 선택한다.

  - Bootstrap을 사용하게 되면 몇가지 유용한 도구와 서비스들이 있다. 

    여기서는 Bootstrap 기반으로 화면의 Layout을 만들어 주는 Bootply를 사용한다 

 


  - 화면에서 가운데 메뉴 "Drag-and-Drop"을 선택하면 팝업창에서 3가지 Layout 옵션이 나온다. 여기선 "Simple"을 선택한다

  

  

  - Editing 화면에서 내역을 수정하고 상단의 "Run"을 클릭하면 변경 내역을 다양한 기기 해상도로 테스트해 볼 수 있다 

    + yo angular는 bootstrap 2.3* 기반이니 주의한다. Bootply는 boostrap v3.*도 지원한다 (default v2.3*)

  


  - Bootply의 html 내역중 메뉴 관련 내용을 copy하여 index.html에 추가한다

    ng-view 부분에 main.html 내역이 표시될 것이다 

// index.html 추가 부분

<body ng-app="SmartVisualizationApp">

    <!--[if lt IE 7]>

      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>

    <![endif]-->


    <!--[if lt IE 9]>

      <script src="bower_components/es5-shim/es5-shim.js"></script>

      <script src="bower_components/json3/lib/json3.min.js"></script>

    <![endif]-->


    <div class="navbar navbar-inverse navbar-fixed-top">

      <div class="navbar-inner">

        <div class="container">

          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

          </button>

          <a class="brand" href="#">Smart Visualization</a>

          <div class="nav-collapse collapse">

            <ul class="nav">

              <li class="active"><a href="#">Home</a></li>

              <li><a href="#about">MovingAverage</a></li>

            </ul>

          </div><!--/.nav-collapse -->

        </div>

      </div>

    </div>


    <!-- Add your site or application content here -->

    <div class="container" ng-view=""></div>


  - main.html 전체 내역을 다음과 같이 바꾼다. bootstrap의 container css class로 감싸준다. 

    app.js에서 루트 '/' 호출은 /views/main.html 로 라우팅되므로 index.html의 ng-view에서 main.html 보여지게 된다 

<div class="container">

  <h1>Smart Visualization Service</h1>

  <p>

    Job Less, Feel More - 인위적인 작업을 적게 하면 더 행복해 질 수 있다고 믿습니다.<br> 

    단순 파일 업로드만으로 데이터 통계를 미려한 차트로 표현해 드립니다.<br>

    .csv 파일에 시간과 수치값만 있다면 SVG Chart로 통계 변환 수치를 보여드립니다

  </p>

  

</div> <!-- /container -->


  - 변경 내역을 저장하고 확인해 보자 

$ grunt server


// 브라우져 사이즈를 줄여보면 RWD 경험을 제공한다 



<참조>

  - 견고한 Web Applicatoin을 만드는 방법 with AngularJS

  - Think in AngularJS Way : 접근 방법에 대한 조언

  - Bootstrap Layout 전문 서비스 Bootply

  - Boostrap기반의 유용한 도구와 서비스들

저작자 표시 비영리 변경 금지
신고
posted by peter yun 윤영식
prev 1 next