초심자를 위한 Webflow,
일단 시작하기
나는 웹개발하는 UI 디자이너 할래
클라우드 기반 웹사이트 제작 도구는 웹사이트를 만들기 위한 강력한 도구입니다.
웹 개발자 지식이 없어도 웹사이트를 만들 수 있으며, 다양한 템플릿과 기능을 제공하여 사용자의 요구에 맞는 웹사이트를 쉽게 만들 수 있습니다.
디자이너 입장에서는 두 팔 벌려 환영할 상황.국내에는 카페 24, 식스샵, 아임웹 등이 있고, 해외엔 Unbounce, Wix, Squarespace, Weebly, Jimdo, Framer 등의 다양한 클라우드 기반 웹사이트 제작도구가 있습니다.
하지만 오늘 글은 Webflow를 위한 글
이 글을 보고 나면 Webflow로 웹페이지를 빌딩 해 보고 싶은 욕구가 생길지도 모릅니다.
저도 그렇게 시작했으니..
Webflow의 가장 큰 특징은 제작 방식입니다.
뭐 다른 도구들도 마찬가지로 드래그 앤 드롭 방식에 노 코딩 시스템으로 간단하게 빌드할 수 있겠지만, 이 친구는 조금 다르죠.
구성 컴포넌트와 지정 속성 값이 거의 웹사이트를 코딩하는 수준으로 구성되어 있습니다.
최신 HTML, CSS 구성으로 최적화된 웹사이트를 구성할 수 있다는 것이죠.
피그마와 같이 기본적으로 SECTION과 같은 시맨틱 태그 컴포넌트를 끌어다가 화면 구성으로 배치하지고 마진과 패딩값과 같은 SPACING, FLEXBOX와 같은 최신 레이아웃 구성 방식도 아주 손쉽게 설정할 수 있어요.
이때 클래스를 지정하여 여러 엘리먼트를 동시 적용할 수도 있죠.
또 ADD FONT와 같은 기능은 웹플로우에서 구글폰트를 바로 다운로드할수록 간편하게 연결되어 있습니다.
(디자이너에게 폰트란…)
1. 프로젝트를 시작해 볼까요?
회원가입을 하고 웹플로우로 들어오면 2분짜리 가이드 팝업이 뜹니다. 한 번은 확인하는 것을 추천드립니다.
튜토리얼을 순서대로 따라가다 보면 기본적인 HTML요소들인 컨테이너태그나 HEADING 요소들을 드래그하는 나의 모습을 보게 되고 이를 통해 어느 정도 개발적인 요소들을 습득(?) 할 수 있으며, 이런 요소들에 대한 이해도가 높아지면 무궁무진하게 페이지를 디자인, 개발해 나갈 수 있다는 것을 확인할 수 있습니다.
당연히 디자이너라면 ‘Blank Site를 클릭함으로써 도화지 위에 그림을 그려가는 법. 하지만 저는 어떻게 사용하는지 보여주는 내용을 작성 중이니, 'Portfolio Starter'를 들어가서 대략적인 것을 설명드리겠습니다.
편집창을 잠시 설명하자면, 좌측 사이드바는 웹사이트에 필요한 요소들을 추가할 수 있는 요소들이고, 그 옆 ‘Navigatior’를 통해 현 페이지의 구조를 확인할 수 있습니다.
우측에는 추가한 요소들을 편집할 수 있는 설정 도구들이 기본적으로 배치되어 있습니다.
저자는 이 시점에 시간을 잠깐 투자하여 버튼들을 하나하나 눌러 작동 법을 익혀보는 것을 추천드립니다.
2. 웹사이트 제작 시작
디자이너가 붓을 드는 시점이에요.
따로 코딩을 하거나 할 건 아무것도 없습니다. 그저 편집창에 나와있는 다양한 도구들을 잘 활용하여 웹사이트의 내비게이션 메뉴나 레이아웃 배열, 그리고 디자인 요소들을 하나하나씩 수정해 가면 된다. 약간의 작업으로 간단하게 템플릿을 변경할 수 있습니다.
여기서 저는 간단하게 히어로 이미지 파트를 변경해 보았습니다.
편집창의 인터페이스가 쉽고 직관적이게 잘 설계되어 있어서 처음 접하는 사람이라도 별 무리 없이 쉽게 익숙해질 수 있을 듯 싶습니다.
웹플로우로 페이지를 만들면 디자인적으로 제약 없이 원하는 대로 만들 수 있습니다.
다만 박스모델이라는 웹사이트 개발의 원칙을 그대로 따르면서 제작하도록 되어 있어서 학습하고 익숙해지는데 시간이 필요합니다.
이런 어려움을 완화하기 위해 마치 소프터처럼 미리 제작된 요소들을 삽입해서 수정하는 방식으로 랜딩페이지를 디자인할 수 있게 도와주는 다른 플러그인들이 있으니 필요하다면 확인해 보는 것도 좋은 방법입니다.
3. 웹사이트 공개하기
웹사이트 디자인이 다 되었다는 가정 하에, 인터넷에 올려보겠습니다.
사이트를 웹 상에 올리기 위해 따로 호스팅 서비스를 신청하거나 할 필요 없습니다. 그저 편집창 상단에 있는 ‘publish’ 버튼을 누르기만 하면 될 뿐이죠.
‘publish’ 버튼을 클릭해 보면 위와 같이 2가지 옵션이 표시되는 것을 확인할 수 있습니다. 하나는 Webflow가 제공하는 기본 도메인을 사용하여 퍼블리싱하는 방식이고 나머지 하나는 자신만의 커스텀 도메인(Custom Domain)을 사용하는 방법입니다.
커스텀 도메인은 유료 요금제를 사용해야 하니, 우리는 그냥 기본 도메인으로 퍼블리싱 하겠습니다.
'Publish to selected domains'를 클릭하여 퍼블리싱을 완료해 보겠습니다.
잠깐의 대기와 함께 퍼블리싱된 것을 확인할 수 있습니다.
Staging 란 '바로가기' 버튼을 클릭하면 해당 페이지로 넘어갈 수 있습니다.
브라우저를 통해 확인해 보니, 음 잘 되었네요 :)이렇게 금세 웹사이트를,
그것도 내 마음대로 디자인한 웹사이트를 만들어 넣을 수 있다니
프론트엔드 개발 영역까지 해결해나갈 수 있는 디자이너가 되어가고 있는 것 같아 뿌듯합니다.
세상에 쉬운 길은 없습니다만..물론 실제로 해보면 마냥 쉬운 과정은 아니죠..
하지만 본격적인 작업을 시작하고, 더 높은 퀄리티의 작업물을 만들어내기 위해서는(인터렉티브 하고 유저 커뮤니케이션이 되는 미친듯한 그런 작업물들!) 웹플로우를 사용하는 것을 추천합니다.
PS :
웹플로우에 관한 많은 정보들을 공유하고 얻을 수 있는 '한국 웹플로우 커뮤니티' 를 소개하며 글을 마무리 하고자 합니다. 저 또한 이 방에서 구성원들과 함께 팁을 나누고 있으니 들어와 즐겁게 이야기 했으면!!
좋겠습니다.
