Diary

노코드로 완성도 있는 웹사이트 만들기 - 2주차

minihong 2023. 5. 13. 15:28

회사일이 바쁜 틈에 강의를 하나 완주하려니 쉽지 않네요. 쉬는 날 몰아서 하기를 반복했던 것 같습니다.

2주차에 배우게 된 Webflow 기능 3가지

Webflow의 CMS 기능

워드프레스와는 구조가 다른 CMS 기능이어서 강의를 들으면서도 조금 헷갈렸습니다. 워드프레스의 CMS는 사용할 수 있는 기능이 정해져있지만 다양하게 준비되어 있어서 그 안에서 쓸 것은 쓰고 아닌 것은 비워두는 형태로 썼었는데요. 

Webflow에서는 CMS로 어떤 정보들을 받을 지 자유롭게 설정할 수 있었습니다. 자유도가 높다보니 어떻게 만들어야 할 지 고민하는 시간이 더 길어질 것 같다는 느낌을 받았네요.

워드프레스에서는 페이지를 오갈 때 뒤로가기를 눌러서 이전 페이지 리스트 페이지로 돌아간 후 다른 페이지를 선택해서 들어왔지만 웹플로우는 피그마나 다른 디자인 툴들 처럼 좌측 사이드바로 빠르게 이동이 가능한 점은 장점이었습니다. 

 

Webflow와 Airtable 연동하기

Airtable은 노코드로 프로덕트를 만들 때 데이터베이스를 쉽고 빠르게 만들고 연동해준다고 알고 있었는데요. 짧게 살펴보니 노션느낌의 스프레드시트에 가까웠습니다. 입력폼도 자체로 지원하고 있어서 연동을 해도 되고 에어테이블의 기능을 써도 되는 점이 좋았습니다.

 

The platform to build next‒gen apps | Airtable

Airtable is a low‒code platform to build next‒gen apps. Move beyond rigid tools, operationalize your critical data, and reimagine workflows with AI.

www.airtable.com

 

Webflow로 블로그 페이지 만들기

웹플로우는 워드프레스+엘레멘터에 비해 좀 더 자유롭고 디테일한 인터렉션 등을 넣을 수 있었습니다. 엘레멘터에서는 마우스 호버 등의 인터렉션을 넣을 수 있는 엘레멘트가 정해져 있어서 지원하지 않는 엘레멘터를 썼다면 일부 인터렉션을 포기하거나 다른 방법을 찾았었는데요.

웹플로우는 각 레이어별로 인터렉션을 넣을 수 있고 실제 HTML+CSS 처럼 DIV 태그를 활용하여 스타일을 집어넣기 때문에 제한되는 점이 없었습니다.

그만큼 레이어와 셀렉터를 신경쓰고 구조적으로 생각하면서 만들어야 하지만 충분한 시간을 들인다면 괜찮은 웹페이지를 디자인할 수 있겠다 싶었습니다.