Webflow

소개

주요 기능

• 비주얼 디자이너에 레이아웃을 배치 → 프로덕션용 HTML/CSS/JS 자동 생성
• CMS에 컬렉션 모델링 → 비개발자도 라이브 사이트 항목을 편집
• Publish 클릭 → SSL 포함한 글로벌 호스팅과 빠른 전송
• 프로젝트 내 로케일 설정 → 단일 코드베이스에서 지역화된 사이트 제공
• Figma to Webflow 가져오기 → Figma 레이아웃을 불러와 디자이너에서 다듬기

이런 상황에 추천

• 마케팅 매니저가 엔지니어 자원 없이 신제품 마이크로사이트를 런칭할 때
• 콘텐츠 에디터가 캠페인 전 라이브 사이트에서 블로그와 CMS 항목을 바로 업데이트할 때
• 프리랜스 디자이너가 Figma 랜딩을 가져와 같은 날 반응형 버전으로 배포할 때

이렇게 써보세요

1. 1
   제품 랜딩 페이지 출시

   가입 후 Designer를 열고 → Figma를 가져오거나 요소를 끌어 섹션을 구성하고 모바일 브레이크포인트와 인터랙션을 설정합니다 → 사이트 플랜 연결 후 Publish를 눌러 Webflow 호스팅으로 반응형 페이지를 배포합니다.

2. 2
   CMS 기반 블로그 만들기

   프로젝트에서 게시물용 Collection(제목, 본문, 작성자, 이미지)을 모델링합니다 → 템플릿 페이지에 Collection 필드를 연결하고 비기술자용 Editor 권한을 설정합니다 → CMS에 글을 추가하고 Publish하면 라이브 블로그가 즉시 업데이트됩니다.

3. 3
   다국어 사이트 배포

   프로젝트 설정에서 Localization을 활성화하고 로케일을 추가합니다 → 같은 코드베이스의 CMS에 번역 콘텐츠를 넣고 템플릿에 로컬라이즈된 필드를 매핑합니다 → Publish하면 SSL 포함 호스팅으로 여러 언어 버전을 제공합니다.

4. 4
   Figma 레이아웃을 실무 사이트로 다듬기

   Figma to Webflow로 레이아웃을 가져온 뒤 → 스타일과 클래스, 반응형 규칙을 정리하고 플레이스홀더를 CMS 콘텐츠로 교체합니다 → Publish하면 Webflow가 생산용 HTML/CSS/JS를 자동으로 생성해 줍니다.

5. 5
   프리랜서 포트폴리오 신속 제작

   webflow.io 도메인으로 무료 프로젝트를 시작하고 템플릿을 선택합니다 → 프로젝트와 사례 연구용 간단한 CMS를 추가하고 레이아웃을 반응형으로 조정합니다 → 준비되면 호스팅 플랜을 추가해 커스텀 도메인으로 Publish합니다.

장단점

시작하는 법

1. 1 webflow.com에서 계정 생성 후 브라우저로 비주얼 디자이너를 엽니다
2. 2 새 프로젝트 시작하거나 Figma to Webflow로 기존 레이아웃을 가져옵니다
3. 3 섹션을 몇 개 추가하고 Publish를 눌러 webflow.io 도메인으로 배포합니다