Category Archives: Language

반응형 웹과 부트스트랩(bootstrap)

반응형 웹(Responsive Web)이라는 용어가 한 때 유행이었다. 때마침 등장한 트위터의 부트스트랩(bootstrap)은 폭발적으로 성장했다. 반응형 웹이 쓰레기인지 아닌지에 대한 논쟁도 가끔식 봤었는데, 나처럼 웹 디자인에 문외한인 사람에게돈 MUST 아이템이다.

이때 부트스트랩 배우면서 쓴 글인 듯 하다. 2버전대의 예제라 예제 코드는 크게 도움이 되지 않는다.

반응형 웹 디자인(RWD : Responsive Web Design)

트위터 부트스트랩(Bootstrap)을 살펴보고 있는데, 반응형 웹 디자인(RWD: Responsive Web Design)이라는 용어가 나온다. 그리고 미디어 쿼리까지. 인터랙티브한 웹 UX를 뜻하겠지라며, 그냥 무심코 지나쳤는데 아무래도 새로운 개념인 듯 하여 여기저기 찾아본 흔적들을 여기에 남겨 본다.

우선 슬라이드 쉐어(SlideShare.net)에 올라온 반응형 웹에 대한 소개 자료는 다음과 같다.

이 소개 자료에서 설명하는 내용을 정리해 보자.

반응형 웹이란 “N-Screen 시대에 맞게, 모든 뷰포트(viewport)에서 최적의 컨텐츠가 보이도록 하는 것”이다. 반응형 웹의 3요소는 다음과 같다.

  • Fluid Grids
  • Flexible(Responsive) Images
  • Media Queries

일단 N-Screen을 지원하기 위해서인 듯 하다. 아래는 굿페이지에서 정의한 내용이다.

반응형 웹(Responsive Web)은 HTML 5의 미디어 쿼리를 이용하여 하나의 소스로 제작된 컨텐츠가 데스크탑에만 국한되지 않고, 타블릿 PC, 모바일 폰 등 다양한 크기의 디바이스 환경에 맞추어 해상도나 화면이 동적으로 변환되는 기법을 말합니다.

깔끔한 정의다. 이제 What이 아닌, How를 찾아보자. 그래서 어떻게 하면 되는 건가?

먼저 “반응형 웹디자인 관점에서의 웹표준 이슈“라는 주제의 발표를 발견했다.. 신현석님이 발표한 내용으로, 여기에서 관련된 내용을 찾을 수 있다.

또 다른 재밌는 쓰레드는 less is more에서 “반응형 웹 같은 소리 하고 있네“라는 글(지금은 닫혔다)로, 위의 발표자료를 디스하는 글이다.

소소한 재미가 있었지만, 오늘의 구글링은 크게 도움이 되지 않았다….

는 찰나에, 트위터 부트스트랩(위키북스 / 김덕기 지음)에서 howto 정보를 찾을 수 있었다. 정리하면 다음과 같다.

반응형 디자인이란 웹 페이지가 모니터에 폭에 반응하여 적용되는 디자인이다. 반응형 디자인을 만들려면 2가지 요소가 필요하다.

  • 뷰포트(viewport) 메타 태그
  • 미디어 쿼리(Media Query)

뷰포트 메타태그는 아래와 같이 작성한다.

“width=device-width”는 컨텐츠의 폭을 디바이스의 스크린 크기에 맞추라는 뜻이다.

“initial-scale=1.0″은 줌(zoom) 사이즈를 1:1로 맞추라는 뜻이다.

이렇게 뷰포트 메타태그를 정의한 후, 미디어 쿼리를 추가해야 한다. 미디어 쿼리는 CSS3 규칙으로 화면 폭에 따라 스타일시트를 적용하는 방식이다. 미디어 쿼리를 작성하는 방법에는 2가지가 있다. 아래와 같이 개별적으로 정의할 수 있다.

또는 아래와 같이 하나의 스타일 시트에서 정의할 수도 있다.

부트스트랩(Bootstrap) 맛보기

이번에는 부트스트랩(bootstrap)을 맛보기다. 일단 사이트 대문에서 아래와 같이 설명한다.

부트스트랩

: 세련되고 직관적이며 강력한 프론트엔드 프레임워크로, 빠르고 쉽개 웹 개발을 할 수 있도록 돕는다.

일단 bootstrap 사이트(http://twitter.github.io)에서, 최신 버전을 다운로드하자.

파일 구조

bootstrap 파일을 다운로드한 후, 압축을 풀면 아래와 같은 디렉토리 구조를 가진다.

부트스트랩은 jQuery를 필요로 한다. 아무래도 jQuery 기반의 플러그인으로 볼 수 있을 듯 하다.

구성 요소

제공하는 구성 요소는 다음과 같다고 하는데, 별거는 없어 보인다.

  • 스카폴드(Scaffold)
    body에서 타입, 배경, 링크 스타일, 그리드 시스템, 2개의 간단한 레이아웃을 재설정하기 위한 글로벌 스타일
  • CSS
    글자체, 코드, 테이블, 폼, 버튼 등 공통적인 HTML 요소를 위한 스타일. 작고 멋진 아이콘 집합인 Glyphicons를 포함
  • 컴포넌트
    탭, 필(pill, 모서리가 둥근 사각형), 네비게이션 바, alert, 페이지 헤더 등 공통 인터페이스 컴포넌트를 위한 기본 스타일
  • 자바스크립트 플러그인
    자바스크립트 플러그인은 컴포넌트와 비슷하지만, 툴팁, 팝업, 모달 등과 같은 인터랙티브 컴포넌트

부트스트랩을 사용하기 위한 HTML 템플릿 만들기

일단 아래와 같은 Hello World HTML 파일을 만들자.

유의할 점은 jQuery를 포함하며, 위치가 이상하다는 점이다.
(라고 적었다가, 방문자에게 웹개발의 기본을 모른다는 핀잔을 들었다. script 파일은 문서를 로드한 후 맨 마지막에 로드해야 한다는 것을 배운 것은 그 이후다.)

그리고 이 파일을 부트스트랩 템플릿으로 만들자. 다운로드 받은 bootstrap 파일들을 적당한 위치에 위치시킨다. 아래는 내가 사용중인 Aptana Studio에서 bootstrap-test 프로젝트의 디렉토리 구조다.

그리고 hello.html 파일에 리소스 파일들인 자바스크립트와 CSS 파일을 포함한다.

이제 부트스트랩을 사용할 준비는 끝났다. 이제 뭘하지~~????????????????????????????????

라고 생각이 드는데, 그 이유는 샘플에 대한 설명이 그렇게 친절하지 않아서다.

http://bootply.com로 가자. 샘플과 템플릿 등을 바로바로 작성해서 실행해볼 수 있다. 흥미로운 점은 하나의 코드로 웹 화면과 모바일 화면 모두를 지원한다는 점이다(반응형 웹이라는 개념을 배운 것도 이 글을 쓴 이후다. 이때까지는 bootstrap을 디자인 템플릿정도로만 이해할 때다). 아래는 Bootstrap Starter Template을 사용한 hello.html 파일이다.

이처럼 큰 수고를 들이지 않고도 꽤 이쁜 화면을 만들 수 있다.

부트스트랩(Bootstrap) – 유용한 사이트

Beautiful Buttons for Twitter Bootstrappers

부트스트랩이 버튼에 제공하는 7가지 기본 색상 이외의 다른 색상으로 바꿀 수 있는 CSS 생성기를 지원

Bootmetro

부트스트랩 테마 제공

Font Awesome

부트스트랩에 포함된 아이콘은 Glyphicons에서 제조한 아이콘으로, png 파일이다. 따라서 크기나 색상 변경이 쉽지 않다. 여기에서는 폰트 형식의 아이콘을 무료로 제공하며, 폰트 아이콘은 크기와 색상 변경이 더 자유롭다.

IcoMoon

폰트 아이콘을 커스트마이징하여 사용할 수 있다. 무료는 아니다. “트위트 부트스트랩/위키북스”의 저자인 김덕기님의 블로그(http://martian36.tistory.com/1129)에서 사용법을 살펴볼 수 있다.

{wrap}bootstrap

부트스트랩으로 만든 테마를 판매한다.

 

실시간 차트 – 스무디(smoothie)

스무디(smoothie.js)를 사용하여 스트리밍 데이터에 대한 실시간 차트를 그려보자.

실시간 차트가 무엇인지 먼저 보고 싶다면, 아래의 링크를 보자.

http://smoothiecharts.org/examples/example1.html

스무티 차트(Smoothie Chart)는 실시간으로 라인 차트를 부드럽게 표시할 수 있는 라이브러리로, 사용법이 매우 간단한다.

먼저 smoothie.js를 다운로드 하여 자신의 웹 프로젝트로 추가하자.

smoothie.js를 자바스크립트에 포함한다

canvas 객체를 생성한다

canvas에 SmoothieChart 객체를 연결한다

데이터를 추가한다

TimeSeries.append(timestamp, value)

  • timestamp
    데이터를 표시할 시간(X축)
  • value
    데이터의 값(Y축). 임의의 숫자값.
    value의 최소값과 최대값을 기반으로 차트를 자동으로 축소/확대한다.

지연시간 추가

지금까지 만든 차트에는 약간의 문제가 있다. 다음 번 데이터의 값을 알기 전까지는 차트에 표시할 수 없다. 따라서 차트가 연속적으로 움직인다기 보다는, 약간 점프하는 것 처럼 보인다.

이 문제를 해결하기 위해, 차트에 약간의 지연시간을 추가하자. 따라서 라인을 다음 번 데이터가 전달된 후 라인을 그리도록 만들어 보자.

지연 시간은 SmoothieChart.streamTo()를 호출할 때 추가할 수 있다.

색깔 지정하기

스무디는 라인과 배경의 스타일을 변경할 수 있는 API 또한 제공한다.

실행하기

여기에서는 표시할 수 없지만. 실행 해보면 아래와 같은 차드가 움직이는 것을 확인할 수 있다.

smoothie