‍

Midjourney & GSAP 슬라이더 만들기

시선을 끌고 기억에 남는 웹사이트를 만들려면 이미지와 인터랙션이 무엇보다 중요하다고 생각합니다. 그래서 Midjourney와 GSAP을 사용해 인터랙티브 슬라이더를 연습용으로 만들어봤습니다.

‍

‍

Midjourney 이미지 생성

작업을 시작하면서 가장 먼저 고민한 건 이미지의 톤과 스타일을 어떻게 통일할 것인가였습니다. AI 이미지 플랫폼을 둘러보다가 비비드한 일러스트 스타일이 눈에 들어왔고, Midjourney의 --sref 기능을 활용해 이 스타일을 여러 이미지에 적용해봤습니다. sref는 스타일을 참조하는 기능으로, 프롬프트만 바꿔도 결과물의 톤과 질감은 일정하게 유지됩니다. 여러 번 실험하면서 이미지 방향을 빠르게 잡을 수 있었고, 원하는 스타일이 유지되는 상태에서 다양한 테스트를 할 수 있었습니다.

‍

‍

GSAP으로 드래그 인터랙션 구성하기

슬라이더의 인터랙션은 GSAP으로 구성했습니다. Webflow에서 구현했고, 사용한 기능은 다음과 같습니다. 참고로 Webflow가 GSAP을 인수해서 Webflow 내부에서도 사용이 가능합니다.

• Observer로 드래그 감지 및 제어
• ticker로 무한 슬라이드 구성
• 카드 그룹 복제로 자연스러운 루프 처리

완성된 링크

‍

‍

왜 왜 왜?

이제는 정말 뭐든 쉽게 만들 수 있는 세상이 됐습니다. 그래서 더 고민하게 됩니다. 나는 무엇을 만들까?