#6-2. 메인 페이지 - 슬라이더
상점 소개 사이트 만들기
참고사이트 메인 페이지의 맨 위쪽에는 브라우저의 화면 전체를 덮는 슬라이더가 나옵니다.
특징을 한 번 분석해 보면, 처음 페이지가 로딩이 완료되면 슬라이더가 위에서 아래로 펼쳐진 다음, 몇 장의 사진이 백그라운드로 표시가 되는데, 일정 시간을 두고 fade-in 효과와 크기가 서서히 줄어드는 형태로 사진이 전환이 됩니다. 중앙에는 로고와 숨겨진 헤더를 대신할 메뉴가 고정되어서 표시됩니다.
이걸 적용하는 과정은 아래와 같습니다.
1. 섹션을 전체 화면을 꽉 차는 높이로 만들기
어떤 웹 요소의 높이를 현재 이용하는 브라우저의 화면 처음부터 끝까지의 높이로 만들기 위해서는 높이를 css로 min-height:100vh라고 정의만 해 주면 되겠습니다. 그러면 페이지가 로딩될 때 알아서 화면의 높이만큼 꽉 차게 펼쳐집니다. (※ 높이를 고정해서 height:100vh로 하지 않고 최소 높이로 하는 건 가운데 로고와 메뉴가 혹 공간을 넘어갈 경우를 대비하는 겁니다.) css로 직접 적을 필요 없이 로우(섹션) 편집을 열어 보면 'Full Height Row' 체크 박스가 있습니다. 여길 체크하면 이 로우에 최소 높이 100vh가 적용됩니다.
참고사이트의 section의 바깥쪽에는 하얀 테두리가 있습니다(모바일 화면 제외). 내 몸집 안에서 공간을 결정할 때에는 padding을, 내 몸집 바깥의 공간을 띄우거나 할 때에는 margin을 쓰게 되는데, 섹션 위, 오른쪽, 아래, 왼쪽 모두 margin:30px을 지정해 주면 이 테두리의 모습을 갖출 수 있게 됩니다.
그런데, 좌우는 상관이 없지만 전체 높이가 100vh로 꽉 차게 됐는데, 위아래 공간 30px씩(60px)이 더해진 상황이므로 높이를 조정해 줘야 합니다. 모바일 화면 전까지 전체 높이로 된 섹션의 높이를 css의 calc 계산식을 통해 스타일 수정을 해 주면 되겠습니다. admin-bar는 워드프레스는 로그인을 하면 화면 상단에 검은 바(32px)가 생기는데 이게 있을 경우를 고려한 부분입니다.
@media screen and (min-width: 900px) {
.l-section.full_height {
min-height: calc( 100vh - 60px );
}
.admin-bar .l-section.full_height {
min-height: calc( 100vh - 92px );
}
}
( 전체 높이의 섹션 )2. 배경 이미지 슬라이더 적용
참고사이트의 경우 slick slider를 배경 이미지용 슬라이더 구조를 위해 사용했습니다. jQuery를 이용한 플러그인(워드프레스 플러그인 X)인데, css와 이 플러그인의 조합으로 슬라이더를 구현한 거로 보입니다. 이미지 태그들을 먼저 화면에 표시 후 > slick slider에서 정해놓은 jQuery 함수를 이용하면 이미지가 슬라이드 형태로 전환되는 방식입니다.
Impreza 테마의 경우 로우 편집을 보면 옵션 몇 가지로 로우 전체에 슬라이더를 넣을 수 있게 개발이 돼 있습니다. RoyalSlider라는 플러그인을 기반으로 테마 개발자가 개발해 놓은 것인데, 참고사이트와 같은 Fade 전환 효과로 적용하면 간단히 해결이 되었습니다. (※ 배경 이미지만 변경이 되는 경우에 쉽게 적용 가능)
+ 만약 텍스트도 변경이 되는 구조일 때는?
저라면 배경 이미지가 전환이 되는 속도와 동일하게, 로우 안에 캐러셀 요소를 이용해서 슬라이드 되는 구조를 사용합니다. 또는 아예 배경 이미지를 포함한 전체 로우를 캐러셀 형태로 불러다 표시하는 방법도 있습니다. (grid 디자인을 full content로)
3. 나머지 효과 적용하기
1) 슬라이더 등장 효과
메인 페이지의 모든 화면 요소들의 로딩이 완료가 되면, 슬라이더가 흰 배경으로 덮여 있다가 아래로 펼쳐지는 효과가 있습니다. 맨 위 섹션의 이름을 main-top이라고 지었고, css의 :before를 이용해서 가상의 가리개를 만들어 줬습니다. 그다음 페이지가 다 로딩이 된 다음 loaded라는 클래스 명만 넣어주면 높이가 0으로 되면서 transition 효과가 발생되도록 했습니다. (transition : A 상태에서 B 상태로, 지정한 속도로 변경)
페이지가 로딩이 되면 main-top이라는 id를 가진 섹션에 클래스를 넣는 방법은 이렇습니다. 자식 테마의 functions.php에서 메인 페이지만의 스크립트를 추가했습니다.
2) 슬라이더 이미지 크기 변화
이미지가 전환이 될 때 1.1배의 사이즈였다가 서서히 줄어서 섹션의 크기와 동일하게 바뀌는 효과를 넣어야 합니다. 현재까지 적용된 슬라이더의 구조를 보면 슬라이더의 플러그인 코드에 의해 각 이미지 슬라이드의 상태가 몇 초마다 자동으로 바뀌는 걸 볼 수 있습니다. 만약 보이는 슬라이드에는 'active'라던지 기타 작동된 상태임을 표시하는 클래스가 추가됐다 빠졌다를 하면 css로 transition 효과를 추가로 넣을 수 있을 것인데, 관찰을 해 보면 style 정의가 바뀌면서 보였다 안 보였다를 하는 거로 확인이 되네요.
이럴 때 사이즈를 변경하는 효과를 적용할 수 있는 방법은 css의 animation을 이용하는 겁니다. animation은 display:none(안 보이게) > display:block(보이게) 상태 변화 시 작동이 될 수 있기 때문입니다. 아래와 같은 애니메이션을 만든 다음, 각 슬라이드에 들어있는 클래스명 rsSlide에 animation이 동작되도록 css를 추가했습니다.
@keyframes scaleToOrigin {
0%{transform:scale(1.1)}
100%{transform:scale(1)}
}
.rsSlide { animation: scaleToOrigin 5s ease forwards; }
여기까지 적용하면 메인 페이지에서 첫 번째 섹션(전체 화면 슬라이더 구조)이 완성이 됩니다.
추가로, 잠시 슬라이더를 적용하는 데 대한 제 경험을 말씀드리면,
유료 테마들 중에는 번들 플러그인들(유료인데 테마 구매 시 제공)이 같이 제공이 되는 경우가 많습니다. 이 중에 슬라이더를 구현하기 위한 플러그인인 Layerslider 또는 Slider Revolution, 아니면 둘 모두 포함된 경우가 많은데요, 이 플러그인들은 가급적 사용을 하지 않는 게 좋을 듯합니다.
왜냐하면 엄청 크리에이티브한 사이트가 아니라면 대부분의 웹사이트에서 메인 상단에 사용되는 이미지나 텍스트의 전환을 위한 슬라이더로는 너무 기능이 많습니다. 그만큼 무겁기도 하고요. 만약 제공되는 템플릿 정도의 화면을 별도의 개발 없이 구현하는 게 목표라면 쓰는 게 맞지만, 이것도 번들로는 구현이 안 되고 별도로 또 라이선스를 구매해야 가능합니다. (Impreza도 번들 플러그인으로 제공은 함)
그보다는 페이지 빌더의 기능을 활용하거나, 마음에 드는 jQuery 슬라이더용 플러그인을 적용해서 사용을 하는 게 여러모로 간편하고 편리했던 것 같습니다.
다음으로는 메인 페이지의 아래쪽 화면을 구성하는 과정으로 이어집니다.
계속...
