웹플로우, 코딩 공부 전에 배워야 할 웹 제작 툴 – 방구석 클래스

이번 방구석 클래스에서는 코딩을 공부하기 전에 알아두면 좋은 웹 제작 툴인 웹 플로우를 알아볼게요. 웹 플로우(webflow)는 코딩 없이 사이트를 쉽게 제작이 가능합니다. 윅스와는 또 다른 느낌의 툴입니다. 디자인 툴과는 다르게 코딩이 어떻게 되는지 알아볼 수 있는 시간을 가져봐요. HTML과 CSS를 웹플로우 서비스에서 빌더 UI로 조작 가능하게 되어 있습니다.

제가 만든 사이트 샘플 주소입니다.

https://designbase.webflow.io/

*방구석클래스는 다양한 주제로 폭넓게 배워갈 수 있도록 만든 강좌입니다. 매주 다양한 주제로 만나보세요 🙂

핵심 요약

웹플로우는 코드 개념 없이 누구나 반응형 웹사이트를 만들 수 있도록 도와주는 웹 기반 툴 서비스입니다.

직접 사용해보면서 느낀 것과 웹 플로우가 인기 있는 이유를 찾아보며 정리를 해보면 이렇습니다.

• 디자이너가 쉽고 빠르게 제작이 가능.
• 디자인과 개발이 시각적으로 동시에 제작.
• 에디터 기능을 제공해서 클라이언트가 콘텐츠를 직접 작업이 가능. CMS 기능 제공

쇼케이스와 디자이너 탭을 들어가 보면 상당히 많은 디자이너들이 사용하고 있는 것을 알 수 있습니다.

여기서 핵심은 두 가지입니다.
첫 번째는 박스로 바라보는 눈을 기르는 것입니다. 사이트는 디자인 툴과는 다르게 블록으로 쌓이는 개념이라서 가상의 네모 테두리를 보는 연습을 하셔야 합니다. 웹플로우에서는 X-Ray Mode라는 기능을 제공하고 있어서 쉽게 마진과 패딩 값을 조절해서 레이아웃을 작업할 수 있습니다.

두 번째는, Class라는 개념인데 같은 Class 값으로 묶인 요소들은 스타일을 동시에 바꿀 수 있습니다. 만약 다른 스타일을 주고 싶다면 새로운 Class를 주거나 기존의 Class를 제거하는 방법이 있습니다. 스케치로 따지면 Layer Style, Text Style과 비슷한 개념이죠. 그 외에 웹플로우에서도 ‘심볼’이라는 기능이 있습니다. 이 심볼은 헤더, 푸터와 같은 반복적으로 사용될 컴포넌트를 만들 때 사용하는데 스케치에서 심볼과 같은 개념입니다.

짧은 시간 안에 웹플로우를 살펴봤는데요. 좀 더 자세한 기능을 알고 싶다면 웹플로우에서 제공하는 강좌를 통해 배우실 수 있습니다.
https://university.webflow.com/?utm_source=dashboard