워드프레스 Divi 테마 설치하기: 홈페이지 제작 1편

워드프레스는 PHP로 만들어진 오픈소스(Content Management System, CMS)로, 블로그 또는 사이트를 만들 때 많이 사용됩니다. 2003년에 처음 선보였으며, 매년 업데이트되므로 다양한 버전이 있습니다. 지금은 전 세계적으로 많이 사용되는 무료 CMS 솔루션 중 하나입니다. 이번 포스팅은 호스팅 업체를 선정하여 워드프레스 설치가 완료된 것을 전제로 진행할 것입니다. 만약 워드프레스에 대해 처음 찾아보았거나, 설치를 해보지 않은 분들은 아래의 링크로 이동하여 먼저 진행해주시기 바랍니다.

워드프레스로 홈페이지를 제작하는 이유

여러가지 홈페이지 제작 툴이 있습니다. 익스프레스엔진(XE) 그누보드 등… 국내에서 많이 사용되는 CMS 툴이고 국내에서 사용하기 편하고 익숙한 디자인을 제공합니다. 하지만 세부적인 변경을 하기위해 php, js, css 코딩을 해야 하거나, 많은 레퍼런스가 없다는 한계가 있습니다. 워드프레스는 테마와 플러그인만으로도 쉽게 제작할 수 있는 장점이 있습니다. 그래서 워드프레스로 코딩 없이 홈페이지를 제작하는 것이 바로 이번 홈페이지 제작 시리즈의 목표입니다.

워드프레스 초기 설정하기

홈페이지로 사용하기 위해서 먼저 몇 가지 초기 설정이 필요합니다. 홈페이지 제작이 끝난 후에 변경을 하게 되면 404 에러(페이지를 찾을 수 없음)나 엄한 페이지가 출력되는 등의 문제가 발생할 여지가 생깁니다. 따라서 해당 설정을 꼭 홈페이지 제작 전에 설정을 해주어야 합니다.

1. 고유주소 설정하기 (‘설정 > 고유주소’에서 글 이름으로 체크한 후, [변경사항 저장])

주의할 점은 글 이름으로 고유주소 구조를 변경한 후에 다시 다른 설정으로 바꾸지 않도록 합니다. 처음에 말씀드릴 것과 같이 404 에러가 발생할 확률이 굉장히 높습니다. 안정성을 위하여 초기에 설정한 후, 다시는 이 설정을 건드리지 않도록 합시다.

2. 사이트 제목과 태그라인 설정하기 (‘설정 > 일반’에서 사이트 제목과 태그라인 작성 후, 변경사항 저장)

이 설정은 언제든지 바꿔도 좋은 설정이지만, 나중에 신경쓰지 않기 위해 초기 설정에 함께 넣었습니다. 이렇게 두 개의 설정으로 초기설정은 마쳤습니다. 다음은 실제로 홈페이지를 디자인하기 위해서 가장 중요한 테마와 플러그인 설치를 진행할 것입니다.

테마와 플러그인

워드프레스의 장점은 테마와 플러그인을 사용할 수 있다는 점입니다. 이 두가지 기능을 통해 웹사이트를 제작하는데 있어 코딩을 하지 않아도 된다는 점이 최고의 장점이며, 워드프레스의 테마와 플러그인은 무궁무진하게 많다는 것입니다. 그리고 주기적으로 업데이트가 됩니다.

테마(Theme)

워드프레스의 테마(Theme)는 웹사이트의 디자인을 결정하는데 사용됩니다. 사용자는 다양한 테마를 선택하여 웹사이트의 레이아웃과 디자인을 조정할 수 있습니다. 특히, 무료로 제공되는 수많은 테마가 있어 웹사이트 구축에 편리합니다. 여러가지 테마를 설명을 하려고 했지만, 이 곳에서는 테마를 소개하는 것보다. 실제로 홈페이지 제작 실습에 의의를 두었습니다. 그래서 한가지 테마의 왠만하면 모든 기능을 소개하려고 합니다. 물론 이번 포스팅에서는 테마를 설치하는 것만 다루도록 하겠습니다.

엘레강스 디비 테마 (Elegant DIVI Theme)

엘레강스 테마의 DIVI는 유료 테마입니다. 이 테마를 사용하는 이유는 유료테마 중에서도 저렴한 편이고 무엇보다 가장 좋은 점은 약 3,000개의 디자인 템플릿을 사용할 수 있다는 점입니다. 또한 사용 설명서가 자세하게 나와 있고 많은 해외 유튜버들이 사용법을 강의하기도 합니다. (다만, 영어로 되어 있음)

플러그인(Plugin)

워드프레스의 플러그인(Plugin)은 웹사이트에 다양한 기능, 도구, 방어체계, SEO 등과 같은 기능을 추가하는 역할을 합니다. 대부분 무료로 다운로드 및 사용이 가능하며, 오픈소스이기 때문에 누구나 만들어서 제공할 수 있습니다. 따라서, 발전된 웹사이트나 블로그 구축을 위해서는 다양한 테마와 플러그인들을 활용하여 구축하는 것이 좋습니다.

엘레강스 디비 빌더 플러그인 (Elegant DIVI Builder Plugin)

엘레강스테마의 DIVI는 유료 테마입니다. 이 테마를 사용하는 이유는 유료테마 중에서도 저렴한 편이고 무엇보다 가장 좋은 점은 약 3,000개의 디자인 템플릿을 사용할 수 있다는 점입니다. 또한 사용 설명서가 자세하게 나와 있고 많은 해외 유튜버들이 사용법을 강의하기도 합니다. (다만, 영어로 되어 있음)

디비 테마 (DIVI Theme) 설치하기

Divi 홈페이지에서 파일 받기

엘레강스 테마에서 주력으로 내세우고 있는 Divi 테마는 유료 테마입니다. 연 단위 결제와 평생 이용권 구매로 나뉘며, 제공되는 기능을 두가지 모두 동일합니다. 30일 체험하는 방법이 있지만 이 또한 연 단위 결제를 먼저 한 후에 30일 내 환불을 할 수 있는 방법으로 제공하고 있습니다. 따라서 이 정책이 힘든 분들에게는 “DIVI 테마 공식 홈페이지 30일 무료 체험” 버튼 좌측 하단에 “nushcool_divi_theme” 다운로드라는 링크가 있을 겁니다. 그 파일을 다운로드하시길 바랍니다. 구글에서 동일 파일 검증을 할 수 있기 때문에 압출 파일에 한번더 암호를 걸어 놓았습니다. 비밀번호는 “nuschool.kr” 입니다.

Divi 테마 적용하기

위의 파일을 받았거나, 공식 홈페이지에서 30일 무료체험을 통해 파일을 다운로드를 했다면 테마를 적용하는 방법은 아주 간단합니다. 아래의 순서대로 차근차근 따라하시길 바랍니다.

1. 좌측 메뉴에서 “외모 > 테마” 를 클릭하고 상단에 있는 푸른 색의 “새로 추가” 버튼을 클릭합니다.

2. 아래와 같이 테마 추가 페이지가 출력됩니다. 상단의 푸른 색의 버튼인 “테마 업로드” 를 클릭하세요.

3. “테마 업로드” 아래 부분에 “파일 선택” 이라는 부분이 아래의 캡쳐처럼 확장될 겁니다. 회색 버튼의 “파일 선택” 을 클릭하고 다운로드 한 “Divi.zip” 파일을 업로드합니다.

4. 아래의 그림과 같이 “테마를 성공적으로 설치했습니다” 라는 로그가 출력되면 바로 아래 “활성화” 링크를 클릭하여 활성화합니다.

아래와 같이 Divi 테마가 활성화 됩니다.

API Key 넣기

Divi 테마를 완벽하게 사용하기 위해서는 API 키를 넣어 계정을 활성화시켜야 합니다. 활성화를 하지 않으면 기능을 제대로 사용할 수 없습니다. Divi 테마를 활성화 하면 좌측 메인 메뉴 하단에 “Divi” 라는 메뉴가 하나 더 생성됩니다.

1. Divi 메뉴를 클릭하고 아래와 같이 Divi 테마 옵션이 출력되는 것을 확인합니다.
2. 업데이트 항목을 클릭하면 “사용자 이름”, “API 카” 부분이 나올텐데 그 곳에 값을 넣습니다.
3. 상단 또는 하단의 “변경 사항 저장” 버튼을 클릭하면 모든 준비는 완료가 됩니다.

Divi Builder 를 통해 샘플 페이지 만들어 보기

위의 사전작업을 모두 마쳤다면 홈페이지를 만들어볼 차례입니다. Divi 테마에는 기본적으로 Divi Builder 라는 플러그인이 제공됩니다. 실제로 홈페이지를 만들게 되는 툴이 바로 이 Divi Builder 입니다. 이 툴을 통해 쉽고 빠른 웹 디자인을 워드프레스 사이트에 적용할 수 있습니다.

홈페이지 만들기

도메인, 예를 들어 브라우저에서 www.google.com 을 열었을 때, 나타나는 첫 페이지를 바로 홈페이지라고 합니다. 구축된 워드프레스도 마찬가지입니다. 여러분이 할당 받은 도메인의 첫 페이지를 만들어 보도록 하겠습니다.

1. 새 페이지 만들기

좌측 메뉴에서 “페이지 > 새로 추가” 를 클릭합니다.

2. “제목 추가” 부분을 클릭하여 “Home” 이라고 작성하고 중간에 "Divi Builder 사용"이라는 버튼을 클릭합니다.

3. 세 개의 선택지 중에 “레이아웃 선택하기” 클릭 합니다.

4. 라이브러리에서 선택하여 클릭 (검색)

   Hardware 넣으면 “Hardware Store Shop Page” 가 나오는 데 그 이미지를 클릭합니다.

5. 우측 여러 페이지 중 "Home"이라는 이미지 클릭하고 좌측 "Use This Layout"을 클릭하면 됩니다.

자동으로 페이지를 만들어 주는 중…

아래와 같이 페이지가 자동으로 적용되며, “발행 하기” 를 클릭하면 Home 이 만들어집니다.

No code, No 노가다, 10분만에 홈페이지 완성

위와 같이 페이지를 계속 추가하여 홈페이지를 제작하면 30분 내로 퀄리티 좋은 홈페이지가 완성됩니다. 워드프레스의 Divi 테마를 사용하면 이렇게 드래그 앤 드롭과 몇 가지 설정을 통해서 이렇게 쉽게 홈페이지를 만들 수 있습니다. 파워포인트나, 포토샵을 배우는 것처럼 1 ~ 2주 정도만 배워도 충분히 홈페이지 하나를 뚝딱 만들 수 있을 정도입니다. 샘플 페이지를 10 분만에 만들었지만 세부적으로 디자인을 변경하거나 Content 내용을 바꾸려면 시간이 좀 걸릴 거 같습니다. 그래도 많은 시간이 단축되겠지요. 다음 포스팅에는 기능 하나하나 세부적으로 다룰 예정입니다. 다만, 이 테마를 사용하기 위해서는 비용이 든다는 점이 안타깝습니다. 물론 30일 체험을 할 수 있지만 30일이 모자란 사람을 위해 API Key 를 공유하고 싶네요. 댓글로 이메일 주소를 남겨 주시면 API Key 를 공유해드립니다. 보안상 매월 초, 초기화합니다. 필요하신 분들은 매월 이 블로그로 오셔서 댓글 달아주세요.