Category Archives: Startup

반응형 웹과 부트스트랩(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

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

 

[독후감] 린 스타트업

몇년 전 무모하리만치 별 생각 없이 스타트업에 참여했었다. 준비되지 않은 상태에서 전혀 다른 생태계에 뛰어든다는 것이 얼마나 힘든 일인지 깨닫는 좋은 경험이었다. 뿌듯하다고 말할 수는 없는 경험이었지만, 얻은 것과 잃은 것, 잘해야 했던 일과 그렇지 못해 찾아오는 뒤늦은 후회들이 교차한다.

시작을 앞두고 읽었던 책이 “린 스타트업(Lean Startup)”이었다. 이 책에서 이야기하는 스타트업의 절망은 실패에 대한 두려움을 준비할 수 있도록 해주었지만, 현실에서는 글자가 뜻하는 것보다 훨씬 아팠던 것 같다.

 

주말에 보려고 아껴두었던 “린 스타트업(Lean Startup)”을 보기 시작했다. 인사이트에서 출판했으며, 린 스타트업의 창시자인 에릭 리스(Erik Reece)가 쓰고, 이창수/송우일님이 옮겼다.

lean_startup_book

스타트업에서는 어떻게 개발조직을 꾸리고, 어떠한 개발 프로세스를 가지는지를 알고 싶어 선택한 책이었지만, 이 책은 그 이상이다. 비즈니스에 대한 그의 정의를 보자.

“비즈니스는 수익성 높은 사업으로 돈을 벌거나, 고객 가치를 만들어 내는 과정이 아니라 불확실한 미래와 싸워 생존, 번성하는 과정이다”

즉 주변 환경에 적응하여 하루하루 살아남는 과정이 스타트업이다. 아블라컴퍼니 대표인 노정석님은 추천사에 아래와 같이 말한다.

당장 죽을 수도 있는 절박함이 ‘창조적인 행동(혁신)’을 만들어내고, 이것이 성공하면 살아남고, 실패하면 도태되어 사라진다.

이 말은 빌 벅스턴이 쓴 “사용자 경험 스케치”에서 나온 “야생을 위한 디자인(Design for the Wild)”과도 일맥상통한다.

저자인 에릭 역시 젊은 시절 첫 회사를 세웠고, 쓰라린 실패를 맛봤다. 그 이유로 서비스에 대한 통찰은 있었지만, 이를 기반으로 훌륭한 회사로 키워가는 프로세스를 몰랐기 때문이라고 말했다. 남들이 가지 않는 길로 가는 저자를 어리석다고 비웃었던 사람들의 말이 옳다고 판명되는 일이었기에 더 절망적이었다.

하지만 실패를 바탕으로 성공적인 스타트업이 따라야할 핵심 가치를 배울 수 있었다. 여러가지를 말하고 있지만, 그 중에서 가장 중요한 사실은 “창업가 정신은 관리”라는 점이다. 흔히들 창업가 정신은 창의적이어야 하며, 흥미지진해야 한다고 믿는 반면, 관리는 지루하고 불필요하게 진지하다고 오해한다. 하지만 성공과 실패를 가르는 열쇠는 바로 이 지루한 일이며, 성공하기 위해서는 올바른 프로세스를 따라야 한다고 말한다. 절대로 나이키에서 광고하는 “일단 해보자(Just Do It)” 정신으로는 성공할 수 없다.

서문에 나오는 아래의 글이 가슴에 와닿는다.

스타트업은 무언가를 만들어서 돈을 벌거나 고객에게 서비스하라고 존재하는 것이 아니다….
정말 흥미진진한 것은 스타트업이 성공해 실제로 세상을 바꾸는 모습을 보는 일이다. 이처럼 새로운 모험에 사람들이 거는 열정, 힘, 비전은 인류의 매우 소중한 자원이다. 결코 허무하게 버려져서는 안된다. 우리는 분명히 더 잘 할 수 있다. 아니 그래야만 한다…

아래는 비슷한 내용의 스티브 잡스님의 동영상이다.

지금 당신이 인생이라고 부르는 모든 것들이 당신보다 똑똑하지 않은 사람들에 의해 만들어졌다는 사실…
당신은 인생을 바꿀 수 있으며 또한 영향을 미칠 수도 있다.
다른 사람들이 이용할 수 있는 무언가를 직접 만들 수도 있다는 사실…

 

변화를 두려워하는 사람들 모두에게 권하고 싶은 책이다.
(이 마지막 문장은 부끄러워 지우려다, 스스로를 뒤돌아보기 위해 그대로 둔다.)