랜딩페이지 해킹1편: 세상의 모든 렌딩페이지 인터렉션을 노코드로 구현한다.

오늘 부셔볼 녀석은 이거다.

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

글을 쓰고 있습니다.

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

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

• 다른 기업 랜딩페이지들 클론하기

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

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

토스랜딩페이지를 클론을 지난 게시글에서 다뤄봤는데요.

랜딩페이지 인터렉션 클론을 이대로 마무리하긴 아쉬워서

국내 스타트업 랜딩페이지 중 멋있는 인터렉션을 가져와서 제작해봤습니다.

거기서 등장하는 인터렉션의 원리와 실습을 같이 진행해보겠습니다.

flex 랜딩페이지의 인터렉션 소개

오늘은 아래 gif에 있는 인터렉션을 구현해볼 것 입니다.

크게 2가지 섹션을 가지고 있습니다.

첫 번째 섹션

첫 번째 섹션은 "모바일은 핵심 경험에 집중"이라는 택스트가

첫 번째 스크롤 섹션이 끝날 때까지 가운데에 고정(position: "sticky")되어 있는 것이 핵심입니다.

화면 영역(Viewport)에 스크롤이 진입했을 때, 배경 색이 검은색으로 바뀌는 것도 특징이네요.

두 번째 섹션

두 번째 섹션은 아래와 같은 레이아웃에서 스크롤에 따라서 문구와 이미지가 바뀌는 인터렉션입니다.

같은 위치에서 이전 문구가 사라지고 새로운 문구가 등장합니다.

아래의 모바일 이미지같은 경우에 등장할 시점에 투명했다가 진해지고, 위로 이동하면서 등장합니다.

또 이미지가 사라질 시점에는 다시 투명해지고, 위로 이동하면서 사라집니다.

아래에서 다시 디테일한 요소들을 분석해보고 기본 세팅을 진행해보겠습니다.

폰트 + 이미지 세팅

원하는 폰트를 입력하고, 이미지를 다운받는 방법은 아래 토스 랜딩페이지를 제작해보면서 자세히 다뤘습니다.

이번 포스팅에서는 간략하게 설명하니, 궁금하신 분은 아래의 포스팅을 참고하시길 바랍니다.

폰트 세팅

flex에서는 Pretendard 폰트를 사용하고 있어서 pretendard로 설정해주겠습니다.

이전에 토스랜딩페이지를 만들 때, 웹플로우(webflow)에 custom fonts로 넣어주었던 Pretendard 폰트를 Body 태그에 설정해주겠습니다.

Body가 가장 부모 요소이기 때문에 Body에만 설정해주면 자식 요소들에게 모두 적용됩니다.

이미지 세팅

지난 포스팅에도 언급했던 것처럼 웹 상에서 보이는 거의 모든 이미지는 클라우드 상에 저장된 것을 가져오기 때문에 다운받아서 사용할 수 있습니다.

이번에도 클론에 필요한 이미지들을 flex 홈페이지로 가서 다운받아주겠습니다.

기본적으로는 이미지에 오른쪽 마우스 클릭 후 저장하실 수 있습니다.

종종 오른쪽 마우스 클릭이 막혀있거나 이미지를 정확하게 선택하기 어려운 경우 아래의 방법을 사용해주세요.

F12나 오른쪽 마우스 클릭 후 검사(inspect)를 누르시면 개발자 도구를 켜실 수 있습니다.

개발자 도구를 켜셔서 왼쪽 상단에 있는 마우스 버튼을 누르시면, 마우스의 이동마다 HTML 요소를 추적할 수 있습니다.

이미지를 다운받길 원하는 요소에 마우스를 올려놓으면 개발자 도구에 해당하는 요소의 코드를 추적할 수 있습니다. 거기에 연결되어있는 링크로 들어가면 실제 이미지에 접근해서 다운로드할 수 있습니다.

https://landing.flex.team/home/mobile/screen01.png

https://landing.flex.team/home/mobile/screen02.png

https://landing.flex.team/home/mobile/screen03.png

https://landing.flex.team/home/mobile/screen04.png

(이렇게 실제 이미지에 접근할 수 있음)

다운받은 이미지들을 웹플로우에 import한 후에 사용해봅시다.

기본 요소 구성하기

우선 인터렉션을 구현하기 전에 구성하고 있는 기본 요소를 제작해보겠습니다.

이 글에서 박스모델에 대해서 잠깐 설명했는데요.

그것처럼 HTML 요소들을 모두 박스라고 생각하고, 만들어줄 영역을 정의했습니다.

(인터렉션에 집중하는 글이기 때문에 HTML과 CSS를 디테일하게 어떻게 설정했는지는 생략하도록 하겠습니다.)

먼저 레이아웃을 생각하지 않고, CSS 속성만 넣어보겠습니다.

CSS를 모두 넣어주었습니다.

1번 이미지에서 "모바일은 핵심 경험에 집중" 섹션의 부모 박스가 엄청 큰 것처럼 보이는 이유는 실제로 스크롤되는 영역은 이것처럼 길고, 이 영역에서 스크롤되는 동안 "모바일은 핵심 경험에 집중"이라는 텍스트가 가운데로 고정되기 때문입니다.

4개의 subtitle과 4개의 이미지들을 차례로 나열해주었는데요.

두 번째 섹션의 스크롤에 따라 요소들이 쌍으로 나타나고 사라지는 애니메이션을 적용해주기 위해서 입니다.

레이아웃도 적용해보겠습니다.

이전에 아래로 정렬해줬던 이미지와 텍스트들을 한 곳으로 겹쳐줬습니다.

이제 인터렉션을 적용해보겠습니다.

인터렉션 구현하기

첫 번째 섹션 position: sticky + 배경색 변경

position: sticky

첫 번째 섹션의 인터렉션은 스크롤되는 동안 "모바일은 핵심 경험에 집중"이라는 택스트가 화면의 중심에 계속 위치해야 합니다.

이건 CSS의 기본 속성 position: sticky로 구현 가능합니다.

position: sticky는 HTML 요소가 가장 가까운 부모 요소가 스크롤되는 동안 화면 영역(viewport)를

기준으로 특정 영역에 위치를 고정시킬 수 있는 속성입니다. 부모 요소의 스크롤 영역이 끝나면, 화면 영역(viewport)에서 위치 고정이 풀리게 됩니다.

화면을 기준으로 top, bottom, left, right 등의 값으로 위치를 고정시킬 수 있습니다.

화면의 가운데 요소에 위치를 고정시키고 싶기 때문에 top:50%로 설정했습니다. 상단으로부터 50% 비율로 떨어진 곳에 고정할 수 있습니다.

아래는 구현 결과 입니다. 스크롤에 따라서 요소가 고정되어있는 것을 확인할 수 있습니다.

배경색 변경

기존 인터렉션에는 배경색이 변경되는데, 배경색 변경 애니메이션을 넣어보겠습니다.

1. 오른쪽 보조 툴바에 interaction 탭에 들어가서 element tirgger를 추가해줍니다.

2. 스크롤 영역에서 백그라운드가 변경되는 애니메이션을 걸어줄 것이기 때문에 while scrolling in view 애니메이션을 선택해줍니다.

3. Play scroll animation을 선택해줍니다.

1. + 애니메이션을 추가하기 위해서 + 를 눌러줍니다.

2. 새로운 애니메이션의 이름을 정해주고, + 버튼을 눌러서 속성을 추가해줍니다.

3. background color를 바꾸기 위해서 BG color를 넣어줍니다.

1. 처음에는 색상을 흰색으로 넣어주고, 변경되는 색상으로 #0d0c11 값의 검은색을 넣고, save를 누릅니다.

2. 디테일한 설정을 위해서 글씨 요소가 중간에 왔을 때 실행하기 위해서 offset을 50%로 추가해줍니다.

결과는 아래와 같습니다. 이전의 sticky 속성에 background가 서서히 변하는 애니메이션을 추가했습니다.

두 번째 섹션 position: sticky + 요소 opacity and move

position: sticky

두 번째 섹션의 인터렉션도 sticky 속성이 필요합니다.

스크롤되는 와중에도 화면 영역(viewport)의 가운데 영역에 고정해줘야하기 때문입니다.

이 영역 전체를 스티키로 고정하겠습니다.

결과는 아래와 같습니다.

이제 스크롤마다 요소들을 등장시키고, 사라지게 하는 애니메이션을 적용해보겠습니다.

요소 opacity and move

여기 애니메이션 설명하는데 오래걸려서 나중에 자세히 다뤄보도록 하고,

결과만 보겠습니다.

전체결과는 아래와 같습니다.

실제로 이 웹사이트에 배포되어있으니 직접 확인하실 수 있습니다.

정리하기

flex 랜딩페이지를 직접 구현해봤습니다.

position: sticky 속성을 이용해서 요소를 부모 요소의 스크롤 영역 동안, 화면 영역(viewport)의 특정 부분에 고정시킬 수 있다는 것을 배웠고,

시점에 맞는 스크롤 애니메이션을 적용해보았습니다.

이제 이것만 알고 계신다면 웬만한 인터렉티브 랜딩페이지는 문제가 없을 것 입니다.

다음 글에서는 typed 랜딩페이지의 아래의 인터렉션을 구현해보겠습니다.

그 다음번에는 awward 수상작과 같은 더 복잡한 인터렉션을 구현해보겠습니다!

노코드로 웹디자인부터 웹서비스까지

노코드툴을 활용하여 인터렉티브 웹사이트 또는 백앤드 로직이 담긴 웹서비스를 제작하는 것에 관심이 있으신가요? 함께 만들어보면 좋을 거 같습니다!

노코드로 웹디자인부터 웹서비스까지 만드는 교육 프로그램을 내년 초에 계획하고 있습니다.

무조건 자신의 아이디어를 실제 웹사이트로 제작하는 것을 목표로 합니다.

관심이 있으신 분은 아래의 구글폼에서 사전 신청해주세요.

사전 신청해주신 분들에 한하여, 특별한 혜택을 드리려고 합니다!