#8-2. 스토리 리스트, 상세 페이지 템플릿 만들기
잡지 뷰 사이트 만들기
참고사이트에서 주된 콘텐츠는 스토리(portfolio), 그리고 뉴스(post)입니다. 이 중에 스토리에 대한 목록과 상세 페이지를 준비하는 과정부터 정리해 보겠습니다.
먼저 스토리 콘텐츠가 전체적으로 구조를 갖추기 위해 준비해야 할 것은 크게 세 가지입니다.
1. 스토리 전체가 나오는 페이지
2. 스토리의 상세 내용이 나오는 상세 페이지 템플릿
3. 스토리의 태그를 클릭하면 나오는 태그에 대한 목록 템플릿
목록을 만들어 보기 위해서는 우선 콘텐츠들이 있어야 가능하니, FakerPress 플러그인을 이용해서 21개의 스토리 더미(dummy) 콘텐츠들을 만들었습니다. 이후에 페이지 빌더를 이용해서 작성(매거진 스타일의 편집을 위해)을 할 것이라 내용은 자동으로 만들 필요 없고, 대표 이미지만 같은 비율(1800x2300)로 만들어지도록 했습니다. (※ 더미 콘텐츠들은 이후에 한꺼번에 삭제 가능 - 등록된 더미 사진 포함)
1. 스토리 전체가 나오는 페이지
스토리들을 모아 보여주는 페이지를 하나 만듭니다.
기본 골격인 헤더와 푸터는 지난 과정에서 이미 완성을 했으니, 그 안쪽 페이지의 내용만 고려를 해서 페이지를 편집하면 되겠습니다. 페이지 타이틀 외 목록이 주가 되므로 Grid 화면 요소 하나면 이 페이지는 완성이 되는 구조입니다.
한 번에 불러와서 보여줄 스토리 개수는 12개, 버튼을 누르면 그 아래로 12개씩이 더해지는 방식을 적용합니다. 1개의 콘텐츠가 표시되는 그리드 레이아웃을 지정(Stories-grid)하고 4개의 칼럼으로 디자인대로 16px의 패딩 공간을 가지고 표시되도록 했습니다. 참고로, 각 화면 사이즈에 따라 칼럼 수를 변경할 수도 있습니다. 저는 모바일에서 참고사이트와 달리 2 칼럼을 유지하고 대표 이미지는 계속 세로로 유지되도록 구성을 했습니다.
그리드 레이아웃은 이렇게 구성을 했습니다. [ 이미지 / 타이틀 / 설명글 ]이 나오는 구조라 순서대로 배치를 하고, 이미지의 경우 목록에서 선이 맞아야 하므로 업로드한 사진 사이즈에 영향을 받지 않도록 비율을 통일해줬습니다.
※
참고사이트의 경우 특정 몇 번째 스토리는 비율을 달리해서 보여주는 방식으로 스타일을 정의한 것으로 확인됩니다. 이건 참고사이트처럼 css 수정을 하면 가능한데, 한 가지 모든 기기에서 이 비율을 유지하는 건 어렵다는 문제가 있습니다. 어느 화면에서는 줄이 안 맞는 것이죠. 꼭 필요하다면 수정해서 사용을 하면 될 것 같습니다.
Impreza의 경우 각 콘텐츠별로 목록에서의 사이즈를 변경할 수 있는 방법이 제공됩니다. 특정 스토리는 2x1 비율로 공간을 차지하도록 하고 대신 목록의 모양은 Masonry 형태를 이용하도록 하면 이런 구조도 가능하긴 합니다.
2. 스토리의 상세 내용이 나오는 상세 페이지 템플릿
목록에서 스토리 하나를 클릭하면 상세 페이지로 연결이 됩니다. 이게 같은 규칙의 디자인대로 표시가 되려면 워드프레스에서는 이 story라는 콘텐츠에 대한 상세 페이지 템플릿이 테마(Theme) 내에 준비가 되어 있어야겠지요. 이걸 Impreza 테마는 어드민에서 마음대로 만들 수 있게 개발이 되어 있어서 편리합니다. (템플릿 파일이 테마에 있되, 페이지 빌더로 구성한 내용이 연결됨)
'Impreza > Content templates'에서 콘텐츠 템플릿 하나를 만듭니다.
첫 번째 섹션에서는 대표 이미지가 화면 높이 100vh로 반만 표시되고, 오른쪽에는 제목과 설명글이 나오도록 구성했습니다. 그 아래에는 각 스토리 편집 내용 그대로 불러와서 표시되는 섹션이 있고, 그 아래는 연관 스토리가 자동으로 붙도록 했습니다. (그리드 모양은 공통)
각 스토리는 페이지 빌더를 이용해서 왼쪽에는 사진, 그리고 오른쪽에는 참고사이트처럼 인터뷰 내용들을 마음대로 편집을 할 수 있습니다.
이때 칼럼 한쪽의 내용이 짧을 경우 해당 칼럼은 스크롤 시 위쪽에 고정이 되도록 하면 참고사이트처럼 공간이 비지 않고 내용이 계속 보이도록 할 수 있습니다.
글 맨 아래에는 글에서 사용된 이미지들을 갤러리 형태(클릭 시 슬라이드 표시)로 표시하는 섹션을 구성했습니다. 한 번 규격화된 섹션은 페이지 빌더의 템플릿으로 저장하면 앞으로 모든 글에서 클릭만 하면 바로 편집 화면에 붙는 구조로 재 사용이 가능해집니다.
3. 스토리의 태그를 클릭하면 나오는 태그에 대한 목록 템플릿
글의 상세 화면에서 태그를 클릭하면, 같은 태그를 가진 스토리 글 목록이 나오게 됩니다. 이건 약속된 구조가 나오는 것이므로 특정 페이지로 만드는 게 아니라, 템플릿화 해서 이 구조를 사용히도록 약속을 해야 합니다.
'Impreza > Content templates'에서 스토리 태그 목록을 위한 템플릿 하나를 만듭니다. Stories 페이지와 똑같은 구조이므로 전체를 복사해다가 붙여넣기 한 다음, 태그명이 자동으로 표시되는 부분, 그리고 그리드에서 가져올 콘텐츠를 워드프레스에서 주소에 의해 알아서 가져오도록만 수정해주면 되겠습니다.
여기까지 하면, 스토리 전체를 표시할 수 있고, 글 내용도 디자인대로 표시하면서, 같은 주제의 스토리만 모아 보여줄 수 있는 구조가 완성됩니다.
> https://oks-dev.tk/photomagazine/stories/
다음은 또 다른 주요 콘텐츠인 뉴스들에 대한 화면들을 만드는 과정으로 이어집니다.
계속...
