#2-2. 리스트 디자인 만들기 - 1
IMPREZA로 KMONG 블로그 사이트 따라 만들기
참고용 사이트(크몽 블로그)의 리스트에는 어떤 디자인들이 있는지 우선 확인을 해 봅니다.
대표 이미지 위에 정보들이 디자인, 이미지 아래로 타이틀이 나오는 디자인, 이미지가 좌측이 나오는 디자인 크게 보면 3가지 형태의 리스트 디자인이 적용이 된 듯하고, 세부 디자인은 조금씩 수정을 하면 될 듯합니다.
Impreza 테마에는 워드프레스의 각종 post 콘텐츠들을 가져다가 보여주는 리스트의 디자인을 내가 직접 만들 수 있는 Grid Layouts 빌더가 있습니다. 물론 이게 아직 어렵게 느껴진다면 이미 있는 리스트 디자인을 이용해서도 메거진 뷰의 사이트를 충분히 만들 수도 있습니다. 참고 1, 참고 2
가장 간단하게 쓰는 방법은 페이지를 구성할 수 있는 페이지 빌더 요소 중 'Grid'라는 것을 넣고, 탬플릿을 선택해 주면 이 디자인대로 글이 표시가 됩니다.
그런데 디자인에 따라 추가될 정보가 있을 수도 있고, 간격 및 색을 내 마음대로 조정을 해야 할 때가 있습니다. 그럴 땐 Impreza > Grid Layouts 에서 사이트에 필요한 그리드를 직접 만들면 되는데, 헤더를 구성할 때와 마찬가지로 이미 탬플릿들이 준비가 돼 있어서 처음엔 비슷한 구조를 불러다가 디자인을 일부 수정해서 쓰는 게 쉽습니다. 테마 데모에서 사용된 모든 디자인은 클릭해서 불러올 수 있습니다.
그럼 실제 목록 디자인을 만들어서 각 위치에 넣는 과정을 정리해 봅니다.
1. 푸터 인기글 그리드 디자인
왼쪽에 사진이 있고, 오른쪽엔 타이틀과 작성일이 나오는 디자인입니다.
탬플릿 중 비슷한 모양이 마침 있어서 불러온 뒤, 디자인에는 없는 commemt 개수 표시 부분만 제거를 했습니다. 각 구성 요소들 위에 마우스를 올려보면 연필 모양이 나오는데 클릭하면 세부 디자인 옵션들을 설정할 수 있습니다. 참고 사이트대로 이미지의 비율, 폰트 사이즈, 간격 등을 조정해 줍니다.
이름은 구분이 쉽게 'left img title date'라고 지었습니다.
이제 푸터에 리스트를 표시할 차례입니다. 푸터가 구성돼 있는 Block의 편집기를 열어서 인기글 제목 아래 Grid 빌더 요소를 추가합니다. 총 표시할 글은 3개이고, 디자인 탭에선 아까 만들어 둔 'left img title date' 디자인을 선택, 그리고 1열(한 줄에 하나 표시), 간격은 15px로 설정을 해 줍니다.
그 다음 사이트를 열어서 푸터를 보면 만든 디자인대로 3개의 글이 표시가 되는 걸 볼 수 있습니다. (※ 인기글의 개념은 아직 사이트에 적용을 하지 않은 것이라, 우선 랜덤한 글 3개를 표시했습니다.)
2. 싱글 포스트 글의 오른쪽 최신 글 목록
푸터의 리스트 디자인과 비슷한데 맨 위에 1개의 최신 글 디자인만 살짝 다른 구조입니다. 위의 1개짜리 디자인만 추가로 준비하면 될 듯합니다.
탬플릿 중 'Blog Classic'을 선택해서 불러온 뒤, 불필요한 정보는 제거를 해 줍니다. 그 다음 참고 사이트의 디자인대로 요소간의 간격, 폰트 사이즈 등을 요소 옵션 편집을 통해 설정해 줍니다. 이름은 'top img title date excerpt'라고 지었습니다.
목록을 표시하기 위해 지난 번 만들었던 'Single Post Page' 탬플릿 편집화면을 열어서, 현재 열어본 글과 같은 카테고리의 최신 글 1개를 가져다가 방금 만든 'top img title date excerpt' 디자인대로 표시하도록 합니다.
이어서 바로 그 아래로 4개의 최신 글을 불러오면 되는데, 이때 앞에 있는 그리드에서 표시한 글은 건너뛰고 표시를 하면 의도대로 위아래 총 5개의 최신 글이 표시되도록 할 수 있습니다. 두 그리드 요소를 넣고 사이트에서 글 상세 화면을 열어보면, 1개의 사진이 위에 있는 글 + 푸터와 같은 디자인의 4개의 글 총 5개가 표시되는 걸 볼 수 있습니다.
3. 메인 페이지
상단에 있는 4개의 사진 위에 타이틀 및 정보가 나오는 목록 디자인
공간을 고려해 보니 이미지의 비율과 타이틀 사이즈가 다른 목록 디자인 3개가 필요해 보입니다.
탬플릿 중에 비슷한 탬플릿이 마침 있습니다. 새 그리드 디자인 제작을 위해 불러온 뒤, 불필요 요소 제거, 폰트, 간격 조정을 해서 'main - img with title, author, date (1:1 big)'라 이름을 지었습니다. 이미지의 비율을 1:1로 지정을 하면 대표 이미지를 알아서 정사각형으로 표시를 해 준다라는 의미입니다.
두번째 오른쪽 2:1 비율의 목록 표시를 위해서 위와 마찬가지로 그리드를 하나 만들면서 이미지 비율을 2:1로 선택해서 'main – img with title, author, date (2:1)' 그리드 레이아웃을 하나 추가합니다.
아래쪽에는 참고 사이트에선 글자 크기가 다르게 돼 있어서, 1:1 이미지 사이즈의 그리드를 추가하면서 폰트 사이즈를 조정한 'main – img with title, author, date (1:1 small)'를 만들어 줍니다.
이제 페이지에 적용을 할 차례입니다.
어드민 > 페이지에서 사이트의 홈으로 사용할 새 페이지를 만듭니다. 로우를 반으로 갈라서 왼쪽 오른쪽에 그리드 3개를 넣고, 위에서 만든 그리드 레이아웃을 이용해서 총 4개의 글을 표시해 보면, 오히려 참고 사이트보다 조금 더 각이 딱 맞는 디자인이 적용이 된 듯하네요.
※ 모바일 화면에서 볼 때에는 중간에 2:1 이미지가 나와서 통일성이 좀 떨어진다 싶으면, 모바일용으로 별개의 디자인을 만들어 표시하는 걸 이용할 수도 있습니다.
정리를 하다 보니 다시금 드는 생각은 워드프레스는 CMS라는 점입니다. 포스트(post)라는 콘텐츠들을 어드민에서 쉽게 작성 및 관리를 할 수 있고 이런 것들을 약속된 디자인으로 표시하는 데 장점이 있는 서비스 툴이라 생각합니다.
다음 글에서는 메인의 아래쪽 그리드를 만들어 추가하는 부분, 그리고 카테고리 버튼이나 메뉴를 클릭하면 열리게 되는 목록 화면의 그리드를 만들고 적용하는 부분을 마지막으로 다뤄 보겠습니다.
현재까지 적용된 따라하기 사이트는 여기서 임시로 확인 가능합니다. >
