#4-2. 메인 페이지 만들기
IMPREZA 테마로 카카오 블로그 따라 만들기
도메인 주소가 열리면 바로 보이는 화면을 페이지를 하나 만들어 지정할 수 있습니다. (설정 > 읽기 > 홈페이지 지정) 이번에는 메인 페이지로 지정할 페이지를 하나 만드는 과정을 소개해 봅니다.
먼저, 참고사이트의 메인 페이지를 체크해 보면 크게 다섯 섹션으로 나눠져 있는 것을 볼 수 있습니다. 디자인에 따라 배경이 있는 섹션과 흰 배경의 섹션이 번갈아 나오고 있고, 맨 아래에는 최신 글을 캐러셀(carousel) 형태로 보여주는 섹션도 존재합니다.
전에 소개를 했던 내용인데 웹 화면은 html, css, js의 조합으로 표시가 됩니다. 만약 디자인된 이 메인 페이지를 일반적인 웹사이트 제작 방식으로 각각 분리해서 퍼블리싱을 한다고 하면 기본 규칙 설정부터, css 정의, 캐러셀 동작을 위한 js 코드 추가까지 많은 작업이 필요할 겁니다.
저는 Impreza와 같은 (유료) 테마를 사용함으로써 페이지 빌더를 통한 웹 화면 구성 방식을 이용합니다. 이로써 워드프레스 콘텐츠를 불러다 표시해야 하는 php 개발부터, 화면을 퍼블리싱하는 작업들을 상당 부분 매우 쉽게 적용을 할 수 있는 이점을 얻고 있습니다. 이 글을 적는 이유도 이런 장점을 활용해서 좀 더 쉽게 사이트를 구축하는 가이드를 좀 제공해 드리고자 하는 것임을 참고해 주세요.
그럼 각 섹션을 구성하는 과정을 진행해 보기 이 전에 페이지 빌더에서 섹션을 구분하고 칼럼을 나누는 부분을 먼저 간단히 알아보겠습니다.
새 페이지를 만든 후 화면에 섹션(Row)을 넣으려면 + 버튼 또는 Add Element를 클릭해서 Row를 넣으면 되겠습니다. 로우가 하나 추가가 된 다음 로우 편집 바 왼쪽에 마우스를 가져가 보면 칼럼을 나눌 수 있는 선택 UI가 자동으로 표시됩니다. 미리 지정된 칼럼 모양이 원하는 게 아니라면 Custom을 클릭해서 내 마음대로 칼럼을 만들 수도 있습니다.
각 섹션 내에 있는 '+' 버튼을 클릭하면 다양한 화면 요소들을 그 안에 넣을 수도 있습니다.
이제 각 섹션을 만드는 방법 소개입니다.
1번 섹션
왼편에 텍스트와 버튼이 있고 오른쪽에는 배경으로 이미지가 표시되고 있습니다. 모바일에서는 오른쪽에 투명도가 있고 텍스트와 겹치게 나오게 되네요. 섹션의 높이는 pc 화면에서는 600px로 고정이 되다가 모바일 화면이 될 때에는 500px로 높이 조정이 되고 있습니다.
첫 번째 섹션을 구성한 모습을 먼저 보여 드리면 이렇습니다.
왼편 글자와 버튼은 화면 요소들 중 Text Block이라고 하는 워드프레스 클래식 편집기와 비슷한 모양의 편집을 할 수 있는 것 두 개와, 아래쪽 Button 요소 한 개가 들어가면 되겠습니다.
내용만 넣으면 되는 것은 아니고, 스타일 구문을 넣어야 디자인이 적용이 되겠지요. css를 따로 코드로 적지 않고 적용할 수 있는 방법은 각 요소에 있는 Design 탭을 이용하는 겁니다. 거의 모든 css 관련 옵션을 적용할 수 있도록 돼 있습니다. Text Block의 경우 글자 부분에 대해 스타일을 적용하면 되고, Button은 각 버튼의 디자인을 수정해도 되지만 저는 테마 옵션에 있는 'Button Styles'에서 만들어 놓고 사용을 합니다. 대부분 버튼의 디자인은 다른 곳에서 재 사용이 되거든요. 이렇게 설정한 각 요소들은 페이지를 브라우저로 열어 보면 html + css 조합으로 잘 표시되는 걸 볼 수 있습니다.
왼편의 콘텐츠는 해결이 됐고, 이제 이 내용이 섹션의 중앙에 오게 하는 부분과 오른쪽 배경이 나오는 영역을 넣어야 할 차례입니다. 아까 확인했듯이 섹션의 높이가 600px, 500px로 변경이 되는 부분, 오른쪽에 반을 덮는 영역을 추가하는 작업이 필요합니다.
로우 자체에 css를 추가함으로써 적용이 가능합니다. 로우 편집을 열어서 우선 이 로우는 위아래 공간이 없게 만들고, 배경은 주 색이면서 글자는 전체적으로 흰색으로 나오게 설정합니다. 그리고 디자인 탭에서 pc와 모바일 화면에서 보일 최소 높이를 지정합니다. 그리고 디자인 탭에서 적용할 수 없는 css를 추가하기 위해 이 로우(섹션)에 이름(ID)을 부여합니다.
페이지 빌더의 우상단 톱니 모양을 클릭하면 이 페이지에 적용할 css를 적을 수 있습니다.
main-top이라고 이름을 준 로우에 대한 css를 추가합니다.
그러면 디자인대로 섹션이 완성이 됩니다. css 중 flexbox는 화면의 요소들을 정렬하거나 배치하는데 매우 편리합니다. (※ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ) 요소 뒤에 :after를 넣어서 임의의 공간을 만들 수도 있습니다. 모바일 화면에서는 이 배경이 뒤로 내려가게 하기 위해 층 개념으로 z-index를 넣어서 조정하면 되겠습니다.
2번 섹션
이 부분은 공간과 칼럼 나누기를 알면 쉽게 적용될 수 있습니다. 로우의 위아래 공간은 로우 자체의 공간 설정(padding)으로 조정을 하면 됩니다. 로우의 공간 설정은 로우의 편집 화면 > Design에서 설정이 가능합니다.
그 안의 콘텐츠의 최대 폭은 테마 옵션에서 지정이 가능합니다. 이후에는 각 화면 요소들을 배치하는 작업만 고려하면 되겠습니다.
로우 안에는 칼럼을 나눌 수 있는 로우를 하나 더 넣을 수 있습니다. inner row 개념인데요, 안쪽의 row는 콘텐츠의 최대 넓이 1160px 내에서 원하는 개수만큼 나눌 수 있게 됩니다. #이 붙은 태그 모양의 버튼 스타일은 테마 옵션 > 버튼 스타일에서 4가지를 만들어 적용했습니다.
3번 섹션
배경 이미지 위에 흰색 글자와 아까 만든 버튼이 표시되는 구조입니다. 2번과 마찬가지로 로우 자체의 공간에 대한 설정이 필요하고 디자인된 영역의 높이를 위해 여기서도 최소 높이를 지정하면 되겠습니다.
다른 로우와 차이가 있다면 배경 이미지가 들어가는 부분인데요, 디자인 탭을 보면 백그라운드 이미지나 색을 넣을 수 있는 옵션이 있습니다. 여기서 지정해 줍니다.
4번 섹션
2번 섹션과 거의 비슷한 구조입니다. 칼럼의 수가 3개로 변경이 되고 상단 텍스트가 영문에서 한글로 변경이 됨에 따라 폰트에 대한 디자인만 조금 조정이 필요합니다. 이렇게 거의 비슷한 구조가 사용이 될 때에는 아까 만든 로우를 통째로 복사를 한 다음 이용해도 됩니다. 복사된 로우는 왼편 대각 화살표를 클릭한 상태로 3번 아래로 내려놓을 수 있습니다. 그다음 칼럼 수 조정 및 아래 조금 다른 내용을 추가하면 쉽게 만들 수 있겠습니다.
5번 섹션
사이트의 최신 글 목록(총 9개)을 보여주는 캐러셀이 나오는 곳입니다.
우선 작성된 글 콘텐츠가 있어야 만들 수 있겠습니다. 더미 글들은 전에 다룬 'FakerPress' 플러그인을 사용하면 원하는 개수만큼 임시로 만들어 낼 수 있습니다. 글을 만들기 전 알아서 각 카테고리로 분배가 되기 위해 카테고리를 만들어 줘야 합니다. 카테고리 생성 시 아래에 설명이라는 필드가 보이는데요, 여기도 원하는 문장으로 채워줍니다. 이건 차후에 목록 화면을 만들 때 사용될 예정입니다.
Fakerpress를 통해 이제 글을 만들어줍니다.
주의할 점은 카테고리 중 1개는 무조건 지정(Rate 100)하도록 하고, 아래 특성 이미지는 가로 1160, 세로 480 높이고 마찬가지로 무조건 설정되도록 하는 부분입니다. (! 최대 1160으로 나오는 목록 화면 존재, 이 비율로 모든 리스트가 표시되는 디자인) 원하는 개수로 각 카테고리의 글이 만들어지면 성공입니다.
이제 캐러셀에서 보일 각 글의 모양을 만들 차례입니다.
목록에서 나오는 각 콘텐츠 1개의 디자인은 Impreza > Grid Layouts에서 만들 수 있습니다. 백지에서 만들기 어려운 경우에는 우상단 '템플릿' 클릭 후 비슷한 구조를 불러다 사용하면 편리합니다.
이제 마지막 로우를 하나 추가해서 마찬가지로 공간에 대한 값 적용, 그리고 배경색이 있도록 설정합니다. (※ 위아래만 고려하면 되고, 좌우는 최대폭 1160px을 넘지 않습니다.)
안에 들어갈 요소로는 섹션의 타이틀을 위한 Text Block, 좌우 화살표 버튼들, 그리고 아래로 최신 글을 불러와서 캐러셀 형태로 표시할 수 있는 Carousel이 되겠습니다.
버튼 두 개가 있는 'Horizontal Wrapper'는 첫 섹션에서 잠시 나온 flex css 스타일이 적용되는 요소인데요, 버튼들을 오른쪽 끝으로 나란히 위치시키는 데 편리합니다. 그다음 타이틀과 동일한 위치에 위치를 시키기 위해 - 마진 값을 써서 위로 끌어올리면 됩니다.
최신 글 목록을 불러오는 부분은 Carousel 설정에서 최근에 만들어진 총 9개의 글을 불러오되, 디자인은 조금 전 만든 'card grid'의 모양으로 불러오도록 했습니다. '열' 수는 9개를 불러오되 한 번에 보이는 그리드가 몇 개인지 지정하는 겁니다. Carousel 설정 탭에서는 모든 내비게이션을 화면에 표시하도록 설정합니다.
이렇게 설정을 하고 나면 이런 모양이 되겠습니다.
여기서 기본적인 캐러셀의 양쪽 내비게이션 버튼 대신 우상단의 좌우 버튼으로 동작이 되도록 조치가 필요하고, 아래쪽 도트 버튼은 모바일에서만 보이게 하면 좋을 듯합니다. 우선 도트 버튼이 모바일에서만 보이도록 하려면 css의 미디어 쿼리(조건문 개념)를 이용하면 간단히 적용 가능합니다.
/* owl carousel */
@media (min-width:768px) {
.owl-dots {display:none;}
}
화면이 최소 768px 사이즈까지는 도트를 보이지 않게 하라는 의미
버튼 클릭에 대한 조치도 의외로 간단합니다. 양옆의 내비게이션은 일단 화면에서는 숨기되, 위쪽의 좌우 버튼을 클릭하면 숨겨져 있는 버튼이 클릭된 것처럼만 만들면 되는 방식입니다. 메인 페이지에 적용되는 스크립트 내에 jQuery 코드를 몇 줄 추가합니다.
이러면 이제 위쪽 좌우 버튼으로 캐러셀을 좌우로 둘러볼 수 있게 되고, 모바일에서는 도트 내비게이션이 대신 나오는 구조를 완성할 수 있게 됩니다.
!!!
참고로 테마 개발사에서 화면 요소로 개발해 놓은 캐러셀 요소는 Owl Carousel이라는 jQuery 플러그인을 기반으로 개발을 해 놓은 것입니다. > https://owlcarousel2.github.io/OwlCarousel2/
좌우 콘텐츠가 슬라이드 되는 구조는 여러 jQuery 기반 플러그인들이 있는데요, 각각의 특징이나 디자인이 살짝 다를 수 있습니다. 디자인과 기획 의도와 100% 일치하게 구성은 안 되었지만 유사한 구조를 최대한 쉽게 구성하는 방법을 안내한 것임을 참고 부탁드립니다.
각 섹션을 다 완성하고 페이지를 열어 보면 메인 화면용 페이지가 완성된 것을 볼 수 있습니다.
임시 테스트 사이트 : https://oks-dev.tk/techblog/
다음 단계로는 그리드에서 클릭했을 때 글의 상세 페이지가 보이는 템플릿을 만드는 것으로 이어지면 될 듯합니다.
다음에서 계속 ...
