워드프레스 강좌 #1. 개발환경 준비, 설치, 환경설정

웹사이트를 개발하기 위해 호스팅 서버에서 바로 코딩을 할 수도 있지만, 이번 강좌에서는 자신의 PC에서 코딩을 마친 후에 호스팅 서버에 업로드하는 방식으로 진행하겠습니다.

개발환경 준비 #1. xampp

이 블로그에 있는 다음 포스팅을 참고하여 xampp 환경을 구축합니다.

윈도우에서 xampp 환경 구축

이번 강좌를 위해서는 portable xampp 환경에서 가상호스트로 nam 이라는 계정을 127.0.0.2에 연결하겠습니다.
계정 이름을 반드시 nam 으로 할 필요도 없고, 웹 주소를 반드시 127.0.0.2로 할 필요도 없습니다.
계정 이름은 알파벳과 숫자로 이루어지면 되고, 웹 주소는 127.x.x.x (x는 0 이상 255 이하의 숫자)로 하면 됩니다.
이번 강좌에서는, 웹브라우저에서 http://127.0.0.2/ 에 접속하면 x:/home/nam/public_html 폴더로 연결된다고 가정하고 진행하겠습니다.

개발환경 준비 #2. 에디터, FTP 클라이언트

워드프레스를 사용한 웹사이트 개발은 대개 웹브라우저와 에디터, FTP 클라이언트를 통해 이루어집니다.
웹브라우저에서는 관리자로 로그인하여 외모, 플러그인, 페이지 등을 설정하게 됩니다.
에디터에서는 테마 내의 .php, .css 파일을 수정하거나 외부 커스텀 페이지을 생성하게 됩니다.
FTP 클라이언트는 당장 사용하지는 않지만 개발을 마치고 호스팅을 위한 파일을 업로드하기 위해 필요합니다.

웹브라우저: 익스플로러, 크롬 등 현재 사용 중인 최신 브라우저가 있으므로 따로 설치할 필요가 없습니다.

에디터: FTP 원격 편집이 가능한 에디트플러스(Editplus)를 추천합니다.
아래에 링크된 에디트플러스 공식 웹사이트의 다운로드 메뉴에서 30일 평가판을 다운받을 수 있습니다.

에디트플러스

평가판이라고 하더라도 기능의 제한은 없으므로 사용하는 데에는 불편함이 없습니다.
정식 라이센스는 부가세를 포함하여 30,000원 정도에 구입할 수 있습니다.

에디트플러스의 설치가 끝난 뒤에는 인코딩 설정을 해줘야 합니다.
에디트플러스 인코딩 기본값은 ANSI(euc-kr)인데 워드프레스에서는 UTF-8이라는 인코딩을 사용합니다.
따라서 이 설정을 하지 않을 경우에는 소스가 깨져서 출력될 수 있습니다.

에디트플러스를 실행하고 메뉴 > 도구 > 기본 설정을 클릭합니다.
기본 설정 창에서 왼쪽 항목 중에서 파일을 클릭합니다.
기본 인코딩을 UTF-8로 설정합니다.

FTP 클라이언트: 무료인데다 용량이 적고 기능이 다양한 파일질라(FileZilla)를 추천합니다.
아래에 링크된 파일질라 공식 웹사이트에서 FileZilla Client를 다운받아 설치합니다.

파일질라

당분간은 파일질라를 사용할 일이 없습니다.
모든 코딩 작업이 끝난 이후에 호스팅 서버에 업로드할 때에 사용하게 될 것입니다.

워드프레스 설치 #1. 다운로드

아래에 링크된 워드프레스 웹사이트에서 최신 워드프레스를 다운받습니다.
윈도우 환경의 경우에는 .zip 파일을 다운받는 것이 편리합니다.
2012년 11월말 현재 최신 버전은 3.4.2입니다.

워드프레스

다운로드 페이지에서 한국어 버전이 제공된다고 안내해 주지만, 한국어 버전보다는 영어 버전을 설치해야 합니다.
워드프레스의 최신 버전은 항상 영어 버전이고, 영어 버전을 설치한 이후에도 이후의 강좌에서 설명할 방식대로 쉽게 한글화를 할 수 있기 때문입니다.

워드프레스 설치 #2. 압축 해제

다운받은 워드프레스 파일의 압축을 해제하면 wordpress라는 폴더가 생깁니다.
이 폴더 안에 있는 파일들을 nam 계정 내의 폴더로 옮기면 설치가 됩니다.
즉, xampp이 설치된 계정의 public_html폴더 안에 wp라는 폴더를 만들고 wordpress 폴더 내의 파일들을 이동시킵니다.
portable 버전의 xampp를 x: 드라이브에 설치한 경우를 예를 들면, 이동 작업이 끝난 뒤의 wp-config-sample.php 파일의 경로는 다음과 같이 되어야 합니다.

x:/home/nam/public_html/wp/wp-config-sample.php

이 때에 public_html 내의 wp라는 폴더 이름은 제가 임의로 설정한 것으로, wordpress나 2012와 같이 자신이 사용하고 싶은 다른 폴더 이름을 사용해도 됩니다.
public_html 폴더의 바로 아래에 바로 워드프레스를 설치하지 않고 하나의 하위폴더를 만드는 이유는 보안적인 측면과 유지 관리의 측면에 있습니다.

웹으로 접속할 때 wp 경로가 보이는 것이 꺼려질 수 있지만, 뒷 부분에서 설명할 몇 가지 간단한 설정을 통해 wp 경로가 없는 것처럼 보이게 할 수 있습니다.

워드프레스 설치 #3. 데이터베이스 설정

워드프레스가 작동하기 위해서는 데이터베이스가 꼭 필요합니다.
데이터베이스를 사용하기 위해서는 데이터베이스 계정(ID/PW)과 그 계정에게 할당된 데이터베이스가 필요합니다.

xampp를 설치하면 기본적으로 root 계정이 있고 별다른 데이터베이스는 없는 상태입니다.
그러나 워드프레스를 사용하기 위한 데이터베이스 계정으로 root 계정을 사용하는 것은 좋지 않습니다.
따라서 다음과 같은 순서대로 워드프레스에서 사용할 데이터베이스 계정과 데이터베이스를 생성합니다.

1. 웹브라우저에서 http://127.0.0.1/phpmyadmin/ 접속

2. ID: root / PW: (앞에서 설정한 암호) 입력하여 로그인

3. 우측 상단의 메뉴들 중에서 `Users` 클릭

4. 중간에 있는 `Add user` 클릭

5. 새 계정에 관한 정보 입력
사용자명에 데이터베이스 계정의 ID 입력(예: wp)
호스트는 선택상자에서 local 선택
암호는 데이터베이스 계정의 PW 입력
Database for user 칸에서 선택
오른쪽 아래에서 `Add user` 버튼 클릭

데이터베이스가 생성된 후에 왼쪽 메뉴를 보면 데이터베이스 목록에서 wp가 추가된를 확인할 수 있습니다.

마지막으로 다음 순서대로 인코딩을 UTF-8로 설정해야 합니다.

1. 좌측의 데이터베이스 목록에서 wp를 클릭

2. 우측의 상단 메뉴에서 Operations를 클릭

3. Collation에서 utf8_general_ci를 선택하고 Go 버튼을 클릭

워드프레스 설치 #4. wp-config.php 파일 생성

이제 웹브라우저에서 http://127.0.0.2/wp/ 를 입력해서 워드프레스에 접속해 봅시다.
그러면 다음과 같이 wp-config.php 파일이 없다는 안내문을 볼 수 있습니다.

Create a Configuration File 버튼을 눌러서 설치를 시작합니다.

그러면 다음과 같은 화면이 나옵니다.
Let’s go 버튼을 눌러서 진행합니다.

데이터베이스 계정에 관한 정보를 입력하는 화면입니다.
앞에서 생성한 데이터베이스 계정의 정보를 입력합니다.

옵션을 선택했기 때문에 여기에서 Database Name과 User Name은 동일하게 wp가 될 것입니다.
앞에서 호스트에서 local을 선택했기 때문에 여기에서 Database Host는 localhost가 됩니다.
입력을 마친 후에 Submit 버튼을 누르면 설치가 완료됩니다.

데이터베이스 계정에 관한 정보를 정확하게 입력하지 않았을 경우에는 Submit 버튼을 누르면 다음과 같은 화면이 출력됩니다.

뒤로 가서 ID, PW, 데이터베이스 이름 등을 제대로 입력했는지 확인해야 합니다.

데이터베이스 계정에 관한 정보가 정확하게 입력된 경우에는 다음과 같은 화면이 출력되고 워드프레스 설치 폴더 내에 wp-config.php 파일이 생성됩니다.

그러나 아직 데이터베이스 안에 테이블이 생성된 상태는 아니기 때문에 Run the install 버튼을 클릭해서 설치를 시작해야 합니다.

다음과 같이 환영 화면과 함께 관리자 계정에 관한 정보를 입력하게 됩니다.

Site Title에는 웹사이트의 제목을 입력합니다.

Username에는 이 웹사이트에 로그인할 때에 사용할 아이디를 입력합니다.
앞에서 데이터베이스 계정을 생성할 때에 사용한 ID/PW와는 완전히 상관이 없습니다.
이 아이디는 관리자 계정이 되기 때문에 admin과 같이 누구나 알기 쉬운 아이디를 입력하면 보안에 위험이 있으므로 자신만이 알 수 있는 아이디를 사용하는 것이 좋습니다.

나머지는 적당하게 입력하고 Install WordPress 버튼을 클릭하면 데이터베이스 내에 테이블을 생성하고 설치가 완료됩니다.
그러면 다음과 같은 화면을 볼 수 있습니다.

앞 단계에서 입력한 Username을 확인할 수 있습니다.
Password는 노출되지 않습니다.

Log In 버튼을 클릭하면 다음과 같은 로그인 창이 나옵니다.

아이디와 비밀번호를 입력하고 로그인하면 다음과 같은 관리 화면으로 접속됩니다.

여기까지 진행했다면 워드프레스 설치는 끝난 것입니다.

워드프레스 환경설정 #1. 기본 설정

다른 워드프레스 설정을 하기 전에 몇 가지 기본 설정을 해야 합니다.

1. Settings > General

Timezone을 GTC+9(한국 표준시각)으로 설정합니다.

2. Settings > Permalinks

Common Settings에서 본인이 원하는 주소 표시 방식을 선택합니다.
이 때에 Default가 아닌 나머지 옵션 중에서 하나를 선택하면 /wp 폴더 내에 .htaccess 파일이 생성된 것을 확인할 수 있습니다.
Default 설정을 유지할 경우에 .htaccess 파일이 생성되지 않는데, 별 문제는 없습니다.

3. Users > Your profile

Nickname을 아이디가 아닌 다른 값으로 바꾸어 줍니다.
에서 위에서 설정한 닉네임을 선택합니다.

워드프레스 환경설정 #2. /wp 경로 감추기

앞에서는 보안을 위해서 /wp라는 하위 폴더 안에 워드프레스를 설치했습니다.
그러나 사용자들이 접속할 때에 매번 /wp 폴더로 접속하는 것은 불편하고, 보기에도 좋지 않습니다.
이를 해결하기 위해서는 .htaccess 파일을 사용하면 됩니다.

1. public_html/wp/index.php 파일 복사

public_html/wp/index.php 파일을 public_html/index.php 로 복사합니다.
그런 뒤에 에디트플러스로 public_html/index.php 파일을 열어 수정합니다.

require('./wp-blog-header.php');

라고 된 부분을

require('./wp/wp-blog-header.php');

으로 바꾸어 줍니다.

2. public_html/wp/.htaccess 파일 복사

public_html/wp/.htaccess 파일을 public_html/.htaccess 로 복사합니다.
그런 뒤에 에디트플러스로 public_html/.htaccess 파일을 열어 수정합니다.
이 .htaccess 파일이 없는 경우에는 복사하지 않아도 됩니다.

RewriteBase /wp/

라고 된 부분을

RewriteBase /

으로 바꾸어 주고

RewriteRule . /wp/index.php [L]

라고 된 부분을

RewriteRule . /index.php [L]

으로 바꾸어 줍니다.
만약에 이런 내용이 없는 경우에는 수정할 필요 없이 그대로 두면 됩니다.

웹브라우저에서 http://127.0.0.2/ 으로 접속해 보아 http://127.0.0.2/wp/ 로 접속한 것과 같은 화면이 나온다면 성공입니다.

마지막으로 워드프레스 설정 화면에서 Settings > General >

여기까지 하고 저장하면 http://127.0.0.2/ 로 접속하면 제대로 접속되고, http://127.0.0.2/wp/ 로 접속하면 페이지를 찾을 수 없다는 화면을 볼 수 있어야 정상입니다.

다음 강좌에서는 영문 워드프레스를 한글화하는 방법을 다루겠습니다.

관련 포스트

윈도우에서 xampp 환경 구축

xampp 다운로드

PHP, MySQL 환경을 구축하는 방법은 다양하지만 대개는 아파치 서버를 기반으로 작동하게 됩니다.
즉 리눅스 환경의 경우 LAMP(linux+apache+mysql+php)가 되고, 윈도우 환경의 경우 WAMP(windows+apache+mysql+php)가 될 것입니다.

윈도우에서 WAMP를 구축하기 위해서는 직접 apache, mysql, php를 각각 설치할 수도 있지만, 대개는 xampp나 apmsetup을 사용하게 됩니다.
아래에 링크된 xampp 다운로드 페이지에서 xampp의 최신 버전을 다운받습니다.

xampp 윈도우 버전

설치 버전이 있고 portable 버전이 있는데, 설치 버전은 컴퓨터에 설치해 두는 것이고, portable 버전은 설치 없이 USB나 외장 하드디스크에 넣어서 가지고 다닐 수 있는 것입니다.
상황에 맞게 선택하면 됩는데, 저는 portable 버전을 선택했습니다.

xampp 설치

portable 버전의 경우 외장 하드 디스크/USB의 xampp 라는 폴더에 압축을 풀어주면 설치가 끝납니다.
설치 버전의 경우 설치 프로그램을 실행하면 됩니다.
여기에서는 portable 버전을 x:\xampp\에 압축을 풀었다고 하고 진행하겠습니다.

설치가 끝나면 x:\xampp\xampp-control.exe 를 실행합니다.
다음 창이 실행되면 Start 버튼을 클릭하여 Apache와 MySQL 을 각각 시작합니다.

서버가 제대로 작동하는지 확인하기 위해서는 웹브라우저를 열고 주소 표시줄에 http://127.0.0.1/ 을 입력합니다.
페이지를 찾을 수 없다는 화면이 나올 경우 xampp가 제대로 실행중인지, 방화벽에서 해당 포트를 허용했는지 확인합니다.
언어 선택 화면(한국어가 없으므로 English 선택) 후에 아래와 같은 페이지가 나온다면 제대로 설치가 된 것입니다.

보안을 위한 xampp 설정

좌측의 메뉴 중에서 Security를 클릭합니다.

화면을 스크롤해서 내려가면 http://127.0.0.1/security/xamppsecurity.php 로의 링크가 있습니다.
이 링크를 클릭해서 데이터베이스 root 계정의 암호와 xampp 설정 페이지 접속 암호를 설정합니다.
한꺼번에 저장되지 않고, 각각의 항목별로 암호를 입력하고 따로 저장 버튼을 눌러주어야 합니다.

가상 호스팅 설정

하나의 apache 서버에서 여러 계정을 호스팅할 수 있습니다.
이렇게 하기 위해서는 xampp에서 virtual hosting에 관련된 파일들을 설정해 주어야 합니다.

x:\xampp\apache\conf\extra\httpd-vhosts.conf 파일을 열어서 수정합니다.

##NameVirtualHost *:80

라고 된 부분을

NameVirtualHost *:80

로 수정합니다.
#은 주석을 의미하는데, 주석을 해제하면 NameVirtualHost 기능이 작동하게 됩니다.

그런 뒤에 같은 파일의 마지막에

<VirtualHost *:80>
DocumentRoot "/xampp/htdocs"
ServerName localhost
</VirtualHost>

를 추가합니다.
이렇게 하면 이후에 가상 호스트를 설정해도 웹브라우저에 localhost를 입력하면 기존의 xampp 설정 페이지에 접속할 수 있습니다.

또한 같은 파일의 마지막에

<VirtualHost *:80>
DocumentRoot "/home/wp/public_html"
ServerName 127.0.0.2
<Directory "/home/wp/public_html">
Options Indexes Includes execCGI
AllowOverride All
Require all granted
</Directory>
</VirtualHost>

를 추가합니다.
이렇게 하면 웹브라우저에서 http://127.0.0.2/ 로 접속하면 x:\home\wp\public_html\ 에 접속할 수 있습니다.
계정(폴더) 이름은 wp가 아니라도 원하는 이름으로 정하면 됩니다.

이제 실제로 x:\home\wp\public_html\ 라는 폴더를 만들면 작업이 끝납니다.
접속이 되는지 확인하기 위해서 x:\home\wp\public_html\ 내에 index.php 파일을 만들고, 다음 내용을 입력합니다.

<?php phpinfo(); ?>

수정된 아파치 설정을 반영하기 위해서 xampp control 화면에서 Apache를 Stop 했다가 다시 Start 버튼을 클릭하여 재시작합니다.
웹브라우저에서 http://127.0.0.2/ 를 입력하여 다음과 같은 화면이 나오면 성공입니다.

또 다른 가상 호스트를 추가하려면

다음 두가지 작업을 하면 됩니다.
gnu라는 가상호스트를 127.0.0.3에 추가하는 경우를 예로 들겠습니다.

1. x:\home\ 내에 임의의 폴더를 생성하고 public_html 폴더 생성
예를 들면 x:\home\gnu\public_html 등과 같이 됩니다.

2. x:\xampp\apache\conf\extra\httpd-vhosts.conf 파일 끝에 다음 내용 추가

<VirtualHost *:80>
DocumentRoot "/home/gnu/public_html"
ServerName 127.0.0.3
<Directory "/home/gnu/public_html">
Options Indexes Includes execCGI
Require all granted
</Directory>
</VirtualHost>

관련 포스트