시차 스크롤 가이드

시차 스크롤링은 가장 매력적인 디자인 사례를 논의할 때 소개할 필요가 없습니다. 일반적으로 Parallax Scrolling은 WordPress 웹 사이트에서 널리 목격됩니다. 배경 그림이 전경 요소보다 느린 속도로 움직이는 효과입니다. 이것은 평평한 2차원 표면에 3차원이 있는 것처럼 보이게 합니다. 많은 게임이 이 트렌드를 오랫동안 사용했지만, 비교적 최근에 웹 디자인에 진출하여 큰 인기를 얻었습니다. 웹 서핑을 할 때 그것이 무엇인지 몰랐더라도 어디선가 본 적이 있을 정도로 널리 퍼져 있습니다. 시차 스크롤의 개념은 매력적이고 독특하게 보이는 환상을 만드는 데 사용됩니다. 웹 디자인에 미적 가치를 더하고 시차 스크롤의 콘텐츠에 주의를 집중시켜 어수선한 부분에서 가치 있는 콘텐츠를 강조 표시하는 데 도움이 됩니다.

이 디자인 트렌드는 플랫 디자인 트렌드가 등장하면서 시작되었습니다. 플랫 디자인 트랜드 이전에는 리얼리즘 디자인이 트랜드였습니다. 이러한 추세로 인해 그림자, 반사 및 기타 트릭에 중점을 두어 깊이감과 3차원적인 느낌을 연출합니다. 평면 디자인은 지나치게 2차원적이었고 이러한 트릭은 3차원 모양을 만드는 데 효과가 없었습니다. 이러한 간극을 보고 시차 스크롤링(parallax scrolling)이 평면 디자인에 3차원을 도입하는 개념으로 등장했습니다.

시차 스크롤링을 더 자세히 이해하려면 먼저 왜 투자할 가치가 있는지 살펴봐야 합니다.

1. 사용자 경험이 크게 향상됩니다.

핀

어떤 사람들은 시차 스크롤이 아무런 기여 없이 UI에 복잡성을 추가하는 추가 기능이라는 견해를 가지고 있습니다. 그러나 마이크로 인터랙션과 애니메이션은 평평한 사용자 얼굴과 비교하여 매력적인 사용자 인터페이스를 만드는 데 큰 차이를 만들기 때문에 사실이 아닙니다. 사용자 경험(UX)이 탁월한 가치를 지니고 있습니다.

2. 스토리텔링 과정을 돕습니다.

핀

다른 사람에게 이야기를 들려줘야 한다면 어렵지 않게 할 수 있습니다. 그러나 웹사이트 디자인에서 스토리텔링의 용이성과 흐름을 동일하게 유지하는 것은 매우 어려울 수 있습니다. 점을 연결하고 전환을 용이하게 하고 청중을 계속 매료시키는 것은 종종 까다롭습니다. Parallax scrolling은 스토리의 흐름을 위한 매력적이고 몰입감 있는 경험을 만들어줌으로써 이 문제를 해결하는 데 도움이 됩니다. 배경 요소와 전경 요소의 속도에 차이가 있으므로 요소를 효율적으로 페이싱하면 스토리텔링 경험을 크게 향상시킬 수 있습니다.

3. 이탈률의 현저한 감소:

핀

이탈률은 웹 사이트를 완전히 방문하기 전에 웹 사이트를 클릭하고 탭에서 뒤로 버튼을 클릭하는 사람들의 수를 나타냅니다. 빈번하고 높은 이탈률은 SEO 순위에 큰 영향을 줄 수 있습니다. 시차 스크롤링 웹사이트는 대부분이 단일 페이지 스크롤링 사이트이기 때문에 이탈률이 훨씬 낮습니다. 사용자가 시차 스크롤을 목격함으로써 얻을 수 있는 동적 경험은 사용자의 참여를 유지합니다.

시차 스크롤 사용의 이점을 살펴보았으므로 이제 웹 디자이너가 사용할 수 있는 다양한 종류의 시차 스크롤 기술에 대해 논의할 수 있습니다. 시차 효과에는 두 가지 광범위한 범주가 있습니다. 스크롤 기반 시차 효과 및 마우스 기반 시차 효과.

스크롤 기반 시차 효과는 웹 사이트를 아래로 스크롤할 때 경험할 수 있는 시차 효과입니다. 각 유형의 시차 스크롤은 서로 다른 필요와 목적을 충족합니다. 시차 스크롤 효과 중 일부는 다음과 같습니다.

1. 시차 배경 스크롤:

시차 스크롤을 사용하는 가장 오래되었지만 효과적인 방법 중 하나입니다. 이를 사용하여 사용자가 웹 사이트에서 스크롤할 때 배경 이미지가 변경됩니다. 이것은 스타일로 매력적인 이야기를 전하는 데 도움이 됩니다.

2. 시차 수직 스크롤:

Parallax Vertical Scroll은 다른 속도로 움직이는 플로팅 요소를 사용하여 사용자가 웹 사이트가 함께 움직이는 것처럼 느끼도록 하려는 웹 사이트에 이상적입니다. 이것은 여러 레이어에서도 수행할 수 있습니다.

3. 시차 투명도 효과:

Parallax Transparency Effect는 사용자가 아래로 스크롤할 때 텍스트나 이미지가 천천히 사라지는 부드러운 효과입니다. 또한 사용자가 위로 스크롤할 때 다시 페이드 인됩니다.

4. 시차 수평 스크롤:

Parallax Horizontal 스크롤은 사용자가 웹사이트를 아래로 스크롤할 때 수평으로 움직이는 느낌을 만듭니다. 왼쪽의 요소는 중앙에 더 가깝습니다. 이것은 움직임의 감각을 만듭니다.

5. 시차 스케일 효과:

Parallax Scale Effect를 사용하면 터널 효과를 확대 및 축소할 수 있습니다. 줌이 화면비에 비례하여 시원해 보이는 독특한 착시효과를 줍니다. 사용자를 다른 차원으로 안내하는 워핑 효과처럼 느껴집니다.

시차 스크롤 효과의 다양한 변형에 대해 논의했으므로 이제 웹사이트의 시차 스크롤 효과를 디자인할 때 염두에 두어야 할 필수 디자인 사례에 대해 논의할 수 있습니다.

1. 항상 웹사이트의 주요 목표를 기억하십시오:

핀

시차 스크롤은 재미있고 매력적일 수 있습니다. 시청자 뿐만 아니라 디자이너도 마찬가지입니다. 이것은 인상적인 시차 스크롤 효과가 있고 콘텐츠에 중점을 두지 않는 웹사이트를 갖는 것으로 해석되어서는 안 됩니다. 다른 디자인 요소와 마찬가지로 시차 스크롤은 방문자를 원하는 장소로 안내하는 시각적 신호로 작동해야 합니다. 제품 판매, 콘텐츠 배포 또는 리드 생성과 같은 비즈니스 목표를 달성하는 데 도움이 되어야 합니다.

맥락이나 목적을 염두에 두지 않고 시차 스크롤을 과도하게 사용하면 사이트에서 관중에게 깊은 인상을 줄 수 있지만 효과적인 리드나 전환으로 이어지지는 않습니다. 시차 스크롤을 사용하여 사용자가 원하는 작업의 가능성을 높이십시오. 이를 위한 훌륭한 해킹은 페이지 바닥글에 매력적이면서도 미묘한 CTA를 고정하는 것입니다. 이렇게 하면 사용자가 사이트를 스크롤할 때 시차 스크롤이 작동하는 것을 볼 수 있습니다. 그들은 또한 정적이고 편재하는 하나 또는 두 개의 일정한 버튼을 가질 것입니다. 그러면 방문자가 버튼을 클릭하여 무슨 일이 일어나는지 볼 수 있습니다.

2. 시차 스크롤 효과를 남용하지 마십시오.

핀

시차 스크롤 효과에는 특정 와우 요소가 첨부되어 있습니다. 방문자의 눈에 갑작스런 관심을 불러일으키는 웹 사이트의 평범하고 정체된 특성을 깨뜨립니다. 시차 스크롤을 사용하면 웹 사이트의 요소가 다른 속도로 움직이기 때문에 시차 스크롤을 사용할 때 재미와 혼란 사이의 적절한 균형을 찾는 것이 필수적입니다. 웹 사이트에 빠르게 움직이는 요소가 많거나 움직이는 요소가 너무 많으면 방문자가 따라잡기 어려울 수 있습니다. 웹사이트 전체에 시각적 가이드를 없애고 혼란을 야기할 것입니다.

3. 프로토타입 시차 스크롤 효과를 만들고 테스트합니다.
핀

개발 단계에서 완성하기 전에 항상 대화형 프로토타입을 만드는 것이 좋습니다. 이것은 디자이너가 시차 스크롤 효과를 라이브로 만들기 전에 테스트하는 데 도움이 됩니다. 디자이너는 사용성과 사용자 경험에 대한 효과를 테스트해야 합니다. 시차는 매우 다양하고 접근 방식이 다르기 때문에 다른 사람들에게 다른 방식으로 영향을 줄 수 있습니다. 유용한 시차에서 산만함을 유발하는 시차 스크롤 효과를 만드는 것으로 쉽게 벗어날 수 있습니다. 따라서 객관적이고 웹 디자인 감각이 있는 실제 사용자와 철저히 테스트하십시오. 또한 효과를 만들고 있는 대상이 일반 대상이므로 일반 대상과 함께 테스트하십시오.

4. 모바일 사용을 위한 콘텐츠 계획:

핀

인터넷 서핑은 더 이상 컴퓨터에 국한되지 않습니다. 대신 사용자의 절반 이상이 스마트폰과 태블릿에서 검색하는 것을 선호합니다. Google은 또한 데스크톱과 비교하여 모바일에서 웹사이트를 다르게 규제하고 순위를 매기는 기준에 따라 검색 엔진 결과를 변경했습니다. 즉, 웹사이트가 데스크톱 브라우징에서는 좋은 순위를 기록하지만 모바일 디자인이 비우호적이라면 휴대전화를 통해 검색할 때 Google에서는 순위가 높지 않습니다. 시차 스크롤은 모바일 친화적이지 않습니다. 태블릿은 어느 정도 지원하지만 모바일은 지원하지 않습니다. 이에 대한 실용적인 솔루션은 모바일 사이트에 시차 효과를 사용하지 않는 것입니다.

사이트의 기본 레이아웃은 모바일로 쉽게 번역할 수 있는 방식으로 설계되어야 합니다. 겹치거나 오버플로되는 섹션은 주의해야 합니다. 배경은 콘텐츠의 가독성과 충돌하지 않아야 합니다. 모바일 사이트의 경우 필요한 디자인 요소만 유지합니다. 이렇게 하면 모바일에서 브라우저를 사용하는 사용자가 모바일 데이터를 사용할 수 있습니다. 더 가벼운 사이트를 사용하면 사이트를 더 빨리 로드하고 사이트를 탐색하는 데 더 적은 데이터를 소비하는 데 도움이 됩니다. 그것은 또한 그런 식으로 당신의 SEO 순위에 영향을 미치지 않을 것입니다.

5. 웹사이트의 반응성:

핀

더 이상 웹사이트를 로드하는 데 몇 분 또는 몇 시간이 걸리는 네트워크 연결이 없습니다. 모든 사람은 사용자가 한 웹사이트에 잠시 머물다가 또 다른 순간에 다른 웹사이트로 전환할 수 있는 속도로 인터넷에 액세스할 수 있습니다. 이러한 속도의 용이성과 함께 옵션의 용이성도 함께 제공됩니다. 사람들은 매일 여러 웹사이트를 탐색합니다. 웹 사이트가 상대적으로 빠르게 로드되지 않으면 웹 사이트가 로드되고 놀라운 시차 효과가 나타날 때까지 기다리지 않습니다. 시차는 무거운 속임수이며 최적화하는 경우에도 마찬가지입니다. 페이지 로딩 시간이 걸릴 것입니다. 시차 스크롤링을 유지하는 것이 웹사이트에 크게 기여하고 싶다면 최대한 최적화하는 것이 귀하의 의무가 됩니다.

이제 시차 스크롤의 모든 측면과 이를 최대한 활용하는 방법을 이해했으므로 웹 사이트 디자인에서 시차 스크롤을 효율적으로 구현한 일부 웹 사이트를 살펴보겠습니다.

1. 구니들의 이야기:

핀

이 웹사이트는 고전 영화 The Goonies를 강조하기 위해 전용 시차 스크롤 효과를 사용했습니다. 몰입형 시차 스크롤을 사용하여 영화 줄거리 및 감독 이름, 출시 날짜, 캐릭터 프로필 등과 같은 기타 세부 사항에 대해 이야기합니다. WebFlow를 사용하여 제작되었으며 고전 영화에 대한 찬사로 작동합니다. 웹 사이트를 방문할 때 첫 번째 상호 작용은 사용자가 웹 사이트와 함께 스토리 내부를 여행하는 것처럼 느낄 수 있도록 도와주는 Parallax Scale Effect를 사용합니다. 각 시차 효과는 방문자에게 시각적 큐를 지시하는 데 사용되며 쉽게 수행됩니다. 또한 몰입형 스토리텔링 경험을 위해 오디오를 사용합니다.

2. 도그 스튜디오:

핀

Dogstudio는 예술, 기술 및 디자인이 결합된 크리에이티브 스튜디오입니다. 이를 보여주기 위해 그들은 웹 사이트를 영리하게 디자인했습니다. 웹사이트 중앙에는 사용자가 웹사이트를 계속 스크롤할 때 크기가 조정되고 회전하는 개가 있습니다. 최근 프로젝트 위에 마우스를 올려 놓으면 개의 표시등이 계속 변경됩니다. 마우스 기반 시차 효과도 있습니다. 웹 페이지의 시작 부분에서 마우스를 왼쪽으로 가져가면 개가 오른쪽으로 기울어지고 그 반대의 경우도 마찬가지입니다. 시차 스크롤의 효과적인 사용입니다.

3. 파이어워치:

핀

Firewatch는 Campo Santo에서 만든 게임입니다. 시차 스크롤링을 미묘하면서도 가장 인상적으로 사용하는 이 게임을 홍보하기 위한 웹사이트가 있습니다. 사이트를 방문하면 있는 그대로의 몰입감이 느껴지는 배너 이미지로 처리됩니다. 웹 사이트를 아래로 스크롤하면 이미지와 콘텐츠가 위로 이동하여 간단하면서도 효과적인 시차 스크롤 효과를 만듭니다. 웹 사이트는 6개의 레이어를 사용하여 매끄럽게 만듭니다. 웹 사이트의 나머지 부분은 모든 콘텐츠가 상주하는 정적입니다. 이렇게 하면 지나치게 완료된 시차 효과로 배멀미를 느끼지 않고 콘텐츠를 읽고 게임에 대해 알 수 있습니다. 그들은 시차 효과를 사용하여 관심을 끈 다음 관련 정보를 제공하여 방문자의 관심을 사로잡습니다.

이제 왜 시차 스크롤링이 오늘날 매우 인기 있는 디자인 트렌드인지 알 것입니다. 웹 디자이너가 활용할 수 있는 많은 장점이 있습니다. 사용 가능한 시차 스크롤의 다양한 변형으로 인해 다른 웹사이트와 반복되는 범위가 없습니다. 이 목록에 언급된 웹사이트는 스토리텔링 목적으로 또는 웹사이트의 느낌을 향상시키기 위한 추가 요소로 효과를 사용하는 방법도 다룹니다. 웹 사이트에서 시차 스크롤을 사용해야 하는 이유와 위치를 이해하고 활용하십시오. 미적 가치를 위해 억지로 넣지 마십시오.