웹플로우(Webflow)로 코드없이 화려한 인터렉션 만들어보기

노코드 서비스 웹플로우(webflow)를 활용하여 어디까지 개발이 가능한가?라는 주제로

글을 쓰고 있습니다.

1. 웹플로우(webflow)로 인터렉티브 웹사이트 만들기

   • 토스랜딩페이지 클론하기

   • 웹디자인 awwwards 수상작 클론하기(현재 포스팅)

2. 웹플로우(webflow)와 노코드 툴을 활용하여 웹서비스 만들기

이번 포스팅은 웹디자인 awwwards같은 수상작과 같은 화려한 인터렉션을 클론하는 것인데요.

정확하게 awwards 수상작은 아니지만, awwwards 수상작과 같은 화려한 웹사이트를 가져와봤습니다.

@연주환 님과 함께 한해동안 작업한 웹디자인 포트폴리오를 직접 웹사이트로 구현하는 [연말정산 프로젝트]를 진행하고 있습니다.

현업 디자이너분들, 취업을 준비하시는 분들이 참여해주셔서 webflow의 기본적인 내용을 배우고, 본인만의 포트폴리오를 웹으로 만들고 계신데요. 거기서 교육자료 함께 만들어본 내용을 공유드립니다.

다음 게시글에서는 [연말 프로젝트]가 어땠는지, 공유해드리겠습니다.

스크롤 인터렉션 분석해보기

들어가기 전에 먼저 위 인터렉션을 자세히 분석해봅시다.

1. 스크롤에 따라 "Work"와 "Our recent"라는 텍스트가 일정 수준으로 작아집니다.

2. Work(Our recent)라는 글자가 특정 영역에서 가운데 화면에 고정되어있습니다.

1. 이미지 요소들이 커지면서 등장했다가 작아지고, 투명해지면서 사라집니다.

이와 같은 분석결과를 구현하기 전에 뼈대를 만들고 스타일을 구현해보겠습니다.

뼈대 만들어보기

지난 글들에서도 많이 다뤘지만, 인터렉션을 만들기 전에 뼈대와 스타일을 잡는 것이 중요합니다.

뼈대 구성하기

전체적인 큰틀과 레이아웃을 이렇게 잡아보았습니다.

webflow, 브라우저, 피그마에서는 모두 마찬가지지만,

각각의 요소들이 모두 박스처럼 구성되어 있어서 박스형태로 구성요소들을 잡아주고

만들어나가는 것이 편합니다.

뼈대 만들기

텍스트 구성하기

이미지 레이아웃 구성하기

이미지 아이템 박스만들기

스타일 넣기

스크롤 인터렉션 적용하기

이제 본격적으로 스크롤 인터렉션을 만들어보겠습니다.

지정한 스크롤 영역에서 스크롤되는 동안 텍스트를 가운데로 고정하기

아래는 완성본인데요. Work라는 텍스트가 스크롤이 아무리 되어도 가운데 특정 위치를 지키고 있는 모습을 볼 수 있습니다.

이 인터렉션은 복잡해보이지만, 사실 position: sticky 속성 하나면 충분합니다.

position: sticky 속성은 부모가 스크롤하는 동안 화면 영역(Viewport)의 특정 영역에 고정된 상태로 이동하는 속성입니다. 위의 애니메이션을 보면, work라는 글자가 특정 영역에 고정된 상태로 이동하는 모습을 볼 수 있습니다.

위의 그림은 position: sticky를 표현한 그림인데요. 1번 그림에서 동그란 요소는 자기의 높이를 지키고 있다가, 2번째 그림에서 스크롤이 진행되고, 화면 영역이 특정 높이를 지날 때, 고정되어서

3번, 4번 그림처럼 부모요소의 스크롤 영역동안 화면 영역에 고정되어 스크롤되는 것을 볼 수 있습니다.

스크롤에 따라 텍스트 크기 작게 만들기

스크롤에 따라 텍스트 크기를 작게 만들려면 while scrolling in view 트리거를 먼저 알고 넘어가야 합니다.

While scrolling in view 트리거는 애니메이션 트리거의 한 종류입니다.

트리거는 간단하게 말해서 애니메이션을 언제 실행할 것인지를 결정하는 계기입니다.

위의 그림을 보면 while scrolling in view 트리거를 잘 표현하고 있습니다.

검은색 상자가 전체 웹사이트 페이지, 파란색 영역이 화면 영역, 빨간색 영역이 특정 박스의 높이, Work는 특정 텍스트 요소라고 가정합니다.

스크롤이 될 때마다 파란색 화면 영역은 아래로 움직입니다.

While scrolling in view 트리거를 빨간색 박스 영역에 지정한다면,

빨간색 박스영역이 화면영역에 드러나는 순간을 0%,

화면에서 사라지는 영역이 100%되면서 트리거가 설정됩니다.

이렇게 지정된 0% ~ 100% 사이에 영역에서 특정 요소가 어떻게 변할지 애니메이션을 넣을 수 있습니다.

위 그림에서는 0%에서 70%의 영역으로 갈 때, work라는 글자가 작아지도록 설정했습니다.

1번그림에서 3번 그림으로 갈수록 work라는 텍스트가 작아지는 것을 알 수 있습니다.

이러한 트리거와 애니메이션을 webflow에서 직접 설정해주면 아래와 같습니다.

이미지 요소들 커졌다가 사라지게 만들기

위처럼 이미지 요소들은 등장할 때, 커졌다가 특정 지점을 넘었을 때, 작아지고 투명해지면서 사라집니다.

이건 아까 위에서 배웠던 while scrolling in view 트리거가 이미지를 감싸는 박스 요소 하나하나에 설정되었던 것인데요. 설정 방법은 아래와 같습니다.

6번을 보면 아까와 달리 여러가지 애니메이션들이 중첩되어서 사용됩니다.

이는 while scrolling in view 중에 커졌다가, 다시 작아지는 것을 표현한 scale 애니메이션과 투명도가 진해졌다가 다시 연해지면서 사라지는 애니메이션을 표현했기 때문입니다.

전체결과는 아래의 웹사이트에서 확인하실 수 있습니다.

(첫 화면은 흰색인데, 아래로 스크롤해보세요)

다음 게시글에는

이제 계획했던 노코드 서비스 웹플로우(webflow)를 활용하여 어디까지 개발이 가능한가?에서

인터렉티브 웹사이트 만들기의 챕터가 끝났는데요. 다음주부터는 새로운 주제로 포스팅해보도록 하겠습니다.

1. 웹플로우(webflow)로 인터렉티브 웹사이트 만들기

   • 토스랜딩페이지 클론하기

   • 웹디자인 awwwards 수상작 클론하기(끝)

2. 웹플로우(webflow)와 노코드 툴을 활용하여 웹서비스 만들기

Outro

코드없이 디자이너/기획자분들의 포트폴리오를 웹사이트를 제작하는 [연말정산 프로젝트]가 이번주 토요일 오프라인 세션을 끝으로 마무리됩니다.

참여해주신 반응과 리뷰가 좋아서 가장 빠르게 1월 말쯤 새로운 프로젝트 진행을 계획하고 있습니다.

노코드로 본인만의 포트폴리오를 만들고 싶으신 분들은 언제든지 참여바랍니다.