brunch

매거진 IMPREZA 테마 활용

라이킷 5 댓글 2

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by oksambari May 01. 2020

#1-3. 글 화면 레이아웃 만들기

IMPREZA 테마로 brunch 사이트 따라 만들기

워드프레스와 같은 CMS를 사용하는 주된 이유 중 하나는 동적인 콘텐츠를 작성, 목록화하고, 내용 보기 등 유기적으로 맞물려 돌아가는 시스템을 사용하고자 하는 것입니다. 이번에는 사이트의 가장 중요한 화면이 될 수도 있는 글의 상세 내용을 보여주는 페이지의 레이아웃은 어떻게 만들고 보여줄 수 있는지를 한 번 이야기해 보겠습니다.

워드프레스는 모든 화면이 약속된 탬플릿 우선순위에 의해 표시가 됩니다. 이것을 토대로 테마 개발자들은 각각의 화면을 위해 코드를 짜고, 스타일을 적용하고, 사용자 편의를 위해 테마 옵션으로 각종 UI 옵션들을 제공하여 사용자가 원하는 대로 화면을 설정할 수 있는 방법을 제시합니다. 그런데 대부분은 이 선택지가 한정이 되어 있어서 만약 테마가 제공하는 레이아웃을 벗어난 디자인을 표시하고자 하는 경우 테마의 템플릿 파일 코드를 직접 수정을 하여 작업을 해야 합니다. ( php 탬플릿 파일들 )

'왜 임프레자인가?'에서 설명을 하였듯이 임프레자는 이 방법을 개선하여 탬플릿 파일 코딩을 직접 수정하지 않고도 어드민에서 페이지의 탬플릿을 내가 직접 만들 수 있는 방법을 가지고 있습니다. 원리는 매우 간단합니다. 콘텐츠 탬플릿을 만들고 > 테마 옵션 - 레이아웃 설정에서 어느 탬플릿을 쓸지 약속만 하면 끝.

즉, 브런치의 글 화면과 같은 레이아웃도 페이지 빌더로 구성을 하면 디자인이나 기획 의도에 맞는 레이아웃을 마음대로 구성을 할 수 있다는 것입니다.

이후 글을 작성하는 작가는 제목과, 글 내용, 카테고리, 태그, 대표 사진 정도만 고려해서 간편하게 작성을 하게 되면, 약속된 화면 레이아웃에 의해 글의 상세 페이지가 표시가 되는 것입니다.

작업 과정을 요약해 보면 이렇습니다.

1. 헤더 - 페이지와는 다른 헤더

베너가 없이 좋아요, 댓글, 공유, 신고 버튼이 오른쪽에 위치하는 페이지와 다른 헤더를 하나 만들어 줍니다. (※ 버튼의 기능은 추가 개발 요소라 생략) 테마 옵션에서 글의 헤더는 다르게 설정할 수 있습니다. ( + 푸터는 안 보이게 )

글을 스크롤해서 읽어 내려갈 때 전체 글 중 어느 부분까지 읽었는지 표시하는 기능이 있습니다. 이건 문제없이 잘 표시가 되는 플러그인이 있어서 그걸 설치해서 적용했습니다. (Reading Progress Bar 1.2.1)

2. 상단 타이틀 섹션 - 배경 이미지, 타이틀, 서브타이틀, 작성자, 작성일 등

일단 각 글마다 대표 이미지가 있다는 전제하에 구성을 해봤습니다. 상단의 글 제목이 나오는 부분을 하나의 로우로 구성하고, 글의 특성 이미지가 백그라운드로 표시되도록 설정했습니다. 그리고 디자인상 제목은 최대 700px로 표시가 되어야 하므로, 칼럼 설정에서 최대 사이즈를 지정하였습니다.

3. 글 내용, 댓글 - 편집기에서 작성한 콘텐츠, 댓글 입력

( 댓글 개수 표시 부분에 관련 스크립트 추가로 클릭 시 아래 댓글 리스트가 표시 또는 닫히게 조치 )

4. 작성자 - 아바타 이미지, 작성자 설명, 구독자 정보 등

로우에 배경 색을 넣어서 위 본문, 댓글과 구분을 하고, 작성자 정보를 표시합니다.

(작성자를 표시하는 탬플릿 조각은 추가 수정이 필요한 작업으로 생략)

5. 연관 글 - 동일 주제의 랜덤 글 6개 표시

앞 글에서 설명된 그리드 레이아웃 빌더로 연관 글이 표시되는 레이아웃을 하나 만든 뒤 > 그리드 요소로 6개의 연관 글을 3개의 칼럼으로 표시합니다. 표시할 요소 선택에서 현재 글과 동일 분류의 아이템들만 불러오기를 할 수 있고, 그 중 동일 카테고리 글만 랜덤하게 6개 가져오기를 했습니다.

6. 베너 이미지

7. 좌우 글 이동 내비게이션

기획 내용은 작가의 글 앞, 뒤로 이동을 하는 것이나, 이 부분은 추가 개발이 필요하여 생략하고 일단 동일 카테고리 내의 글에서 전후 글 이동으로 네비는 표시됐습니다. 로우는 디자인 설정에서 fixed로 처리를 하면 화면 맨 아래 고정이 되는 모습으로 표시가 가능합니다.