brunch

매거진 IMPREZA 테마 활용

라이킷 6 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by oksambari May 18. 2021

#3-2. 페이지 만들기

IMPREZA 테마로 미디어 사이트 따라 만들기

사이트 구조상 페이지로 제작을 해야 할 것은 메인 페이지, 그리고 그룹 소개용 페이지 4개, 소식지 가입을 위한 페이지 5개가 될 듯합니다.

메인 페이지는 우선은 콘텐츠가 있어야 리스트를 만들 수 있으니 잠시 보류를 하고, 소개용 페이지들을 먼저 제작해 봅니다.

소개용 페이지들에서 고려할 레이아웃들을 살펴보면,

1. 기본 콘텐츠 폭(1100px) 보다 작은(900px) 콘텐츠 너비

2. 탭으로 내용이 전환이 되는 구조

3. 4 칼럼, 5 칼럼으로 나뉜 열

4. 이미지에 마우스를 올렸을 때 이미지가 전환되는 효과

5. 히스토리 작성에 대한 방법 및 표시

와 같은 것들이 해결해야 할 과제로 확인이 되네요.

먼저 페이지를 구성하는 요소에 대해 잠시 알아보면, 거의 모두 이미지와 텍스트의 조합입니다. 이 요소에는 전 글에서 잠깐 소개를 한 것과 같이 각 요소의 몸집이나 공간에 대한 스타일 정의로 페이지에 차례로 배치가 되는 것입니다.

참고사이트에서 개발자 도구를 실행해 보면, 이러한 스타일 적용 내용을 확인해 볼 수 있습니다. 디자인이 있다는 건 이 공간에 대한 규칙이 이미 확정이 된 것이니 퍼블리싱 시 그대로 구현을 하면 됩니다.

개발자 도구로 요소를 선택 시 보이는 녹색 공간은 나의 몸집을 키운 '패딩', 그리고 주황색으로 확인이 되는 공간은 다른 요소와의 거리를 위해 띄운 '마진'입니다.

반응형 디자인을 위해 칼럼은 %로 넓이를 주면 되고, 칼럼 간에는 여백을 위해 마진이나 패딩으로 공간을 띄우면 되겠습니다. 나눠진 공간 안에 놓이는 텍스트나 이미지는 그 안에서 놓이는 것이라 위아래 여백만 신경을 쓰면 됩니다.

페이지 만들기 1.

그룹 소개용 페이지를 만들어 봅니다.

※ Impreza 테마는 WPBakery Page Builder라는 비주얼 빌더 플러그인을 토대로 테마 개발자가 화면을 만드는 요소들을 개발을 해 놓았습니다. 테마마다 어떤 페이지 빌더를 토대로 개발을 하는가에 차이가 있는데요, 최근에는 Elementor라는 빌더나 워드프레스 기본 페이지 빌더 등을 토대로 개발이 되는 테마들도 많이 있습니다.

저 같은 경우는 제작 이후에 차후 직접 내용을 수정하기 쉽도록 최대한 빌더 구조 그대로를 활용하여 화면 요소들을 배치하고자 노력합니다. 그래야 직관적으로 어느 부분을 편집해서 내용을 수정할지 운영하는 사람도 바로 알 수 있으니까요.

참고 사이트에서는 소개 페이지의 탭 메뉴는 클릭 시 내용을 전환하는 형태로 사용을 하였습니다. 그래서 빌더 요소 중 'Tabs'라는 걸 추가해서 3가지 내용으로 구분을 해서 구성을 해 봤습니다.

! 연혁 탭의 경우는 연도 메뉴가 스티키 처리가 되거나, 좌측 연도 표시가 계속 변경이 되는 부분, 그리고 각 연별 세부 히스토리 작성 방법(글 작성과 같이 post 타입을 따로 만들어 관리하는 게 베스트) 추가 등 개발을 더 해야 할 부분들이 있어서 이 부분은 패스했습니다.

페이지 만들기 2.

마우스 호버 시 이미지가 전환이 되는 외부 링크들이 있는 페이지를 만들어 봅니다.

4개의 칼럼은 우선 빌더에서 Row를 4개로 나누고, 그다음 이미지 + 텍스트 조합으로 각 칼럼을 구성하면 되겠습니다. 참고사이트 디자인을 보면 이미지에 마우스를 가져가 보면 다른 이미지가 나오는 것을 볼 수 있는데 이러한 효과를 호버 효과라고 합니다.

이건 이미지 빌더 요소를 넣을 때 같은 사이즈의 백그라운드 이미지를 넣고, 마우스 호버 시 이미지의 opacity(투명도)를 0으로 바꿔주면 간단히 해결이 됩니다. transition 속성을 이용 시 시간을 두고 투명도가 변경이 되는 효과를 줄 수 있습니다.

나머지 페이지 3.

뉴스레터 가입용 폼이 존재하는 페이지와 탭이 없이 화면 요소들만 나열되는 페이지가 존재합니다.

뉴스레터의 경우는 대개 어드민에서 메일을 발송하는 게 아니라 대량 메일을 발송하는 서비스에 가입을 해서 가입자들에게 메일을 보내게 되는데요, 이러한 서비스에 가입을 하면 사이트에 적용을 할 수 있는 폼 코드를 안내해 줍니다. 그러면 이걸 적용할 어떤 페이지 내에서 대개 html + js코드 이 묶음을 한 곳에 넣으면 가입한 서비스와 연동이 되어서 가입자가 자동 등록이 됩니다.