미쳐버린 웹플로우 컴포넌트, 신규 기능 알아보기
Webflow Conf 2024: 컴포넌트 스타일 변형 기능 알아보기
올해 10월에 Webflow Conf 2024가 진행되었습니다.
특히 keynote에서 AI Assistant (Design), New navigation 등 다양한 기능추가와 변경사항들이 있었는데, 그 중에서 Component style variants(컴포넌트 스타일 변형)이 유용해 보여 소개해 드리려고 합니다.
2024년 11월 20일 부로 웹플로우에서 사용가능해 졌습니다.웹플로우 컴포넌트
웹플로우에서 컴포넌트는 사이트를 구축하실때 자주 반복되는 요소들을 블럭 단위로 재사용할 수 있도록 정의할 수 있게 해주는 기능입니다.
즉 정리하자면 재사용가능한 요소입니다.
아래의 이미지와 같이 여러 페이지에서 사용되는 요소들을 컴포넌트로 만들어 두면 붙여넣는 것 만으로도 쉽게 같은 요소를 생성할 수 있습니다.
기존 컴포넌트의 단점
아래 이미지는 기존 웹플로우의 단점을 단적으로 보여주는 사례 입니다.
버튼의 크기와 색 등 variation에 따라 각각의 컴포넌트가 필요한 상황기존의 웹플로우의 컴포넌트는 텍스트 수정이나 이미지 수정은 지원하였지만, css 변형은 지원되지 않아서 위의 이미지와 같이 각각의 컴포넌트를 만들어야 했습니다.
이번 업데이트로 인한 변화
이번 업데이트를 통해서 Component style variants(컴포넌트 스타일 변형)가 추가 되었습니다.
해당 기능은 단일 컴포넌트에 상황별로 여러 스타일을 적용할 수 있게 하여서 기존의 여러 컴포넌트를 만들어서 해결해야 했던 문제를 획기적으로 해결할 수 있게 해줍니다.
위의 이미지를 보면 이전엔 동일한 스타일에 높이만 달리 하더라도 컴포넌트를 3개 만들었어야 했는데, 현재는 한 컴포넌트의 속성을 달리해서 radio 버튼만 조작하더라도 쉽게 사이즈를 조절할 수 있게 되었습니다.
이처럼 Component style variants(컴포넌트 스타일 변형) 기능은 컴포넌트의 디자인 일관성을 보장하고 개발을 편리하게 하는데 도움을 줍니다.
사용 사례
그럼 해당 기능을 어떻게 사용하면 좋을 지 알아보겠습니다.
왼쪽 Navigator의 요소에 대해서 좌클릭을 할 경우 해당 메뉴가 뜨게 되는데, 아래를 확인해 보시면 컴포넌트를 만들수 있는 Create component 버튼이 있습니다.
버튼을 누르게 되면 컴포넌트에 대한 이름과 그룹, 설정을 정하는 란이 나오는데 상황에 맞게 작성하신 후 Create 버튼을 눌러 주시면 컴포넌트가 생성되게 됩니다.
왼쪽 탭의 컴포넌트 버튼을 눌러보시면 버튼 컴포넌트를 확인 하실 수 있습니다.
생성된 컴포넌트를 클릭하신 후 오른쪽 탭을 확인 하시면 Component style variants(컴포넌트 스타일 변형) 기능이 있습니다. 해당 기능을 눌러 위의 이미지와 같이 진행하시면, 이미지와 같이 해당 Variant가 잘 등록되신 것을 확인하실 수 있습니다.
그 후 원하시는 css 스타일로 적용해 주시면 특정 Variant일때만 사용가능한 컴포넌트를 만드실 수 있습니다.
마치며
이번 업데이트를 통해 기존의 웹플로우의 아쉬웠던 점들이 해결된 것 같습니다. 또한 컴포넌트를 재활용하다는 점에서 개발을 하는데에도 수고가 조금 덜 것 같습니다.
Webflow Conf 2024에서는 위의 Component style variants(컴포넌트 스타일 변형)기능 뿐만 아니라 웹플로우에 추가된 다양한 기능들을 소개하고 있으니 시간되실때 한 번 살펴보시는 것을 추천 드립니다.
저희 더컴퍼스는 60여 개 이상의 관공서, 스타트업, 유튜버 및 유수기업 홈페이지 및 프로젝트 개발을 성공적으로 수행하였습니다. 귀사의 홈페이지가 단순하고 일반적인 홈페이지가 아닌, 담당자님의 철저한 니즈 분석과 소통을 통해 꼭 맞는 웹사이트를 제작해 드리겠습니다.
직접 웹페이지를 만드실 때 어려움을 느끼시거나 전문가의 조언이 필요하시다면 언제든 편하게 연락해 주세요.
