Categories

아울그룹은 밤샘의 세월이 만든

“케미가 있는 웍그룹”입니다.

기술 + 문화 + 소통의 조화를 꿈꾸다.

We are in Social
17 4월
2014
Open Web Wordpress
885 Views

워드프레스 디자인의 기술

워드프레스-디자인의-기술

오픈디자인의 워밍-업 오픈디자인의 글씨와 외국어실력 오픈디자인의 테크닉과 조화술 owl 2014-04-17 오전 6.51.54 owl 2014-04-17 오전 6.51.26 owl 2014-04-17 오전 6.52.12 owl 2014-04-17 오전 6.52.37 owl 2014-04-17 오전 6.52.52 owl 2014-04-17 오전 6.53.10

[서지 정보]

저자 이두진

출판사 PCBOOK

출간일 2012년 11월 28일

정가 32,000원

쪽수 578쪽

ISBN 9788981931438

[개요]

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

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

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

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

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

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

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로 페이징 버튼 편집하기

11장 이모션의 활용 – Moods Addon for Ultimate TinyMCE

11-1 기본 이모션 사용하기

11-2 쓸 만한 이모션 플러그인 설치하기

11-3 고급 이모션 사용하기

12장 글 양식(템플릿) 작성기 – 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 양식형

15-5 쇼트코드 유형 3 – PHP형

15-6 내가 만든 쇼트코드 버튼 배치하기

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

16장 영문 웹폰트 활용 기법 – Google Webfonts

16-1 편집기에 웹폰트 설치하기 – Supreme Google Webfonts

16-2 Helvetica 대체 웹폰트 사용하기

16-3 웹폰트의 작동 원리 알아보기

16-4 구글 웹폰트 내 맘대로 가져오기

16-5 구글 웹폰트 간단히 사용하기

16-6 워드프레스의 영역 태그의 문제 살펴보기

16-7 웹폰트 추가하기

16-8 내 서버에서의 웹폰트 활용 힌트

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 폰트 효과

26-2 CSS의 엠보싱 폰트 효과

26-3 CSS의 다양한 폰트 효과

26-4 입체적인 프리젠테이션 기법 – 3D Presentation

27장 다국어 번역기와 위젯의 탈옥

27-1 gtrans 플러그인 설치 및 설정

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 충돌 문제에 대한 이해

29장 페이징 기술과 이전/다음 버튼

29-1 읽기 설정 점검

29-2 WP-PageNavi와 Wp Pagenavi Style 설치

29-3 포스트 목록에 페이징 설정

29-4 페이징 스타일 변경

29-5 포스트 쪽 나누기 페이징

29-6 포스트 상세 화면에 이전/다음 버튼 추가

29-7 페이지네비의 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의 설정 테크닉

32-4 쇼트코드와 WP UI의 위젯 활용법

32-5 포스트에서 WP UI 활용법

33장 디자인 가이드라인의 기술

33-1 AddQuicktag 설치

33-2 Quicktag 등록과 관리

33-3 유용한 가이드라인 사례들

33-4 가이드라인의 CSS 성형법

33-5 편집기에 CSS 가이드라인 적용

33-6 편집 가이드라인의 활용 사례

33-7 편집 가이드라인의 실 사례들

34장 메인 페이지 디자인의 기술

34-1 Front Page 개발 준비

34-2 레이아웃 설계

34-3 플래시 태그 클라우드 – WP-Cumulus

34-4 랜덤 쇼트코드와 동적 배경 기법

34-5 사이드바 제어법 – Content Aware Sidebars

34-6 제목, 댓글, SNS 버튼 등 없애기

34-7 메인용 입체 슬라이드 성형 기술 – Content Flow3D

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 서브 메인 페이지 구성