트위터 부트스트랩은 손쉽게 레이아웃을 만드는 도구로 자리를 잡았습니다. 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와 간단한 제이쿼리만으로 이런 사이트를 만들 수 있다는 것이 부트스트랩과 워드프레스의 힘이 아닌가 생각됩니다.
