무료 소스로 사이트를 제대로 만들 수 있는 방법
워드프레스 활용 이야기
최근의 워드프레스의 환경 및 테마나 플러그인의 활용 방법을 고려해 봤을 때, 호스팅 운영 및 도메인에 필요한 비용은 제외하고 모두 무료 소스만 가지고 제작을 한다 가정을 하고, 가장 쉽고 간편한 방법은 무엇인가 한 번 테스트를 해 보았습니다.
실행 전 미리 떠올린 방법은 바로 아래 핵심 역할을 하는 테마와 플러그인 조합입니다.
ASTRA (theme) + Elementor (plugin)
먼저, 아래 소개되는 내용들은 무료 소스로 제작해 볼 수 있는 최대치를 소개하는 것으로, 사이트가 전체적으로 제대로 표시가 되면서(반응형 디자인까지) 짜임새를 갖추는 부분까지만 적용이 되는 내용입니다.
워드프레스의 설치 및 로그인
웹 호스팅 하드 디스크 공간에 워드프레스 최신 버전의 설치 파일들을 업로드 후, 도메인 주소를 열어 보면 워드프레스 설치 과정이 진행됩니다. (※ 저는 xampp를 이용해서 로컬 웹 환경을 만든 것이라 /htdocs/astra라는 폴더에 워드프레스 파일을 복사한 겁니다.)
어드민 접속 후 대시보드 화면이 나오면 설치 끝.기본 환경 세팅
워드프레스 설치 후 초기에 해야 하는 설정들을 완료합니다.
https://brunch.co.kr/@oksambari/32
ASTRA 테마 설치
테마는 워드프레스 어드민에서 만들거나 설정한 페이지나 글, 메뉴, 위젯 등을 불러다 방문자들의 브라우저에 표시를 해 주는 역할을 합니다. (What is a Theme?)
무료 테마의 경우 '외모 > 테마 > 새로 추가' 화면에서 바로 설치가 가능합니다. ASTRA 키워드로 테마를 검색하고 설치를 합니다. 테마 박스 위에 마우스를 올려 보면 [설치] 버튼이 보입니다.
이때, 설치 완료 후 바로 활성화를 하지 않습니다. 사이트 제작 시 코드 한 자 추가가 되지 않는 경우는 없으므로 미리 자식 테마를 같이 설치해 줍니다. (※ 테마 커스텀 방법) 자식 테마는 구글에서 'astra child theme'으로 검색하면 제일 상위에 나올 겁니다. 여기서 파일을 다운로드한 다음, 테마 추가 시 이번에는 [테마 업로드]를 클릭해서 zip 파일을 업로드해서 설치해 줍니다.
마지막으로 자식 테마를 '활성화(Active)'하면 이렇게 테마 설치가 완료된 것을 볼 수 있습니다.
테마가 활성화가 되면, ASTRA 개발자가 만들어 놓은 안내 박스가 상단에 표시됩니다. 사이트를 쉽게 제작할 수 있게 여러 페이지 디자인을 템플릿으로 만들어 놓았다고 생각하시면 되겠습니다. 'Get Started'를 클릭해서 템플릿 추가 기능을 설치합니다.
이때, 페이지 빌더를 앞으로 어떤 것을 쓸지를 결정할 수 있는데, 최근에 가장 이용이 많은 Elementor를 선택합니다. 잠시 기다리면 설치할 수 있는 다양한 템플릿들이 표시가 될 겁니다.
여기까지 내용을 잠시 정리해 보면,
1. 워드프레스 설치
2. 테마 추가 > ASTRA 검색해서 설치
3. 자식 테마 다운로드 후 zip 파일을 업로드해서 설치 후, 활성화(Activate)
4. 바로 위의 starter templates를 불러올 수 있는 기능(plugin)을 설치
5. 이때 페이지 빌더로는 'Elementor'를 선택
이 과정이 진행된 것입니다.
설명을 위해 사진과 글을 적다 보니 내용이 조금 길어졌는데 단계로는 키보드 입력 몇 번, 클릭 몇 번으로 진행이 가능한 것들입니다.
사이트 내에서는 어떤 변화가 있었을까요?
도메인 주소로 사이트를 열어봅니다. 테마의 기본적인 뼈대 구조, 헤더, 푸터, 본문 영역, 사이드 영역이 표시되고 있습니다. (아직 콘텐츠는 X)
어드민에서는 현재까지 테마 2개와, 플러그인이 1개 추가가 되었습니다.
ASTRA 테마의 Starter Templates 설치
'외모 > Starter Templates'를 들어가 보면 설치할 수 있는 다양한 종류의 템플릿들이 보입니다. All 선택 옵션에서 free를 선택하면 무료만 볼 수도 있습니다. 템플릿을 클릭하면 메인 화면 외에 다른 페이지들도 확인 가능합니다. 테스트를 위해 저는 'Outdoor Adventure'라는 템플릿을 선택했고, 이 템플릿 모두를 Import 하는 것으로 진행을 해 봤습니다. 과정이 다 진행된 다음, 메인 화면이 템플릿의 것으로 변경이 되면 끝.
템플릿 설치 과정 중 필요한 플러그인도 알아서 추가가 되었고, 템플릿에서 소개된 5개의 페이지도 자동으로 추가가 된 것을 볼 수 있습니다.
내 콘텐츠로 내용 바꾸기
로그인 상태라면 각 페이지 방문 시 상단에 어드민 바가 보이게 됩니다. 각 페이지가 열린 상태에서 'Edit with Elementor' 버튼을 클릭하면 화면 요소들을 편집할 수 있는 편집 화면으로 들어갈 수 있습니다.
편집 화면에서 텍스트, 사진 등을 교체할 수 있고, 추가해야 할 요소들이 있다면 왼쪽에서 선택 후 화면에 추가할 수 있습니다. (단, PRO 버전의 요소들은 사용이 안 되고, 다른 유료 테마 1개의 값을 내고 구매를 해야 사용이 가능합니다.)
기타 팁
1. ASTRA Starter 템플릿 중 1개만 선택해서 Import를 할 수도 있습니다. 여러 템플릿들 중 한 페이지씩을 불러다 이용할 수 있는 것인데, 다만 이러면 디자인 통일성은 떨어질 수 있습니다.
2. 최신 글 목록(Blog) 페이지는 빈 페이지만 만들고, 읽기 설정에서 글 페이지로 지정만 하면 끝.
3. 템플릿들은 모두 영문으로 제작이 된 것들입니다.
한글 타이틀의 경우 사이즈를 2/3 정도로 줄여보세요. 그래야 이질감이 조금은 덜합니다. (예: h1태그였다면 h2 또는 h3로)
최근에 많은 분들이 이 엘리멘토 페이지 빌더(무료라 접근이 쉽고, 관련 테마도 많이 있음)를 이용하는 것으로 보입니다.
하지만 엘리멘토 빌더를 제대로 쓰려면 여러 시행착오도 겪고, 웹 디자인 구조에 대한 이해도 필요하고, 반응형 화면에 대한 확인 및 디자인 값 수정 등이 가능해야 합니다. ASTRA 테마의 경우 Elementor 빌더에 맞게 템플릿들을 준비해 놓아서 사용하기 매우 좋은 테마입니다. 그러니 최대한 만들어진 템플릿을 활용해서 내 콘텐츠를 교체하면서 사이트를 만드는 쪽으로 진행을 하는 것이 때로는 이 빌더와 씨름하면서 구성하는 것보다는 오히려 더 나은 모습이 구성될 수도 있습니다.
혹시나 혼자 워드프레스 웹사이트를 만들고자 하는데, 생각한 대로 진도는 잘 안 나가고 테마와 페이지 빌더가 너무 어렵다 싶은 상황이라면 위 방법을 한 번 참고해 보세요.
단, 무료는 당연히 제한적인 기능과 템플릿이 제공이 됩니다. 만약 여기서 뭔가를 더 추가하려고 pro를 결제해야 하고, ASTRA 개발사에서 제공하는 무료 플러그인들도 더 추가해서 쓰고 해야 하는 상황이라면, 차라리 제대로 된 유료 테마를 하나 구매를 해서 구축을 하는 편이 훨씬 더 간편하고 가볍게 사이트를 제작하는 방법이 될 수 있습니다.
https://brunch.co.kr/magazine/impreza
끝.
