#5 Webflow! No-code 웹사이트 디자인 툴
<UXUI 디자이너의 성장 기록>
계획을 세운대로 하나씩 차근차근 해나가고 있다. 너무 급하게 서두르는 것은 내 성격상 좋은 효과를 보진 못했다. 맥북도 샀고, 수영장도 결제했다. 더 효율적인 리서칭과 시간 단축을 위해 chat GPT도 결제했다. 3만원이나 나오다니. 그 값어치는 톡톡히 해야겠다... Webflow라는 노코드 디자인 툴을 배우기 위해 유튜브로 선행 학습도 했었다. 오늘부터 webflow를 본격적으로 공부하려고 한다. 그럼 webflow가 뭐지?
✅ Webflow란?
Webflow는 디자이너가 코드 없이 웹사이트를 디자인, 개발, 배포할 수 있는 올인원 플랫폼
노코드 툴이지만 HTML, CSS, JavaScript 구조를 시각적으로 다룰 수 있어서 개발에 가까운 자유도를 제공
� 주요 특징
시각적 인터페이스: 드래그 앤 드롭 방식으로 레이아웃과 스타일을 자유롭게 구성
반응형 디자인 지원: 데스크탑, 태블릿, 모바일 사이즈별 디자인 조정 가능
CMS 기능: 블로그, 포트폴리오 등 콘텐츠 관리 기능 포함
호스팅 포함: Webflow 서버에 직접 배포 가능
애니메이션 & 인터랙션: 마우스 오버, 스크롤 등 다양한 애니메이션 구현 가능
생산성: 디자인과 개발 사이의 브릿지를 줄여, 프로덕트 디자이너로서 빠르게 MVP나 프로토타입 제작 가능
� 추천 리소스 정리
Webflow University (공식) → 가장 체계적이고 잘 짜여 있음. 꼭 보는 걸 추천!
YouTube: Flux, Ran Segall, Finsweet → 실무에 가까운 워크플로우와 팁들이 많음
커뮤니티 & 예제 템플릿 분석: → Webflow Showcase에서 다른 사람 작업 보면서 구조 학습
� 팁
처음엔 클론해서 구조 뜯어보기: Webflow는 클론 가능한 프로젝트가 많아서 실제 구현 방식을 쉽게 파악할 수 있다.
하나의 사이드 프로젝트로 끝까지 만들어보기: 포트폴리오 페이지나 가상의 브랜드 웹사이트를 만들어보는 게 최고라고 한다.
Figma + Webflow 연계도 나중에 중요하니까 익숙해지면 디자인을 Webflow로 옮기는 연습 차후에 진행.
그럼 이제 나의 계획에 대입을 해보자!
� 기본 전제 요약 (기억나는 대로 반영함)
월금 근무 (08:3017:30) + 왕복 3시간 통근
수영: 월수금 20:00~20:50
필라테스: 화목 20:00~20:50
구몬 일본어 통화: 수요일 21:15~21:30
11:30 취침
화목엔 공부하지 않음
월 1회 토요일 휴식
✨ Week별 목표 요약
✅ 1~2주차
Webflow 인터페이스 익히기
HTML/CSS 시각적 구조 감 잡기
Webflow 기본 구성요소(섹션, 컨테이너, 텍스트, 이미지 등) 실습
✅ 3~4주차
반응형 페이지 제작 실습
그리드 & 플렉스박스 기반 레이아웃 만들기
간단한 1페이지 사이트 제작
✅ 5~6주차
인터랙션 (hover, scroll, animation) 실습
애니메이션 타이밍/트리거 설정 연습
✅ 7~8주차
Webflow CMS 학습 및 적용
클론한 포트폴리오 사이트 분석 + 개인 포폴 사이트 제작
배포 & 정리
무리한 일정은 사람을 더 지치게 하기에 1주씩 분배되었던 주간 일정을 2주씩으로 조정하였다. 2달 안에 webflow를 격파하고 그 다음 목표인 Framer로 넘어가려고 한다.
오늘은 여기까지.
회사 앞, 동네, 호수 등 어느곳이든 벚꽃이 만개하고 있다.
따듯한 봄 날씨에 점점 옷이 얇아져간다.
모두의 인생에 만개할 순간을 준비하는 지금을 응원하면서.
모두, 만개할 순간이 어서 달려오기를.
