레고 조립하듯 웹사이트 만들기
IMPREZA 테마로 워드프레스 웹사이트 만들기
이전에 브런치 사이트를 따라 만들어 보기에서 잠깐 소개를 했던 부분인데, IMPREZA 테마는 데모 사이트에서 구조를 복사해다가 내 사이트에 바로 적용하는 방법을 만들어 놨습니다. 앞으로 이 방식이 여러 테마에도 적용이 되면 참 편리할 것 같다는 생각이 들기도 하지만 아주 기본적인 설계의 특성상 모든 테마 개발자들이 이 기능을 적용해 주기는 쉽지는 않아 보입니다.
아무튼 사용자는 잘 만들어진 것을 그냥 쉽게 쓰는 게 최고입니다. 윈도우를 몰라도 켜고 끄는 방법만 알면 다양한 활용이 가능한 것처럼요. 몇 차례지만 '워드프레스 사이트 제작 일대일 수업'을 통해 큰 문제없이 이후 본인들의 사이트를 만들고 활용하는 걸 봤을 때에는 정말 쉬운 테마이구나 하는 걸 느낄 수 있었습니다.
사이트를 만들기 전 가장 중요한 준비물 하나, 보여주고자 하는 콘텐츠 준비 및 기획입니다. (디자인은 일단 만들어진 구조 사용) 방문을 하는 목적은 어찌 됐든 콘텐츠를 보기 위해서이고 내용이 있어야 구성도 가능합니다.
그럼 기본적인 비즈니스 사이트의 형태인 소개 페이지와 연속적인 글을 업데이트할 수 있는 블로그가 결합된 웹사이트를 IMPREZA로 만드는 방법을 소개해 보겠습니다.
0. Demo Import를 쓸 것인가?
IMPREZA 테마도 pre-built demo를 통째로 불러다가 구조를 갖춘 뒤 내 콘텐츠로 교체해서 사이트를 만들어 나가는 방법도 가능합니다. 장점은 필요한 페이지들도 알아서 생성을 해 주고, 색상이나 레이아웃도 데모 그대로 세팅을 해 줍니다.
※ 이 방법과 아래의 내용을 참고해서 필요한 구조만 추가해서 사이트를 만들면 더 쉬울 수 있습니다.
1. 기본적인 환경 설정
사이트의 기본이 되는 기초 공사를 몇 가지 해야 합니다. 사이트의 가로 폭은 어떻게 할지, 색상과 폰트의 종류 등을 미리 설정합니다. 설정은 이후 페이지 작업을 하면서도 수시로 변경을 할 수 있는 부분이라 전체적으로 중심이 되는 부분들만 미리 살펴보면서 설정하면 됩니다.
2. 헤더 만들기
로고와 메뉴, 검색 기능, 소셜 링크 등이 표시되는 곳입니다. 미리 만들어진 헤더를 골라 일부를 수정해서 사용하는 것이 쉽습니다. 저는 2번으로 불러다가 Header라는 이름으로 저장을 했습니다. 페이지가 길 경우 스티키 형태로 메뉴를 상단에 고정할 수도 있고, 투명하게 만들어서 이후 나오는 페이지 내용과 하나의 구조로 보이게 설정할 수도 있습니다. PC, 태블릿, 모바일 상에서의 구조도 각각 따로 설정이 가능합니다.
3. 푸터 만들기
웹사이트의 맨 하단에서 여러 정보와 내비게이션, 카피라이트 등을 표시하는 곳입니다. 이제야 소개할 기능이 나오게 되는데요, 데모 사이트에서 내가 원하는 구조와 유사한 것을 선택 후 푸터를 위한 블록(Page Blocks)으로 저장합니다. 저는 레스토랑 데모의 푸터 섹션을 복사해서 저장을 해봤습니다.
4. 기본 페이지들 만들기
메인 페이지, About, Contact 등 메뉴에 연결할 페이지들을 만듭니다. 아직 페이지 내용들을 구성하진 않아도 됩니다.
페이지들을 미리 만든 이유는 아래와 같이 메뉴를 구성하고, 도메인을 통해 사이트를 방문 시 어떤 페이지가 보일 지를 미리 설정하기 위함입니다.
위 내용까지 하고 잠시 테마 옵션 설정.
2,3에서 만든 헤더와 푸터를 테마 옵션을 통해 연결을 해 줍니다.
그다음 사이트 홈페이지를 열어 보면 아래와 같이 기본 구조가 갖춰진 걸 볼 수 있습니다.
5. 페이지 콘텐츠 추가
이젠 내 콘텐츠를 멋지게 표시를 하는 일이 남았습니다. 유료 테마의 경우 페이지 빌더를 토대로 커스텀을 하여 개발을 어떻게 해 놓았는가에 따라 다양한 기능과 스타일이 표시가 됩니다. IMPREZA의 경우 WPBakery Page Builder를 토대로 각종 연결 옵션 및 워드프레스의 탬플릿 구조를 활용한 아이디어를 조합해 놓은 것인데, 이와 관련된 모든 기술들을 요약해 볼 수 있는 데모 중의 데모는 바로 이것입니다. (※ 유료 테마들 모두 이러한 디폴트 데모를 가지고 있음)
이런 디폴트 데모에서는 아까 언급한 빌더를 토대로 커스텀 개발을 해 놓은 이 테마로 표시할 수 있는 각종 웹 요소들을 파악할 수 있게 해 줍니다. (콘텐츠 요소들)
각 요소별로도 복사가 가능하므로 내 콘텐츠를 표시하기에 맞는 요소를 열어 보고, 괜찮으면 이걸 그대로 복사해서 사용을 하면 됩니다. 레고의 블록 조립하는 방식으로요.
요소 하나하나보다는 구성된 것 자체를 쓰고 싶다면, 요소를 조합하여 만들어진 데모 페이지들을 둘러보면 됩니다.
해야 할 것이라면 >
원하는 요소를 찾기 또는 섹션을 찾기,
복사하여 페이지에 붙여 넣기,
내 콘텐츠로 수정하기,
페이지를 저장,
끝
아까 만들어 뒀던 'Home' 페이지의 편집 화면에서 섹션 3개를 복사해서 붙여 넣어봤습니다.
! 임프레자의 장점 중 하나.
일반적인 소개 사이트에서 필요한 화면의 요소들은 거의 모두 가지고 있습니다. 팝업, 콘텐츠 폼 등은 모두 개발자가 미리 고려하여 개발을 해 놨습니다. 따로 플러그인을 설치할 일이 없으니 그만큼 더 가벼운 사이트가 된다는 것입니다.
웹이라는 것은 결국은 보여주고 싶은 콘텐츠에 있는 사진, 글, 레이아웃의 조합입니다. ( 여기에 전문적인 디자인과 스타일, 스크립트 조합이 더해진다면 *.* ) 임프레자의 경우 섹션을 조각조각 불러와서 이용을 할 수 있는 레고 블록 조합과 같은 방식으로도 사이트를 구성할 수 있으니, 혹 워드프레스와 테마... 너무 어렵다고 오해를 하신 분이 있다면 이렇게 쉬울 수도 있구나 하고 다시 이용해 보실 것을 바랍니다.
