추가 적립 안내

이 책에서는 얼추 워드프레스의 기초를 마쳤다는 가정 하에 전문성 있어 보이는 제대로 된 홈페이지를 만들기 위해 필요한 다양한 디자인 기술을 제공하고 있습니다. 책의 제목을 "디자인 기술'이라고 표현하는 이유는 워드프레스의 플러그인만을 이용해서 그 모든 작업이 가능하기 때문입니다. 대개 그렇게 멋있는 홈페이지를 만들기 위해서는 많은 CSS, PHP 지식이 필요한 것으로 오해하게 됩니다. 하지만 워드프레스의 강점이 플러그인이듯이 모든 디자인 기능이 플러그인으로 제공되고 있습니다. 단지 플러그인의 조합만으로 전문성 있어 보이는 홈페이지를 디자인하고 기능을 추가할 수 있다는 사실을 이 책을 통해서 아시게 됩니다.

세련된 워드프레스 홈페이지 디자인을 위한 책입니다.

이 책은 다음과 같은 분들을 위해 다양한 워드프레스 디자인 기술을 제공하고 있습니다.

워드프레스로 기본적인 홈페이지는 만들 줄 아시는 분
플러그인이 무엇이지 정도는 아시는 분

워드프레스로 웬만큼 홈페이지를 만들기는 할 수 있지만 기존의 홈페이지처럼 세련되고 전문적인 홈페이지를 디자인하려면 기초 서적에서 설명하는 것만으로는 부족함을 느끼는 분들이 많으실 것입니다. 또한 개인적인 홈페이지뿐만 아니라, 기업체의 의뢰를 받아 워드프레스로 홈페이지를 수주하시는 경우도 기초 이상의 디자인 기술이 필요하게 됩니다.

이 책에서는 얼추 워드프레스의 기초를 마쳤다는 가정 하에 전문성 있어 보이는 제대로 된 홈페이지를 만들기 위해 필요한 다양한 디자인 기술을 제공하고 있습니다. 책의 제목을 "디자인 기술'이라고 표현하는 이유는 워드프레스의 플러그인만을 이용해서 그 모든 작업이 가능하기 때문입니다. 대개 그렇게 멋있는 홈페이지를 만들기 위해서는 많은 CSS, PHP 지식이 필요한 것으로 오해하게 됩니다. 하지만 워드프레스의 강점이 플러그인이듯이 모든 디자인 기능이 플러그인으로 제공되고 있습니다. 단지 플러그인의 조합만으로 전문성 있어 보이는 홈페이지를 디자인하고 기능을 추가할 수 있다는 사실을 이 책을 통해서 아시게 됩니다.

아 책에서는 기초를 넘어선 내용을 설명하고 있지만 모든 내용을 step by step 방식으로 단계별 전개하고 있으며, 각 단계에서 사용할 기술에 대한 해설뿐만 아니라, 주의할 사항이나 미리 고려해야할 요소들에 대한 조언도 자세히 곁들이고 있습니다. 또한 워드프레스에 대한 시각과 관점, 워드프레스의 근본 원리에 대한 이해 등에 대해 기술하고 있습니다. 세련되고 멋진 홈페이지를 만드시려는 분들은 이 책에서 많은 해결책을 찾으시게 될 것입니다.

이 책에서 소개하고 사용하고 있는 편집, 디자인 관련 플러그인은 다음과 같습니다.

소스 편집기 - WP Editor
글 편집기 - WP Super Edit
게시판 편집기 - Coeditor와 CKFinder
웹 편집기 - TinyMCE
QR 코드 - TinyMCE Admin Options
포토앨범 - WP Photo Album Plus
콘텍스트 메뉴 - TinyMCE Advanced
수식편집기 - Equation Editor
쪽 나누기 - Page Break
이모션 - Moods Addon for Ultimate TinyMCE
글 양식(템플릿) 작성기 - TinyMCE Templates
위젯 편집기 - Black Studio TinyMCE Widget
썸네일 편집기 - Post Thumbnail Editor
쇼트코드 만들기 - Shortcodes Pro
편집기에 웹폰트 설치 - Supreme Google Webfonts
로고체 만들기 - FontLab
다국어 번역- gtrans
자식 테마 - One-Click Child Theme
페이징 - WP-PageNavi
배너 - WP Bannerize
동적 위젯 - Dynamic Widgets
입체 태그 효과 - 3D Tag Cloud
이미지 워터마크 처리 - Signature Watermark
이미지 확대 보기 - Lightbox Gallery
포스트 슬라이드 효과 - SlideDeck 2
jQuery UI - jQuery UI Widgets, WP UI
디자인 가이드라인 - AddQuicktag
플래시 태그 클라우드 - WP-Cumulus
사이드바 제어법 - Content Aware Sidebars
메인용 입체 슬라이드 성형 기술 - Content Flow3D
포스트용 레이아웃 - SCU Layout 1
유투브 슬라이드 활용 - SlideDeck 2
포스트용 레이아웃 2 - SCU Layout 2,3,4
포스트 컬럼 레이아웃 - Advanced WP Columns Plugin

이 책에서 설명하고 있는 위의 플러그인들을 사용해보시면 워드프레스의 진정한 힘을 다시 한번 느끼시게 될 것입니다.

워드프레스 디자인 실무를 위한 책입니다.

기업용 사이트를 제작하거나 전문 사이트를 만드는 디자이너, 콘텐츠 운영자, 기획자를 위한 디자인 관련 기술을 담고 있습니다. 전문적인 작업을 위한 편집기의 선택부터 한글 서체의 편집기 탑재, 애니메이션을 비롯한 각종 효과, 메인/서브 페이지의 구성, 관리자용 매뉴얼을 만드는 방법 등등 필자가 기업용 사이트들을 만들면서 쌓아온 디자인 기술들을 공개하고 있습니다.

실무적인 내용이지만 모든 내용을 step by step 방식으로 단계별 전개하고 있으며, 각 단계에서 사용할 기술에 대한 해설뿐만 아니라, 실무적으로 주의할 사항이나 미리 고려해야할 요소들에 대한 조언도 자세히 곁들이고 있습니다. 또한 실무자가 갖춰야 할 워드프레스에 대한 시각과 관점, 워드프레스의 근본 원리에 대한 이해 등에 대해 기술하고 있습니다.

전문 플러그인들을 중심으로 HTML과 CSS 그리고 아주 약간의 PHP 코드 수정을 통해 상업성 있는 웹 사이트를 만드는 다양한 기술을 소개하고 있습니다. 워드프레스 기초를 넘어 웬만한 사이트까지는 만들 수 있는데 실제 상업적으로 워드프레스 사이트를 납품을 할 정도의 디자인 노하우가 부족하다면 이 책에서 많은 해결책을 얻으실 수 있을 것입니다.

PART 1 오픈디자인의 워밍업

1장 플러그인 업데이트
1-1 업데이트에 따른 변화
1-2 업데이트 문제 해결하기

2장 소스 편집기 업그레이드 - WP Editor
2-1 WP Editor 플러그인 설치하기
2-2 WP Editor 설정하기
2-3 테마와 플러그인 편집기 업그레이드 확인하기
2-4 새로운 편집기 기능 점검하기

3장 글 편집기 업그레이드 - WP Super Edit
3-1 WP Super Edit 설치하기
3-2 WP Super Edit 관련 플러그인
3-3 WP Super Edit 설정하기
3-4 WP Super Edit 편집 도구 추가하기

4장 게시판 편집기의 제왕 - CKEditor와 CKFinder
4-1 CKEditor 플러그인 설치하기
4-2 CKEditor 둘러보기
4-3 CKEditor 설정 점검하기
4-4 CKFinder 설치하기
4-5 CKFinder로 파일 업로드 테스트하기

5장 웹 편집의 보물상자 - TinyMCE
5-1 Ultimate TinyMCE 설치하기
5-2 기존 편집기 비활성화하기
5-3 Ultimate TinyMCE 설정하기
Buttons Group 1 설정 - 1행 버튼 추가
Buttons Group 2 설정 - 2행 버튼 추가
Other Plugins' Buttons 설정 - WP Photo Album Plus 추가 설치
Miscellaneous Features 설정
Signoff의 사용
QR 코드가 매력적인 Admin Options 설정
5-4 편집기 툴바 조절하기
요약정보 편집기 확인

6장 포토앨범의 활용 - WP Photo Album Plus
6-1 포토앨범 만들기
6-2 한 번에 사진들 올리기
6-3 포스트에 포토앨범 넣기
6-4 포토앨범 결과 살펴보기

7장 QR 코드의 활용 ? TinyMCE의 Admin Options
7-1 QR 코드 설정 확인하기
7-2 스마트폰에서 QR 코드 테스트하기

8장 콘텍스트 메뉴 - TinyMCE Advanced
8-1 TinyMCE Advanced 플러그인 설치하기
8-2 TinyMCE Advanced 설정하기
8-3 편집기용 콘텍스트 메뉴 사용하기

9장 수식편집기 - Equation Editor
9-1 샘플 수식 작성하기
9-2 이미 가져온 수식 이미지 수정하기
9-3 수식편집기의 협력 원리

10장 쪽 나누기 - Page Break
10-1 쪽 나누기 넣기
10-2 CSS로 페이징 버튼 편집하기
크롬에서 CSS 소스 자동 찾기
CSS로 스타일 디자인하기
style.css에서 편집 위치 찾기
style.css 수정하기

11장 이모션의 활용 - Moods Addon for Ultimate TinyMCE
11-1 기본 이모션 사용하기
11-2 쓸 만한 이모션 플러그인 설치하기
11-3 고급 이모션 사용하기

12장 글 양식(템플릿) 작성기 - TinyMCE Templates
12-1 TinyMCE Templates 플러그인 설치하기
12-2 TinyMCE Templates 설정 방법 확인하기
12-3 글 양식 만들기
12-4 글 양식 사용하기

13장 위젯 편집기 - Black Studio TinyMCE Widget
13-1 Black Studio TinyMCE Widget 플러그인 설치하기
13-2 footer에 위젯 편집기 활용하기

14장 썸네일 편집기 - Post Thumbnail Editor
14-1 Post Thumbnail Editor 플러그인 설치하기
14-2 썸네일 편집기 사용하기
14-3 Post Thumbnail Editor 설정에 대한 고찰

15장 나만의 쇼트코드 만들기 - Shortcodes Pro
15-1 Shortcodes Pro 플러그인 설치하기
15-2 Shortcodes Pro 설정하기
15-3 쇼트코드 유형 1 - 내용 감싸기
내용 감싸기 규칙 작성
내용 감싸기 버튼 배치
내용 감싸기 버튼 아이콘 등록
내용 감싸기 쇼트코드 저장
내용 감싸기 쇼트코드 버튼 실험
15-4 쇼트코드 유형 2 - HTML 양식형
Insert Custom Code 선택
HTML 양식 속성 추가
HTML 양식 작성
HTML 쇼트코드 버튼 설정
HTML 양식형 쇼트코드 실험
속성변수 수정 시 주의사항
15-5 쇼트코드 유형 3 - PHP형
Insert Custom Code 선택
PHP 속성변수 추가
PHP 코드 작성
PHP 쇼트코드 버튼 설정
PHP 쇼트코드 실험
15-6 내가 만든 쇼트코드 버튼 배치하기

PART 2 오픈디자인의 글씨와 외국어 실력

16장 영문 웹폰트 활용 기법 - Google Webfonts
16-1 편집기에 웹폰트 설치하기 - Supreme Google Webfonts
16-2 Helvetica 대체 웹폰트 사용하기
16-3 웹폰트의 작동 원리 알아보기
16-4 구글 웹폰트 내 맘대로 가져오기
Quick-use 둘러보기
영문 폰트 활자판 보기
구글 폰트 공짜 쇼핑하기
트루타입 구글 폰트 다운받기
여러 개의 구글 웹폰트 사용하기
16-5 구글 웹폰트 간단히 사용하기
16-6 워드프레스의 영역 태그의 문제 살펴보기
16-7 웹폰트 추가하기
Supreme Google Webfonts 플러그인에 폰트 추가하기
글 편집기에 폰트 추가하기
16-8 내 서버에서의 웹폰트 활용 힌트
Google Webfonts

17장 웹폰트 최적화
17-1 Supreme Google Webfonts의 MS 익스플로러 문제
17-2 웹폰트 최적화와 eot의 이해

18장 한글 웹폰트 분석과 수집의 기술
18-1 모빌리스에서 한글 웹폰트 배우기
18-2 익스플로러용 웹폰트 수집하기
18-3 수집한 웹폰트를 자신의 서버에 탑재하기
18-4 .woff 파일 수집하기

19장 특정 포스트에서만 한글 폰트 사용하기
19-1 특정 글에만 스크립트/스타일 추가하기
19-2 한글 웹폰트 사용하기
19-3 한글 웹폰트 실험과 적용 범위 이해하기
19-4 기본 포스트 포맷 설정 이해하기

20장 편집기에 한글 웹폰트 탑재하기
20-1 Supreme Google Webfonts 플러그인 소스 복제
20-2 복제된 플러그인 이름 바꾸기
20-3 내 웹폰트 플러그인의 구조 살펴보기
20-4 나눔체용 CSS 파일 만들기
20-5 사용자용 나눔체용 CSS 주소 추가
20-6 편집기 서체 목록 추가
20-7 편집기용 나눔체용 CSS 주소 추가
20-8 웹폰트 플러그인 교체
20-9 편집기용 한글 웹폰트 실험하기
20-10 편집기에 스타일 보여주기

21장 한글 폰트를 만들기 위한 준비 작업
21-1 FontLab과 나눔 서체 탐구
21-2 나눔 서체 활자판 가져오기
21-3 팔만대장경 활자판 탐구
21-4 서체의 기본 요소와 정보 작성법
폰트 이름과 저작권 설정
폰트 버전과 언어 설정

22장 나만의 로고체 만들기
22-1 활자판 만들기
22-2 서체 미리보기
22-3 일러스트로 활자 가져가기
22-4 FontLab의 활자 가이드라인
22-5 일러스트레이터에서 활자 디자인 가져오기
22-6 .ttf 생성과 미리보기 옵션

23장 FontLab 데모 버전의 제약을 극복하는 기술
23-1 .ttf 파일 점검 기술
23-2 활자 추가와 복제 기술
23-3 활자 이름 바꾸기 및 활자판 교체
23-4 활자 폭 맞추기

24장 .ttf 실험과 .eot/.woff 웹폰트로 변환
24-1 .ttf 데스크탑 설치와 실험
24-2 .ttf 로고체를 웹폰트용으로 변환하기
24-3 워드프레스에 로고 서체 탑재하기
24-4 로고 웹폰트 사용하기

25장 기호문자 자동해독기법 wp-Typography
25-1 wp-Typography 설치
25-2 자동변환 제외 설정
25-3 하이픈 단어의 대문자 설정
25-4 자동 변환 기능
25-5 공백 제어 기능
25-6 CSS 후크 설정
25-7 포스트에서 기호문자 해독 활용
25-8 TinyMCE의 암호화 버튼 기능

26장 폰트의 3D 입체효과
26-1 CSS의 3D 폰트 효과
CSS로 3D 폰트 만들기
크롬에서의 CSS 3D 폰트 테스트
IE에서의 CSS 3D 폰트 테스트
26-2 CSS의 엠보싱 폰트 효과
CSS 엠보싱 폰트 만들기
HTML 조건문 활용법
크롬에서의 CSS 엠보싱 폰트 테스트
IE에서의 CSS 엠보싱 폰트 테스트
26-3 CSS의 다양한 폰트 효과
26-4 입체적인 프리젠테이션 기법 - 3D Presentation
3D Presentation 플러그인 설치와 설정
3D Presentation의 기본 활용법
3D Presentation의 간단한 실험과 이해

27장 다국어 번역기와 위젯의 탈옥
27-1 gtrans 플러그인 설치 및 설정
amr shortcode any widget 플러그인 설치 및 활용법
27-2 gtrans 위젯의 쇼트코드화
27-3 푸터에 gtrans 쇼트코드 추가
27-4 사이드바에 gtrans 쇼트코드 추가
27-5 다국어 번역기 성능 맛보기
27-6 선택한 언어의 기억

PART 3 오픈디자인의 테크닉과 조화술

28장 자식 테마와 테마 확장과 헤드라인 기능
28-1 One-Click Child Theme 설치
28-2 자식 테마 생성
28-3 자식 테마의 이해와 확장
28-4 테마 편집기 도우미 - Advanced Code Editor
28-5 테마 확장 플러그인 - Twenty Eleven Theme Extensions
28-6 첫 페이지 헤드라인 만들기
28-7 소스 편집기의 CodeMirror 충돌 문제에 대한 이해
WP Editor의 이해와 비활성화
Scripts n Styles와 Advanced Code Editor의 구분
요소 점검의 활용 기술
동일한 CSS 클래스의 선별 기술

29장 페이징 기술과 이전/다음 버튼
29-1 읽기 설정 점검
29-2 WP-PageNavi와 Wp Pagenavi Style 설치
29-3 포스트 목록에 페이징 설정
29-4 페이징 스타일 변경
29-5 포스트 쪽 나누기 페이징
29-6 포스트 상세 화면에 이전/다음 버튼 추가
29-7 페이지네비의 CSS 성형수술
CSS 선택자의 택일 기법
수평 구분선 긋기
CSS 문자열 추가 기법
한 줄을 두 줄로 변형
서체 재정의
페이지네비와 간격 조절
사용자 화면 확인

30장 배너와 동적 위젯 설정
30-1 WP Bannerize 설치와 기본 설정
30-2 배너 등록
30-3 위젯으로 배너 배치하기
30-4 쇼트코드로 배너 배치하기
30-5 푸터 영역의 기능적 분할과 CSS 성형
30-6 동적 위젯 설정 - Dynamic Widgets
30-7 배너 노출 화면 설정법

31장 실용적인 이미지 처리 및 효과들
31-1 입체 태그 효과 - 3D Tag Cloud
31-2 이미지 워터마크 처리 - Signature Watermark
31-3 이미지 확대 보기 - Lightbox Gallery
31-4 포스트 슬라이드 효과 - SlideDeck 2
31-5 슬라이드 덱의 응용 사례

32장 jQuery UI와 WP UI의 활용
32-1 jQuery UI Widgets과 WP UI의 관계에 대한 이해
32-2 jQuery UI Widgets의 설정
32-3 WP UI의 설정 테크닉
기본 설정 - 사용할 UI 정의
기본 스타일 정의
jQuery UI 테마 가져오기
UI 애니메이션 효과 설정
버튼 라벨 설정
포스트 양식 설정
고급 설정 - API 버전에 따른 충돌 관리
32-4 쇼트코드와 WP UI의 위젯 활용법
위젯의 쇼트코드화
WP UI Widget과 WP UI Posts를 사이드바에 등록
WP UI Widget 설정
WP UI Posts 설정
사용자 화면 실험
일자 포맷의 이해와 플러그인 디버깅 사례
WP UI의 CSS 성형법
32-5 포스트에서 WP UI 활용법
포스트 편집기의 WP-UI 버튼
대화상자의 쇼트코드 및 마법사 - Dialog
기본형 탭의 쇼트코드 및 마법사 - Tab
기본형 아코디언의 쇼트코드 - Accordion
피드의 쇼트코드 - Feed
스포일러의 쇼트코드 - Spoiler, Collapsibles

33장 디자인 가이드라인의 기술
33-1 AddQuicktag 설치
33-2 Quicktag 등록과 관리
33-3 유용한 가이드라인 사례들
문자용 가이드라인
이미지 배치용 가이드라인
쇼트코드와 레이아웃용 가이드라인
33-4 가이드라인의 CSS 성형법
문자용 가이드라인의 CSS 사례
이미지 캡션의 CSS 성형 사례
이미지 그룹 배치용 CSS 성형 기법
33-5 편집기에 CSS 가이드라인 적용
33-6 편집 가이드라인의 활용 사례
이미지 캡션과 설명문 가이드라인
이미지 그룹 배치와 내용 양식
33-7 편집 가이드라인의 실 사례들

34장 메인 페이지 디자인의 기술
34-1 Front Page 개발 준비
34-2 레이아웃 설계
메인 페이지 위쪽 뷰의 구상
메인 페이지 아래쪽 뷰의 구상
1행의 디자인 구상
2행의 디자인 구상
3행의 디자인 구상
4행의 디자인 구상
메인 페이지 아래쪽 디자인 구상
관리자 버튼에 대한 구상
관리자 매뉴얼의 접근성에 대한 구상
34-3 플래시 태그 클라우드 - WP-Cumulus
34-4 랜덤 쇼트코드와 동적 배경 기법
34-5 사이드바 제어법 - Content Aware Sidebars
34-6 제목, 댓글, SNS 버튼 등 없애기
34-7 메인용 입체 슬라이드 성형 기술 - Content Flow3D
Content Flow3D 설치와 기능 실험
Content Flow3D 플러그인의 PHP 성형
쇼트코드로 플러그인의 한계 극복
워드프레스의 경로 표기법 이해
영역 겹치기 기법
34-8 포스트용 레이아웃 1 - SCU Layout 1
34-9 이미지를 이용한 그림자 효과의 이해 - Shadows
34-10 유투브 슬라이드 활용 - SlideDeck 2
34-11 포스트용 레이아웃 2 - SCU Layout 2,3,4
34-12 컬럼 레이아웃 - Advanced WP Columns Plugin
34-13 컬럼 레이아웃의 이해와 수정법
34-14 Front Page 배포
34-15 관리자 전용 버튼과 관리자 매뉴얼 작성 기법
혼자 보는 글의 이해
관리자 전용 버튼 쇼트코드
워드프레스 사용자 등급의 이해
페이지에 관리자 전용 버튼 달기
푸터에 관리자 전용 버튼 달기
34-16 서브 메인 페이지 구성
레이아웃 만들기
서브 페이지 전용 사이드바 만들기
서브 페이지 전용 메뉴 만들기
쇼트코드를 이용한 전용 사이드바 구성
서브 메뉴를 페이지로 교체 등록