하자센터 허브팀에서 워드프레스 사용법을 강의한 자료(2012-11-29). 워드프레스의 배경, 개념, 기능, 실습, 제약, 참고로 구성. 개발자가 아닌 분들을 대상.

1. KAIST Social Academy
2012-11-29
To 하자센터 From 김평화
워드프레스 가이드
워드프레스의 기본 개념과 사례들, 그리고 간단한 사용 방법을
나누고자 합니다.
 영문/한글 혼용
 개발자를 위한 사항 배제
 CCL BY-NC-SA

2. Contents
Background
Case Studies
Features & Functions
Practice
Constraints
References
2

3. • Background
• WordPress?
• Philosophy
• History
• Why WordPress?
3

4. Background
• WordPress?
– 설치형 블로그 기반의 컨텐츠 관리 시스템(CMS)
– 오픈 소스 소프트웨어
– 우수한 확장성
⇒ 테마, 플러그인, 템플릿
• Philosophy
– ‘Clean, Lean, and Mean’
⇒ 코어 시스템 vs. 확장
– ‘Working out-of-the-box’
⇒ 기술적 지식이 거의 없는 사람을 위한
4

5. Background
• History of WordPress
– 2001, Originated from weblog software called b2/cafelog
– 2003, The first released by Matt Mullenweg
– 2004, Released official and stable version (1.0) and became popular
⇒ “MovableType” changed to get license fee
– 2010, Market share of 55.5% in the CMS market
⇒ by W3Techs
– 2011, Over 14.7% top 1 million websites and manages 22% of all new websites
⇒ by Alexa Internet
– Now 2012, Version 3.5.2 released
– 10년 이상의 기간 동안 세계의 유수한 개발자 수 천명의 작품
⇒ 테마와 플러그인 개발자까지 합친다면, 수 만명의 개발자가 참여
– 블로그(Weblog)로 시작하였지만, 현재는 컨텐츠 관리 시스템(CMS) 중에 1위
– 국내에서는 최근 워드프레스의 가치가 인정되고 있음
5

6. Background
Why WordPress?
1. 누구나 쉽게, 무료로 사용이 가능하다.
⇒ 오픈 소스 (GPL v2)
– Free Software vs. Open Source Software
⇒ 과거에는 서비스형 블로그만이 무료로 사용할 수 있는 컨텐츠 관리 시스템이었음
– 서비스형 블로그 vs. 설치형 블로그
– 무료 설치형 CMS로 발전
⇒ 코딩이 없이, 메뉴 선택 방법으로 설치와 셋팅이 가능
6

7. Background
Why WordPress?
2. 무수한 테마와 플러그인이 존재하고, 개발 커뮤니티가 활발하다.
⇒ 높은 확장성과 사용성
⇒ 대부분의 상상할 수 있는 기능들이 이미 개발되어 있음
– 커스터마이즈의 문제
⇒ 공식 사이트에 등록된 플러그인만 2만개가 넘으며, 테마는 사실상 셀 수 없음
– 좋은 테마와 플러그인을 찾을 수 있는 안목이 중요
- Types of Themes
• Blog
• Gallery
• Portfolio - Types of Plugins
• Magazine • Core Functionality
• Business • User Role Management
• e-Commerce • BBS and Forum
• Social Plugin Connection
• eCommerce Support
• Backup
• Optimize
• SEO
7

8. Background
Why WordPress?
3. 각종 소셜 플러그인들이 고립된 섬(내 사이트)에 다리를 놓아준다.
⇒ 대부분의 SNS는 소셜 플러그인을 가지고 있음
– 페이스북 : 로그인, 코멘트, 라이크 박스, 라이크버튼 등
– 트위터 : 로그인, 트윗 버튼 등
– 핀터레스트 : 핀잇 버튼 등
– 구글+ : 로그인, +1 버튼 등
⇒ 사용자 친구관계(Social)를 그대로 워드프레스 사이트에서 활용 가능
8

9. Background
Why WordPress?
4. 각종 클라우드 서비스가 트래픽을 대신 감당해준다.
⇒ 다양한 클라우드 서비스
– 이미지 : 피카사, 플리커 등
– 비디오 : 유트브, 비메오 등
– 문서 : 슬라이드쉐어 등
– 파일 : 구글 드라이브, 드랍박스 등
⇒ 트래픽을 대신 감당해준다는 것은 트래픽으로 발생하는 비용이 무료가 된다는 의미
– 컨텐츠 생산자(워드프레스)  망사업자  컨텐츠 소비자(사용자)
9

10. • Case Studies
• Types of Themes
• Other Considerations
10

11. Case Studies
• Types of Themes
– Basis : Blog, Gallery, Portfolio, ..
– Application : Magazine, Business,
e-Commerce, ..more
• Other Considerations
– Free vs. Premium
– Responsive
– OnePage
– Simple, Minimal
11

12. Case Studies
Types of Themes
• Basis : Blog Themes
– Basic format
⇒ Header, Content, Sider, Footer, ect.
 Showcase
http://www.criaturacreativa.com/blog/ http://www.bike4life.kr/
12

13. Case Studies
Types of Themes
• Basis : Gallery Themes
– Content Views
⇒ Images or videos list (Grid, Masonry, etc.)
 Showcase
http://bestwebgallery.com/ http://cssremix.com/
13

14. Case Studies
Types of Themes
• Basis : Portfolio Themes
– Content Views
⇒ Blog with work gallery (Grid, Masonry, etc)
 Showcase
http://crowdfavorite.com/portfolio/ http://mattbrett.com/work/
14

15. Case Studies
Types of Themes
• Application : Magazine Themes
– Magazine style main screen
– Customized posting blogs
 Showcase
http://www.kineda.com/ http://www.heroyalmajesty.ca/
15

16. Case Studies
Types of Themes
• Application : Business Themes
– Main screen for introducing products and brand
– Most of customized pages and one blog
 Showcase
http://www.wolverineworldwide.com/ http://www.peer1.com/
16

17. Case Studies
Types of Themes
• Application : eCommerce Themes
– Main screen for introducing products and brand
– Customized posting blogs with payment
 Showcase
http://www.converse.com/ http://www.uniqlo.com/us/
17

18. Case Studies
Other Considerations
• Free vs. Premium • Responsive
– 무료 테마는 기능이 제한적이고 많은 – 다양한 스크린 크기에 능동적으로 반
버그를 포함 응하여 최적의 화면 제공
– 유료 테마는 가격 이상의 기능과 가 – N스크린에 대비 가능
치를 지님 (보통 $10~60)
18

19. Case Studies
Other Considerations
• OnePage • Simple, Minimal
– 한 페이지에 사이트의 모든 기능이 – 기능이나 형태를 단순 및 간소화
나열되는 형태 ex) 메타데이터(태그,저자 등)를 없앰
– 단순히 디자인을 심플하게 하는 경우
도 있음
19

20. • Features & Functions
20

21. Features & Functions
홈페이지와 대시보드(Dashboard)
테마(Theme)와 플러그인(Plugin)
메뉴(Menu)와 위젯(Widget)
페이지(Page)와 글(Post)
카테고리(Category)와 태그(Tag)
사용자(User) 관리
댓글(Comment) 관리
미디어(Media) 관리
21

22. Features & Functions
• 홈페이지와 대시보드(Dashboard)
– 사용자 영역인 홈페이지와 관리자 영역인 대시보드로 분리
– 로그인을 하면 관리바(Adminbar)가 생김
22

23. Features & Functions
• 테마(Theme)와 플러그인(Plugin)
– 외모(Appearance)의 하위 메뉴인 테마는 사이트의 외관 뿐 아니라, 모든 기능을 담당
– 플러그인은 특정 기능을 사이트에 추가하는 역할
– 테마와 플러그인 모두 온라인 상에서 검색이 가능하고 클릭만으로 설치됨
23

24. Features & Functions
• 메뉴(Menu)와 위젯(Widget)
– 메뉴 : 사용자 마음대로 메뉴를 지정
⇒ 드래그 앤 드랍 방식으로 직관적인 설정
– 위젯 : 테마가 지원하는 구역마다 특수한 기능을 하는 위젯을 배치
⇒ Sidebar 영역, Footer 영역 등에 미리 지정된 위젯을 드래그 앤 드랍 방식으로 배치
24

25. Features & Functions
• 페이지(Page)와 글(Post)
– 페이지(Page) : 사이트를 구성하는 하나 하나의 페이지
⇒ 페이지끼리 계층구조를 가짐
⇒ 페이지 템플릿(Page Template) 기능으로 기 지정된 형식을 재사용
– 글(Post) : 편집자에 의해 작성되는 기사(Article)에 해당
⇒ 글은 카테고리에 소속되고, 카테고리가 계층구조를 지님
⇒ 글 형식(Post Format) 기능으로 기 지정된 형식을 재사용
< Page > < Post >
Subject
Home
Math Science
Subject
Types
About Member Contact
Add Sub Body
25

26. Features & Functions
• 카테고리(Category)와 태그(Tag)
– 글(Post)을 분류하기 위한 수단
– 카테고리 : 하나의 글은 복수개의 카테고리에 소속될 수 있으며, 계층 구조를 지님
– 태그 : 하나의 글은 복수개의 태그를 지닐 수 있으며, 글을 나타내는 자유 형식의 키워
드를 사용
Subject
Math Science
Subject
Types
Add Sub Body
Leaning Elementary
Human
26

27. Features & Functions
• 사용자(User) 관리
– 사용자의 가입 및 관리 기능 제공
– 사용자 권한 구분 : 관리자 / 편집자 / 글쓴이 / 후원자 / 구독자
⇒ 컨텐츠 관리를 위하여 “편집 권한” 기능만 제공
⇒ 대부분의 커뮤니티 지향 시스템은 구독자의 권한이 분리된다는 점과 상이
– 플러그인으로 해결 가능
27

28. Features & Functions
• 댓글(Comment) 관리
– 계층적인(대화형) 댓글 시스템 제공
– 댓글 중재(Comment Moderation) 기능 제공
⇒ 사이트 전체에 반영된 댓글을 한눈에 볼 수 있고, 이를 관리함
28

29. Features & Functions
• 미디어(Media) 관리
– 라이브러리 : 이미지, 비디오 뿐만 아니라 모든 종류의 파일을 보관
⇒ 각 미디어의 정보를 수정하고, URL을 얻어올 수 있음
⇒ 특히, 이미지에 특화되어 있음
– 글 작성 중에 업로드한 미디어도 라이브러리에 통합됨
⇒ 미디어 메뉴에서 업로드한 것과 글 작성 중 업로드한 것의 차이는 글 내부의 “갤러리”로 배속
되는지의 여부
29

30. • Practice
30

31. Practice
• 실전 연습 1
– 글 작성하기
⇒ 글 – Add New → 제목 – 고유주소 – 글쓰기 - 버튼들 – 보여주기/HTML – 화면 옵션(토론, 글쓴
이, Revisions, Categories, Tags) – 공개하기
– 이미지가 있는 글 작성하기
⇒ 글 – Add New → 제목 – 글쓰기 – 업로드/넣기(Faster Insert) – 업로드(3종류) – 보기(링크, 정
렬, 크기) – 본문 삽입 – 특성 이미지(Use as featured image) – 이미지 고치기 – 공개하기
– 영상 임배드(Embed)가 있는 글 작성하기
⇒ 글 – Add New → 제목 – 글쓰기 – 비메오 영상 주소 붙여넣기 (또는 HTML 소스 붙여넣기) – 특
성 이미지 설정 – 공개하기
– 카테고리 관리하기
⇒ 글 – Categories → 이름 – 슬러그 – 상위 – 설명 – 새 분류 추가하기
31

32. Practice
• 실전 연습 2
– 페이지 만들기
⇒ 페이지 – Add New → 글 작성과 동일 – 페이지 속성(상위, 템플릿) – 공개하기
– 메뉴 관리하기
⇒ 외모 – Menus → +(새 메뉴) – 메뉴에 넣을 수 있는 아이탬(Page, Categories, 사용자정의 링크)
– 이름 및 계층 순서 – 메뉴 저장 - 테마 위치 – 저장하기
– 위젯 관리하기
⇒ 외모 – 위젯 → 사용할 수 있는 위젯(검색, 글목록, 분류, 텍스트 등) – 테마의 위젯 위치(Blog
Sidebar, Portfolio Sidebar, Page Sidebar, Home Widget, Footer Widget 등)
32

33. • Constraints
33

34. Constraints
– English Culture Based
⇒ 영어
⇒ 글 작성 및 컨텐츠 관리하는 방법의 차이
– Publish Process
⇒ 다양한 테마나 플러그인도 문화적으로 다른 형태를
지님
– Blog & CMS Based
Contents
⇒ 컨텐츠 관리엔 강하지만, 사용자 관리에는 약함 Users
– 기본 기능에는 커뮤니티를 위한 기능이 전무함
– 소셜 플러그인으로 커뮤니티를 위한 기본 기능이 제공
되지만, 전문 커뮤니티 시스템으로써는 부족
⇒ 이를 극복하기 위하여 많은 노력이 요구됨 Extendability
– Forum, BuddyPress
– Coding Skill Required
⇒ 사소한 디자인을 위해서
– CSS, Javascript
⇒ 문화적으로 다른 형태를 한국화 하기 위해서
– Localization
⇒ 무료 버전이기 때문에 …
34

35. • References
• Docs & Books
• Reference Sites
• Resource Sites
35

36. References
• Docs & Books
– Theodoros Polychniatis and others. (2010). WordPress: Software Architecture. Utrecht University.
– Hal Stern, David Damstra, Brad Williams. (2010). Professional WordPress Design and Development. Wiley
Publishing.
• Reference Sites
– Wikipedia “WordPress” : http://en.wikipedia.org/wiki/Wordpress
– WordPress Official : http://wordpress.org/
– Best WordPress Sites
⇒ http://ndesign-studio.com/blog/best-wordpress-sites
⇒ http://resources.savedelete.com/20-best-and-awesome-wordpress-resources.html
• Resource Sites
– Official, Themes(free), Plugins, Showcases, Docs, Forum : http://wordpress.org/
– Themes : http://themeforest.net/
– Themes(free), Plugins, Guide, Tips : http://wplift.com/
– Themes(free), Plugins, Tutorial, Tips : http://wp.tutsplus.com/
– Themes, Tips, Tutorial, Services : http://www.wpdesigner.com/
– Themes, Plugins, Tutorial, Docs, Forum : http://themehybrid.com/
– Themes(free) : http://www.freewpthemes.net/
36