#1-2. 메인(Main) 페이지
IMPREZA 테마로 brunch 사이트 따라 만들기
메인 페이지에는 사이트의 가장 핵심이 되는 콘텐츠, 주요 레이아웃 요소들이 표시됩니다. 메인 페이지를 작업하다 보면 이후에 반복적으로 사용이 되는 구조도 만들고, 주요 제목(h) 태그들의 폰트 사이즈 설정 등 기타 이후 사이트 전반에 사용이 될 스타일 설정 작업들도 같이 이루어지게 됩니다.
준비를 하다 보니 아마도 이번 내용의 핵심은 임프레자 테마의 또 하나의 특징이자 장점인, 그리드 빌더와 콘텐츠를 불러와서 표시할 수 있는 그리드(Grid), 케러젤(Carousel) 요소 소개가 될 듯합니다.
따라서 만들어 볼 섹션은 총 6개입니다.
1) 콘셉트 문장 (3단계 색 변화) / 관리자가 작성한 공지, 업데이트 글 표시 (자동 변경)
2) 글 목록 (규칙은?) (좌우 슬라이드)
3) 키워드 목록
4) 작가 목록 (필터 표시)
5) 베너 이미지
6) 추천 글 (좌우 슬라이드)
------
→ 총 5개의 목록 디자인 필요
워드프레스에서는 어드민에서 작성한 모든 콘텐츠들 중 원하는 것을 가져와서 표시할 수 있도록 커스텀 루프를 제공합니다. 이걸 페이지에 표시하려면, php 코드를 작성 후, css 스타일을 적용하고, 이걸 페이지에 표시할 수 있도록 쇼트 코드를 만든 뒤...... (생략)
위 과정을 간소화시키기 위해서 테마나 페이지 빌더 플러그인에서는 그리드 요소나 캐러젤 요소를 만들어서 코딩 없이 원하는 곳에 콘텐츠 목록을 표시할 수 있게 해 놓습니다. 그런데 대개 몇 가지 안 중 하나를 선택하는 정도로 활용할 수 있도록 하는데, IMPREZA 테마의 경우는 한 단계 더 나아가 이 목록 자체를 내 마음대로 만들 수 있도록 하는 그리드 빌더를 추가해 놓았습니다. 그래서 디자인에 맞게 목록을 꾸미는 것이 더 쉬워졌습니다.
Impreza > Grid Layouts라는 메뉴에서 새 그리드 구조를 만들 수 있고, 처음부터 만들기 어려운 경우에는 탬플릿에서 기존에 만들어져 있는 것을 불러다가 일부만 수정해서 사용할 수도 있습니다.
그럼 실제 섹션들을 구성하는 과정을 소개합니다. (완벽히 똑같이는 무리가 있었습니다. 시간과 접근 방식이 달랐을 것이니까요. 아 이렇게 만들 수 있구나 정도만 참고가 되면 좋을 듯합니다.)
1번 섹션 - 콘셉트 문장, 순환 공지글
텍스트 블록 요소 3개로 메인 사이트 설명 문구를 작성했습니다. h2, h3 태그를 사용해서 폰트의 사이즈를 조정하고, 요소의 디자인 설정에서 글자의 색 변화를 적용했습니다.
공지, 업데이트의 표시(자동 변경)는 Carousel 요소를 사용하면 적용 가능합니다. 녹색의 이탤릭 카테고리 표시 문구와, 글의 제목 표시를 위해 그리드 레이아웃을 만들고, 캐러젤의 테마 디자인으로 적용했습니다. 캐러젤 설정 탭에서 자동 변경 옵션을 적용할 수 있습니다.
2번 섹션 - featured 글 목록
따라 해 보기를 위해선 이미지가 뒤에 보이고, 마우스를 호버 시 약간 확대가 되면서 클릭 시 글 링크로 갈 수 있는 그리드 레이아웃이 필요합니다. 처음부터 구조를 만드는 것보다 저도 탬플릿 중 포트폴리오의 것 하나를 불러다 수정하는 방식으로 만들었습니다. 기존 사이트를 참고로 이미지의 호버 시 효과 변화를 수정했습니다.
( 1, 2번 섹션 적용 모습 )3번 섹션 - 키워드 목록
8칸의 키워드 목록 (1:1 정사각형 버튼)을 표시하기 위해 위와 마찬가지로 그리드 레이아웃을 하나 만들고, 이번엔 목록이 슬라이드 되는 형태가 아닌 나열이 되는 것이므로 Grid 요소를 사용합니다.
목록은 카테고리, 태그와 같은 분류도 가져와서 만들 수 있습니다. 그리드 레이아웃에서 1x1 비율의 정사각형 디자인을 만들고, 8x3의 총 24개의 카테고리(키워드)를 불러와 표시합니다. (추가 팁. 그리드, 캐러젤의 반응형 옵션 탭에서는 기기 사이즈별로 목록의 개수를 변경할 수도 있습니다. 8개 > 6개 > 4개 > 3개)
4번 섹션 - 필터가 있는 작가 목록
아쉽게도 그리드 요소에서 작가 목록 자체를 불러오는 방법은 없습니다. 이 경우 워드프레스의 커스텀 루프를 사용해서 코딩 작업을 할 것이냐, 관련 플러그인을 이용해서 해결을 할 것인가 몇몇 해결 방법이 있지만 우선 테마 자체적으로 해결을 해 보고자 이렇게 적용을 해 봤습니다. 브런치 사이트와 같이 태그 형태의 분류가 필터가 되고, 글 목록을 가져오되, 해당 글의 작성자를 목록화해서 보여주는 것입니다. 똑같이 표시를 해 보려면 테마의 탬플릿을 수정하는 게 불가피하여 일단은 가능한 정보 표시까지 적용을 목표로 했습니다.
5번 섹션 - 이미지 베너
로우 안에 이미지를 가운데 정렬 후 링크를 추가하면 쉽게 적용 가능합니다.
6번 섹션 - 랜덤 추천 글 표시
2번 섹션과 비슷한 방식으로, 목록에서의 그리드 레이아웃만 변경해서 새로 만들어서 캐러젤(좌우 슬라이드)을 적용하면 됩니다.
모두 적용하면 페이지 편집 화면에서의 구조는 이렇게 적용이 됩니다. 화면에서는 오른쪽과 같이 표시됩니다.
그리드 레이아웃 빌더 / 페이지 빌더에서 그리드, 캐러젤 요소의 주요 사용 방법을 소개해 보았습니다. 다음에는 또 다른 특징이자 장점인 Impreza 테마의 콘텐츠 탬플릿(Content templates) 활용 방법을 이용해서 실제 글을 볼 때의 화면을 한 번 만들어 보는 것을 다루려고 합니다.
