#1-1. 헤더, 푸터, 기본 레이아웃 세팅
IMPREZA 테마로 brunch 사이트 따라 만들기
테마를 설치 및 활성화하는 방법은 테마 문서에 상세히 안내가 되어 있어서 이 문서를 참고해 보시기 바랍니다. [ 문서 보기 ]
꼭 필요한 과정만 안내해 드리면 다음과 같습니다.
1. 다운로드한 Impreza, Impreza-child 두 테마를 설치 후 Impreza-child 테마를 활성화(active) 한다.
2. 상단 노란색의 안내문이 나오고, UpSolution Core 링크를 클릭 > 애드온 설치 화면에서 아래 두 플러그인을 설치 & 활성화한다.
3. 사이트 주소를 브라우저에서 열어보고 이 화면이 나오면 준비 끝.
건축을 할 때에도 기본 뼈대 공사부터 하듯이, 웹사이트도 기본적인 골격을 갖추고 시작을 하면 이후 과정이 더 수월해집니다.
유료 테마들의 경우 대부분 미리 이 테마로 제작 가능한 사이트들을 데모 형태로 제작을 해 두고 이걸 통째로 불러다 사이트를 만들기를 시작할 수 있도록 해 줍니다. 이 정도면 내 콘텐츠를 표시하는 데 어려움이 없겠다 하는 경우에는 데모에서 제공하는 구조를 설치해 놓고 페이지 내의 콘텐츠를 내 것으로 수정하여 사이트를 완성하는 방법도 있습니다. 첫 글에서 언급한 대로 테마를 활용하는 가장 쉬운 방법 중에 하나입니다.
IMPREZA 테마의 특징 하나. 데모에서 원하는 섹션이 있다면 그 부분만 그대로 복사를 해다가 이용을 할 수 있도록 데모 소개용 웹사이트가 제작이 돼 있어서, 그때 그때 일부분만 떼어다 내 사이트에 적용을 할 수 있는 장점이 있습니다.
위 특징으로 데모를 설치하지 않고 처음부터 사이트를 만들어 나가는 데에도 큰 무리가 없게 됩니다. 이후 진행할 브런치 사이트를 따라 해 보는 과정도 완전 초기 상태에서 만들어 나가는 것으로 시작합니다.
사이트 제작 시 가장 먼저 헤더와 푸터, 레이아웃 관련 옵션을 설정하는 것으로 시작을 합니다.
1. 헤더 만들기 (로고와 주 메뉴가 위치하는 부분)
헤더를 디자인에 맞게 수정을 할 수 있는 헤더만의 빌더가 장착이 돼 있습니다.
새 해더 만들기 시 완전 백지에서 만들기를 하면 처음엔 설정 자체가 어려울 수 있으므로, 저도 탬플릿에서 비슷한 것을 먼저 불어오고 만들기를 하는 경우가 대부분입니다. 투명 헤더였다가, 스크롤 시 스티키가 되는 헤더를 만들 계획이라 네 번째 것을 선택해서 불러오기를 하였습니다.
헤더에서 주로 사용이 되는 버튼, 메뉴, 로고, 검색 기능, html 등을 마음대로 넣을 수가 있고, PC 화면인지 태블릿인지, 모바일 기기인지에 따라 각 요소는 또 노출 여부를 결정할 수 있습니다. 헤더의 영역 내에서도 Top / Main / Bottom으로 세 구역이 존재합니다.
위 구조를 표시하기 위해 저는 빌더로 이렇게 헤더를 만들었습니다. TOP 부분에는 롤링이 될 수 있는 베너를 html로 추가. Main 영역에는 화면 폭에 꽉 차는 형태로 버튼들과, 로고, 검색(풀 스크린) 기능을 넣습니다.
2. 푸터 만들기 (사이트 맨 아래 사이트 맵, 비즈니스 정보, 카피라이트 등 표시)
위젯 형태로 푸터를 구성해야 하는 방법(대부분의 테마에서 사용) 대신 IMPREZA 테마는 블록 개념으로 푸터를 마음대로 제작해서 연결하는 방식을 만들어 두었습니다. WPBakery 비주얼 페이지 빌더를 가지고 디자인대로 섹션과 칼럼을 구성합니다.
※ 여기서 잠깐, 워드프레스가 5.x 버전 대가 되면서 자체 비주얼 빌더가 바뀌었습니다.(Gutenberg Editor) 이게 아직은 적응이 안 되어서인지 불편함이 많아 저는 일단 이 편집기를 꺼두고 작업을 합니다. 테마에서 애드온으로 제공하는 WPBakery를 주로 사용하기 때문에 이 편집기를 쓰는 일도 없을 것이고요. 아래와 같이 옵션 설정을 하면 구 형태의 편집기가 사용됩니다.
3. 테마의 주요 옵션 설정 (사이트의 폭, 색, 폰트, 페이지 표시 구성 등)
사이트마다 콘텐츠가 표시가 되는 기준 넓이가 있습니다. 반응형 디자인의 웹사이트가 되도록 기준이 되는 태블릿, 모바일의 사이즈도 정해야 하고요. 테마 옵션 > Site Layout 에서 설정 가능합니다. 나머지는 기본 설정 값이고, 따라 할 사이트의 기본 폭인 960px 설정만 변경했습니다.
페이지가 표시될 때 세 조각이 조합이 되어서 표시됩니다. 헤더, 콘텐츠, 푸터. 만들어진 헤더와 푸터를 페이지 레이아웃 설정에서 연결합니다.
사이트에서 주로 사용할 색상을 설정합니다. 이것도 하나하나 설정하기보다는 컬러 스키마 버튼을 눌러서 비슷한 것을 불러다 수정할 것만 수정을 하면 편리합니다. 옵션 > 색상
브런치 사이트에서는 본문은 노토 산스, 헤딩에는 나눔 명조를 썼습니다. 테마 옵션 > Typography 설정에서 설정합니다.
버튼 디자인을 미리 만들어서 사용이 가능합니다. 헤더, 푸터에서 사용할 버튼의 디자인은 여기서 제작해서 사용한 것입니다. 옵션 > 버튼 스타일
※ 다루지 않은 나머지 옵션들은 차후 작업을 하면서 추가 설정을 하면 됩니다.
사이트의 메인 페이지가 될 새 페이지를 하나 만들어 봅니다.
워드프레스 설정 > 읽기에서 홈페이지로 표시할 페이지를 선택하고 변경 사항을 저장하면, 도메인을 웹브라우저에 입력 후 방문 시 이 페이지가 바로 표시됩니다.
위 내용까지 적용된 모습.
메인 화면을 만들어 보기는 다음 이야기로 계속합니다.
