워드프레스 무료 테마 Phlox로 웹사이트 만들기 1편 - 10분만에 사이트 세팅하기

20분 만에 워드프레스로 웹사이트를 만들 수 있을까? 그것도 무료로? 답변부터 하자면 가능하다. 다만 여기서 전제 조건은 이미 예시로 보이는 무료 테마를 선택해서 데모 버전을 설치해서 웹사이트를 만드는 방법이다. 오늘 블로그를 쓰기에 앞서 무료 테마 중 하나를 선택하여 기본적인 사이트의 틀을 잡는 것까지 얼마나 시간이 걸리는지 테스트해보기로 했다. 무료 테마 중, Phlox라는 테마를 선택하게 되었고, 우선 테마를 다운로드하였다. 테마를 다운로드한 후 굉장히 인상적인 기능이 있다는 것을 알게 되었는데, 바로 데모 버전을 바로 가져와서 웹사이트 제작을 할 수 있는다는 점이었다. 필자가 처음 워드프레스로 웹사이트를 구축하기 시작한 2016년 즘만 해도 무료로 제공되는 테마로는 어느 정도 모양새가 갖춰진 웹사이트를 만드는 데는 어려움이 많았다. 특히, 기본 틀만 제공되고 세부 레이아웃이나 기능들은 예시로 보이는 사이트와는 아주 다른 모습이어서, 사실상 배경지식이 없는 사람의 경우, 워드프레스 무료 테마를 다운로드하여서 웹사이트를 제작하는 데는 굉장히 많은 공부가 필요했고, 시간이 필요했다. 그 당시에는 무료 테마는 일반적으로 데모 버전을 바로 불러오기 해서 웹사이트에 붙여 넣어서 제작하는 방식이 불가능한 테마가 많았다. 유료 테마에서나 데모 버전을 바로 불러오기 해서 사용할 수 있는 기능을 제공하곤 했다.

 

하지만 어제 무료 테마 하나를 선택해서 다운로드하여 설치를 해보니 무료 테마여도 데모 버전을 바로 불러오기 해서 사용할 수 있는 기능을 제공하는 테마들이 있는 것 같다. 이 블로그를 비롯해서 앞으로 3편에서 4편 정도의 블로그에는 가장 웹사이트를 쉽게 만들 수 있는 방법은 "무료 테마 다운로드 후, 데모 버전을 가져와서 원하는 워드프레스 웹사이트 만들기" 방법을 소개하고자 한다. 필자도 워드프레스로 웹사이트를 만드는데 60% 이상은 이 방법으로 웹사이트 제작을 진행한다. 나머지 40% 정도는 웹사이트에 필요한 기능을 위한 플러그인 설치, 일부 레이아웃의 코드 수정, 그리고 필요한  디자인을 만들어 데모 버전의 디자인을 변경하는 방식으로 웹사이트를 제작한다. 지금 설명하는 이 방법들이 어떤 방법인지 Phlox 테마를 활용한 예시를 보여주면서 설명할 수 있도록 하겠다.

 

1. Phlox 테마 다운로드 및 활성화

phlox 테마 다운로드 방법

우선 Appearance 메뉴에 가서 Add new 버튼을 클릭한다. 그리고 좌측에 보이는 텍스트 입력창에 Phlox를 입력한다. 그럼 밑에 하나의 테마가 보이게 되는데 그 테마를 install 한 후, 활성화(activate) 한다. 그럼 우선 테마 설치는 완료가 된다. 여기서 사실 추가적으로 차일드 테마라는 개념의 테마를 만들어서 추가해주면 좋은데, 이 차일드 테마를 만드는 방법은 향 후 다른 블로그 포스트에서 설명할 수 있도록 하겠다. 기본적인 개념은, 원본 테마를 활성화시켜서 작업을 하게 되면 작업 내역이 이 테마에 쓰어지게 되는데, 이렇게 직접적으로 테마에 작업할 시, 나중에 원본으로 돌리거나 변경하기 어렵기에, 그 위에 해당 테마와 연결된 child theme이라는 개념의 테마에 작업되는 내용들이 쓰이도록 일종의 안전장치를 하는 개념이라고 보면 된다. 이번 편에서는 단순히 활성화 및 기본 세팅을 위한 방법만 작성할 것이기에 Child Theme 내용은 다음에 다루기로 한다. 

 

여기까지 테마를 설치했다고 하더라도, 주어진 Public IP로 들어가 보면 사이트가 기존의 화면에서 변경된 것은 보이지만 뭔가 매우 부족해 보이는 것 같이 보인다. 잘못된 화면이 아니므로, 걱정할 필요는 없다. 이제 이 아무것도 없어 보이는 테마에 데모 버전을 설치해 보자.

 

2. 데모 테마 확인 후, 덮어쓰기

테마를 설치한 후에 Activiate 버튼을 누르게 되면 테마 메뉴 상단에 'Thanks for chossing Phlox'라는 메뉴가 뜨면서 중간에 파란 버튼으로 'Install 1/2 - phlox Core Plugin'이라는 버튼이 보이게 된다. 이 버튼을 클릭해서 다음 작업을 진행한다. 버튼을 클릭하면 우선 로딩 아이콘이 돌아가면서 무언가를 설치한다. 이 테마를 선택할 때, Preview 화면에서 다양한 데모 버전을 확인할 수 있는데, 그 데모 버전에 있는 형태로 사이트를 운영하려면 필요한 기본적인 세팅과 플러그인들이 있을 것이다. 그런 것들을 다운로드하는 것이다. 설치가 완료되면 자동적으로 아래 화면으로 이동한다. 

Phlox 테마 메뉴 화면

Phlox라는 메뉴가 좌측 메뉴에 생성된 것을 확인할 수 있는데 이 메뉴에서 이 테마와 관련된 정보, 데모, 업데이트 등을 확인할 수 있다. 이 메뉴에서 Demo importer라는 메뉴로 이동한다. 

Phlox에서 제공하는 테마의 데모 버전들

지금 설치한 Phlox라는 테마를 활용하여 설치할 수 있는 여러 데모 버전을 확인할 수 있다. 무료로 제공되는 테마를 활용할 것이기에 각 테마 이미지 우측 상단에 'Pro Only'라고 되어있는 것을 제외하고 설치하고자 하는 데모 버전을 선택하다. 각 데모 이미지 밑에 Preview라는 버튼을 눌러서 어떤 형태의 사이트로 만들고 싶은지 결정한다. 그리고 그중에서 원하는 데모 버전을 확인하여, 해당 데모 버전 불러오기(Import)한다. 필자는 일반적은 회사 소개형 사이트 데모를 가지고 다음 몇 편의 블로그를 쓰고자 하여 조금 스크롤 다운하면 나오는 Today Business 데모를 선택한다. 

 

데모 관련 자료 다운로드

원하는 데모를 선택하고 나면 처음에 아무것도 설치되지 않은 깨끗한 페이지에 워드프레스를 설치하라는 팝업창이 나온다. continue 버튼을 눌러주고 나면 위와 같이 '선택한 데모 버전을 구현하기 위해 필요한 플러그인' 다운로드 화면이 나온다. Install Plugins를 눌러 진행한다. 자동적으로 플러그인 설치 후 활성화까지 진행될 것이다. 플러그인 설치 후에는 콘텐츠 다운로드가 진행되는데 데모 버전과 동일한 이미지 구현을 위해 사진, 아이콘 등의 데이터를 다운로드하고자 하는지 묻는 것이다. 워터 마크를 보이게 하는 것, 보이게 하지 않는 것을 선택할 수 있는데, 되도록이면 워터마크 표시가 되는 것을 선택해서 나중에 이미지를 빠르게 변경해 주는 것을 추천한다. 혹여나 저작권 이슈가 생길 수 있기에 워터마크 표시가 된 것으로 필자는 선택한다. 

 

데모 콘텐츠 다운로드

위와 같은 화면이 나오면 'complete pre-build website' 탭을 선택해서 콘텐츠 불러오기를 시작한다. 만약 데이터를 선택적으로 가져오게 되면 데모 프리뷰에서 보인 것과 동일한 느낌의 사이트가 나오지 않을 수 있다. 최대한 데모와 동일하게 웹사이트를 구현하기 위해 모든 콘텐츠 데이터를 받아준다. 데모 콘텐츠의 크기에 따라서 시간이 꽤 소요될 수 있다. 예전에는 데모 버전의 사이즈가 너무 크면 호스팅에 따라서 로딩을 못하고 중간에 속도 이슈로 데모가 받아지지 않는 경우가 많았는데, 최근 다시 워드프레스를 시작하면서 아마존 웹 서비스의 라이트 세일을 사용한 후에 관련된 데모 버전 덮어쓰기 불가능 이슈는 한 번도 없었다. 

 

데모 버전 최종 설치 완료 화면

이제 모든 설치가 완료되었다. 중간에 Preview 버튼을 누르면 처음 보였던 어색한 아무것도 없던 페이지에서 방금 설치한 데모 버전이 설치된 웹사이트 화면을 볼 수 있다. 여기까지가 기본적인 무료 테마 설치 후, 데모 버전 설치 방법이다. 이렇게 세팅하는데 10분 정도 시간이 걸리지 않는다. 이제 다음 편부터는 이렇게 설치한 데모 사이트를 어떻게 하나하나 변경해나가면서 내가 원하는 사이트로 만들어 가는지 방법을 소개할 수 있도록 하겠다.