#8-4. 메인 페이지 만들기
잡지 뷰 사이트 만들기
스토리와 뉴스라는 주 콘텐츠들에 대한 목록과 상세페이지까지 완료가 됐습니다. 이제 쌓인 콘텐츠를 활용하여 대표적인 콘텐츠들을 모아 보여주고, 바로가기 링크나 베너 섹션을 노출할 수 있는 메인 페이지를 만들어 볼 차례입니다.
페이지를 구성할 각 섹션별로 순서대로 한 번 정리해 보겠습니다.
1. 메인 탑 섹션 (좌측 대표 뉴스 grid + 우측 대표 스토리 carousel)
먼저 만들 구조를 파악해 봅니다.
왼쪽에는 위에서 반(50vh)의 공간을 띄운 다음 표시되는 대표 뉴스 목록이 있습니다.(스크롤 발생) 오른쪽에는 화면 높이로 고정되면서 슬라이더 형태로 표시되는 대표 스토리들이 있습니다. 이때 오른쪽은 최대 콘텐츠 넓이를 넘어 섹션의 끝까지 슬라이더가 표시됩니다.
좌우 반반씩의 구조이므로 우선 1/2 + 1/2 칼럼 2개로 나눠서 왼편에는 뉴스가 나오는 목록을, 오른편에는 스토리가 캐러셀 형태로 나오는 목록을 준비하면 되겠습니다.
1) 왼쪽 대표 뉴스 표시
대표 글들을 디자인대로 표시하기 위해 Grid layout을 하나 만듭니다.
[ (제목 + 글 번호) / 요약글 / 사진 ] 이 순서대로 표시할 수 있게 화면 요소들을 넣었습니다. 글 번호는 css로 넣을 수 있게 custom html에 이름만 지정해 줬습니다. 그리고 주황색 flexbox 아래에는 border 선이 들어가도록 해 줬습니다. (※ css로 하나하나 입력해 줘야 하는 것들을 'Design' 탭 옵션으로 대부분 해결)
글 번호(몇 번째 글인지 표시)는 css를 이용해서 화면 내에 같은 요소를 카운트해주는 방법을 이용하면 되겠습니다. 페이지에 css를 추가하는 방법으로 적용합니다.
이제 그리드 요소에 이 레이아웃으로 글들이 표시되도록 설정합니다.
뉴스(글)들 중 featured라는 카테고리를 가진 것들을 가져다가 위에서 만든 레이아웃으로 표시를 하는데, 최대 넓이는 600px이고, 오른쪽 칼럼과의 거리는 20%를 주라는 약속을 가지고 표시합니다.
2) 오른쪽 대표 스토리 표시
우선 오른쪽 1/2 칼럼의 공간에 대한 설정을 해 줘야 합니다. 공간이 제대로 설정이 돼야 안쪽에 표시될 캐러셀도 거기에 맞춰서 표시를 할 수 있습니다.
오른쪽 칼럼은 화면을 스크롤해 내려갈 때에도 계속 고정된 상태여야 하므로 'Fix this column at the top of a page during scroll'에 체크합니다. 이때 헤더의 높이 고려 없이 0 위치에 있도록 합니다. (없으면 헤더 높이 아래로 내려감) 그다음 오른쪽 칼럼은 화면 끝까지 콘텐츠의 공간을 늘려줘야 합니다. 'Stretch to the screen edge'에 체크합니다. Design 탭에서는 이 칼럼에 있는 모든 공간 설정을 0으로 해서 여백 없이 꽉 차게 보일 수 있도록 합니다. css로 모두 정의를 해야 구현되는 것들을 몇 가지 설정으로 해결을 했습니다.
이제 안에 들어갈 캐러셀 슬라이더 각 1개가 표시되는 레이아웃만 잘 만들면 되겠습니다.
'Impreza > Grid Layouts'에서 레이아웃 하나를 만듭니다. 그리드 전체의 배경 이미지로는 뉴스(글)의 대표 이미지가 나오도록 합니다. 세로형 flexbox의 설정에서, 콘텐츠는 왼쪽 아래로 정렬이 되도록 하고, 이 그리드의 높이를 100vh로 해서 화면 맨 위에서 맨 아래까지 높이를 갖도록 합니다. 제목이나 정보가 어느 정도 공간을 두기 위해 padding을 설정합니다.
이제 오른쪽 칼럼에 캐러셀(Carousel) 요소를 넣어서 원하는 스토리 글들이 표시되도록 설정합니다.
캐러셀 슬라이드 각 1개의 현재 번호도 앞의 뉴스 글 번호 넣기를 응용해서 css로 추가했습니다. 참고로 슬라이더는 특성상 전후로 슬라이드가 복사가 되어서 계속 이어지는 모습을 보일 수 있게 합니다. 만약 5개의 스토리를 불러다 표시를 한다고 하면 화면이 구성될 때 슬라이드를 만들어주는 jQuery 플러그인이 알아서 전후로 복사된 슬라이드를 만드는 겁니다. 복사된 것들은 카운트가 안 되도록 하면 css로 번호 넣기가 여기도 가능했습니다. ( :not(.cloned) )
각 슬라이드의 번호 표시는 됐는데, 오른쪽에 전체 슬라이드의 개수를 표시해야 하는 부분이 남았습니다. 여러 슬라이드 jQuery 플러그인들 중 Impreza 테마에서는 Owl Carousel이라는 것을 토대로 개발을 해 놓았는데요, 이 슬라이드 이벤트 체크 중 처음 슬라이드 구조가 만들어질 때 개수를 체크할 방법이 제공되고 있습니다. > https://owlcarousel2.github.io/OwlCarousel2/demos/events.html
이걸 이용해서 화면이 만들어질 때 총 슬라이드 개수가 몇 개인지를 체크해서 원하는 곳에 표시되도록 할 수 있었습니다.
여기까지 하면 첫 번째 섹션이 완료됩니다.
2. 두 번째 [ 배경 이미지 + 텍스트 ] 섹션
로우(섹션) 전체의 백그라운드 이미지를 넣고, 텍스트 및 버튼을 추가하면 간단히 해결되는 구조입니다. 한 가지 배경으로 이미지를 넣게 되면 자체의 공간이 없어 로우의 콘텐츠 높이만큼만 배경이 나옵니다. 이를 위해서 css를 추가해서 높이를 어느 정도 갖도록 만들어 주면 되겠습니다.
3. 세 번째 Selected Stories 섹션
섹션의 제목, 텍스트, stories페이지 바로가기 버튼을 넣고, 처음에 만든 그리드 레이아웃을 이용해서 원하는 스토리들을 표시하면 되겠습니다.
4. 네 번째 상품 바로 가기 섹션
페이지 빌더 화면 요소 중 이미지, 텍스트는 자체 링크를 넣을 수 있는 방법이 있습니다. 기획된 페이지나 URL로 바로 갈 수 있는 버튼으로 만들 수 있습니다. 이미지는 혹시 양쪽 이미지의 사이즈가 다른 경우 가로, 세로 비율을 통일시킬 수도 있습니다.
여기까지 하면 메인 페이지가 완료됩니다.
> https://oks-dev.tk/photomagazine/
남은 건 About 페이지와 Index 페이지입니다. Index 페이지의 경우 마우스를 올렸을 때 왼편에 스토리의 대표 이미지가 바뀌면서 표시되는 기능이 있어 이것도 한 번 소개해 보겠습니다.
계속...
