지난 2월에 원고를 완료했지만 편집 디자인 작업과 리뷰가 다소 늦어져 4월 20일에 서점에 나옵니다. 표지 디자인이 나왔으니 이제 인쇄 작업을 거치면 책이 나오게 됩니다.
서적 예제 사이트
http://bootstrap.diywordpress.kr/
책에서 만든 사이트입니다. 다만 홈 페이지 메뉴와 One page 메뉴에서는 여러 가지 제이쿼리 플러그인의 테스트를 위해 추가한 페이지이니 서적에는 포함되지 않았습니다. 책을 이해한다면 소스를 이용해 다양한 슬라이더를 만들 수 있습니다.
예약 판매
동영상 보조 강좌 안내
트위터 부트스트랩으로 만드는 워드프레스 테마
서문
필자가 처음 부트스트랩을 접했던 것은 의뢰를 받아 웹사이트를 제작하던 때였습니다. 이 때는 기존의 방식대로 포토샵으로 이미지를 만들고 CSS로 레이아웃 배치를 했었죠. 버튼 하나하나를 포토샵으로 만들고 아이콘을 구매해 사용하면서 웹페이지의 모든 요소를 스타일시트를 적용해 일일히 배치하는 작업이 반복됐습니다. 수십 개의 웹페이지를 만드는데 몇 개월이 걸렸습니다. 여기에 사용된 스타일시트의 양만 해도 상당했습니다.
그런데 트위터 부트스트랩을 접하고 나서는 놀라움의 연속이었습니다. 시험 삼아 제 블로그를 부트스트랩으로 만들어봤는데 기본적인 레이아웃과 요소의 배치를 하고 대략적인 블로그 스킨이 만들어지는데 하루밖에 걸리지 않았습니다. 보통의 스타일시트를 사용했다면 3일은 족히 걸리는 일이었죠. 그 이후로는 항상 부트스트랩을 사용해서 디자인을 합니다.
부트스트랩 이전에도 여러 가지 프레임워크를 사용해봤지만 웹페이지에 사용되는 포괄적인 라이브러리를 갖추고 있는 것은 없었기에 여러 가지 라이브러리를 조합해서 사용하는데 어려움이 발생하기도 했습니다. 부트스트랩은 웹페이지에서 사용되는 모든 요소에 대해서 스타일시트를 만들어놓았기 때문에 필요한 라이브러리를 찾아 다닐 필요가 없습니다. 없으면 응용해서 사용할 수 있도록 스타일 변경도 자유롭습니다. 더구나 부트스트랩과 관련된 프로젝트가 아주 많이 있어서 다양한 프로젝트를 알고 있으면 웹사이트 제작에 많은 시간이 절약됩니다. 이러한 프로젝트는 수백 개에 이르고 대부분이 자바스크립트 플러그인화 돼있어서 스타일시트로 배치를 하고 옵션 설정만 하면 손쉽게 사용할 수 있습니다.
부트스트랩의 장점 중의 하나는 반응형 디자인이 쉽게 만들어진다는 것입니다. 버전 2.0부터는 반응형이 가능하도록 별도의 스타일시트 파일을 추가했는데 3.0에서는 반응형 디자인이 우선 적용되도록 해서 반응형은 기본이 되고 두개로 나누어진 스타일시트는 한 개로 통합됐습니다. 모바일이 인터넷을 주도할 것이기 때문에 향후 인터넷 접속은 데스크탑보다는 스마트폰, 태블릿 PC로 이루어질 것이고 이들 기기를 위한 디자인이 활성화될 것입니다.
부트스트랩을 이용해서 디자인을 하면 정형화된 스타일로 인해 부트스트랩으로 만든 디자인이라는 것이 티가 납니다. 해외에서는 많은 디자이너들이 부트스트랩을 이용해서 디자인을 하고 있기 때문에 이를 이용한 디자인은 진정한 웹디자인이 아니라는 우려의 목소리가 나오고 있습니다. 디자인이란 창의성을 전제하고 있는데 공장에서 찍어내듯 디자인이 만들어지고 있으니 그럴 만도 하죠. 하지만 이러한 우려는 우려에 불과합니다.
부트스트랩은 하나의 도구일 뿐입니다. 이를 이용하는 목적은 웹디자인을 쉽고 빠르게 하기 위한 것입니다. 부트스트랩으로 디자인해서 사용자 스타일을 적용하지 않고 그대로 사용한다면 말 그대로 공장에서 찍어낸 디자인밖에 안됩니다. 뼈대는 부트스트랩이되 모양은 자신만의 스타일이 나와야합니다. 이를 만드는 것이 각자의 웹디자이너의 역량에 달려있습니다.
부트스트랩의 이용 범위는 웹사이트뿐만 아니라 앱에서도 사용할 수 있습니다. 모든 범위에 거쳐 활용도를 넓히려면 어떤 한 부분에서 실제로 어떻게 사용되는지 알아보는 것도 중요하다고 생각됩니다.
워드프레스는 2015년 3월 현재 전세계적으로 모든 웹사이트의 23.6%의 점유율을 기록하고 있고 계속 증가하고 있습니다. 워드프레스가 인기 있는 이유는 기능을 확장하기 위해 플러그인을 사용하고 사이트 디자인을 위해 테마를 사용하는데, 무료 플러그인과 무료 테마가 많으며 유료라 하더라도 그리 비싼 가격이 아니기 때문입니다. 무엇보다 워드프레스가 인기있는 가장 큰 이유는 사용자 커뮤니티가 활발하다는 것입니다.
어떤 프로그램을 사용하기 위해서 문제점을 해결하거나 활용도를 넓히려면 이러한 커뮤니티의 활동은 아주 중요한 역할을 합니다. 어떤 기능을 추가하기 위해 플러그인을 찾아보면 대부분 원하는 기능의 플러그인이 존재합니다. 하지만 커스터마이징하고자 할 때 이러한 커뮤니티가 없으면 제대로 된 기능을 발휘하지 못합니다. 인기 있는 플러그인은 지속적으로 업데이트 되고 커뮤니티 활동도 활발합니다.
필자의 전작인 부트스트랩 2.0 버전을 기반으로 한 책에서는 단순한 정적인 웹사이트를 만들었기에 실제 웹사이트에서 사용하려면 어떻게 적용해야 하는지 방법을 다시 찾아야 하는 결점이 있었습니다. 그래서 생각한 것이 간단한 구조의 CMS였습니다. 찾아보니 텍스트 베이스의 CMS가 눈에 들어오더군요. 이를 며칠 사용해보고 간단한 웹사이트는 만들 수 있겠다 싶어서 실제 작업을 해봤지만 기능을 추가하는 데 한계가 많았습니다.
워드프레스는 제가 잘 아는 분야이고 요즘은 국내에서도 기존 웹사이트를 워드프레스로 많이 전환하고 있는 추세이며 쇼핑몰도 활발히 개발되고 있습니다. 부트스트랩으로 워드프레스 웹사이트를 어떻게 만드는지 알아보는 것도 웹사이트 개발에 도움될 것이라 생각됩니다.
책의 구성
이 책의 내용은 4개의 장으로 나뉩니다.
1장은 부트스트랩의 모든 내용에 대해서 상세히 설명합니다. 부트스트랩을 이용한 웹디자인을 위해서 부트스트랩의 모든 내용을 잘 파악해야 응용이나 확장이 쉬워질 것입니다. 부트스트랩 2.0 버전에서는 웹 접근성에 대해 많이 다루지 않았지만 3.0 버전부터는 시대의 요구에 의해 많은 부분에서 웹 접근성에 관한 내용이 추가돼있어서 부트스트랩의 코드를 그대로 사용하면 웹 접근성을 쉽게 적용할 수 있습니다. 이 책에서는 부트스트랩에서 사용된 각종 웹 접근성을 위한 기본적인 내용을 설명했습니다.
2장은 워드프레스 테마 만들기입니다. 워드프레스 테마는 사이트 디자인을 위해 사용되는데 프로그래밍을 위해 PHP에 대해 잘 알아야 하는 것은 아닙니다. 워드프레스에서 사용되는 템플릿 계층 구조와 템플릿 태그에 대해 알면 테마를 만들거나 디자인 수정이 쉬워집니다. 템플릿 계층구조를 기반으로 부트스트랩에 의해 템플릿 파일을 만들고 템플릿 태그를 삽입해 만들 수 있습니다. 테마를 보다 쉽게 만들기 위해 워드프레스에 기본적으로 포함된 기본 테마를 사용합니다. 기본 테마인 Twenty Fifteen은 블로그 전용 테마로서 레이아웃과 구조가 간단합니다. 부트스트랩의 레이아웃을 위한 그리드 시스템을 추가하는 것만으로도 쉽게 테마가 만들어집니다.
3장은 다양한 콘텐츠 만들기입니다. 2장에서 만들어진 기본적인 테마를 바탕으로 여러 가지 콘텐츠를 다룰 수 있는 글 타입에 대해 설명합니다. 웹사이트는 블로그만 있는 것이 아니고 쇼핑몰, 호텔 사이트, 포트폴리오 사이트 등 다양합니다. 이들 사이트를 원하는 레이아웃으로 만들기 위해서는 글 타입을 추가하면 됩니다. 추가되는 글 타입에 따라 포트폴리오, 갤러리, 슬라이더 등 여러 가지 형태의 콘텐츠를 자유롭게 디자인 할 수 있습니다. 또한 이들 콘텐츠를 전면 페이지에 모두 출력하는 방법을 다룹니다.
4장은 이전 장에서 다루지 못한 사이트에서 필요한 세부적인 내용들을 설명합니다. 탑메뉴를 만들어 로그인이나 회원가입 메뉴를 배치하는 방법, 화면 전체 폭을 사용해 콘텐츠를 출력하는 방법, 추가적인 홈페이지를 만드는 방법 등을 설명합니다.
사전 지식
이 책은 웹디자인 응용서에 속하므로 웹디자인에 대한 지식이 어느 정도는 필요로 합니다. 트위터 부트스트랩 개발자도 언급하고 있듯이 부트스트랩을 사용하기 위해서는 기본적인 HTML 지식과 CSS에 대한 지식을 갖추고 있어야 합니다. 그렇다고 전문적인 지식이 필요하지는 않습니다. 웹페이지를 만들기 위한 레이아웃을 혼자서 만들 수 있는 정도의 지식만 있으면 됩니다. 부트스트랩 기초 부분을 보고 이해만 가능하다면 얼마든지 시작할 수 있습니다.
2장부터는 워드프레스 테마를 만듭니다. 따라서 워드프레스에 관한 기초지식이 필요합니다. 다른 CMS를 많이 다뤄본 분들은 바로 시작할 수도 있습니다.
목차
01장. 부트스트랩 기초
부트스트랩이란?- 21
스타일시트의 재활용- 21
부트스트랩이 나타난 배경- 24
부트스트랩의 특징- 24
텍스트 편집기- 29
웹브라우저- 29
웹서버 환경 만들기- 31
부트스트랩 사용 환경 만들기- 36
부트스트랩 파일 내려받기- 36
CSS
그리드 시스템- 41
글자(Typography)- 49
테이블(table)- 59
폼(Forms)- 62
버튼(Buttons)- 80
이미지(Images)- 84
도움 클래스(Helper classes)- 85
반응형 선택자(Responsive utilities)- 89
구성요소(Components)
아이콘(Glyphicons)- 92
드롭다운 - 95
버튼 그룹- 98
입력상자 그룹(Input groups)- 108
냅(Navs)- 113
브레드크럼(Breadcrumb)- 124
페이지 처리(Pagination)- 124
레이블(Label)과 배지(Badge)- 127
점보트론(Jumbotron)- 128
페이지 헤더- 129
썸네일(Thumbnails)- 130
알림 메시지(Alerts)- 132
프로그레스 바(Progress Bar)- 134
미디어 오브젝트(Media Object)- 137
리스트 그룹(List group)- 140
패널(Panels)- 143
반응형 임베드(Responsive embed)- 146
웰(Wells)- 147
자바스크립트
모달(Modals)- 150
드롭다운- 157
스크롤스파이(Scrollspy)- 159
탭(Tabs)- 161
툴팁(Tooltips)- 164
팝오버(Popover)- 168
알림 메시지(Alert message)- 171
버튼- 171
체크박스와 라디오버튼- 173
콜랩스(Collapse)- 175
캐러젤(Carousel)- 178
어픽스(Affix)- 181
02장. 워드프레스 테마 만들기
워드프레스 설치하기- 188
워드프레스 내려받기- 189
데이터베이스 만들기- 190
워드프레스 설치하기-191
워드프레스 관리자 화면-193
워드프레스의 구조-194
워드프레스의 콘텐츠-194
워드프레스 설치 폴더의 내용-198
워드프레스 템플릿 계층구조(Tamplate Hierarchy)-199
템플릿 파일과 템플릿 태그-200
워드프레스 템플릿 태그의 종류-202
워드프레스 템플릿 태그-204
워드프레스 기본 테마-206
템플릿 파일의 연결 구조-208
테마 만들기-212
테마 제작 내용-212
자식 테마 만들기-216
부트스트랩 관련 파일 등록하기-220
레이아웃 만들기-224
콘텐츠 추가하기-234
작업 환경 만들기-239
사이트 레이아웃 정리-243
사이드바 수정-245
content.php 파일 수정-253
글 목록 페이지 레이아웃 변경 및 포스트 썸네일 다루기- 257
싱글 페이지 수정하기- 262
사이드바 있는 페이지 템플릿 만들기- 275
블로그 페이지 제목 만들기- 277
03장. 다양한 콘텐츠 만들기
사용자 정의 글 타입(Custom Post Type)- 297
워드프레스 코덱스 페이지의 예제- 297
Custom Post Type UI 플러그인- 301
고급 사용자 정의 필드(Advanced Custom Fields) 플러그인 사용하기- 310
single-portfolio.php 파일 만들기- 314
Attachment 플러그인 사용하기- 319
라이트박스 플러그인 사용하기- 331
이미지 제목과 캡션 추가하기- 334
사이드바 배치하기- 337
포트폴리오 목록 페이지 만들기- 340
콘텐츠 레이아웃 만들기- 347
무한 스크롤 기능 추가하기- 351
브레드크럼과 옵션 프레임워크 사용하기- 353
갤러리 페이지 만들기- 367
갤러리 이미지 만들기 - 368
템플릿 파일 수정하기- 369
갤러리 글 만들기- 371
갤러리 페이지 만들기- 374
슬라이더 글 타입 만들기- 378
single-slider.php 파일 만들기- 379
슬라이더 글 만들기- 381
전면 페이지 만들기- 382
전면 페이지 헤더- 384
스타일 수정- 385
포트폴리오 코드 블록 추가- 387
갤러리 코드 블록 추가- 389
부트스트랩 스크롤 스파이 이용하기- 390
팀원 글 타입 페이지 만들기- 393
팀원 페이지 만들기- 393
page-team.php 파일 만들기- 395
관리자 화면에서 페이지 만들기- 401
전면 페이지에 코드 블록 삽입하기- 402
회사 소개 페이지 만들기- 404
page-about.php 템플릿 만들기- 404
전면 페이지 코드 블록 만들기- 410
웨이포인트와 애니메이션 스타일시트 사용하기- 412
그리드 블로그 글 타입- 416
page-gridblog.php 템플릿 만들기- 416
블로그 글 타입 변경하기- 418
부트스트랩 모달 기능 추가하기- 419
전면 페이지에 코드 블록 추가하기- 422
게시판 페이지 만들기- 425
page-board.php 템플릿 만들기- 426
게시판 싱글 페이지 수정하기- 427
템플릿으로 페이지 만들기- 428
템플릿 추가 수정- 431
content.php 템플릿 수정하기- 433
content-page.php 파일 수정하기- 434
게시판 추가 설정- 435
게시판 스타일 수정- 437
드롭다운 버튼 문제 해결 방법- 439
영어로 나타나는 문제 해결 방법- 442
04장.디테일
메뉴바 만들기- 448
로고 추가하기- 448
메뉴바 수정- 449
WP-Members 플러그인 사용하기- 452
WP-Members 관련 페이지 만들기- 456
탑메뉴 만들기- 458
이용약관 페이지 만들기 - 466
컨택트 페이지 만들기- 469
Contact Form 7 사용하기- 469
컨택트 폼 페이지 만들기- 472
구글 맵 사용하기- 473
파일 내려받아 설치하기- 473
전면 페이지에 코드 블록 만들기- 475
푸터 만들기- 479
두 번째 홈페이지 푸터- 479
전면 페이지 푸터- 483
사용자 정의 필드 만들기- 484
콘텐츠 영역을 전체 너비로 사용하기- 484
갤러리 템플릿 수정- 485
와이드 갤러리 페이지 만들기- 486
두 번째 홈페이지 만들기- 489
캐러젤 만들기- 489
캐러젤 글 만들기- 491
home-page.php 템플릿 만들기- 492
스타일 정리- 497
