웹플로우 에디터 알아보기 #1
왼쪽 패널 편
웹플로우에는 웹사이트를 제작하기 위한 수많은 기능들이 존재 합니다.
웹플로우로 웹페이지를 제작하기 위해선 기본적으로 에디터에 있는 각 패널들에 대한 이해가 필요한데요.
이번 글에서는 에디터 왼쪽 패널의 자주 사용되는 기능들에 대해서 알아보도록 하겠습니다.
왼쪽 패널
웹플로우 에디터 화면 구성웹플로우 에디터는 중앙의 에디터 화면을 제외하면 크게 3가지의 패널로 이루어져 있습니다.
왼쪽 패널은 웹페이지를 제작하는 데 사용되는 콘텐츠나 스타일, 컴포넌트 등을 주로 관리하는 역할을 합니다.
요소 추가(Add Elements)
해당 버튼은 웹페이지를 구성하는 요소(element)들을 선택할 수 있는 메뉴입니다.
Add Elements 클릭 화면해당 버튼을 누르게 되면 다음과 같이 웹페이지를 구성할 수 있는 요소들이 나오게 되고 클릭하게 되면 중앙 화면으로 요소가 옮겨지게 됩니다.
일반적으로 다음 요소들을 클릭해서 가져온 뒤 스타일을 부여해 내가 원하는 형태로 만듭니다.
스타일을 부여하는 방법은 후에 알려드리도록 하겠습니다.
페이지 보기(Pages)
해당 버튼은 웹사이트 전체의 페이지 구조를 볼 수 있는 버튼입니다.
상단 패널의 해당 버튼과 같은 역할을 합니다.
Pages 버튼을 누르게 되면 위의 이미지와 같이 현재 웹사이트의 전체 구조(sitemap)를 확인하실 수 있습니다.
일반적으로는 Static Pages와 CMS Collection Pages를 주로 사용하며, CMS가 무엇인지에 대해서는 차후 알려드리겠지만 간단하게 컨텐츠에 따라 동적으로 보여지는 페이지를 생각하시면 됩니다. 예시로는 게시판의 게시물을 생각하시면 될 것 같습니다.
또한 templates를 통해 비슷한 페이지를 쉽게 다른 페이지로써 구성할 수 있습니다.
아래 이미지를 보시면 쉽게 이해하실 수 있으실 것 같습니다.
네비게이터(Navigator)
해당 버튼은 현재 페이지의 구조를 볼 수 있는 버튼입니다.
Navigator 클릭 화면Navigator 버튼을 클릭하게 되면 다음과 같이 현재 페이지의 구조를 확인 할 수 있습니다.
Body 태그를 기본으로 아래에 요소(element)들을 삽입해서 웹페이지를 구성합니다.
Navigator 패널의 요소를 클릭하면 선택한 요소가 중앙 화면에 표시됩니다.
요소의 이름은 기본적으로는 요소의 기본(Default) 이름이 부여 됩니다.
하지만 클래스(class)가 부여된 경우엔 가장 첫번째로 부여한 클래스가 보여지게 됩니다.
class가 부여된 요소특정 요소에 따라서 색깔이 다르게 표현되기도 합니다.
일반 요소의 경우에는 흰색으로 표시됩니다.
컴포넌트화 된 요소의 경우에는 녹색으로 표시됩니다.
CMS로 연결된 요소의 경우에는 보라색으로 표시됩니다.
컴포넌트(Components)
해당 버튼은 컴포넌트화 해둔 요소들을 볼 수 있는 버튼입니다.
컴포넌트는 재사용성을 늘려주고 작업 시간을 줄여줍니다.
헤더나 푸터, 특정 버튼 등의 요소들을 컴포넌트화 해서 다른 페이지에서 그대로 이용 할 수 있습니다.
Pages 화면에서 요소를 좌클릭 하게 되면 "Create Component" 항목이 있는데 해당 버튼을 누르시면 요소를 컴포넌트화 해서 사용하실 수 있습니다.
컴포넌트된 요소의 경우 수정을 하게 될 시 모든 페이지에서 사용되고 있던 요소들에게 반영이 되기 때문에 신중하게 작업하실 필요가 있습니다.
변수(Variables)
해당 버튼은 스타일을 변수화 해서 쉽게 가져다 쓸 수 있게 해줍니다.
Variables 클릭 화면Variables 버튼을 클릭하게 되면 위의 사진과 같이 내가 변수화 해둔 스타일들을 확인할 수 있습니다.
(변수화는 특정 값에다 이름을 붙여 사용한다는 뜻입니다.)
현재 기준으로 웹플로우에서는 Size, Color, Font에 관한 스타일들을 변수화 해서 사용할 수 있습니다.
스타일 선택자(Style Selector)
해당 버튼은 정의한 클래스(class)를 확인할 수 있습니다.
Style Selector 클릭 화면Style Selector 버튼을 클릭하게 되면 요소에 정의해둔 클래스들을 전부 확인 할 수 있습니다.
A라는 클래스와 콤보로 사용 된 경우에는 아래 들여쓰기로 표현되게 됩니다.
에셋(Assets)
해당 버튼은 웹페이지에 사용된 이미지, Lottie 등 에셋들을 확인 할 수 있습니다.
Assets 클릭 화면CMS 데이터 관리(CMS Collections)
해당 버튼은 CMS 데이터들을 생성, 관리 할 수 있습니다.
CMS Collections 클릭 화면CMS란 Contents Management System으로 웹 사이트에 게시물을 게시하는데 사용 됩니다.
DB와 같이 컨텐츠를 등록 해두면 웹 페이지와 결합에 동적인 데이터를 보여줄 수 있습니다.
다음과 같이 페이지의 내용을 세팅해두면 웹페이지에 연결해서 데이터를 사용할 수 있습니다.
CMS에 관한 얘기는 복잡해서 다른 글에서 더욱 상세히 알려드리겠습니다.
로직 (Logic)
해당 버튼은 특정 상황에 대한 이벤트를 관리하고 페이지 흐름을 관리 할 수 있습니다.
Logic 클릭 화면Logic에서는 Flow를 관리할 수 있는데, 상태에 따른 페이지의 흐름을 관리 할 수 있습니다.
설정 (Settings)
해당 버튼은 웹플로우 에디터 및 웹페이지에 대한 세팅을 할 수 있습니다.
Settings 클릭 화면Settings에서는 Search, Interface, Backups, Localization 기능들을 제공합니다.
Interface 처럼 웹에디터에 대한 설정도 가능하며, Backups 처럼 프로젝트의 백업본을 만들어 save 할 수 있습니다.
또한 Localization을 통해 다국어 기능을 관리 할 수 있습니다.
이렇게 이번 시간에는 웹플로우 에디터의 왼쪽 패널에 대해서 알아 보았습니다.
혹시 이번 내용이 조금 어려우셨나요?
저희 더컴퍼스에서는 60여개 이상의 관공서, 스타트업, 유튜버 및 유수기업 홈페이지 및 프로젝트 개발을 성공적으로 수행하였습니다. 귀사의 홈페이지가 단순하고 일반적인 홈페이지가 아닌, 담당자님의 철저한 니즈 분석과 소통을 통해 꼭 맞는 웹사이트를 제작해드리겠습니다.
직접 웹페이지를 만드실 때 어려움을 느끼시거나 전문가의 조언이 필요하시다면 언제든 편하게 연락해주세요.
