안녕하세요! 

디자인 요소 및 인터랙션이 많은 홈페이지를 직접 구현해보다가 궁금한 점이 생겨 질문드립니다.

1. 백그라운드에 디자인 요소가 많은 페이지의 구현 방식

백그라운드에 디자인 요소가 비중 있게 차지하는 페이지를 식스샵 블록으로 직접 구현해보니, 

단순한 레이아웃이나 스타일은 구현할 수 있었지만 움직이는 그라데이션 배경이나,

여러 요소가 연결되어 움직이는 효과는 블록 단위 작업만으로 구현하기 어렵다고 느꼈습니다.

이런 페이지는 보통 피그마에서 전체 디자인 및 키 비주얼을 먼저 완성한 뒤, 식스샵에서 별도로 인터랙션을 개발하는 방식으로 작업하시는지 궁금합니다.

EX. 백그라운드의 스크롤에 따라 움직이는 그라데이션 요소

EX. 백그라운드 전반에 깔린 디자인 요소(키 비주얼)

2. 페이지 전체에 연결되는 인터랙션 구현 방식

특히 MindMarket처럼 스크롤에 따라 여러 섹션과 요소가 연속적으로 반응하는 사이트를 참고해 구현 시도해봤는데요.

식스샵에서 개별 블록으로 나누어 구현하려고 하니 블록 간 인터랙션을 연결하는 데 한계가 있었고, 

Firecrawl로 레퍼런스 사이트를 분석해 시도해봐도 실제 스크롤 모션이나 애니메이션이 작동하는 방식까지 파악하고 재현하는 데는 한계가 있었습니다.

이런 경우에는

2-1) 식스샵에서도 블록 간 또는 페이지 전체에 연결되는 인터랙션 구현이 가능한지, 아니면 개별 블록 개발이 아닌 별도의 코드 작업이 필요한지
2-2) Firecrawl로 레퍼런스 사이트의 인터랙션을 분석하고 비슷하게 구현하려면 어느 범위까지 활용할 수 있는지, 효과적으로 활용하는 방법이 따로 있는지
2-3) 인터랙션이 많은 레퍼런스 사이트를 구현할 때 실무에서는 어떤 순서로 분석하고 식스샵에 적용하시는지 전체적인 작업 프로세스가 궁금합니다.

제가 시도한 방식의 문제인지, 아니면 애초에 이런 유형의 사이트는 식스샵 블록 개발과 다른 방식으로 접근해야 하는지도 궁금합니다!