Webflow 소개 - Webflow 도움말
Webflow 사용법을 배워보세요.
Webflow에서는 페이지, 브랜치, 로케일을 통해 사이트를 구조화하고, 구축하며 디자인할 수 있습니다. Webflow는 동적 콘텐츠와 데이터를 효과적으로 생성하고 관리할 수 있도록 하며, 사이트 성능을 분석하고 최적화할 수 있는 도구를 제공합니다. 또한 작업을 공유하고 피드백을 요청하며, 최종적으로 사이트를 전용 환경(예: 스테이징 및 프로덕션)에 게시할 수 있습니다.
Webflow에 액세스하려면 대시보드에서 사이트 썸네일을 클릭하거나 사이트 설정에서 상단 도구 모음의 사이트 열기를 클릭하세요. Webflow에서 사용할 수 있는 도구는 사이트 역할(예: 리뷰어, 콘텐츠 편집자 등)에 따라 다르므로 필요한 도구에 빠르게 접근하고 필요 없는 도구는 잊어버릴 수 있습니다.
시작하기 전에
Webflow의 지원되는 브라우저, 기기 및 화면 해상도를 확인하세요.
다중 사용자 협업
여러 팀원이 Webflow에서 사이트에 함께 협업할 수 있습니다. 디자인 프로세스를 원활하게 유지하기 위해 팀원 간에 디자인 제어를 넘겨줄 수 있으며, 실시간으로 다른 사람들이 사이트 내에서 작업 중인 위치를 확인할 수 있습니다.
Webflow 인터페이스 개요
사이트를 Webflow에서 열면, 사이트를 보여주는 메인 화면이 캔버스입니다. 캔버스를 둘러싸고 있는 도구 모음과 패널은 다음과 같습니다:
- 상단 바에는 탭 탐색, 컨텍스트 바, 사이트 작업(예: 협업 및 게시 도구)이 포함됩니다.
- 캔버스 바에는 실행 취소/다시 실행, 브레드크럼 탐색, 확장된 브레이크포인트, 캔버스 설정이 포함됩니다.
- 왼쪽 도구 모음에는 메인 메뉴, 다양한 도구 및 탐색 패널, 설정, 사이트 감사, 튜토리얼이 포함됩니다.
- 오른쪽 도구 모음에는 요소 스타일, 설정, 상호작용이 포함됩니다.
캔버스
Webflow에서 가장 큰 영역은 캔버스입니다. 여기서 페이지와 실시간으로 상호작용하고 디자인할 수 있습니다. 요소를 선택하고 이동하며 페이지에서 직접 콘텐츠를 편집할 수 있습니다. Webflow는 작업을 자동으로 저장하지만, Command + S(Mac) 또는 Control + S(Windows)를 눌러 수동으로 사이트를 저장할 수 있습니다.
상단 바
상단 바는 디자인 모드, CMS, 분석, 최적화, 로케일, 페이지 전환기 및 사이트 작업에 빠르게 접근할 수 있게 해줍니다.
주요 탭 탐색에는 디자인 탭, CMS 탭, 인사이트 탭이 포함됩니다.
- 디자인 탭 — 현재 모드(예: 디자인, 빌드 등)를 나타내며 모드 간 전환하거나 페이지 분기를 생성할 수 있습니다. 멤버의 사이트 역할에 따라 사용 가능한 모드가 결정됩니다. 예를 들어, 사이트 관리자와 디자이너는 디자인 모드에 접근할 수 있지만, 마케터는 빌드 모드에만 접근할 수 있습니다.
- CMS 탭 — CMS(콘텐츠 관리 시스템) 패널을 열어 컬렉션, 컬렉션 항목, 전자상거래 제품 및 카테고리를 생성하고 관리할 수 있습니다.
- 인사이트 탭 — 인사이트 패널을 열어 분석 및 최적화에 접근할 수 있습니다. 분석은 사이트 전반의 분석과 실행 가능한 인사이트를 제공합니다. 최적화는 사이트에서 다양한 스타일, 레이아웃, 흐름, 문구, 이미지 등을 테스트하는 실험을 실행할 수 있게 해줍니다.
컨텍스트 바
컨텍스트 바를 사용하면 Optimize로 사이트 최적화 관리 및 로케일, 페이지, 컬렉션 페이지, 컬렉션 항목 간 전환이 가능합니다. 또한, 메인 컴포넌트를 편집 중인지 (컴포넌트 인스턴스가 아닌) 여부와 디자인 승인 상태를 표시합니다.
사이트 작업
사이트 작업은 현재 보고 있는 특정 페이지나 사이트 자체와 관련이 있습니다. 실시간으로 사이트에서 협업 중인 팀원들도 아바타나 숫자로 표시됩니다.
- 분석 모드 — 페이지 수준의 분석 및 인사이트 분석 (예: 방문자가 얼마나 스크롤하고 어디를 클릭하는지).
- 댓글 — 다른 팀원이 남긴 댓글을 검토하거나 자신의 피드백/노트를 추가합니다.
- 미리보기 — 미리보기 모드로 전환합니다.
- 공유 — 읽기 전용 사이트 링크 생성.
- 게시 — 사이트 게시.
캔버스 바
캔버스 바는 기본적으로 캔버스 위에 위치하지만, 캔버스 설정에서 아래로 이동할 수 있습니다.
- 실행 취소/다시 실행 아이콘 — 빠르게 변경 사항 되돌리기 또는 재적용.
- 브레드크럼 내비게이션 — 선택한 요소의 계층 구조를 보여줍니다.
- 캔버스 설정 — 다양한 옵션 (예: 눈금자, 가이드, 텍스트 확대 미리보기).
- 브레이크포인트 — 다양한 기기 크기에 대한 미리보기 및 편집.
왼쪽 툴바
웹사이트 구조화를 위한 메인 메뉴와 패널을 포함합니다.
Webflow 로고를 클릭하여 메인 메뉴에 접근하세요.
- 요소, 구성 요소, 페이지 등을 위한 빠른 찾기
- 실행 취소/다시 실행 작업
- 코드 내보내기
- 키보드 단축키
- CSS 미리보기 열기
- 도움 받기 또는 피드백 보내기
패널 및 사이트 활동 로그
- 추가 패널 — 단축키: A
- 페이지 패널 — 단축키: P
- 내비게이터 패널 — 단축키: Z
- 구성 요소 패널 — 단축키: Shift + A
- 변수 패널 — 단축키: G
- 스타일 선택자 패널 — 단축키: J
- 자산 패널 — 단축키: L
- 라이브러리 패널 — 단축키: L
- 앱 패널 — 단축키: E
- 사이트 활동 로그 — 사이트에 대한 디자인 변경 사항
설정, AI 학습 도우미, 감사, 빠른 찾기 및 튜토리얼
- 설정 패널 — 인터페이스, 검색, 백업, 현지화.
- AI 학습 도우미 — AI 기반 도움말.
- 감사 패널 — 단축키: U.
- 빠른 찾기 — 단축키: Command + E (Mac), Control + E (Windows).
- 비디오 튜토리얼 패널 — 무료 비디오 강좌.
오른쪽 툴바
요소 스타일, 설정 및 상호작용을 위한 패널을 포함합니다.
- 스타일 패널 — 단축키: S.
- 요소 설정 패널 — 단축키: D.
- 상호작용 패널 — 단축키: H.
자주 묻는 질문
Webflow는 어떤 브라우저를 지원하나요?
Webflow는 모든 최신 브라우저의 마지막 세 가지 주요 버전을 공식적으로 지원합니다: Chrome, Edge, Firefox, Safari. 이는 플랫폼과 게시된 사이트 모두에 적용됩니다.
지원이 제한된 기능에 대해서는 관련 기사를 참조하세요:
Webflow는 Internet Explorer를 지원하지 않습니다.
Webflow는 어떤 화면 해상도/기기를 지원하나요?
Webflow는 화면 너비가 최소 1268px인 데스크톱/노트북 컴퓨터가 필요합니다.
Webflow는 왜 온라인/호스팅 앱인가요? 다운로드 가능한 앱이 아닌 이유는?
Webflow는 브라우저 내 디자인과 빠른 업데이트를 위해 온라인/호스팅됩니다.
- WYSIWYG 디자인 — HTML/CSS에 직접적인 효과.
- 빠른 업데이트 — 항상 최신 버전, 수동 업데이트 불필요.