#15-2. 메인(main) 페이지 만들기 (1)
Vogue 워드프레스 사이트 따라 만들기
참고 사이트의 메인 페이지에는 크게 아래와 같은 목록 리스트 디자인이 존재합니다.
1. 사진을 배경으로 그 위로 카테고리, 작성일, 제목이 표시되는 카드 형태
2. 사진, 카테고리, 제목, 작성일, 작성자가 순서대로 표시되는 형태
크게 두 종류의 것에서 가로 세율의 이미지 비율이 달라진다던지, 텍스트의 정렬 및 글자 사이즈가 달라지는 정도의 변화만 있습니다.
참고로, 많은 테마나 페이지 빌더는 미리 개발해 놓은 디자인의 리스트 요소를 옵션을 조정해서 구성하는 방법을 제공합니다. 만약 원하는 디자인이 없다면 워드프레스의 쿼리와 루프를 이용해서 디자인 구현을 위한 html 구조를 작성하고, css를 추가하여 목록을 만들어 낼 수 있습니다.
- 워드프레스 쿼리 : 워드프레스의 원하는 콘텐츠를 불러오기
https://developer.wordpress.org/reference/classes/wp_query/
- 워드프레스 루프 : 불러온 콘텐츠를 표시하는 반복문
https://developer.wordpress.org/themes/basics/the-loop/
위 방법은 워드프레스 개발자들이 복잡한 php 코딩 대신 DB 데이터를 쉽게 불러다 표시할 수 있도록 최대한 간편하게 만들어 놓은 것입니다. 그럼에도 이 방법으로는 시간이 꽤 소요되어야 제대로 리스트를 만들 수 있게 됩니다.
위 과정을 아주 간단하게 만들어 놓은 게 Impreza 테마의 '그리드 레이아웃(Grid Layouts)'과 '그리드 요소'의 조합입니다. 요소를 넣고, 어떤 콘텐츠를 불러올지 그리고 어떤 모양으로 표시될지 모두 마우스 클릭과 설정값 입력으로 그나마 간단하게 만들어 놓은 코딩 과정도 대체할 수 있게 됩니다.
그러면, 이제 각 리스트를 만드는 과정을 소개해 보겠습니다.
1. 가로형 카드 레이아웃 만들기
디자인된 구조를 먼저 요약해 보면 아래와 같습니다.
1) 가로 세로 비율 2:1의 이미지가 표시
2) 흰 글자를 잘 보이게 하기 위해 그 위에 이미지의 반부터 끝까지 그러데이션 백그라운드 표시
3) 그 위로 콘텐츠(카테고리, 날짜, 제목)가 아래에서 일정 위치만큼 떨어져서 표시
이걸 그리드 레이아웃 만들기 빌더를 이용해서 적용한 모습은 이렇게 됩니다.
각각의 요소에 적용한 세부 설정을 확인해 보면, 먼저 이미지를 추가하고 2:1 비율로 표시합니다. 각 글의 대표 이미지(특성 이미지/featured image)는 모두 사이즈가 다를 수 있어서 이렇게 비율을 지정하면 원본 이미지의 사이즈에 상관없이 모두 같은 모양으로 표시할 수 있게 됩니다.
다음으로 콘텐츠들(카테고리, 날짜, 제목)을 'V wrapper'로 묶은 다음, 모두 가운데 정렬되게 그리고 영역에서 맨 아래쪽으로 붙도록 했습니다. 이미지 위에 표시가 되려면, position 속성을 absolute로 바꿔서 왼쪽, 오른쪽, 아래(바닥)에 딱 붙게 만듭니다. (이미지의 끝이 바닥의 끝)
콘텐츠가 이미지 끝에 붙지 않게, padding을 이용해서 디자인된 공간만큼 떨어뜨려 줍니다.
흰 글자가 잘 보이게 이미지와 콘텐츠의 중간에 오는 반 높이의 배경은, 그러데이션에 투명도까지 적용이 되어서 css로 따로 적용을 해야 했습니다. v wrapper의 영역을 활용하여 50%가 되도록 한 다음 css 적용을 위한 클래스 명을 추가 후 페이지에 css를 추가했습니다.
그러면 전체적으로 이런 형태로 배치가 됩니다. (구조는 참고사이트처럼 pc, 모바일을 따로 만들지 않고 최대한 쉽게 다시 해석해서 적용함)
추가로, 카드의 비율은 각 기기 사이즈마다 미디어쿼리를 이용해서 바꿔 적용할 수도 있습니다.
(처음 2:1 설정) 50% -> 60% -> 80% -> 120% (이미지가 영역의 기본을 담당 > 이미지의 비율을 바꾸면 카드 모양이 바뀜)
이제 만들어진 레이아웃을 이용해서 페이지에 표시를 할 수 있습니다. 페이지 편집 시 '그리드'라는 요소를 넣고, 원하는 콘텐츠를 불러온 다음, 모양으로 방금 위에서 만든 레이아웃(Main top)을 설정하면 끝입니다.
그러면, 전체 글 중에서 하나를 랜덤으로 가져다가(특정 카테고리나 기획 의도대로 바꿀 수 있음) 방금 만든 레이아웃대로 아래처럼 표시가 되는 걸 볼 수 있습니다.
2. 세로형 카드 레이아웃 만들기
이제 카드 형태의 아이템 모양은 1번에서 만든 것을 활용하면 됩니다. 1번에서 만든 레이아웃을 복사(Duplicate)합니다. 요소들 중 이미지는 1:1.5(150%)로 세로로 길게 표시되도록 변경, 콘텐츠들은 모두 기본 정렬(왼쪽)로 표시되도록 변경, 그리고 글자들의 사이즈를 조정하는 정도면 마무리가 됩니다.
카드 형태는 이제 이런 방법으로 복사해서 쉽게 만들 수 있습니다.
3. 아래로 순서대로 표시되는 레이아웃 만들기
(이후 '기본 레이아웃'이라고 하겠습니다)
순서대로 나열되는 레이아웃은 말 그대로 원하는 요소를 순서대로만 놓으면 됩니다. 여기서 세로형 wrapper는 있어도 되고 없어도 되지만, 반응형에 따라 마진을 변경한다든지 할 때 편리해서 저는 주로 묶습니다. 이미지의 비율은 디자인과 같이 66%를 적용. (값을 잘 모르면 그냥 원하는 이미지의 사이즈를 넣으면 알아서 비율이 적용)
이게 1차 버전이었다면, 모바일 화면에서는 왼쪽에 이미지가 오는 형태로 바뀌어야 했습니다. 그럼 모바일은 따로 만들어야 할까요? 아니요. flex wrapper의 특성을 활용하면 해결이 가능했습니다.
먼저, 그리드 레이아웃 편집 시 우선 모바일 화면에서 보이는 모습을 고려해서 요소들을 배치합니다. 모바일에서 왼쪽 이미지는 45%, 오른쪽 콘텐츠들은 55%의 넓이를 가지게 하고, 콘텐츠 wrapper에 15px의 왼쪽 패딩을 주어서 이미지와 공간을 띄워줍니다.
'H wrapper' 안에 있는 '이미지'와 'V wrapper'의 넓이가 합해서 100%를 넘지 않으면 가로로 나열이 되지만, 만약 이미지 100%, V wrapper 100%를 설정하면 원래의 모습인 세로로 표시가 될 수 있습니다.
2번 3번의 그리드 레이아웃을 페이지에 적용할 차례입니다.
세로로 긴 카드 레이아웃으로 글 하나, 오른쪽엔 기본 레이아웃으로 글 4개가 표시되어야 합니다. 그리드 요소는 한 번에 하나의 레이아웃을 사용해서 목록을 표시하는 것이니, 왼쪽 오른쪽을 칼럼으로 나눠서 표시하면 될 거 같습니다.
로우(섹션) 안에 내부 로우를 하나 추가해서 칼럼을 두 개로 나눕니다. 왼쪽 카드가 나올 부분은 2/5로, 오른쪽 4개의 글이 나올 부분은 3/5로 설정했습니다.
칼럼 안에는 그리드 요소를 넣어서 원하는 개수의 글을 불러와서 2번 3번에서 만든 그리드 레이아웃으로 표시되도록 설정합니다. 4개의 글은 한 줄에 2개, 그리고 간격은 15px로 설정해서 합해서 30px만큼 떨어져 있게 합니다.
내부 로우의 각 칼럼 간 사이 간격도 rem 단위의 기본 css 스타일이 아닌 원하는 공간으로 띄우고 싶을 때에는 로우 설정의 이 옵션(Add extra padding around columns content + Additional gap)을 이용하면 되겠습니다. 대신 이 옵션을 켜면 각 칼럼의 안쪽에는 기본 패딩이 적용이 되기 때문에 이 값을 0으로 해 줘야 15px씩 몸집을 가지고 그 안에는 콘텐츠가 꽉 찬 형태로 표시될 수 있습니다.
이렇게 하면 모든 사이 공간이 30px로 통일된 모습으로 글들을 표시할 수 있게 됩니다.
실제 빌더를 이용해서 그리드 레이아웃을 만들어 보면, 간단한 작업들을 스샷과 말로 적으니 꽤 길어졌습니다. 말 그대로 글 하나를 표시할 디자인을 직접 만들 수 있다는 것으로, 이 테마의 아주 큰 장점 중 하나가 되고 있습니다.
적용된 모습 : https://oks-dev.tk/vmagazine2/
핵심이 되는 그리드 레이아웃 두 가지가 완성이 됐고, 그걸 이용해서 글들을 불러다 표시할 수 있게 됐습니다. 이후 나오는 그리드 레이아웃들은 이제 기존 것을 복사해서 약간씩 수정해서 이용을 하면 되는데, 글이 너무 길어져서 다음 글로 나눠서 소개하겠습니다.
계속...
