[Webflow] 둘러보기

이전에 올렸던 사이트 목록 중, Webflow라는 사이트가 있었다. 바로 노코드 구축!

쪼꼼 바빴던 요즘~ 다시 워밍업을 하기 위해 이것저것 둘러보다가, 궁금했던 Webflow를 둘러보기로 결심!

오늘 무료 회원가입했다. :) Figma와 비슷한 느낌! 무료는 한 2판정도 사용할 수 있는거 같다.

 

2023.03.02 - [기획하기] - 알아두면 좋은 사이트 목록

https://webflow.com/

Webflow: Create a custom website | No-code website builder

 

 

 

 

 

 

 

 

 

 

---

 

Webflow 시작

 

 

1. 회원가입 및 튜토리얼 진행해보기

간격 조절하는 UIUX가 직관적이여서 좋았다. 버튼도 미리 정한 스타일(ex. Primary)을 선택할 수 있고, 모든 버튼에 동일한 스타일 적용도 가능한듯 보였다. 드래그앤 드랍으로 컴포넌트를 추가하고 셋팅하는 방식이다. 회원가입후 처음 진행되는 튜토리얼 마지막 스텝에서 반응형을 설정하는 소개도 있었다. 따라서 클릭클릭 해보는데, 너무너무 신기 :) 튜토리얼이 끝난뒤 아래 화면이 보여지는데, 무료 템플릿과 유료 템플릿 목록이 보였다. 자연스러운 상품노출!! 좋은거 같다 >_</

<출처 - Webflow>

 

 

 

2. 무료 템플릿 선택

Business Starter 템플릿을 선택하면, 사이트가 뚝딱!!

좌측은 뼈대, 우측은 디자인! 매우 깔끔한 화면인거 같다! 신기신기 +_+//

 

 

 

3. 배경 칼라 변경

좌측은 뼈대에서 원하는 영역을 선택한뒤, 우측 디자인 셋팅에서 백그라운드 칼라를 변경해주면 된다.

Body : Backgrounds > Color > #6731c5

 

 

 

4. 폰트 변경

폰트는 우측 Typography 영역에서 설정할 수 있다.

나는 전체 폰트가 통일되는 것이 좋기때문에, 이번에도 body 선택 후 전체에 적용해주었다.

Body : Typography > Font > Changa One

 

 

 

5. 효과 설정

우측에 있는 Effects 영역에서 Blending 옵션을 선택할 수 있다.

미쳤다. 이런 효과!! 너무 쉽고 재미있게 잘 만든거 같다 ㅋ 🥰

Body : Effects > Blending > Hard light

 

 

 

6. 버튼 설정

일단 버튼 선택하고, 이것저것 눌러본다. ^----^ *

 

 

#Spacing

숫자로 입력해도 되고, 드래그로 간격 조절하며 바로바로 적용도 된다. 이런 직관적인 UIUX 너무 좋은거 같다 >_<//

 

#Backgrounds & Borders

버튼 칼라 설정하고, Button Radius를 Max 20px로 설정! Borders 넓이는 10, 칼라는 블랙 유지하였다.

 

 

 

7. 디바이스별 버튼 사이즈 설정

화면 최상단에서 디바이스를 선택하고, 상세 설정을 진행할 수 있다.

디바이스 선택 후 셋팅 내용은, 해당 디바이스 사이즈에서 적용된다. 반응형!! +_+

 

 

 

8. 컴포넌트로 만들기

방금 설정한 버튼을 컴포넌트로 만들어 보겠다. 버튼 클릭 > Create component 클릭 > 이름 적고 생성!

 

 

 

9. 컴포넌트로 사용하기

다른 페이지로 이동 : Pages > Projects 라는 페이지로 이동했다. 선택한 템플릿은, 홈 말고도 다른 페이지도 모두 레이아웃이 잡혀 있었다. 좀 많이 편한거 같다. 좋다!!!!

 

 

Components 에서 방금 만든 버튼 드래그앤드랍으로 화면에 넣으면 끝!

 

 

버튼 위치는 튜토리얼에서 보았던 기억이 떠올라, Layout > Display, Align, Justify 를 조절하여 변경해주었다.

 

 

 

10. 컴포넌트 확인하기

다시 Pages > Home, 처음 페이지로 이동하여 컴포넌트 버튼을 확인해보자.

아래와 같이 변경한 텍스트가 Home에서도 동일하게 적용되어 있다. 왜!!! Component니까 ^-^*// 단순노동을 줄여주는 기능!

 

 

 

11. 컴포넌트 해제하기

그렇다면, 스타일만 가져가고 문구를 변경하고 싶다면 어떻게 해야할까?

컴포넌트를 사용한 Pages > Projects  페이지로 이동하자. 사용한 컴포넌트를 선택 > 우클릭 > Unlink Instance 클릭! 

 

자 이제, 인스턴스 링크를 해제한 버튼의 텍스트를 변경해보자!

 

 

12. 컴포넌트 확인 

다시 Pages > Home 으로 이동하여 컴포넌트 버튼을 확인해보자. 여기는 그대로 :)

인스턴스 링크를 해제하면, 부모인 컴포넌트에 영향을 주지 않는다. 

 

 

https://university.webflow.com/lesson/components#define-override-fields

Components | Webflow University

 

 

 

 

 

반응형