워드프레스 Divi 테마 설치는 코딩 없이 홈페이지를 만드는 가장 빠른 출발점이다. 워드프레스는 PHP로 만들어진 오픈소스 CMS(Content Management System)로, 2003년 처음 공개된 이후 전 세계에서 가장 널리 쓰이는 무료 사이트 제작 솔루션이다. 이 글에서는 호스팅에 워드프레스 설치가 끝났다는 전제 아래, 초기 설정 → 테마·플러그인 개념 → Divi 테마 설치·활성화 → Divi Builder로 첫 페이지 만들기 순서로 정리한다. (참고: 누스쿨은 현재 Divi 대신 Elementor 기반으로 사이트를 운영하지만, 이 글은 당시 실습 기록으로서 보존한다.)
워드프레스로 홈페이지를 제작하는 이유
국내에는 익스프레스엔진(XE), 그누보드 같은 친숙한 CMS도 있다. 익숙한 디자인을 제공하지만, 세부 변경을 위해 PHP·JS·CSS 코딩이 필요하거나 참고할 레퍼런스가 부족하다는 한계가 있다. 반면 워드프레스는 테마와 플러그인만으로도 쉽게 사이트를 제작할 수 있다는 강점이 있다. 코딩 없이 홈페이지를 만드는 것, 그것이 이 홈페이지 제작 시리즈의 목표다.
워드프레스 초기 설정하기
홈페이지로 사용하기 전에 먼저 몇 가지 초기 설정을 끝내 두어야 한다. 제작이 끝난 뒤에 이 설정을 바꾸면 404 에러(페이지를 찾을 수 없음)나 엉뚱한 페이지가 출력되는 문제가 생길 수 있다. 따라서 아래 설정은 반드시 제작을 시작하기 전에 마쳐 둔다.
1. 고유주소(퍼머링크) 설정
워드프레스 관리자에서 설정 > 고유주소로 이동해 ‘글 이름’으로 체크한 뒤 [변경사항 저장]을 누른다.
주의할 점은, ‘글 이름’으로 고유주소 구조를 바꾼 뒤에는 다시 다른 설정으로 변경하지 않는 것이다. 앞서 말했듯 404 에러가 날 확률이 매우 높다. 안정성을 위해 초기에 한 번만 설정하고 이후에는 건드리지 않는다.
2. 사이트 제목과 태그라인 설정
설정 > 일반에서 사이트 제목과 태그라인을 작성한 뒤 변경사항을 저장한다. 이 값은 언제든 바꿔도 무방하지만, 나중에 따로 신경 쓰지 않도록 초기 설정에 함께 넣어 둔다.
이렇게 두 가지로 초기 설정은 끝났다. 다음은 홈페이지 디자인의 핵심인 테마와 플러그인 차례다.
테마와 플러그인
워드프레스의 가장 큰 장점은 테마와 플러그인을 자유롭게 쓸 수 있다는 점이다. 이 두 기능 덕분에 코딩 없이 웹사이트를 만들 수 있고, 선택지가 무궁무진하며 주기적으로 업데이트된다.
테마(Theme)
테마는 웹사이트의 디자인을 결정한다. 사용자는 다양한 테마를 골라 레이아웃과 디자인을 조정할 수 있고, 무료 테마도 수없이 많아 사이트 구축이 편리하다. 이 글에서는 여러 테마를 나열하기보다 한 가지 테마(Divi)로 실제 홈페이지 제작 실습에 집중한다. 이번 편에서는 그중 테마 설치까지만 다룬다.
엘레강스 Divi 테마 (Elegant Themes Divi)
엘레강스 테마(Elegant Themes)의 Divi는 유료(프리미엄) 테마다. 유료 테마 중에서는 비교적 합리적인 가격대이고, 무엇보다 800개가 넘는 디자인 레이아웃과 수천 개의 템플릿을 제공한다는 점이 강점이다. 공식 문서가 자세하고, 해외 유튜브 강의도 많다(다만 대부분 영어다).
플러그인(Plugin)
플러그인은 웹사이트에 기능·도구·보안·SEO 등 다양한 능력을 더한다. 대부분 무료로 내려받아 쓸 수 있고, 오픈소스이기 때문에 누구나 만들어 배포할 수 있다. 완성도 높은 사이트를 만들려면 적절한 테마와 플러그인을 조합하는 것이 좋다.
Divi Builder 플러그인
Divi에는 Divi Builder라는 비주얼 페이지 빌더가 함께 제공된다. 실제로 홈페이지를 드래그 앤 드롭으로 만들게 되는 도구가 바로 이 Divi Builder다. Divi 테마를 설치하면 빌더가 같이 따라오므로, 별도로 빌더만 구입할 필요는 없다.
Divi 테마 다운로드와 가격 정책
Divi는 유료 테마이므로 엘레강스 테마 공식 홈페이지에서 구매·다운로드하는 것이 정식 경로다. 결제 플랜은 크게 연 단위 구독과 평생 이용권으로 나뉘며, 어느 쪽이든 Divi 테마·Divi Builder·추가 제품(Extra, Bloom, Monarch)과 모든 레이아웃을 동일하게 쓸 수 있다.
| 플랜 | 가격(USD, 기준 시점) | 특징 |
|---|---|---|
| 연간(Yearly) | 약 $89 / 년 | 매년 갱신, 무제한 사이트 사용 |
| 평생(Lifetime) | 약 $249 (1회) | 1회 결제로 평생 사용·업데이트, 무제한 사이트 |
가격은 프로모션에 따라 달라질 수 있으니 결제 전 공식 페이지에서 최신 금액을 확인한다. 모든 플랜에 30일 환불 보장이 있어, 30일 안에는 사실상 무료로 체험한 뒤 환불받을 수 있다. 정품 라이선스를 사용해야 테마·빌더 업데이트와 공식 지원을 정상적으로 받을 수 있다는 점도 기억해 두자.
Divi 테마 설치하기
구매를 마치면 Elegant Themes 회원 페이지의 다운로드 영역에서 Divi.zip 파일을 받을 수 있다. 프리미엄 워드프레스 테마는 이렇게 .zip 파일을 관리자에서 업로드하는 방식으로 설치한다. 순서는 다음과 같다.
1) 외모 > 테마에서 ‘새로 추가’
관리자 좌측 메뉴에서 외모 > 테마로 이동한 뒤, 상단의 ‘새로 추가’ 버튼을 클릭한다.
2) 테마 업로드 → 파일 선택 → Divi.zip
테마 추가 페이지가 열리면 상단의 ‘테마 업로드’를 클릭한다. 펼쳐진 영역에서 ‘파일 선택’을 눌러 내려받은 Divi.zip 파일을 선택하고 업로드한다.
3) 설치 완료 후 ‘활성화’
“테마를 성공적으로 설치했습니다”라는 메시지가 보이면, 바로 아래의 ‘활성화’ 링크를 클릭한다. 활성화가 끝나면 Divi 테마가 현재 사이트에 적용된다.
4) API 키로 정품 인증
Divi의 모든 기능(특히 자동 업데이트와 레이아웃 라이브러리)을 제대로 쓰려면 정품 인증이 필요하다. 테마를 활성화하면 좌측 메뉴 하단에 ‘Divi’ 메뉴가 새로 생긴다.
- Divi 메뉴를 클릭해 테마 옵션 화면을 연다.
- 업데이트(Updates) 항목에서 Elegant Themes 계정의 사용자 이름(Username)과 API 키(API Key)를 입력한다. (API 키는 Elegant Themes 회원 페이지 → Account → API Key에서 확인한다.)
- ‘변경 사항 저장’을 누르면 정품 인증이 완료된다.
Divi Builder로 첫 페이지 만들어 보기
사전 작업을 모두 마쳤다면 이제 홈페이지를 만들 차례다. 브라우저에서 도메인(예: www.google.com)을 열었을 때 처음 보이는 페이지를 보통 ‘홈페이지’라고 부른다. 워드프레스에서도 마찬가지로, 할당받은 도메인의 첫 페이지를 Divi Builder로 만들어 본다.
1) 새 페이지 만들기
좌측 메뉴에서 페이지 > 새로 추가를 클릭한다.
2) 제목 입력 후 ‘Divi Builder 사용’
‘제목 추가’ 부분을 클릭해 ‘Home’이라고 입력하고, 중앙의 ‘Divi Builder 사용’ 버튼을 클릭한다.
3) ‘레이아웃 선택하기’
세 가지 시작 방식 중 ‘레이아웃 선택하기’를 클릭한다. (처음부터 빈 화면에서 만들거나, 미리 만든 레이아웃을 불러오는 등의 선택지가 있다.)
4) 라이브러리에서 템플릿 검색·선택
레이아웃 라이브러리에서 원하는 키워드로 검색한다. 예시에서는 ‘Hardware’를 검색해 ‘Hardware Store Shop Page’ 팩을 선택했다. 마음에 드는 팩의 이미지를 클릭한다.
5) 세부 페이지 선택 후 ‘Use This Layout’
팩 안의 여러 페이지 중 ‘Home’ 이미지를 클릭한 뒤, ‘Use This Layout’을 클릭한다.
레이아웃을 적용하면 빌더가 자동으로 페이지를 구성한다.
아래처럼 페이지가 자동으로 적용되며, ‘발행하기’를 클릭하면 Home 페이지가 완성된다.
정리: 코딩 없이 10분 만에 홈페이지
이런 식으로 페이지를 계속 추가하면 비교적 짧은 시간에 완성도 있는 홈페이지를 만들 수 있다. Divi 테마와 Divi Builder를 쓰면 드래그 앤 드롭과 몇 가지 설정만으로 이렇게 쉽게 사이트를 구성할 수 있다. 파워포인트나 포토샵을 익히듯 1~2주 정도만 연습해도 홈페이지 하나는 뚝딱 만들 수 있다. 물론 샘플 레이아웃을 콘텐츠와 디자인에 맞게 손보는 데는 시간이 더 들지만, 그래도 처음부터 코딩하는 것에 비하면 많은 시간이 절약된다. 다음 편에서는 Divi의 세부 기능을 하나씩 다룰 예정이다.
마지막으로 한 가지 참고. Divi는 강력하지만 유료라는 점이 진입 장벽이 될 수 있다. 비용 없이 같은 ‘코딩 없는 빌더’ 방식을 경험하고 싶다면 Elementor 같은 무료 페이지 빌더도 좋은 대안이다. 실제로 누스쿨도 현재는 Elementor 기반으로 사이트를 운영하고 있으니, 빌더를 비교 중이라면 함께 검토해 보길 권한다.
💬 댓글 6
보내주신 키로 잘 작동되었습니다.
빌더 메뉴얼을 숙지하여 제작해 보겠습니다.