감기와 블로그

감기에 걸렸다. 그래서 머리가 돌아가질 않아, 생각 없이 할 수 있는 일로 블로그 정리를 하고 있다.

블로그를 왜 하느냐

처음에는 프로젝트 기록을 남기기 위해서였다. 첫 직장에서 SI 프로젝트를 여기저기 다니면서 잡다한 생각들을 노트에 정리했었는데, 그렇게 한권 두권 싸이다 보니 책꽂이에 자리만 차지할 뿐이었다. 오프라인보다는 온라인이 낫겠다 싶어 블로그를 시작했다. 그래서 선택한 블로그 플랫폼이 이제는 역사의 뒤안길로 사라진 스프링노트였다.

springnote_byebye

그 시절의 인터넷 서비스와는 달리 유려한 UI와 협업 도구로 꽤 인기를 누렸었다. 하지만 사내 보안문제로 사이트가 막히게 되었다.

이글루스로

마침 이글루스라는 핫한 블로그 서비스가 그때 등장했다. 구질구질하던 네이버 블로그를 디스하며 파워블로그들이 이글루스로 몰려들던 시기였던 듯 하다.

egloos_blog

그림. 아직도 살아 있는 이글루스 블로그

이 때는 영어에 꽂혀 있던 시기여서 영어로 블로깅을 하려고 애썼었다. 그래서인지 글쓰는게 별로 내키지도 않았었다. 그렇게 그냥저냥 시간은 흘러…

티스토리의 등장

티스토리가 나왔다. 초대장이 있어야만 가입할 수 있었던 마케팅도 특이했고, 깔끔한 UI도 많은 사람들의 관심을 받았었지 싶다. 그쯤하여 황상철 선배를 만나게 되었고, 황선배가 운영하던 “실용주의 이야기“라는 블로그도 접했다(지금은 워드프레스로 옮기셨다. 워드프레스로 옮긴 것은 내가 먼저다). 그때 “이런게 제대로 된 블로그구나”라는 생각이 들었다.

그래서 옮겼다.

tistory_socurites

그림. 티스토리의 socurites.com

이때는 정말 열심히도 글을 썼다. 이때쯤이었던 것 같다. 블로그로 “용돈을 벌어야지”라고 처음 생각했던게. 그리고 방문자 통계와 유입 키워드, 유입 경로도 모니터링하기 시작했다. 지금은 다 떨어져 나갔지만 한창 열심힐 할 때는 월 방문자 10,000을 넘기곤 했다.

tistory_stats

그림. 방문자를 열심히 유혹하던 시절

그러다 여러가지 일로 블로깅을 손을 놓았다.

워드프레스로

다시 블로깅을 해야지라는 생각이 들었을 때 워드프레스가 인기를 끌고 있었다. 티스토리도 그럭저럭 무난했지만 프로그램 코드가 태반인 글에서 “syntax highlight”가 없는 티스토리는 퇴물이었다. 고객센터에 “syntax highlight” 기능 추가를 요청했지만 답변이 없었다. 그래서 워드프레스로 이사를 했다.

wordpress_socurites_old

그림. 워드프레스로 이사한 후, 얼마전까지의 socurites.com

이사를 하고나니 사용자가 뚝 떨어졌고, 디자인도 수정하긴 했지만 영 맘에 들지 않았다. 그리고 이직으로 적응 모드로 돌입한 터라, 이대로 2년 가까이 방치해 두었다.

그러다 감기에 걸렸다

그래서 티스토리의 글을 워드프레스로 옮기는 삽질을 할 수 있는 시간을 확보했다. 그리고 테마와 몇가지 디자인을 수정했다. 지금은 방문자는 바닥을 치고 있다. 용돈벌이로는 이제 힘들 듯 하다.

블로그를 왜 하느냐

나는 SNS를 하지 않는다. 예전에는 페이스북, 트위터도 잘 사용했지만 이제 하지 않는다. 카톡도 하지 않는다. 누군가 주말에 무엇을 먹고, 여름 여행으로 하와이를 다녀오고 하는 것들을 별로 “좋아요”하고 싶지도 궁금해 하고 싶지도 않다. 주말에 쉴 때 울려대는 “까톡”을 듣고 싶지도 않다. 사생활과 관심 사이의 줄다리기에 익숙하지 않은 나로써는 일이 아닌 이상, 앞으로 SNS를 할 까닭은 없을 듯 하다.

그래서 블로그를 한다. 궁금한 소식들은 굳이 전화를 하고 문자를 해서야 알 수 있고, 내가 하고 싶은 얘기들은 굳이 블로그에서 글을 쓴다. 이 정도의 “굳이” 무언가를 해야 하는 정도의 불편함이 있을 때, 관계가 오히려 편해짐을 느낀다.

기술이 발전할 수록 오는 행위의 편리함은 오히려 심적인 불편함을 가져올 수 밖에 없다고 본다. 예전 선배가 말한 “디지털 시대의 아날로그 감성”이라는 말이 여기에 어울릴지도 모르겠다.

 

글을 쓰고 보니 아래의 커다란 SNS 버튼들이 눈에 띄었다. 우스운 일이다.

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

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