#3-1. 기본 레이아웃 설정, 헤더&푸터 만들기
IMPREZA 테마로 미디어 사이트 따라 만들기
먼저, 완전 기본적인 레이아웃 소개 탬플릿이 있는지 찾아보다가 아무래도 이번에도 완성된 사이트를 참고로 완료까지 해 보는 게 낫겠다는 생각이 들었습니다. 그래서 이번에 고른 게 '신세계그룹뉴스룸' 사이트입니다.
다음과 같은 메인 디자인이 전달이 되었을 때를 가정해서 시작을 해 보겠습니다. (콘텐츠는 모두 post로 작성, 카테고리 및 태그 분류)
콘텐츠를 어떻게 운영할지 기획이 있고, 디자인이 나온 상황에서 이걸 워드프레스 사이트로 만들기 위해서 우선은 전체적인 기본 뼈대를 만들면 이후 작업이 쉬워집니다. 그래서 저같은 경우는 늘 기본 레이아웃 설정을 먼저하게 되는데요, 이 과정을 거치면 이후에는 기본 규칙을 토대로 페이지나 목록을 만드는 데에만 집중을 하면 되기 때문입니다.
※
웹 화면을 디자인대로 표시를 하려면 우선 동작을 배제하면 html과 css의 조합으로 표시가 됩니다. 브런치 사이트를 개발자도구로 확인해 보면 html 태그들에 대해서 여러 css 스타일 정의들이 있는 것을 볼 수 있습니다.
폰트, 폰트 사이즈, 색 등 '선택자 { ~~~ }' 형태로 정의가 돼 있는 게 css 기본 문법입니다. 그런데 이걸 다 알아야 사이트를 만들 수 있는건가? 그렇진 않고 알맞은 테마를 사용함으로써 얻을 수 있는 이점 중에는 이런 기본 css 설정의 경우는 이미 테마 개발 시 정의가 돼 있어서 그걸 이용하는 나는 몇가지 규칙만 설정을 하면 사이트를 만드는 데 큰 어려움이 없게 된다는 것도 있습니다.
앞서 메인 페이지 디자인을 보고 확인을 한 결과 얻은 규칙들로는 주요색 조합, 헤더의 최대 넓이&높이, 본문 페이지 콘텐츠의 최대 넓이, 컬럼(한 줄을 칸으로 나누기)이 있는데 반응형으로 1컬럼으로 전환이 되는 지점, 폰트 종류와 사이즈, 섹션간 사이 공간 등이 있습니다. (※ 좀 더 정확히 하기 위해 디자이너에게 확인 요청을 하기도 합니다.)
※ 반응형 웹 퍼블리싱에서 가로 사이즈는 고정해서 지정을 잘 하지 않습니다. 대신 화면 요소들을 감싸는 묶음에 최대 넓이를 주거나 컬럼의 경우 %로 넓이를 지정하는데요 그래야 화면이 줄면 알아서 요소들의 가로폭이 변형이 될 수 있습니다.
최대 넓이 아래 안에 들어갈 화면 요소들(이미지, 텍스트 등)은 이제 공간 개념만 잘 적용을 하면 되는 것이죠. https://www.w3schools.com/css/css_boxmodel.asp
이제 기본 레이아웃을 설정해 보겠습니다.
1. 규칙을 테마 옵션에 설정
확인된 규칙들을 테마에 설정하는 방법은 간단합니다. 어드민 메뉴에서 Impreza > Theme Options에서
Site Layout, Colors, Typography 설정들에서 적용을 하면 됩니다.
대개는 본문폭과 헤더의 폭이 같거나, 헤더는 전체 넓이로 펼쳐지거나 하는데 참고사이트 디자인상 헤더의 폭이 조금 더 크게 돼있네요. (1100, 1450) 이럴 때에는 따로 옵션이 없으니 헤더의 최대 넓이만 다시 정의를 해 주면 됩니다.
테마 옵션 중에 'Custom Code' 라는 메뉴가 있는데, 여기에서 내 마음대로 css나 html, script를 추가할 수 있습니다.
2. 헤더 만들기
헤더에는 로고와 주 메뉴, 버튼, 그리고 검색버튼이 들어가야 합니다. 화면을 내려도 계속 위쪽에 붙어 있도록 sticky 처리가 되어야 합니다. (참고사이트의 경우 980 이하부터 모바일 화면을 고려한 스타일 정의가 된 것으로 보이는데 이 부분은 조금 조정을 했습니다.)
헤더는 Impreza 메뉴 아래 Header에서 만들 수 있습니다. 처음부터 구성을 해도 되고 조금 더 편하게 하려면 탬플릿 중 하나를 선택해서 만들기를 할 수 있습니다.
헤더를 구성 시에는 반응형 화면을 고려해서 대개 3단계로 화면 사이즈에 맞게 요소를 배치하고, 스타일을 수정하여서 요소가 겹치거나 화면이 깨지는 것을 방지합니다.
1200px 이하 화면에서는 메뉴를 숨기고, 좌측에 햄버거 메뉴를 둬서 메뉴 구조가 좌측에서 슬라이드 되어 나올 수 있도록 하는 버튼을 배치했습니다. (슬라이딩 구조는 차후 제작)
각 요소에 마우스를 올려보면 상세 내용을 편집할 수 있는 연필 모양의 버튼이 있는데 클릭하면 세부 디자인을 설정할 수 있는 팝업이 나오게 됩니다. 예로 메뉴 편집을 들어가면 어떤 메뉴 구조를 표시할지, 메뉴 간격은 얼마인지, 메뉴 폰트 사이즈는 얼마인지 등을 설정 가능합니다.
구성 후 사이트를 열어보면 헤더가 표시되는 걸 볼 수 있습니다.
단, 여기서 헤더 아래 라인과, 서브 메뉴 위쪽의 붉은색 바는 옵션에는 없으므로 이런 건 css를 따로 추가를 해 줘야 합니다. 반응형 화면을 고려해서 메뉴 패딩 등도 조정을 하면 헤더와 관련된 추가 css는 현재까지 이렇게 정의가 되었습니다.
3. 푸터 만들기
푸터에는 SNS 링크들, 푸터용 메뉴, 카피라이트, 그리고 패밀리 사이트가 구성이 돼 있습니다. 화면의 일부 조각의 개념은 Impreza 테마에서는 Page Block 으로 만들고 이용을 할 수 있게 돼있습니다. (Impreza > Page Blocks)
'Footer'라는 페이지 블럭 하나를 만들고 화면 빌더를 이용해서 1/3 + 2/3 두 컬럼으로 나뉜 화면을 구성합니다.
푸터와 관련된 추가 css 정의는 오른쪽 위부분 톱니 모양을 클릭하면 나오는 팝업에서 적을 수 있습니다.
패밀리사이트는 참고사이트와 다르게 클릭하면 옵션이 나오는 것으로 변경을 위해 nice select라는 jQuery 플러그인을 사용했고, 이와 관련된 스타일 수정 및 푸터 메뉴간 간격 및 오른쪽 구분선 추가를 위한 css 코드를 이곳에 적었습니다.
여기까지 적용을 하고 사이트를 열어보면 기본적인 사이트의 뼈대가 갖춰진 것을 확인할 수 있습니다.
위 과정이 완료가 되면 이제 본문은 1100px 화면 내에서 콘텐츠들이 열에 맞게 배치가 될 것입니다. 이어서 디자인대로 이미지와 텍스트 등이 배치가 될 페이지를 만드는 작업 및 글 리스트들이 카테고리별로, 태그별로 표시가 될 탬플릿을 제작하는 주요 작업이 이어지게 됩니다.
※ 임시 테스트 개발용 사이트 : http://oks-together.hol.es/media
