작성일자
카테고리 부트스트랩/부트스트랩으로 디자인하기

트위터 부트스트랩은 손쉽게 레이아웃을 만드는 도구로 자리를 잡았습니다. 2.0 버전의 인기에 이어 한층 더 사용하기 좋아진 3.0 버전이 이미 많은 인기를 얻고 있습니다. 현재 4.0 버전이 나올 예정으로 올해 초에는 알파버전이 나올 듯합니다. 

이전에 2.0 버전을 기준으로 책을 출간했는데 절판 되어 3.0 버전을 기준으로 새로운 책을 준비하고 있습니다. 원고가 거의 완성됐고 리뷰와 인쇄 과정을 거치면 2월 말이나 3월 초  4월 중에는 출간 될 것으로 보입니다.


이전의 책에서는 단순히 HTML 페이지만 만들었는데 사실 HTML로는 이메일도 보낼 수 없죠. 그래서 생각했던 것이 단순한 CMS를 사용해보고자 했습니다. CMS를 이용해 부트스트랩으로 레이아웃을 만들고 실질적으로 사용할 수 있는 웹사이트를 만들어보고자 했던 것입니다. 그래서 테스트로 만들어본 것이 아래의 사이트입니다.




http://diywordpress.co.kr/getsimple3/


위 사이트는 Getsimple이라는 텍스트 베이스의 간단한 CMS입니다. 페이지 위주의 콘텐츠를 다룰 수 있어서 아주 간단한 웹사이트는 쉽게 만들 수 있고 가장 장점으로 생각되는 것은 데이터베이스를 사용하지 않는다는 것입니다. 데이터 저장은 xml 파일로 저장하고 불러오는 것이죠. 데이터베이스와 통신이 필요하지 않으므로 빠른 것입니다. 요즘 이런 CMS가 아주 많이 나오고 있습니다. 깃허브의 블로그도 Jekyll이라는 마크다운 언어를 이용한 무 데이터베이스의 블로그 프로그램을 사용하고 있습니다.


일주일간 사용해보고 레이아웃과 콘텐츠를 다뤄봤지만 한계가 너무 많더군요. 블로그 플러그인을 설치하면 블로그도 만들 수 있지만 다양한 콘텐츠는 다루기 어려웠습니다. 그래서 어쩔 수 없이 워드프레스를 선택했습니다. 


워드프레스는 그야말로 한 없는 기능을 제공합니다. 원하는 기능을 찾으면 다 있습니다. 없으면 검색하면 만드는 방법이 다 나옵니다. 이번 책의 기획 의도는 부트스트랩으로 레이아웃을 만들고 제이쿼리 플러그인으로 기능을 추가하면서 필요하다면 워드프레스 플러그인을 최소한의 범위에서 이용해보자는 것이었습니다.


워드프레스 플러그인은 사용하면 할수록 사이트가 무거워지고 속도도 느려집니다. 메모리도 많이 잡아먹어서 일반적인 웹호스팅에서는 느려집니다. 프리미엄 테마를 사용하면 이런 점에서 일반 웹호스팅에서 느립니다. 프리미엄 테마는 무거운 플러그인을 사용하고 있기 때문이죠. 페이지를 멋지게 쉽게 만들기 위해서 비주얼 컴포우저를 사용하는데 그 레이아웃을 보면 태그의 트리구조가 엄청 복잡합니다. 어떤 트리구조는 10개나 자식 요소를 포함하고 있더군요. 그래도 이런 구조를 워드프레스가 소화하고 있다는 것이 놀라울 뿐입니다.


이번 책에서 만든 사이트는 프리미엄 테마와는 비교할 수 없지만 그나마 조금 흉내를 낼 수는 있습니다. 장점이라면 프리미엄 테마의 복잡한 트리구조가 아니라 빠르게 페이지가 출력됩니다. 테스트 사이트의 기본 메모리가 67메가인데도 느리지는 않더군요.



아래 링크는 책을 기준으로 해서 만들어진 데모 사이트입니다. 워드프레스 기본 테마인 Twenty Fifteen을 기반으로 만들어졌습니다.


http://bootstrap.diywordpress.kr/


해당 콘텐츠로 이동했을 때 메뉴가 하이라이트 되는 부트스트랩의 스크롤 스파이를 적용했습니다. 상단 슬라이더는 화면의 전체 폭 사이즈에 맞춰 나타나도록 했습니다. 따라서 슬라이더는 브라우저 폭이나 높이를 줄이더라도 항상 슬라이더만 보입니다. 대부분의 슬라이더는 화면 폭이 줄어들면 슬라이더 이미지도 비율적으로 작아져서 이미지 내용이 거의 보이지 않습니다.



전면 페이지는 콘텐츠가 많이 나타나므로 약간 버벅거림은 있습니다. 팀원 메뉴를 클릭했을 때 해당 콘텐츠로 이동하고 상단 이미지는 팀원 페이지에서 만든 특성 이미지를 사용해 배경 이미지로 나타나며 스크롤 하면 배경이미지가 패럴랙스 되도록 했습니다. 콘텐츠는 글 타입에 따라서 아이소토프 제이쿼리 플러그인을 사용해 카테고리 별 분류가 가능하도록 했으며 사이트에서 글을 생산하면 자동으로 업데이트 되고 전면 페이지이므로 나타나는 글 수는 제한되도록 했습니다. 글 아이템에 마우스를 올리면 제목과 글 요약이 나타나고 클릭하면 해당 글로 이동합니다.


사용자 정의 글 타입 페이지


책에서는 포트폴리오, 갤러리, 슬라이더, 팀, 회사소개, 그리드 블로그, 영화 등 총 7가지 글 타입에 대해 다룹니다. 사용자 정의 글 타입은 원하는 콘텐츠 레이아웃을 만들기 위해 필요하죠. 간단한 코드 하나로 원하는 레이아웃을 얼마든지 만들 수 있습니다. 각각 레이아웃도 다르고 사용한 제이쿼리 플러그인도 다릅니다. 

 


전면 페이지의 레이아웃은 전체 폭을 사용하지만 각 개별 페이지는 전체폭(Wide) 또는 콘텐츠 폭(Box)로 나타나도록 스타일 스위처를 사용했습니다. 이것도 제이쿼리 플러그인으로 만드는 것이죠. 또한 관리자 화면에서 테마 옵션 페이지를 만들어 선택에 의해 바로 바꿀 수 있도록 했습니다. 전면 페이지와는 달리 두 번째 홈페이지는 하위 메뉴를 배치할 수 있습니다. 글 타입에 따라서 글 아이템에 마우스를 올렸을 때 요약 콘텐츠가 나타나는 방식도 다르게 했습니다. 아래로 스크롤하면 콘텐츠가 자동 로드 되는 무한 스크롤 기능도 추가할 수 있습니다. 갤러리 페이지에서 썸네일 중 하나를 선택하면 아래의 갤러리 싱글 페이지가 나타납니다.



블로그 글 작성하는 것처럼 이미지만 업로드 하면 슬라이더 갤러리가 만들어집니다. 


기본 블로그 레이아웃도 있지만 핀터레스트 사이트처럼 썸네일을 클릭하면 콘텐츠가 부트스트랩의 모달 창으로 나타납니다. 



게시판은 포럼 사이트에도 사용할 수 있는 DW Q&A라는 플러그인을 사용해봤습니다. 디자인이 아주 좋고 기능도 좋긴 한데 커스터마이징이 좀 번거롭습니다. 하지만 좋은 디자인이라는 장점으로 인해 포기하긴 어렵더군요. 사용해보니 아주 만족스럽습니다.


CSS와 간단한 제이쿼리만으로 이런 사이트를 만들 수 있다는 것이 부트스트랩과 워드프레스의 힘이 아닌가 생각됩니다.



저작자 표시 비영리 변경 금지
신고
고재영

안녕하세요
선생님 ..
이번에 the7 책 보다 먼저 나오는것 같습니다 . 그런데 부트스트랩으로 워드프레스 테마을 만들때 제이쿼리 지식이 필요합니까 아니면 워드프레스 플러그인을 사용합니까..
물론 html과 css 지식은 있어야 하겠네요 저는 제이 쿼리 지식이 없어서 질문드립니다.

항상 좋은 책 만들어 주셔서 감사합니다.
건강하시고 새해 복 많이 많으세요

BlogIcon 베누시안

이번 책 완료되고 다음 책으로 나올 것입니다. 이미 원고가 돼있으므로 시간을 많이 걸리지 않습니다. 얼마 전에 The7 테마가 대폭 수정되면서 책이 늦게 나오게 된 것이 다행으로 생각합니다. 원고도 많은 부분이 수정되긴 하겠지만 그리 시간은 걸리지 않을 겁니다.

이번에 나올 부트스트랩으로 테마 만들기는 제이쿼리 지식이 그리 많이 필요하지 않습니다. 간단한 addClass() 정도만 이해하면 됩니다. 다만 CSS에 대해서는 자세한 설명은 하지 않기 때문에 많이 아셔야 합니다. 부트스트랩을 다루기 위해서도 필요합니다. 부족하다면 부트스트랩 배우면서 같이 배워도 됩니다.

테마에서 php 코드도 많이 나오긴 하지만 프로그래밍을 위한 것이 아니고 이미 있는 코드를 수정하는 정도입니다.

zmania

대단하시네요
국내에서 실무자가 이정도로 책을 내는 경우는 드문 경우 같습니다
대체 어디서 이런 열정이 나오시는지요?
대개 웹실무자라는게 일에 치어 먹고살기 바쁜게 현실인듯한데 ..^^~

BlogIcon 베누시안

프리랜서다보니 시간이 남을 때가 많답니다.

김지관

안녕하세요.
귀하의 책을 보면서 부트스트랩 2버전으로 홈페이지를 만들고 있는 중입니다.

궁금한 점은
버전2을 이용해서 만들어진 사이트를
버전3으로 변경하는 것이
간단한 작업일까 하는 것입니다.

이제껏 공부해둔 것이 아까워서ㅜㅜ

BlogIcon 베누시안

부트스트랩 2버전과 3버전은 선택자가 다른 것이 가장 큰 차이입니다. 2버전에 관한 책을 보고 부트스트랩을 이해했다면 3버전도 다루기 쉽습니다. 아래의 링크에서 선택자가 어떻게 바뀌는지 새로운 것은 무엇인지 확인할 수 있습니다.

http://getbootstrap.com/migration/

BlogIcon 조미연

안녕하세요.
3월 중순에 책 출간될 예정이라고 그래서 기다리는 중인데
책이 지금 나온건가요/?

BlogIcon 베누시안

출판사에서 사정이 있어서 좀 늦어지고 있습니다. 4월 중에는 꼭 출간되도록 하겠습니다.

BlogIcon 베누시안

오늘 리뷰를 마쳤으니 이제 편집 디자인 들어가고 다음달 초순 경에 출간될 듯 합니다.

안녕하세요

안녕하세요 베누시안님 , 저는 조금만한 쇼핑몰을 운영하고있는사람입니다.

그런데 사이트를 개발할때가된것같아서 어떻한 엔진 및 컨셉으로 발전해야할지 고민하고있는사람입니다.

그런데 부트스트랩이란것을 알게되었습니다. 너무나도 디자인이 마음에듭니다, 또 한 개발하는데 타 엔진에비해서 많은 지식이필요한것같지는않더라구요..


혹시 부트스트랩을 관리할수있는 프리랜서 개발자분들은 어디서 제가 구할수있을까요..?

또 한 부트스트랩을 관리할정도의 프리랜서분들이면 혹시 html과 css정도만 할수있는 중급개발자분을 고용하면 충분할까요?.. 제가 현재 막 사업을 시작한사람이라 너무 클래스가높으신분을 고용하기에는 자금이너무 많지가않아서 그렇습니다...

답변해주시면 너무나도 큰 도움이됩니다... 정말 감사드립니다.

BlogIcon 베누시안

부트스트랩은 쇼핑몰과는 거의 관련이 없습니다. 부트스트랩은 웹 사이트를 빠르게 만들기 위한 도구인데 쇼핑몰을 처음부터 코딩하면서 만들 일은 없을 겁니다. 쇼핑몰을 운영하고 계신다면 워드프레스를 추천합니다. HTML이나 CSS를 몰라도 만들 수 있습니다. 사이트를 운영을 해봤다면 충분히 가능합니다. 다만 워드프레스를 잘 다루면 되고 포토샵을 다뤄봤다면 빠를 수 있습니다. 다루기 힘들다면 제가 대신 해드릴 수도 있습니다. 쇼핑몰이나 사이트 개발을 하는 프리랜서일도 하고 있습니다. 책을 보고 한번 도전해보세요. 포토샵 좀 다룰 줄 아는 분은 책을 보고 일주일만에 쇼핑몰을 만들었다는 분도 있습니다.

불리운

유튜브 올라온 동영상 보면 공부하고 있습니다 당연히 책도 구입했고요.. 근데.. 동영상 13편이 끝이이에요 더올릴 생각 없으신지 궁금합니다. 그리고 특강이런것.. .하실 생각은 없으신지...

BlogIcon 베누시안

동영상은 제가 올린 것이 아니라 출판사에서 리뷰하신 분이 올렸습니다. 찾아보시면 더 있을 겁니다. 특강은 계획이 없습니다.

불리운

출판사 문의 해봤는데.. 더올릴 생각 없다고 합니다.
유튜브 올라온것 보시면 아시겠지만 2편 10장 끝납니다 . 2편이라도 완성 되었으면 바라지만.. 슬픕니다.

9월달 출간 할 예정인 책도 궁금합니다. 플레이 동영상이라도 올려주시면 참고 많이 됩니다. 감사합니다.

BlogIcon 베누시안

책을 통해서 어렵게 생각된다면 기초 지식을 늘린 다음 도전해보세요. 책이란 것이 수준이란 게 있어서 그 수준에 맞는 지식이 있어야 합니다. 동영상은 개념을 이해하는데 도움을 드리고자 한 것이지만 모든 내용을 동영상으로 만들 수는 없습니다. 그러자면 책이 필요 없게 됩니다.

9월 출간 서적은 아래의 링크를 참고하세요.

http://martian36.tistory.com/1443

티스토리 툴바