웹플로우 에디터 알아보기 #2
상단 패널 편
웹플로우에는 웹사이트를 제작하기 위한 수많은 기능들이 존재 합니다.
웹플로우로 웹페이지를 제작하기 위해선 기본적으로 에디터에 있는 각 패널들에 대한 이해가 필요한데요.
이번 글에서는 에디터 상단 패널의 자주 사용되는 기능들에 대해서 알아보도록 하겠습니다.
상단 패널
웹플로우 에디터 화면 구성웹플로우 에디터는 중앙의 에디터 화면을 제외하면 크게 3가지의 패널로 이루어져 있습니다.
상단 패널에는 다음과 같은 기능들이 있습니다.
- 메뉴
- 디바이스 사이즈 조절(미디어 쿼리)
- 모드 변경(Design, Build)
- 코드 추출(Export Code)
- 코멘트(Comment)
- 미리 보기(Preview)
- 공유하기(Share)
- 배포하기(Publish)
상단의 기능들은 주로 협업, 디바이스 조절, 배포와 같은 역할을 담당하고 있는데요 아래서 자세히 알아보도록 하겠습니다.
왼쪽 패널에 대해서는 이전 글에서 설명해 두었으니 잘 모르신다면 보시는 것을 추천드립니다.
https://brunch.co.kr/@team-thecompass/22
메뉴
좌측 상단을 보시면 웹플로우 마크로 되어 있는 버튼이 있는데 이것이 메뉴 버튼입니다.
해당 버튼은 에디터 외부 기능에 접근할 때 주로 사용됩니다.
메뉴의 기능은 다음과 같습니다.
- Dashboard: 대시보드로 이동합니다.
- Site settings: 사이트 설정을 하는 페이지로 이동합니다.
- Editor: Webflow Editor로 이동합니다. Editor는 Design 모드보다 조금 더 쉽게 페이지를 관리할 수 있으며 주로 정적(static) 데이터를 다룹니다.
- Quick find: 검색하는 대상을 쉽게 찾도록 도와줍니다.
- Undo, Redo: 이전과 이후로 되돌리기 위해서 사용합니다.
- Export Code: 페이지 구조를 html, css, js, assets로 추출합니다.
- Keyboard Shortcuts: 키보드 단축키를 확인할 수 있습니다.
- CSS Preview: 선택한 요소에 대해서 CSS를 간략하게 볼 수 있습니다.
- Help & feedback: 가이드나 포럼으로 이동할 수 있습니다.
디바이스 사이즈 조절(미디어 쿼리)
해당 버튼은 디바이스의 사이즈를 조절할 수 있습니다.
기본적인 사이즈는 아래와 같습니다.
- Desktop: ~ 992px
- Tablet: 991px ~ 768px
- Mobile Landscape: 767px ~ 480px
- Mobile Portrait: 479px ~ 240px
해당 기능을 사용할 때 주의하셔야 할 점은 상위 디바이스에서 적용한 스타일은 하위 디바이스에도 적용된다는 점입니다.
예를 들면 Desktop에서 스타일을 적용하면 Tablet. Mobile(L), Mobile(P) 모두 반영됩니다.
하지만 Mobile(L)을 누르고 작업하게 되면 Desktop과 Tablet에는 반영되지 않고 Mobile(P)에만 반영됩니다.
모드 변경(Design, Build)
웹플로우에는 Design과 Build 2가지 모드가 있습니다.
Design 모드는 요소를 직접적으로 다루고 스타일을 적용하는 데 사용됩니다. 즉 웹페이지를 수정하는 데 있어 더 많은 권한을 가지게 됩니다.
Build 모드는 Editor와 같이 정적인 요소들을 다루는 데 사용됩니다. Design 모드보다는 제한적인 수정 범위를 지니게 됩니다.
코드 추출(Export Code)
해당 버튼은 앞서 설명드렸듯이 페이지 구조를 html, css, js, assets로 추출합니다.
주로 사용하진 않는 기능입니다.
코멘트(Comment)
해당 버튼은 코멘트를 달 수 있습니다.
주로 클라이언트와 소통하거나 팀원과 소통할 때 사용합니다.
미리 보기(Preview)
해당 버튼은 제작한 웹사이트를 배포하지 않더라도 현재 Editor에서 제작한 사이트를 확인하실 수 있습니다.
Animation 기능을 제작하였을 때 확인을 보다 편리하게 해 줍니다.
다만, JS로 추가된 기능이 있다면 반영되지 않기 때문에 이 경우에는 배포를 해주셔야 합니다.
공유하기(Share)
해당 버튼은 해당 프로젝트를 공유할 수 있는 기능입니다.
팀에게 공유를 하거나 외부에 read-only 형태로 공유를 할 수 있습니다.
배포하기(Publish)
배포는 제작한 웹사이트를 실제 사이트에 반영하는 중요한 기능입니다.
수정이 일어났을 때 Publish 되지 않으면 실제 사이트에는 반영되지 않습니다.
Staging을 통해 도메인을 실제 구매하지 않더라도 domain.webflow.io 형태로 웹 사이트 실제로 띄울 수도 있습니다.
도메인을 구매한 경우 Production에 도메인을 연결해 웹사이트를 운영할 수 있습니다.
이렇게 이번 시간에는 웹플로우 에디터의 상단 패널에 대해서 알아보았습니다.
혹시 웹 사이트를 제작하고 계신데 어려움을 느끼고 계신가요?
저희 더컴퍼스에서는 60여 개 이상의 관공서, 스타트업, 유튜버 및 유수기업 홈페이지 및 프로젝트 개발을 성공적으로 수행하였습니다. 귀사의 홈페이지가 단순하고 일반적인 홈페이지가 아닌, 담당자님의 철저한 니즈 분석과 소통을 통해 꼭 맞는 웹사이트를 제작해 드리겠습니다.
직접 웹페이지를 만드실 때 어려움을 느끼시거나 전문가의 조언이 필요하시다면 언제든 편하게 연락해 주세요.
