brunch

매거진 IMPREZA 테마 활용

라이킷 10 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by oksambari Dec 27. 2021

#8-1. 기본 레이아웃 설정 (헤더, 푸터)

잡지 뷰 사이트 만들기

사이트 제작에도 기초 공사가 필요합니다. 기본 약속들이 정해진 다음에는 모든 페이지들에서 공통으로 등장하는 헤더와 푸터를 제작해 놓으면 이후에는 몸통 부분만 신경을 쓰면 되기 때문에 작업이 수월해집니다.

먼저 참고사이트의 전체 모습과 각종 css 설정들을 디자인이 나온 상황이라고 가정하여, 각종 레이아웃 설정값들을 확인합니다.

콘텐츠 최대폭 / 본문 폰트(종류, 사이즈) / 색 값들 / 모바일 분기점 등

이제 확인된 디자인을 가지고 Impreza를 가지고 워드프레스 사이트를 구축하는 것을 시작해 보겠습니다.

1. 테마 옵션에 레이아웃 설정값들 입력

참고사이트를 통해 얻은 디자인 정보들은 css로 정의를 해 줘야 웹사이트에 적용이 됩니다. 이러한 규칙을 간편하게 적용을 할 수 있도록 대부분의 유료 테마에는 옵션 설정 화면이 있습니다. Impreza의 경우는 더 나아가 꼭 필요한 css 관련 설정 부분과 기본적인 약속 부분만 옵션에서 관여를 한다는 점에서 옵션 설정이 매우 간단한 편에 속합니다.

테마 옵션 각 분류 탭 아래 들어있는 각종 설정들을 입력했습니다. 이 중 칼럼이 1열로 변하는 시점, 모바일 화면으로 처리하는 기준은 600px 기준에서 768px로 살짝 조정을 했습니다.(About 페이지 깨짐 방지) 폰트는 영문 유료 폰트를 쓰는 것으로 보여 비슷한 Noto 폰트들(명조, 고딕)을 적용해 봤습니다.

페이지(page), 뉴스(post) 외에 스토리를 작성할 추가 콘텐츠 종류가 필요합니다. 테마에 이미 개발돼 있는 추가 콘텐츠 타입을 이용하도록 하면 되겠습니다. (slug 및 메뉴명 변경도 가능)

※ 편의상 어드민 메뉴들을 영문으로 해 놓고 써서 영문 메뉴들이 있는 화면들로 소개가 됐는데, 사이트 언어를 바꾸면 한글 번역 내용들이 자동 적용됩니다.

2. 헤더 만들기

로고와 사이트의 주 메뉴가 나오는 헤더를 만들 차례입니다.

먼저 디자인을 다시 확인해 보겠습니다.

최초 상태는 배경이 그대로 보이는 투명한 배경(transparent)의 헤더입니다. 화면을 스크롤해 내려가면 헤더의 높이가 살짝 줄면서 맨 위에 고정(sticky)이 된 상태로 계속 보이게 됩니다. 고정된 헤더 아래로는 1px의 선이 그어지고, 로고도 간단한 것으로 변경이 됩니다. 모바일 화면 사이즈에서는 메뉴가 햄버거 형태로 바뀌게 되고, 클릭하면 전체 화면을 덮는 메뉴 구조가 보이게 됩니다.

'Impreza > Headers'에서 사이트를 위한 헤더를 하나 만듭니다. 모바일 화면을 제외한 모든 사이즈 기기에서는 'Sticky / Transparent' 설정을 했습니다. 고정(Sticky) 상태일 때 아래 밑줄이 그어지도록 'Header Shadow'도 추가했습니다.

로고 중 하나는 Sticky 상태 여부에 따라 보이질 않아야 합니다. 로고 텍스트 편집에서 이 부분을 설정해 주면 되겠습니다.

헤더의 높이도 평소 때와 고정(Sticky) 상태에 따라 다르게 적용해 줍니다.

메뉴 리스트는 '외모 > 메뉴'에서 구성한 게 나올 수 있도록 연결해 줍니다. 모바일 메뉴는 이번 과정에서는 간단하게 메뉴 리스트만 전체 화면으로 덮이는 방식을 적용했습니다.

만들어진 헤더를 'Impreza > Theme Options > Page Layouts'에서 연결 후 사이트를 열어보면, 헤더의 완성된 모습을 볼 수 있습니다.

3. 푸터 만들기

먼저, 디자인을 확인해 보겠습니다.

매 화면마다 공통으로 등장하는 푸터의 영역은 아래와 같습니다. 3 칼럼의 텍스트들이 있고 위아래 패딩으로 공간이 주어졌습니다. (콘텐츠 영역은 이미 고정된 상황이라 신경 쓸 필요 없음)

모바일에서는 공간 변화는 없이 1열로 순서대로 텍스트들이 이어지는 형태로 변경됩니다.

'Impreza > Page Blocks'에서 Footer라는 페이지 블록을 하나 만들었습니다. 좌측에는 가로 형태의 Flex 박스로 로고와 카피라이트를 적고 오른쪽 1/6 칼럼에는 화면 맨 위로 올라가는 버튼을 하나 추가했습니다. (sns 링크 대체) 푸터 부분의 색 조합은 맨 처음 테마 옵션에서 설정한 값들이 적용되도록 'Row Color Style > Footer colores'로 지정해줍니다.