📅 6월 1, 2025

How To

Alex Ruben

Wix Studio로 패럴랙스 스크롤링 효과를 만드는 방법

배경이 콘텐츠와 다른 속도로 움직이는 패럴랙스 효과를 통해 웹사이트의 분위기를 한층 더 돋보이게 하면 시각적인 효과를 크게 높일 수 있습니다.하지만 Wix Studio를 처음 사용하는 초보자에게는 솔직히 좀 까다로울 수 있고, 때로는 직관적이지 않기도 합니다.그래서 복잡한 코드 없이도 간단한 효과를 얻고 싶을 때 활용할 수 있는 방법을 소개합니다.

필수 조건

요소를 다루기 전에 다음 사항이 있는지 확인하세요.

Wix 계정이 필요합니다.아직 없으시다면 wix.com 에서 가입하세요.
Wix Studio 편집기에 액세스하는 방법(클래식 편집기를 사용하는 경우 프로세스가 다를 수 있음)
Wix를 사용하는 방법에 대한 대략적인 아이디어이지만 걱정하지 마세요.익숙해지면 대부분 드래그 앤 드롭으로 가능합니다.

1단계: 로그인 및 Wix Studio 진입

브라우저를 열고 wix.com 으로 이동 하여 로그인하세요.대시보드에 들어가면 Wix Studio를 이용해야 합니다.간혹 숨겨져 있는 경우도 있습니다.일반적으로 사이트로 이동하여 ‘ 사이트 편집기’를 클릭한 다음 ‘Wix Studio에서 열기’ 옵션을 찾으세요.

2단계: 페이지 및 섹션 선택

Wix Studio에 접속한 후, 멋진 패럴랙스 효과를 적용할 페이지를 선택하세요.페이지 목록이 표시되면 원하는 페이지를 클릭하고 섹션을 추가하거나 수정할 영역을 찾으세요.

이제 필요한 경우 새 섹션을 추가합니다.요소 추가 버튼(더하기 아이콘)을 클릭합니다.일반적으로 스트립 배경이나 빈 스트립 중에서 스트립 또는 섹션을 선택합니다.

3단계: Parallax 사용자 지정 및 활성화

새 섹션을 클릭하여 선택하세요.오른쪽에서 스크롤 효과 같은 옵션을 찾아보세요.바로 여기에 마법이 숨어 있습니다.클릭하고 패럴랙스(Parallax) 를 선택하세요. Wix는 가끔 제대로 작동하지 않을 때가 있습니다.일부 설정에서는 새로 고침하거나 여러 번 셔플해야 고정됩니다.계속 클릭만 하세요.

왜 이게 도움이 될까요? 스크롤 효과를 패럴랙스로 전환하지 않으면 배경이 고정되어 레이어드 효과를 줄 수 없기 때문입니다.패럴랙스 효과를 켜면 스크롤할 때 배경이 다른 속도로 움직이기 시작합니다.

4단계: 배경 및 시차 설정 조정

배경을 설정할 시간입니다.‘배경 변경’을 클릭 하고 이미지를 업로드하고 색상을 선택하세요.이미지는 반드시 고해상도여야 합니다. Wix는 복잡한 설정을 해야 하고, 흐릿한 배경은 분위기를 망치기 때문입니다.

이미지 설정에서 “시차 활성화” 옵션을 켜세요.이 옵션을 켜면 배경이 전경 콘텐츠에 비해 느리게 또는 빠르게 움직여 몰입감 넘치는 깊이감을 제공합니다.모든 이미지가 동일하게 반응하는 것은 아니므로, 크기나 배치를 조정해야 할 수도 있습니다.

5단계: 저장, 미리 보기 및 조정

오른쪽 상단의 ‘ 저장 ‘ 버튼을 눌러 콘텐츠를 저장하세요.그런 다음 ‘미리보기’를 클릭 하고 아래로 스크롤하세요.효과가 제대로 작동하면 배경이 다른 속도로 움직이는 것을 볼 수 있습니다. Wix가 실시간 업데이트를 항상 정확하게 제공하지는 않기 때문에 등록하는 데 1~2초 정도 걸리는 경우가 있습니다.

전문가 팁: 데스크톱과 모바일 모두에서 테스트해 보세요.패럴랙스는 보기에는 좋지만 반응성에 주의하지 않으면 모바일 화면에서 제대로 작동하지 않을 수 있습니다.

추가 팁 및 일반적인 문제

좀 이상하긴 하지만, 효과가 나타나지 않는다면 다음 사항을 다시 한번 확인해 보세요.

배경 이미지가 고해상도인지 확인하세요.픽셀화된 이미지는 효과를 죽입니다.
스크롤 효과를 무효화할 수 있는 충돌하는 애니메이션이나 오버레이를 끕니다.
때로는 설정을 변경한 후 페이지를 다시 로드하거나 캐시를 지우면 도움이 됩니다.
모바일에서 효과가 사라지면 “모바일에서 숨기기” 토글을 체크하세요.모바일에서는 패럴랙스가 제대로 작동하지 않는 경우가 많으며, Wix에서 설정을 자동으로 숨길 수도 있습니다.

이것을 언제 사용해야 하나요?

시각적으로 풍부하고 역동적인 느낌을 원할 때, 특히 랜딩 섹션, 헤더, 또는 히어로 영역에 적합합니다.페이지가 평평하거나 정적인 느낌을 준다면, 적절한 타이밍의 패럴랙스 효과를 적용하면 별다른 어려움 없이 시선을 사로잡을 수 있습니다.하지만 너무 과하게 적용하지 마세요.너무 많은 움직임은 오히려 방해가 될 수 있습니다.

자주 묻는 질문

한 페이지에 여러 개의 패럴랙스 섹션을 추가할 수 있나요?

네, 문제없습니다.과정을 반복하고 각 섹션에 패럴랙스를 다시 켜세요. Wix가 스크롤 효과를 처리하는 방식에 따라 가끔씩 효과가 다르게 나타날 수 있지만, 일반적으로는 잘 작동합니다.

Wix에서 패럴랙스를 구현하려면 코딩이 필요합니까?

아뇨, Wix는 시각적인 측면으로 당신을 끌어들였어요.그냥 설정을 바꾸고 이미지를 고르기만 하면 되죠.더 세밀하게 제어하고 싶다면, 네, 맞춤 코드가 도움이 될 수 있지만, 그건 또 다른 이야기입니다.

패럴랙스에 적합한 배경 이미지는 무엇일까요?

넓고 고해상도의 이미지, 즉 풍경이나 레이어가 있는 추상적인 이미지를 찾으세요.해상도가 낮으면 스크롤할 때 픽셀이 깨지는 경향이 있으므로 선명할수록 좋습니다.

요약

스크롤 효과를 활성화하고 Parallax를 선택하세요.
가장 좋은 효과를 얻으려면 고품질 배경을 사용하세요.
Wix는 일관성이 없을 수 있으므로 다양한 기기에서 미리 보세요.
과하지 않게 하세요.미묘한 움직임이 가장 잘 어울립니다.

누군가에게는 몇 시간이라도 단축될 수 있기를 바랍니다. Wix의 특이한 점들은 귀찮지만, 일단 익숙해지면 꽤 깔끔해 보입니다.도움이 되기를 바랍니다.