[2025년 최신판] Webflow 사용법을 항목별로 정리했습니다

Webflow: Webflow란 코드를 작성하지 않고 웹사이트를 제작할 수 있는 노코드 웹 제작 툴입니다. 디자인부터 사이트 공개까지 한 번에 진행할 수 있으며 HTML·CSS·JavaScript 코드 내보내기도 지원합니다.

이번에는 이런 고민을 해결해 봅니다.

✓이 글의 내용

Webflow의 기본 사용법
제가 Webflow를 처음부터 배운 방법【실제 경험】
템플릿을 조정하는 효율 UP 테크닉

저는 Webflow로 제작 대행과 사용법 지도를 하며 일하고 있습니다. 이 사이트도 원래 Webflow로 만들어졌습니다.

이번에는 지금까지 소개해 온 Webflow 사용법을 링크로 정리하고, 더 세세한 테크닉을 소개합니다. 최신 테크닉을 가장 빨리 알고 싶은 분은 Twitter(일본어)에서도 올리고 있으니 함께 확인해 보세요.

Webflowの作業効率がUPする方法を紹介します。これは基礎的なテクニックです。

①
まずは画面右の表示の意味を知るところから始めます。
オレンジ：他から効果を受けている
青：その要素にCSSが記入されている

②
オレンジをクリックして要素の大元を確認しましょう。

↓続く pic.twitter.com/d98aRD1PjZ
— ノーコードで1000万チャレンジ中＠Webflowデザイナー (@METANA_flow) January 27, 2023

Webflow 사용법 항목별【정리】

Webflow 사용법을 항목별로 나눠 글을 만들었습니다. 궁금한 페이지를 확인해 보세요.

Webflow의 기본

Webflow CMS

Webflow SEO

Webflow 요금

Webflow 요금 플랜 해설

Webflow × Figma

【혁명】Figma에서 Webflow로 디자인을 복사·붙여넣기하는 방법

Webflow 다국어화 앱 “Weglot”

Webflow × Instagram

【무료】노코드 Webflow에 Instagram을 임베드하는 방법

Webflow 사용법을 처음부터 배운 방법【당시엔 초보이었습니다】

제가 Webflow를 배운 방법은 Webflow 공식 포트폴리오 제작 코스를 3개월에 걸쳐 수강한 것에서 시작합니다. 이 코스는 Webflow 사용법 전반을 소개하면서 포트폴리오 사이트를 만들어 갑니다.

코스는 전부 영어입니다. 자동 번역과 영상 속 작업 화면을 보면서 어떻게든 Webflow에 익숙해진 것이 첫걸음이었습니다. 소재는 Webflow 공식에서 다운로드할 수 있습니다. 영상은 이쪽↓

이 블로그에서는 이 공식 코스를 한국어로 옮겨 소개하고 있습니다

이 블로그에서는 해당 코스를 한국어로 옮겨 소개하고 있습니다. 공식 사이트와 번역을 함께 보면 순조롭게 만들 수 있습니다.
>>한국어 해설은 여기

Webflow 템플릿을 효율적으로 편집하는 테크닉

화면 오른쪽 표시의 의미를 아는 것부터 시작합니다. 오렌지색은 다른 곳에서 효과를 받고 있다는 뜻, 파란색은 그 요소에 CSS가 기입되어 있다는 뜻입니다. 오렌지색을 클릭해 값의 출처를 확인하세요. 이 방법으로 Webflow 템플릿을 효율적으로 수정할 수 있습니다.

유료 템플릿에는 드물지만, 무료 템플릿은 누구나 올릴 수 있어 불필요한 값이 들어 있는 경우가 흔합니다. 불필요한 값이란, 예를 들어 반응형 디자인에 의미 없이 0을 지정했거나 브레이크포인트(★ 표시 크기)와 같은 값을 의미 없이 지정한 것을 말합니다.

이것은 Webflow 초보자도 자주 하는 실수이니 주의합시다. 불필요한 값이 입력되어 있으면 브레이크포인트 변경 시 반응형 디자인이 자동으로 만들어지지 않게 됩니다. 나중에 “어디에 값이 지정되어 반응형이 깨졌는지 모르겠다”가 되지 않도록 불필요한 값 지정은 하지 맙시다.

Webflow 제작에서 자주 쓰는 단축키 목록

자주 쓰는 단축키를 소개합니다. 복사·붙여넣기, 되돌리기 등은 다른 앱과 동일하게 쓸 수 있습니다.

복사 “command＋C”
붙여넣기 “command＋V”
되돌리기·다시하기 “command＋Z”“command＋shift＋Z”
---------------------------------------
값 삭제 “Alt＋클릭”
클래스 입력 “command＋enter”
요소 검색＋삽입 “command＋K”
Margin·Padding 값 지정
좌우 동시 지정 “Alt＋마우스 슬라이드”
전방향 동시 지정 “shift＋마우스 슬라이드”
CMS 페이지 이동(디자이너) “Alt＋←→”
자식 요소 안에서 이동 “↓”
위에서 순서대로 이동 “Alt＋↓”

이상이 제가 자주 쓰는 단축키입니다. 추천이 있다면 알려 주세요. 참고로 단축키는 Webflow 디자이너 왼쪽 아래 Help 항목에서 전부 확인할 수 있습니다.
>>공식 사이트는 여기

자주 묻는 질문

Webflow 사용법을 독학으로 배우려면 어떻게 하나요?

Webflow 공식 포트폴리오 제작 코스를 수강하는 방법이 있습니다. 코스는 전부 영어이며, 소재는 Webflow 공식에서 다운로드할 수 있습니다.

Webflow 무료 템플릿을 편집할 때 주의점은?

무료 템플릿에는 불필요한 값이 입력된 경우가 많습니다. 불필요한 값이 있으면 브레이크포인트 변경 시 반응형 디자인이 자동으로 만들어지지 않으므로, 화면 오른쪽 오렌지색 표시를 클릭해 값의 출처를 확인합시다.

Webflow 단축키는 어디서 확인할 수 있나요?

Webflow 디자이너 왼쪽 아래 Help 항목에서 모든 단축키를 확인할 수 있습니다. 자주 쓰는 것으로는 값 삭제(Alt＋클릭), 클래스 입력(command＋enter), 요소 검색＋삽입(command＋K) 등이 있습니다.

Webflow 사용법에서 모르는 것은 어디서 질문할 수 있나요?

사용법에 관한 질문이나 기사에서 모르는 부분 등 해설 요청은 Discord에서 받고 있습니다. 가장 빠르게 테크닉을 알고 싶은 분을 위해 SNS에서도 올리고 있으며 요청도 받고 있습니다.