웹플로우(Webflow)로 어디까지 개발이 가능할까?#0 - 토스홈페이지 클론하기

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

드로잉 코딩 클럽에서 연재를 해보고자 합니다.

진행할 시리즈는 2가지입니다.

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

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

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

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

우선 먼저 웹플로우(Webflow)의 기본적인 개념을 배우며 토스랜딩페이지를 클론해보겠습니다.

웹플로우(Webflow)로 인터렉티브 렌딩페이지 만들기

웹플로우(Webflow)를 이용하여 토스의 인터렉션 렌딩페이지를 클론해보겠습니다.

토스의 인터렉션 랜딩페이지를 살펴보면 크게 3가지 인터렉션이 있습니다.

1. 첫 렌더링 시 "금융의 모든 것 토스에서 쉽고 간편하게"라는 문구가 등장하는 Fade 애니메이션

1. 요소들이 스크롤에 따라서 화면에 등장하는 애니메이션

1. 스크롤을 내린만큼 이미지의 영역이 커지는 애니메이션

이와 같은 3가지 애니메이션이 토스 랜딩페이지 인터렉션의 핵심인데요.

이러한 애니메이션을 코드없이 웹플로우(Webflow)만으로 구현해보도록 하겠습니다.

웹플로우(Webflow)의 몇 가지 개념만 알면, 이런 인터렉티브한 랜딩페이지를 노코드로 구현할 수 있습니다.

기본설정과 각각의 애니메이션을 1편, 2편, 3편, 4편으로 나눠서 올릴 계획입니다.

이번 포스팅에서는 다음과 같은 목차로 진행될 예정입니다.

1. Webflow란 무엇인가?

2. 기본세팅

   - 폰트설정

   - 이미지 업로드

3. 웹플로우(Webflow)로 HTML, CSS 설정하기 = 토스 랜딩페이지 헤더 만들기

   - 박스모델

   - 실습하기

웹플로우(Webflow)란 무엇인가?

웹플로우(Webflow)는 사용자가 코딩 지식이 없어도 인터렉티브하고 전문적인 웹사이트를 디자인하고 출시할 수 있게 도와주는 서비스입니다.

드래그 앤 드롭 인터페이스를 사용하여 웹사이트의 레이아웃과 요소를 직관적으로 구성할 수 있게 도와줍니다.

반응형 디자인도 손쉽게 구현할 수 있어서 사용자 경험을 높일 수 있고,

CMS(Content Management System = 블로그와 같은 컨텐츠 기반 웹사이트) 기능을 제공하여 사용자가 콘텐츠를 쉽게 관리하고 업데이트할 수 있습니다.

웹플로우(Webflow)는 스타트업에서 빠르게 랜딩페이지를 만들거나 코딩을 공부하지 않고도 빠르게 웹사이트를 만들 때 유용한 서비스라고 보시면 됩니다.

기본 세팅(이미지 요소 가져오기, 폰트세팅)

본격적으로 웹플로우(Webflow)를 사용하기 전에 기본 세팅을 진행해보겠습니다.

토스랜딩페이지를 클론 코딩할 것이기 때문에 토스 랜딩페이지를 방문하여 필요한 이미지를 가져오고 폰트를 설정해보겠습니다.

이미지 요소 가져오기

토스 랜딩페이지에서 개발자 도구를 켜고

[오른쪽 마우스 클릭 - 검사(inspect) or f12]

개발자 도구 상단에 있는 마우스를 클릭해봅시다.

그러면 마우스로 HTML 요소들을 검사할 수 있습니다.

웹사이트에 배포되어있는 이미지들은 클라우드에 저장되어있거나 프로젝트와 함께 배포가 되어있는데요.

얻고 싶은 이미지 요소를 클릭하여 가져와보겠습니다.

https://static.toss.im/assets/homepage/newtossim/new_main.png

https://static.toss.im/tds/favicon/favicon-196x196.png

오른쪽 마우스를 클릭하여서 이미지를 저장해줍니다.

저장해준 이미지를 웹플로우 좌측편의 Assets 메뉴에 들어가서 업로드해줍니다.

이렇게 저장된 이미지들을 업로드해주었습니다.

이미지가 필요할 때마다 여기있는 이미지를 가져와서 사용하겠습니다.

폰트세팅

toss는 토스에서 직접만든 "Toss product Sans"라는 폰트를 사용하는데요.

이 폰트는 토스에서 공개하지 않은 폰트이기 때문에 이것을 대체하여

"Pretendard"폰트를 넣어주도록 하겠습니다.

웹플로우(Webflow)에서는 폰트를 넣는 방법은 아래와 같습니다.

웹플로우 메인 페이지에서 좌측 상단에 있는 W버튼을 누릅니다.

사이트 세팅을 누릅니다.

좌측편에 보시면 Fonts를 누룹니다.

Fonts에 들어가셔서 업로드 버튼을 눌러줍니다.

제가 미리 아래에서 받은 Pretandard 폰트 중 woff2 폰트를 넣어줍니다.

upload font file을 하나하나 눌러주면 이렇게 폰트가 들어간 것을 볼 수 있습니다.

웹플로우(Webflow)의 흰 화면에 마우스를 올려놓으면 왼쪽 상단에 파란색으로 "Body"라는 박스요소가 등장하는데요. 그걸 누르면 오른쪽 보조 창에 요소의 속성을 선택할 수 있습니다.

여기서 typography -> Font에 들어가면 Custom fonts로 저희가 설정한 Pretendard fonts를 발견할 수 있구요. 이걸 "Body"요소에 설정해주면, "Body"의 자식 요소에도 기본적으로 Pretendard fonts가 설정됩니다.

구체적인 custom fonts 설정 방법은 아래의 링크에서 찾을 수 있습니다.

해더 만들기

드디어 웹플로우(Webflow)의 하얀 바탕화면에 요소들을 추가해 볼 건데요. 먼저 헤더를 만들어봅시다.

박스 모델

헤더를 만들기 전에 박스 모델에 대해서 알아봅시다.

HTML 웹사이트를 구성하는 HTML 태그들은 각각 하나의 박스로 구성되어있습니다.

웹사이트는 하나하나의 박스 블럭이 쌓여서 만들어진 것 입니다.

위의 토스 랜딩페이지의 해더는 아래와 같은 박스가 모여서 만들어진 것입니다.

박스들은 기본적으로 왼쪽 아래로 쌓입니다.

(블럭 요소들은 한 칸씩을 차지하고, inline요소들은 왼쪽에서 오른쪽으로 쌓입니다.)

CSS를 사용하여 속성을 바꿔서 원하는 스타일과 원하는 레이아웃으로 바꿀 수 있습니다.

박스모델은 HTML, CSS를 공부할 때 나오는 개념인데요.

이렇게 간단하게만 언급하고 넘어가겠습니다.

나중에 기획자/디자이너를 위한 HTML, CSS 개념에 대해서 다뤄보겠습니다.

실습하기

왼쪽 상단에 + 버튼을 누르면, 추가할 수 있는 HTML 요소들이 나옵니다.

먼저 Div Block을 선택하여 헤더의 가장 상단 박스를 만들어주겠습니다.

레이아웃과 스타일은 우선 신경쓰지 말고, 요소들을 나열해보겠습니다.

(원래 개발에서는 웹접근성이나 테크니컬 SEO를 위해선 태그의 종류도 제대로 설정해줘야 합니다. 이 글은 레이아웃과 스타일에 집중하여 쓰여진 글이기 때문에 디테일하게 태그 종류를 설정해주지 않았습니다. 참고 바랍니다.)

여기서 이제 로고부터 레이아웃과 스타일을 설정해보겠습니다.

로고 이미지와 toss라는 글자가 현재 같은 박스 안에 있는데, 레이아웃과 크기와 스타일을 변경합니다.

toss 로고와 toss 텍스트를 감싸고 있는 Div Block의 레이아웃을 flex로 설정했고,

이미지 요소의 크기를 실제 홈페이지를 참조하여 높이를 20px로 맞추고, 이미지와 toss라는 텍스트를 간격을 설정하기 위해서 3px의 margin을 줬습니다.

이렇듯 스타일과 레이아웃을 변경하면, 원하는 홈페이지를 만들 수 있습니다. 다른 요소들도 실제 홈페이지에서

개발자 도구를 참조하여 스타일을 설정해보겠습니다.

"회사 소개"라는 네비게이션 탭의 아이템 하나만을 가져와서 toss-list-item이라고 새로운 클래스를 입력해주었습니다.

웹플로우(Webflow)에는 공통된 요소에 클래스를 입력하면, 한번에 공통된 스타일을 적용해줄 수 있습니다.

나머지 요소들도 적용해보겠습니다.

이제 레이아웃을 적용해보면,실제 Toss 홈페이지와 거의 유사한 것을 확인할 수 있습니다.

Outro

웹플로우(Webflow) 기본세팅 + 헤더만들기를 진행해봤는데요.

이렇게 웹플로우(Webflow)에서는 드래그 앤 드롭을 활용하여 쉽게 웹사이트트를 구현할 수 있습니다.

다음 포스팅에서는 본격적으로 인터렉티브한 웹사이트를 만들어보도록 하겠습니다.