#3-3-1.메인 페이지뷰 만들기
IMPREZA 테마로 미디어 사이트 따라 만들기
기획상 반복 콘텐츠가 나오는 곳이 한 곳 더 있습니다. 메인 페이지인데요, 이번에는 메인 화면에 표시할 글 리스트를 만들고 메인 페이지를 완성하는 과정입니다.
메인 페이지의 구성 내용을 확인해 봅니다.
콘텐츠들 중 원하는 콘텐츠 또는 최신 글 리스트들을 전체 페이지에 배치를 하여서 사이트 콘텐츠들을 소개하고 있습니다. 콘텐츠 리스트를 위해 만들어야 할 그리드 레이아웃들은 아래와 같습니다.
제일 위 상단 글 1개 표시
그리드를 만들기 위해 먼저 구조를 파악해 봤습니다.
글의 대표 이미지가 좌측에 보이고, 오른쪽으로는 배경색 위로 글의 요약 내용들이 표시가 된다. 이때 콘텐츠는 아래 열의 끝을 맞춘다. 모바일에서는 요약 내용들이 표시되는 박스가 아래로 내려간다.
이 내용을 토대로 그리드 레이아웃 하나를 만듭니다.
디자인된 높이를 위해 저 같은 경우 html 구조를 추가해서 최소 높이를 주는 방법으로 480px 높이를 유지했고요, 오른쪽의 요약문은 전체를 Vertical Wrapper로 묶어서 왼쪽에서 55% 지점부터 위치하도록 했습니다. (※ css에는 postition 속성이 있어서 절대적인 위치로 어느 부분에 놓을 것인가를 지정할 수 있습니다.) 모바일에선 static 속성으로 전환을 하면 css 특성상 자연스럽게 아래로 떨어지게 됩니다.
주요 이슈들 모음 (케러젤)
글 리스트를 표시하는 방법으로 좌우 화살표가 있고 클릭하면 글이 좌우로 슬라이드 되는 구조입니다. 이런 것은 jQuery로 만들어진 carousel 기능을 가진 플러그인을 사용하면 만들 수 있는데요, Impreza의 경우는 owl carousel이라는 플러그인을 토대로 이 구조가 빌더 요소로 개발이 돼 있습니다.
Impreza의 빌더 요소 중 워드프레스의 어떤 콘텐츠를 불러다 표시하는 대표적인 요소가 'GRID'와 'CAROUSEL'인데, 그리드는 몇 개씩 몇 칼럼으로 글들을 보여줄 것인가, 케러젤은 몇 개를 불러와서 좌우로 회전이 되되 몇 칼럼으로 보여줄 것인가의 차이가 있겠습니다.
주요 이슈들 표시는 이 케러젤 요소를 사용하면 되겠네요. 이 케러젤 리스트에서도 각 글 1개의 레이아웃은 '그리드 레이아웃'으로 만들 수 있습니다.
페이지 편집을 할 차례입니다. 페이지에는 케러젤 요소를 넣고, 어떤 글을 몇 개 가져와서, 어떤 레이아웃으로, 케러젤 동작은 어떻게 하고, 화면 사이즈가 줄면 한 번에 몇 개를 표시할지 등을 정할 수 있습니다.
이렇게 설정 후 페이지 화면을 열어 보면 아래와 같이 표시가 됩니다.
이곳에서는 카테고리 링크가 분류별 주요 색으로 표시가 되는 요건이 있었습니다. 워드프레스에서는 어떤 글의 목록을 가져올 때 각 글을 묶는 태그에 알아서 추가가 되는 클래스들이 있는데요, 이걸 활용하면 css 스타일 몇 줄을 추가해서 카테고리 색을 표시할 수 있습니다. 즉, 그리드 디자인 시 기본적으로 박스형 카테고리 버튼이 나오도록 한 다음 > 특정 카테고리 클래스를 가진 글의 버튼은 배경색을 바꿔주면 됩니다.
보도자료 최신 글 표시
좌측에는 백그라운드 위로 약간 투명한 박스로 요약글이 표시되는 것 1개, 우측에는 3개의 세로로 글 3개가 나오는 구조입니다.
좌측의 그리드 레이아웃은 이미 화면 맨 위 글을 표시할 때 만든 구조와 비슷하므로 복사를 해서 위치와 백그라운드 색(투명도 0.8)을 조정했고, 글자 크기와 위아래 여백들을 살짝 수정을 해서 사용했습니다.
오른쪽 그리드도 기존에 카테고리 글 목록을 위해 만든 그리드와 비슷한 구조입니다. 이걸 복사한 다음 글자크기와 사진 사이즈 등 일부 스타일을 수정해서 사용했습니다.
인사이드 최신 글 표시
주요 이슈 캐러젤에서 쓴 그리드와 유사합니다. 캐러젤에서 썼던 그리드 레이아웃을 복사 후 카테고리는 버튼형 스타일을 빼고, 글자 사이즈와 여백을 살짝 조정해서 사용했습니다.
섹션 사이의 베너 (full width, content width)
화면을 꽉 채우는 넓이의 베너가 있고, 콘텐츠의 넓이와 같이 1100으로 표시가 되는 베너가 존재합니다. 그리고 각 베너는 모바일 화면에서는 세로로 조금 더 길어진 모바일 전용 베너가 표시되어야 합니다.
베너가 아예 이미지로 제작이 돼 있는 경우 이미지의 특성상 이미지는 본인을 감싸고 있는 부모 요소의 넓이에 맞춰서 알아서 줄어들게 됩니다. 모바일 베너를 위해 이미지를 각각 2개씩 준비를 하면 되고, Impreza의 CSS Helper Classes를 이미지 요소 design 설정에 추가해 주면, 화면 사이즈에 따라 원하는 이미지가 노출됩니다.
콘텐츠의 넓이를 무시하고 화면을 풀로 채우는 이미지를 넣으려면 'Row Settings'에서 콘텐츠를 끝으로 넓히겠다는 옵션에 체크를 하면 되겠습니다.
맨 하단 내비게이션
3 칼럼으로 특정 페이지로 바로가기를 할 수 있는 버튼 3개가 존재합니다. 모바일에서도 같은 모양으로 3 칼럼으로 유지가 되어야 하고요.
이런 구조라면 저 같은 경우는 css의 flex 스타일 적용 방법을 이용합니다. 빌더 요소 중 'Horizontal Wrapper'는 그 안에 있는 것들을 flex 스타일 기법으로 배치도 하고 정렬도 해 주는 요소입니다. 3개의 아이콘 박스를 넣고(왼쪽에 이미지, 오른쪽 텍스트), css 코드를 추가해서 Horizontal Wrapper 안에 있는 아이콘 박스들을 각각 1/3 넓이를 가지도록 하고, 맨 마지막 거를 제외하고는 오른쪽에 구분선이 나오도록 해 주면 되겠습니다. 모바일 화면을 위해서 미디어 쿼리를 이용해서 여백과 이미지 사이즈도 살짝 조정을 하면 되겠습니다.
여기까지 조치를 한 다음 메인 페이지를 열어보면 각 리스트들, 베너, 하단 내비게이션이 표시된 걸 볼 수 있습니다. (※ 더보기 클릭 시 글이 더 불러와 지는 부분은 각 분류용 카테고리 메뉴 주소로 이동하는 것으로 조치했습니다)
다음으로는 검색 필드와 검색 결과 화면에 대한 작업이 필요해 보입니다. 모바일용 메뉴 구조(슬라이드 되는)도 아직 적용이 안 되었고요.
반복되는 작업 소개를 보면 어떤 웹 요소로 화면을 구성하는 부분과, 데이터베이스에 있는 콘텐츠를 불러다 표시를 하는 부분 이렇게 크게 2가지 분류로 나눠볼 수 있겠다는 생각이 듭니다. 기획이나 디자인대로 사이트를 만드는 거에 있어서 어떤 테마를 쓰던 결국은 최종 결과(웹 화면)는 같은 방향으로 가게 돼 있는데, 경험상 코드를 거의 다룰 일이 없이 사이트를 만들 수 있는 건 아직까지는 Impreza 테마만한 게 없었던 거 같습니다. 테마를 고를 때 한 번 참고가 되었으면 합니다.
임시 참고용 개발 사이트 : http://oks-together.hol.es/media/
