워드프레스 디자인의 기술

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



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



워드프레스로 기본적인 홈페이지는 만들 줄 아시는 분

플러그인이 무엇이지 정도는 아시는 분



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



이 책에서는 얼추 워드프레스의 기초를 마쳤다는 가정 하에 전문성 있어 보이는 제대로 된 홈페이지를 만들기 위해 필요한 다양한 디자인 기술을 제공하고 있습니다. 책의 제목을 "디자인 기술'이라고 표현하는 이유는 워드프레스의 플러그인만을 이용해서 그 모든 작업이 가능하기 때문입니다. 대개 그렇게 멋있는 홈페이지를 만들기 위해서는 많은 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 서브 메인 페이지 구성

레이아웃 만들기

서브 페이지 전용 사이드바 만들기

서브 페이지 전용 메뉴 만들기

쇼트코드를 이용한 전용 사이드바 구성

서브 메뉴를 페이지로 교체 등록

이두진 저자 이두진은 아울연구소 소장입니다. 아울연구소(owllab)는 아울(owl)이라는 소프트웨어 개발 회사가 앞선 IT 기술의 동향과 발전 추이를 스터디하는 목적으로 설립한 연구소입니다. 아울은 다양한 앱 개발과 앱 콘텐츠의 배포 사업을 진행하고 있으며 워드프레스를 이용한 웹사이트 리뉴얼과 제작 사업을 활발히 진행하고 있습니다. 저서로는 "안드로이드 앱 개발 완벽 가이드", "아이폰 앱 개발 완벽 가이드". "안드로이드 기초와 실전 앱 프로젝트", "HTML5와 폰갭으로 웹앱 나도 만든다", "모바일 웹과 웹을 위한 jQuery Mobile", "쉽고 자세한 Eclipse 사용법", "워드프레스 시작하기" 등이 있습니다.