화려한 장식이라고 부르든 눈요기라고 부르든, 웹 디자인의 패럴랙스(시차) 효과는 이제 빼앗길 수 없는 트렌드로 자리 잡았습니다. 사이트에 "와우!" 하는 감탄을 불러일 수 있는 몇 안 되는 요소 중 하나죠. 등장한 지 오래되었고 이미 수많은 사이트가 적용하고 있지만, 여전히 매력적인 효과입니다.
여러분의 워드프레스 사이트에도 이 효과를 더해볼 준비가 되셨다면, 끝까지 주목해 주세요.
패럴랙스(Parallax)란 무엇일까?
용어가 낯선 분들을 위해 설명하자면, 사전에서 '패럴랙스(parallax)'는 "관찰 위치가 달라짐에 따라 물체의 위치나 방향이 다르게 보이는 현상"으로 정의됩니다.
웹 디자인 분야에서 패럴랙스는 배경 이미지가 전경 콘텐츠보다 느린 속도로 움직이도록 만드는 기법입니다. 그 목적은 2차원 환경에서 깊이감, 즉 의사 3D 입체 효과를 연출하는 데 있습니다.
사실 패럴랙스는 1980년대 게임 업계에서부터 사용되어 온 기술이지만, 웹 디자이너들이 HTML5와 CSS3를 활용해 본격적으로 널리 도입하기 시작한 것은 2011년경입니다.
첫 번째 방법: 패럴랙스 지원 테마 사용하기
워드프레스 사용자라면 패럴랙스 효과를 적용하는 가장 간단한 방법은 해당 효과가 내장된 테마를 사용하는 것입니다. 테마만 교체하면 끝이니까요.
무료든 유료든 패럴랙스를 지원하는 워드프레스 테마는 이미 수없이 많습니다. 구글이나 워드프레스 공식 테마 저장소에서 간단히 검색해도 감당하기 어려울 만큼 다양한 선택지를 만날 수 있습니다.
몇 가지 테마를 직접 살펴보고 싶은 분들을 위해 테마 저장소에서 발견한 예시들을 소개합니다. 모든 패럴랙스 지원 테마를 일일이 테스트하고 비교하는 것은 불가능하므로, 아래 테마들은 필자의 개인적인 취향을 바탕으로 선별한 것임을 미리 밝혀둡니다.
1. Parallax Frame
2. Marvy
3. SimpleShift
4. Eleganto
5. Integral
6. Zeal
7. Juniper
8. Twenty Seventeen
그리고 잊지 말아야 할 것! 워드프레스의 공식 테마인 Twenty Seventeen 역시 패럴랙스 헤더를 지원합니다.
이런 테마들은 대개 패럴랙스 효과를 위한 전용 영역을 한 곳 또는 몇 곳 제공하며, 해당 위치에 배경 이미지를 업로드하기만 하면 됩니다. 하지만 이런 단순함은 양날의 검이기도 합니다. 자유롭게 응용할 여지가 적다는 것이죠.
테마마다 다르지만, 일반적으로 "외모(Appearance) → 사용자 정의(Customize)" 메뉴에서 배경 패럴랙스 이미지를 설정할 수 있으며, 테마 설정에 따라 해당 메뉴를 찾아 조정하면 됩니다.
두 번째 방법: 패럴랙스 플러그인 사용하기
원하는 특정 영역에 효과를 적용하고 싶다면 플러그인을 사용해야 합니다. 테마만큼 많지는 않지만 시도해 볼 만한 워드프레스 패럴랙스 플러그인은 여전히 다양합니다. 플러그인 저장소에서 만날 수 있는 대표적인 예로는 Parallax Scroll, Easy WordPress Parallax Slider, cbParallax, ML Parallax, MG Parallax Slider, Easy WP Parallax Slider, Aesop Story Engine 등이 있습니다.
이 플러그인 대부분은 패럴랙스 요소를 만들어 숏코드(shortcode) 형태로 글, 페이지 또는 기타 지원되는 영역 어디든 삽입할 수 있게 해 줍니다. 일부 플러그인은 패럴랙스를 표시하고 싶은 위치에서 바로 요소를 생성하기도 합니다.
예를 들어 Parallax Scroll의 경우, 새 글을 작성하듯 새 패럴랙스를 생성할 수 있으며 편집 화면도 비슷하게 구성되어 있습니다. 패럴랙스 배경 이미지를 추가하려면 "특성 이미지 설정(Set featured image)" 옵션을 사용하면 되고, 제목과 본문 내용은 선택 사항입니다.
콘텐츠 입력창 아래에는 세부 조정할 수 있는 다양한 옵션이 마련되어 있지만, 역시 모두 선택 사항입니다.
"발행(Publish)" 버튼을 누르면 숏코드가 생성됩니다. 이 숏코드를 글, 페이지, 위젯 등 지원되는 아무 곳에나 삽입하면 패럴랙스 효과가 나타납니다.
옵션에서 여러 가지를 조정할 수 있다 해도, 최종 결과물은 사용 중인 테마의 영향을 크게 받는다는 점에 유의하세요. 테마가 풀 폭(full width)을 지원한다면 패럴랙스 요소도 화면 가득 멋지게 펼쳐집니다. 그렇지 않다면 결과를 있는 그대로 받아들이거나, CSS와 JavaScript를 활용해 원하는 모습으로 직접 수정하는 방법을 시도해 볼 수 있습니다.
마지막으로 알아두면 좋은 작은 팁 하나: 테마와 플러그인을 함께 사용해도 된다는 사실, 그리고 여러 플러그인을 동시에 사용하는 것도 전혀 문제없습니다. 예를 들어 Twenty Seventeen 테마를 사용하면서 Aesop Story Engine과 Parallax Scroll을 추가로 설치해 사이트에 풍미를 더할 수 있습니다.
이제 패럴랙스 여정을 떠나 방문객들에게 놀라움을 선사해 보세요!