HTML/CSS를 공부할때 나는 지난 포스트에서 제시한 공부 방법처럼 여러 곳에 제공되어있는 강의를 참고하며 내가 메인교재로 삼은 책의 안내를 따라 차근차근 공부했다. 또한 앞서 말했듯이 책에있는 모든 예제들을 하나씩 폴더에 정리해가며 공부 했는데, 그렇게 공부하다보니 책에서 굵직한 챕터가 끝날 때마다 제목부터 footer까지, 즉 머리부터 발 끝까지 전체적으로 html 문서를 만들어보는 예제를 다룰 때가 있었다.
물론 코드도 무척 길고 복잡했지만 완성하고나면 차근차근 head 부터 footer까지 쌓아 올리며 연습한 과정이 웹문서의 구조와 이해에 꽤나 크게 도움 된다는 것을 깨닫게 되었다. 그런 깨달음이 있고나니 책의 중후반쯤 닿았을 때
‘예제 변형만 해볼 게 아니라 페이지를 한 번 만들어볼까’하는 생각이 들었고, 배운 내용을 응용하여 ‘나’를 소개하는 간단한 단일 페이지를 만들어보기로 결심했다. 어차피 호스팅하지 않은 HTML페이지는 ‘나’만 볼 수 있는 연습장과 마찬가지니까 부끄러울 것도 없다.
그리하여 두꺼운 HTML+CSS책을 앞뒤로 왔다갔다 넘기며 얼기설기 어설픈 페이지를 만들어보기 시작했는데 어떻게 적용을해도 페이지가 무척 촌스럽고 기본적인 공부용 ‘예제’와 다를게 없어 답답함을 느꼈는데 그러던 중, 신세계를 발견하게 된다.
책의 부록으로 실려있던 ‘부트스트랩’ Bootstrap을 발견하게 된 것이다.
부트스트랩이란?
부트스트랩 : 트위터에서 제공하는 웹페이지 디자인 프레임워크로, 트위터에서 사용하는 레이아웃, 입력창, 네비게이션, 버튼 등 웹페이지를 구성하는 다양한 요소의 오픈소스이다. PC뿐만 아니라 태블릿, 모바일용 디자인도 제공하고 있어 반응형 웹 디자인 역시 지원한다.
처음에 부트스트랩을 접하고 이곳 저곳 검색해보며 찾아봤지만 처음에는 어떤 개념인지 당최 와닿지가 않았다.
허나 직접 사용해보고 그 개념을 좀더 쉽게 이해하게 되었는데, 고수들을 위한 고급 정보는 다른 개발자분들의 블로그에 많으니 나는 나같은 초짜를 위하여 쉽게 풀어 설명해보겠다.
부트스트랩은 처음에 트위터에서 개발된 것으로, 수많은 직원들이 함께 개발을 진행하다보니 각자 코드의 방식도 다르고 디자인 역시 뒤죽박죽 어긋나고 관리가 어려웠던 문제를 해결하고자 트위터 직원 몇이 업무외 시간을 투자해 그나마 ‘기준, 표준’이 될 정형화 된 틀을 만든 것에서 시작했다.
그렇게 만든 결과물들을 사내에 공개하자 반응이 아주 뜨거웠고 더 많은 개발자와 웹디자이너들의 참여로 지금의 부트스트랩까지 발전하게 된 것이라고한다.
여전히 잘 이해되지 않는다면 이 설명은 어떨까. 처음으로 부트스트랩을 이용해 요리조리 웹페이지를 만들어보며 삽질을 하던 나는 보다 와닿게 스스로 해석을하게 된 것이 있으니, 이건 꼭 왕년에 내가 많이 해봤던 ‘미니홈피 꾸미기’와 같구나! 하는 것이었다. 이미 싸이월드가 깔끔하게 지원하는 여러가지 디자인에서 내가 선택적으로 스킨 배경색, 탭의 배경색과 글씨 색, 스킨과 탭의 모양, 버튼의 모양을 수시로 바꿀 수 있었고 소위 ‘뽀샵’을 좀 한다는 금손들은 자신의 능력을 뽐내며 커스텀한 스킨을 판매하거나 다른 사람들이 다운로드 받아 사용하도록 무료로 제공하기도 했던 바로 그 ‘미니홈피 꾸미기!’ 말이다.
이와같이 부트스트랩 역시 무료로 제공되는 정형화된 요소들을 우리가 자유자재로 사용할 수 있고, 더 나아가 이를 응용하여 여러 템플릿을 제작하여 판매하는 사람들도 많다. (어쩌면 파워포인트와도 비슷한 맥락이 있는 것 같다.)
부트스트랩의 장점
- HTML과 CSS를 안다면 쉽게 사용해볼 수 있다.
- 일관성과 효율성이 있다.
- 레이아웃부터 크고작은 다양한 모든 요소들을 취향에 맞게 사용해볼 수 있다.
- 내 비루한 HTML과 CSS 실력으론 절대 구현할 수 없는 깔끔하고 세련된 디자인을 사용할 수 있다.
- PC와 태블릿, 모바일에 따라 자동으로 화면 레이아웃과 요소들의 구성을 바꿔주는 ‘반응형 웹 디자인’이다.
부트스트랩을 디지털마케터가 알아야 하는 이유
- 웹페이지 구성 요소들에 대해서 보다 폭 넓고 깊은 이해가 가능하다.
- 그리드 시스템을 통해 레이아웃과 반응형 웹 디자인에 대한 이해가 가능하다.
- 반응형 웹 디자인에 대한 이해를 통해 모바일 친화적인 콘텐츠의 중요성을 이해할 수 있다.
- 웹을 구성하는 다양한 요소를 경험해보고 이해할 수 있다.
- 자주쓰이는 정형화된 각종 클래스의 이름과 종류를 파악할 수 있다.
- 웹페이지에대한 이해도를 높여 개발자와 디자이너와의 커뮤니케이션을 돕는다.
실은 부트스트랩은 편의와 효율을 위해 개발되고 발전되어왔지만 이 역시 깊게 제대로 배우려면 책 한권 이상의 분량을 많은시간 공부해야할 것이다. 그러니 이 게시글에서는 ‘부트스트랩을 사용하는 법’ 보다는 이와같이 부트스트랩이 무엇이고 어떤 점이 좋은지, 그리고 HTML과 CSS를 막 배우기 시작한 마케터가, 웹디자이너도 아닌 마케터가 이를 왜 알아야되는지만 알아봤다.
다음 게시글에서는 이 부트스트랩을 가지고 실질적으로 삽질할 수 있는 부트스트랩 삽질의 시작과 단일 페이지 제작해보기 연습 준비하기에 대해서 글을 써보도록 하겠다!