brunch

매거진 IMPREZA 테마 활용

라이킷 14 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by oksambari Dec 06. 2021

#6-3. 메인 페이지 - 아래쪽 상품 바로가기

상점 소개 사이트 만들기

메인 페이지 슬라이더 구조 아래에는 안 보이다가 화면 스크롤 시 효과와 함께 나타나는 섹션들과(상품 바로가기 등 전 사이트의 내비게이션 역할) 맨 아래에는 주요 뉴스가 나오는 섹션이 있습니다.

메인 페이지를 구성할 때 중점적으로 고려했던 부분들을 먼저 정리해 보면 이렇습니다.

1. 섹션들의 최대 넓이는 없고, 화면을 꽉 채우는 형태로 표시

(최대 콘텐츠 넓이 1450px인 다른 페이지와 다름)

2. 섹션의 좌우 공간은 padding 또는 margin으로 조절

3. 스크롤할 때 화면 요소가 등장하는 것을 체크해야 함

(섹션이 화면 내에 있을 때 class명이 섹션에 추가되어 > transition 효과 발생)

4. 이미지와 텍스트가 일부 겹치는 디자인 표시

그러면 한 부분씩 정리를 한 번 해보겠습니다.

1. 섹션 넓이와 공간 정의

첫 제작 과정에서 테마 옵션을 통해 콘텐츠의 총넓이를 1450px로 설정을 했었습니다. 그러면 어떤 섹션이든 그 안에 콘텐츠들(이미지, 텍스트 등)을 추가하면 이 넓이 안에서 배치가 됩니다. 그런데 디자인상 메인 페이지에서는 1450px을 넘어서 화면 좌우를 꽉 채우는 형태로 콘텐츠가 표시되어야 합니다.

해결 방법은 최대 넓이가 이 로우에서는 예외가 되도록 하면 되는데요, 로우 편집에서 'Full Width Content'에 체크를 하면 약속된 클래스 'width-full'이 추가가 되어 최대 넓이(max-width:1450px)가 적용되지 않게 됩니다.

좌우의 여백을 설정할 차례입니다. 디자인에 따르면 좌우의 공간은 % 형태로 적용돼 있습니다.

적용 방법은 로우(섹션) 편집에서 디자인 탭에 있는 Spacing 설정을 이용해서 값을 적용하면 되는데, pc에서는 상하좌우 0, 5%, 10vw, 5%로, 모바일 화면에서는 0, 0, 10vw, 0으로 아래쪽에만 공간을 남기면 디자인대로 브라우저의 화면 크기에 따라 좌우로 꽉 차는 로우가 완성됩니다.

참고로, 디자인 탭에서 설정한 값들은 css를 적는 것과 같은 역할을 합니다. 나중에 화면을 열어 보면 설정한 수치들은 css로 변경되어 화면에 적용돼 있는 걸 볼 수 있습니다.

맨 아래쪽 TOPICS가 나오는 로우도 미리 정리하면, 로우 내에서 설정한 패딩이나 백그라운드 색은 로우 안에서만 적용됩니다. 여기에 왼쪽 아래쪽의 공간을 margin으로 띄워주면 디자인대로 좌측이 들여 쓰기 된 것 같은 로우가 표시될 수 있습니다. 모바일에서는 다시 마진을 0으로 변경하면 되겠습니다.

2. 화면 요소의 등장 효과 적용

웹에서는 현재 보는 화면이 어느 정도의 크기이고, 어느 부분까지 스크롤이 돼 있고, 체크할 대상은 이 안에 있는지(상하좌우 위치를 다 확인 가능) 등을 체크할 수 있는 다양한 방법들이 있습니다. (jQuery element inview check로 검색) 저는 검색 중 inView라는 이름의 jQuery 플러그인을 하나 찾았습니다.

사용법도 복잡하지 않고, 코드 자체가 길지 않아 저는 functions.php를 이용해서 스크립트를 추가해 봤습니다. 문서대로 따라 하면 체크해야 할 요소의 클래스명(붉은 박스)만 정한 다음 페이지 구성 시 체크를 원하는 화면 요소에 클래스만 넣어주면 될 정도로 간단합니다.

로우 안에서 중심이 될 수 있는 요소를 가지고 체크를 하면 좋을 것 같아서 각 로우 안에 있는 상품의 제목을 체크 대상으로 했습니다.

원리는 이렇습니다.

모든 요소들은 투명도가 0이거나, 안 보이게 돼 있다가 > 타이틀 요소가 화면 안으로 들어오면 > 이 타이틀이 들어 있는 로우에 inView라는 클래스가 추가 되고 > inview라는 클래스가 추가가 되는 순간 그 안에 있던 타이틀, 이미지, 텍스트 박스에 css로 정의한 transition이 시작되는 원리입니다.

section .element { 상태 1 }
>>
section.inView .element { 상태 2 }

설명을 적다 보니 더 쉬운 방법이 이미 있는 걸 알았습니다.

페이지 빌더의 모든 요소는 디자인 탭 내에 Animation 설정이 있습니다. 로우 자체도 위로 떠오르는 효과가 있으니 여기서 애니메이션을 설정하면 되는데, 그렇다는 건 이미 테마 자체에 inView와 같은 체크 방식이 있는 겁니다. 관찰해 보니 애니메이션을 넣으면 요소에 'us_animate_this' 클래스가 붙었다가 화면에 등장하면 'us_animate_this start'로 클래스가 추가 되면서 바뀌게 되네요. 그렇다면 로우에 애니메이션을 넣고, 'start'라는 클래스가 추가되는 것을 이용하여 그 안에 있는 요소들에 효과를 주면 간단히 해결이 될 듯합니다.

크게 4가지 효과가 적용 됐습니다.

로우는 살짝 위로 올라오면서 등장하고, 이미지를 덮고 있는 하얀 배경은 오른쪽으로 밀려서 없어지고, 타이틀은 왼쪽에서 등장, 아래 텍스트 블록은 위로 올라옴

3. 겹치는 화면 요소 만들기

참고사이트를 보면 이미지 위에 타이틀, 그리고 텍스트 박스가 올려져 있는 형태입니다.

페이지 빌더가 있으니 css를 하나하나 입력하지 않고 적용할 수 있겠습니다.

우선 크게 타이틀을 위한 텍스트, 이미지, 텍스트와 버튼을 감싸는 박스 이렇게 총 3개가 필요하겠네요. (※ 왼쪽 하단의 이미지는 :before를 이용해서 가상의 공간에 배경 이미지를 넣은 것이라 생략했습니다)

1) 타이틀

글자 크기, 여백, 배경색 등을 '디자인 탭'을 이용해서 적용할 수 있습니다. 이미지의 위로 오려면 position이라는 css 속성을 이용하면 되는데요, 위 사진에서 녹색을 제외한 하늘색 부분이 이 로우의 콘텐츠가 들어갈 수 있는 공간입니다. position:absolute를 설정해 주면 이 파란색에서 어디에 위치할 것인가를 결정할 수 있게 되는데, 디자인대로 위에서 30px 위치에 있도록 했습니다. 요소가 두 개 겹치는 상황이므로 아래에 있을 image 요소보다 높은 z-index: 2를 지정해 줬습니다. (※ image -> z-index:1, 오른쪽 텍스트 박스 -> z-index:2)

2) 이미지

가로로 최대로 펼쳐질 이미지의 사이즈와 비율을 고려해서 이미지를 넣었습니다. ( > 화면이 더 커질 경우 배경 이미지로 대체 ) 이미지로 넣을 때의 장점은 화면이 작아져도 이 비율이 유지된다는 점입니다. 배경으로 넣을 수도 있는데 이 때에는 최소 높이를 계속 고려해서 넣어야 그 공간에 배경이 표시됩니다.

3) 오른쪽 텍스트 박스

하나의 묶음으로 공간 및 위치를 잡으려고 텍스트 블럭 하나로 만들었습니다. 박스의 최대 넓이와 왼쪽 마진 auto를 설정하면 오른쪽에 있게 되고, 위로 - 마진값을 주면 위로 올라가게 되는데, 이 때 이미지보다 높은 z-index를 주면 위로 놓이게 됩니다.