#5-1. 테마 옵션 설정, 헤더&푸터 만들기
IMPREZA 테마로 포트폴리오 사이트 만들기
참고 사이트의 모습을 디자인이라고 가정하여 과정을 진행해 봅니다.
제작 과정에서 이용한 버전 / 워드프레스 : 5.8.2 / Impreza 테마 : 8.3.5
1. 테마 옵션 설정
디자인이 준비되면, 전체 레이아웃을 잡기 위한 기본 설정값들을 확인할 수 있습니다.
- 전체 사이트 폭(콘텐츠 넓이)
- 색 조합
- 폰트 종류
- h1~h6 태그 폰트 사이즈, 본문 폰트 사이즈
- 섹션별 공간(padding), 화면 좌우의 여유 공간
- 모바일 화면을 고려하는 시점 (반응형 화면에서 칼럼이 1열로 바뀌는 사이즈)
- 기타
위와 같은 기본 레이아웃에 대한 정의들은 css로 정의하는 것 대신, Impreza 테마에서는 옵션에서 설정할 수 있습니다. (웹사이트 방문 시 결국 이 설정들이 css 언어로 적용이 됩니다.)
참고사이트를 보면 푸터(footer)가 본문에 가려져 있다가 스크롤 시 아래에서부터 등장을 하는 것처럼 보이는 효과가 있습니다. 이는 footer를 웹 화면 맨 아래 고정(fixed)해 놔서인데 css로 처리할 것을 옵션에서 'Enable Footer Reveal Effect'를 켜는 것으로 바로 적용이 가능합니다.
▼ h1~h6 태그의 폰트 사이즈는 본문 폰트 사이즈를 기준으로 rem이라는 단위를 주로 사용합니다. 기준되는 폰트 사이즈의 몇 배인가를 적용하는 단위인데요, 이렇게 하면 본문의 기본 글자 사이즈를 기준으로 전체를 컨트롤할 수 있어 편리합니다. (※ 종종 뉴스 사이트를 보면 글자를 +,- 버튼으로 키웠다 줄였다 할 수 있게 돼 있는데 이 원리를 이용합니다.) h1~h6 태그와 본문 폰트 사이즈로 크게 7가지로 사이트에서 사용되는 주요 글자 크기를 지정해 놓게 되면 각 페이지나 템플릿마다 글자 사이즈를 따로 지정할 필요가 없어질 뿐 아니라 전체적으로 글자를 조정하는 데에도 유리합니다. rem 사이즈는 수시로 사용하게 되는데 매번 계산을 하기 번거로우므로 인터넷에서 단위를 쉽게 계산해 주는 사이트를 이용하면 됩니다.
주요 색도 사이트에서 사용되는 페이지들에 공통된 색들을 한 곳에서 설정 후 관리합니다. 헤더, 본문, 푸터 그리고 반전된 색 조합들까지 총 6가지 조합을 미리 설정할 수 있습니다. 예를 들어 어떤 로우를 넣을 때 이 색 조합을 지정해 주면, 헤더 태그, 글자, 보더, 백그라운드 색, 링크 색 등이 자동 적용이 될 수 있습니다.
그리고 중요한 옵션 설정이 있습니다. 이번에 만들 사이트는 포트폴리오 사이트입니다. 지난번 개요 글에서 페이지와 글 외에 또 다른 주요 포스트 타입을 추가를 해야 쓸 수 있다고 설명을 드렸는데, Impreza 테마도 포트폴리오라는 post type은 미리 준비가 돼 있습니다. 테마 옵션 > Advanced에서 포트폴리오 타입을 쓰겠다 설정만 해 주면 포스트 타입에 대한 정의부터 각종 연결고리까지 이용을 바로 할 수 있게 됩니다. 포트폴리오는 글과 비슷하게 포트폴리오만의 분류(포트폴리오 카테고리, 포트폴리오 태그)도 사용이 가능하고 페이지 빌더를 이용해서 화면을 꾸밀 수 있게 돼 있습니다.
2. 헤더 만들기
이제 사이트의 뼈대 중 머리에 해당하는 헤더를 만들 차례입니다. 디자인에 따라 가로로 끝까지 펼쳐지는 모습에 메뉴는 버튼을 클릭 시 화면 전체를 덮는 메뉴가 나오는 구조입니다. 높이는 83px로 화면이 스크롤되면 같이 올라가는 형태입니다.
Impreza > Headers에서 새 헤더를 하나 만듭니다. 여기서 메뉴 부분을 보면 늘 햄버거 모양의 버튼이 보여야 하므로, 20000px 이하의 화면에서는 모바일 메뉴(햄버거 메뉴로 대체)가 표시되도록 했고, 표시 형태는 화면을 모두 덮는 fullscreen 선택, 메뉴들은 가운데 오도록 중앙 정렬을 했고, 디자인에 맞게 폰트 관련 값을 넣었습니다.
만들어진 헤더를 확인해 보려면 우선 이 헤더를 표시되도록 설정을 해 줘야겠지요. 테마 옵션에서 헤더를 연결 후 사이트 주소를 방문해 봅니다. 메뉴 옵션에서 설정이 가능한 부분까지는 적용을 해 봤으나, 메뉴가 가로로 펼쳐지는 부분, 그리고 등장 시 애니메이션(좌에서 우로 서서히 나타남. 메뉴마다 시간차)이 나오는 부분은 적용되지 않았습니다.
여기서 잠시, 외모 > 메뉴에서 설정한 메뉴가 웹 화면에 html 태그 형태로 준비되어 나오는 과정은 워드프레스와 관련된 개발 영역입니다.(테마 개발자가 이미 해 놓음) 일단 화면에 요소가 준비가 되면 css로 디자인을 적용할 수 있습니다. 여기에 햄버거 메뉴를 클릭하면 안 보였던 메뉴가 표시되도록 클래스(class)를 넣었다가 뺐다가 하는 건 js 스크립트에 의해 동작합니다.
이 상황을 토대로 저는 현재 미비되어 수정을 해야 할 부분은 css로 조치가 가능한 부분으로 판단을 했습니다. (메뉴를 가로로 돌리고, 애니메이션 적용) 만약 꼭 필요한 게 아니라면 여기까지 적용해서 쉽게 써도 충분할 것이라 생각을 합니다. 다음 내용은 아 이렇게 응용을 하면 되는 것이구나 참고용으로 보시면 될 듯하네요.
화면을 전체 덮는 fullscreen 메뉴는 자주 등장하는 flexbox 구조입니다. 즉 flexbox의 방향과 중앙 정렬만 새로 정의를 해 주면 수정이 가능한 구조라는 겁니다. css 수정을 위해 테마 옵션의 custom code 부분에 몇 줄을 추가했습니다. 가로로 나왔을 때 좋을 사이즈를 1280px 화면까지로 일단 설정을 했고, flexbox의 방향을 돌리고 이번에는 가로형으로 전체의 중앙에 오도록 조치를 했습니다. (※ flexbox의 기본 원리는 여기를 참고해 보세요)
메뉴 등장 시 시간차를 두고 오른쪽으로 서서히 등장하는 효과가 필요합니다. 이 부분은 css로도 애니메이션을 적용할 수 있습니다. > https://www.w3schools.com/css/css3_animations.asp
첫 번째 @keyframes로 0->100이 될 때 동작하는 걸 정의합니다. 두 번째로 메뉴는 평상시에는 투명하게 있다가, 햄버거 버튼을 클릭하면 애니메이션을 동작시키라고 말해주는 부분입니다. 이때 5개의 메뉴 각각에는 마지막 부분처럼 애니메이션을 딜레이 시킬 수 있어서 시간차를 줄 수 있게 됩니다.
3. 푸터 만들기
Impreza > Page Blocks에서 'Footer'란 이름의 페이지 블록 하나를 만들어줍니다. 디자인상 모든 내용은 중앙 정렬이 되고 있습니다. 이때에는 각 요소를 하나씩 가운데 오게 할 필요 없이 '로우 설정'에서 디자인 관련 설정으로 가운데 정렬이 되도록 하면 모든 요소가 가운데 정렬이 됩니다. 기획대로 모든 내용들을 다 넣고 테마 옵션에서 푸터를 보이도록 설정합니다.
여기까지 하고 난 후 사이트를 열어 보면, 기본적인 사이트의 틀이 갖춰진 것을 볼 수 있겠습니다.
테스트용 사이트 : http://oks-together.hol.es/portfol/
매 사이트마다 초기에 하는 작업들이 비슷한데요, 사이트 전반에 걸쳐 사용될 디자인 관련 설정들을 하는 것, 그리고 헤더와 푸터를 만들어서 뼈대를 만드는 것입니다.
기본이 되는 틀이 갖춰진 후에는 이제 본격적으로 포트폴리오의 목록과, 상세 페이지를 위한 템플릿 작업을 진행할 수 있습니다.
다음에 계속...
