웹플로우 시작하기
평생 수강
VOD
VOD 오픈

웹플로우(Webflow) 시작하기 VOD

나만의 멋진 웹사이트와 프로토타입을 웹플로우로 만들 수 있습니다. 가장 인기 있는 노코드 툴인 웹플로우를 쉽고 빠르게 시작할 수 있게 핵심 개념 잡고, 참고할만한 템플릿/플러그인도 정리해 드립니다.

VOD
3기
VOD
3기
수강 신청하기
VOD
3기
VOD
3기

강의 소개

웹플로우만 가지고도 상상하시는 거의 모든 웹서비스를 다 만들 수 있습니다.
모든 디바이스에 최적화되는 디자인, 복잡한 기능 커스터마이징까지 가능해요.

이 강의는 중급 노코드 툴인 웹플로우를 입문자가 최대한 쉽고 빠르게 시작하는데 초점을 둔 강의입니다 :)

이런걸 배워요!
  • 웹플로우로 웹사이트 만들기
  • 웹플로우로 프로토타입 만들기
  • 웹플로우를 빨리 시작할 수 있는 템플릿과 플러그인 사용 방법
  • 데이터베이스, 프론트엔드, 백엔드 등 IT 개발의 큰그림
이런 분들께 추천해요!
  • 아름다운 웹페이지/웹서비스를 만들고 싶은 분
  • 좀 더 완성도 있는 MVP를 출시하고 싶은 분
  • 내 서비스의 SEO를중요하게 생각하는 분
  • 개발자 없는 팀의 창업가, 1인 기업가, 스타트업 실무자
이런 툴을 사용해요!
webflow logo

웹플로우는 대표적인 노코드 툴이며 강력한 기능을 가진 툴입니다. 웹플로우만 가지고도 상상하시는 거의 모든 웹사이트를 다 만들 수 있습니다. PC, 테블릿, 모바일에 모두 최적화된 아름다운 사이트를요!

기존에 워드프레스, 윅스, 아임웹을 사용하시다가 한계를 느끼신 분들이나, 입문자용 노코드 툴인 글라이드(Glide), 소프터(Softr)보다 더 자유롭고 강력한 기능을 원하시는 분께 웹플로우(Webflow)가 좋은 대안입니다. 또한 어떤 노코드 툴보다 웹플로우가 구글, 네이버 등 검색엔진에 가장 잘 걸리는 검색엔진 최적화(SEO)가 잘되는 툴입니다. 디지털 마케팅에서 검색엔진 최적화가 핵심 화두로 떠오르고 있는 현재 추세에서 웹플로우는 가장 유용한 노코드 웹 빌더일 것입니다.

이 강의는 워드프레스, 윅스보다 더 강력한 웹사이트 빌더인 웹플로우(Webflow)로 나만의 멋진 서비스를 만들어보는 강의입니다. 아주 간단한 랜딩페이지부터 복잡한 프로토타입까지 순차적으로 만들어볼 것입니다. 수강생 여러분들이 최대한 시행착오를 줄이면서 결과물을 빨리 내실 수 있도록, 웹플로우와 함께 쓰면 유용한 플러그인들과, 우수할 뿐 아니라 무료로 활용 가능한 디자인 템플릿과 라이브러리도 알려드리겠습니다.

웹플로우의 핵심 개념과 유용한 팁들을 꾹꾹 눌러담아, 쉽고 빠르게 시작할 수 있도록 도와드릴게요!

이 강의는 '노코드 프로토타이핑 VOD' 중 웹플로우(Webflow)의 개념, 실습, 활용과 관련된 부분만 발췌/재편집한 강의입니다.
노코드 툴을 비교해보며 다양한 툴을 학습하고 싶으시거나, 노코드의 전체적인 큰 그림을 보고 싶으신 분은 '노코드 프로토타이핑'을 수강해주세요 :)

노코드 프로토타이핑 강의 살펴보기

강의를 통해 만들 결과물👍

웹플로우를 활용해서 디스콰이엇을 복제해보며, 웹플로우의 기초부터 고급 기능까지 배워봅니다.

웹플로우 어렵지 않아요!
글라이드나 소프터보다 분명 복잡하지만, 템플릿/플러그인으로 시작하면 쉽게 시작할 수 있습니다. 제가 시행착오를 줄여드릴게요.

웹플로우의 주요 개념들을 톺아봅니다. (html/css 몰라도 돼요!)
웹플로우를 쉽게 시작하기 위한 템플릿과 플러그인을 알려드려요. 이건 다른데서 안 알려주는, 제 경험에 의한 꿀팁이랍니다!
회원 가입, 권한에 따른 로직 구현, 필터, 검색, 결제, 댓글, 알림 등을 직접 구현해볼거예요.
프론트엔드 / 백엔드 / 데이터베이스의 상호작용 등 IT 개발의 큰 그림을 직접 구현하며 체험해 볼 수 있습니다.

위 사이트는 수업 때 함께 만들 IT 제품 소개 사이트, '디스콰이엇'을 따라 만든 복제 사이트입니다. 이미지를 클릭해서 편하게 둘러보세요! 회원 가입 해보시고, 제품도 등록해보고, 댓글도 써보세요. 강의에서 이 서비스를 구현하는 방법을 하나씩 알려드릴게요!

강의 VOD 개요

이 강의는 아래와 같은 내용으로 구성되어 있습니다.

#1

웹플로우의 주요 개념
톺아보기

웹플로우(Webflow) 시작하기 강의 내용 1

웹플로우는 자유자재로 HTML, CSS, Javascript를 조작해서 자유롭게 웹사이트를 만들 수 있는 툴입니다. 그러나 이를 다루기 위해 복잡한 HTML, CSS, Javascript를 다 공부할 필요가 없습니다. 더해서 웹플로우 프로젝트는 백지에서 출발하는 게 아닌, 템플릿 위에서 시작할 때가 많으므로 보고 이해할 정도만 학습하면 됩니다. 이러한 노코드 사용자의 입장에서 핵심적인 개념만 빠르게 정리했습니다.

#2

빠르게 시작하기 위한
템플릿과 플러그인

웹플로우(Webflow) 시작하기 강의 내용 2

전문가들이 만들어 놓은 템플릿과 플러그인을 쉽게 탐색하고, 내 프로젝트로 가져올 수 있는 방법을 알려드립니다. 이러한 방법을 알고 있으면 훨씬 수월하게 내 프로젝트를 시작할 수 있습니다.

#3

간단한 연습용 프로젝트 등
다양한 실습

웹플로우(Webflow) 시작하기 강의 내용 3

복잡한 프로토타입 개발에 들어가기 전에 간단한 랜딩페이지, 간단한 디렉토리 사이트를 함께 만들어봅니다. 이전에 학습했던 기본 개념을 연습을 통해 숙지할 수 있게 구성했습니다.

#4

디스콰이엇을 복제하고
프로토타입 만들기

웹플로우(Webflow) 시작하기 강의 내용 4

웹플로우에 어느정도 숙련이 되셨나요? 이제 디스콰이엇이라는 서비스를 복제해보며, 회원 가입, 권한 관리, 다중 필터, 검색, 새 글 작성, 좋아요, 댓글 등이 가능한 커뮤니티 플랫폼을 직접 만들어봅니다.

수강 신청하기

웹플로우(Webflow) 시작하기

강의 VOD만 구매

79,000원
VOD (총 7시간 분량) 평생 엑세스
카드사 할부 가능
결제 완료 시 수강을 위한 안내 메일 발송
지금 수강하기

강의 VOD 구매 + 1:1 코칭 세션

169,000원
VOD (총 7시간 분량) 평생 엑세스
카드사 할부 가능
결제 완료 시 수강을 위한 안내 메일 발송
1:1 코칭 세션 예약을 위한 안내 메일 발송
1:1 코칭 세션은 수강생이 원할 때 예약 가능 (1회, 1시간)
수강생의 개별 문제를 이메일로 서포트
지금 수강하기

결제 관련 알아두실 것

  • 법인카드 결제 가능합니다. 본 사이트에서 카드 결제 시, 메일로 영수증이 자동 발송됩니다.
  • 예비창업패키지 등 창업지원사업 교육비 처리 가능합니다. 수료증 등의 인증서 제공 가능합니다. (내일배움카드 해당사항 없음)
  • 결제 시스템을 통해서 카드사가 제공하는 할부 가능합니다.
  • 1:1 코칭 세션 포함으로 결제하시면, 코칭을 예약하실 수 있는 링크를 안내 메일에 포함해서 보내드립니다. 강의 수강과 별개로 원하실 때 아무때나 1:1 코칭 예약하시면 됩니다.
  • 사용하는 노코드 솔루션들은 유료 솔루션이나 강의 기간 동안에는 무료 기능으로 학습 가능합니다. 다만 실제로 서비스를 운영하시고자 한다면 약간의 비용은 지불하실 것을 감안하셔야 합니다.
  • 추가적으로 궁금하신 사항은 본 사이트의 우측 하단 채팅 상담을 통해 문의 해주세요 :)

수강생들의 후기

수강생들이 인정한 검증된 컨텐츠와 커뮤니티 기반의 끈끈한 강의 운영

김창수
김창수
부동삶클래스 대표

사업을 하면서 작은 수정에도 수십만원씩 요구하는 업체를 보며 회의감이 들었습니다. 내가 배워서 직접해 버리고 싶었습니다. 강의를 통해 직접 서비스를 만들었고, 실제 결제까지 일어나는 성과까지 냈습니다. 디테일한 설명, 1:1 코칭, 런치타임 미팅까지 모든 것이 완벽했습니다. 최근 몇 년간 들었던 강의중에 최고입니다. 창업을 생각하는 분이라면 반드시 시간과 비용을 투자해서 배우시길 진심 추천합니다.

김윤경
김윤경
어센트코리아 본부장

매우 실무적으로 도움이 되는 수업이었습니다. 중간에 DB 연동하는 부분이 어려워서 좀 고생했지만 노코드에 대해서 익숙해기에는 충분한 시간이었습니다. 노코드로 서비스의 기본 개념을 구현하기에는 넘 훌륭한 수업이었습니다. 이 수업을 강력하게 추천합니다.

한재호
한재호
아모레퍼시픽 신사업기획

아이디어가 맞을까? 고민하는 시간이 아깝습니다.
고민할 시간에 노코드 프로토타이핑을 활용해 고객에게 테스트해볼 프로덕트를 만들 수 있습니다.

손원우
손원우
삼성전자

아이디어가 넘치지만 직접 구현을 할 수 없었던 기획자에게 최고의 강의입니다. 실제로 동작하는 서비스를 직접 만들어보세요!

최성욱
최성욱
행복나눔재단 기획운영

비교적 소규모 조직으로 운영되는 비영리, 소셜 벤처 실무자에게도 추천하고 싶은 강의입니다. 신사업 개발에서도 추가 비용과 외주없이 프로토타입을 만들 수 있을 것입니다. 기존 사업의 리소스 효율화에도 효과적일 것이라 생각합니다.

김성수
김성수
스타트업 대표

IT 비전공자여서 좀더 IT 개발에 흐름을 이해하기위해 수업을 듣게되었습니다. 노코드의 세계가 내가 생각한 것보다 넓은것 같고, 스타트업들이 항상 말하는 린하게 가설을 검증해 볼 수 있는 아주 좋은 도구라고 생각합니다. 스타트업 대표님들께 너무 추천드립니다.

허필선
허필선
작가

노코드로 구현할 수 있는 것이 생각보다 많다는 것을 알았습니다. 우선 제가 생각한 아디이어를 구현할 수 있게 해주셔서 너무 감사했습니다. 그리고 웹 클립핑을 이용한 서비스 구현, 커뮤니티 사이트 구현 등 기존에 생각하지 못했던 아이디어를 알 수 있어 감사했습니다. 정말 듣기를 잘했다고 생각합니다.

이수진
이수진
술펀 대표

신규 서비스를 적은 비용으로 빠르게 피봇해 보고 싶은 스타트업, 개발자 쓰기는 부담스럽고 커스터마이징은 필요한 초기 단계 서비스, 단기간만 필요한 제품, 서비스나 프로젝트를 위한 랜딩페이지... 이런 걸 고민하신다면 노코드보다 좋은 툴은 없다고 생각합니다. 그리고 강의 리더 병준님이 아낌없이 퍼부어 주세요. 가성비와 가심비를 모두 만족시키는 프로그램입니다.

황경환
황경환
발란 전략담당

웹서비스를 만든다고 하면 어렵게만 다가왔었고, 어디서부터 시작해야할지 몰랐습니다. 다른 사이트에서 HTML이나 CSS 수업을 듣다가도 쉽게 완주를 하지 못했구요. 그러던 중 우연히 알게된 이 수업을 통해서, 코딩 없이도 충분히 MVP레벨에서 사용 가능한 혹은 홍보 목적으로 사용이 가능한 프로덕트를 만들 수 있게 되었습니다.

서동인
스타트업 대표

짧은 기간만에 비전공자인 제가 코딩 없이 개발을 할 수 있는 것이 충분히 가능하다는 희망을 얻었습니다. 선생님이 자세하고 친절하게 강의해주시고, 적극적으로 도와주고자 하시는 것을 보며 정말 감사했습니다. 차근차근 만들어가면 제가 구상하고 있는 서비스 개발을 할 수 있을 것 같습니다.

최호성
예비창업자

아이디어를 서비스로 만들기 위해서 그동안 개발자 채용이 답이라고만 생각하고 전전긍긍하던 제게 이 강의는 한줄기의 빛이었습니다! 단연코 국내 최고의 노코드 툴 강의이고, 개발 지식이 없으신 분들도 노코드 툴을 통해 내 아이디어를 직접 서비스로 만들어낼 수 있는 강의입니다. 강추합니다!

임수연
스타트업 기획자

코드없이 웹앱을 빠르게 만들 수 있어서 개인 프로젝트 뿐만 아니라 업무에서도 잘 쓰고 있습니다! 나중에는 노코드가 엑셀같은 도구가 될 것 같아요.

한재호
한재호
아모레퍼시픽 신사업기획

아이디어가 맞을까? 고민하는 시간이 아깝습니다.
고민할 시간에 노코드 프로토타이핑을 활용해 고객에게 테스트해볼 프로덕트를 만들 수 있습니다.

김창수
김창수
부동삶클래스 대표

사업을 하면서 작은 수정에도 수십만원씩 요구하는 업체를 보며 회의감이 들었습니다. 내가 배워서 직접해 버리고 싶었습니다. 강의를 통해 직접 서비스를 만들었고, 실제 결제까지 일어나는 성과까지 냈습니다. 디테일한 설명, 1:1 코칭, 런치타임 미팅까지 모든 것이 완벽했습니다. 최근 몇 년간 들었던 강의중에 최고입니다. 창업을 생각하는 분이라면 반드시 시간과 비용을 투자해서 배우시길 진심 추천합니다.

김윤경
김윤경
어센트코리아 본부장

매우 실무적으로 도움이 되는 수업이었습니다. 중간에 DB 연동하는 부분이 어려워서 좀 고생했지만 노코드에 대해서 익숙해기에는 충분한 시간이었습니다. 노코드로 서비스의 기본 개념을 구현하기에는 넘 훌륭한 수업이었습니다. 이 수업을 강력하게 추천합니다.

손원우
손원우
삼성전자

아이디어가 넘치지만 직접 구현을 할 수 없었던 기획자에게 최고의 강의입니다. 실제로 동작하는 서비스를 직접 만들어보세요!

최성욱
최성욱
행복나눔재단 기획운영

비교적 소규모 조직으로 운영되는 비영리, 소셜 벤처 실무자에게도 추천하고 싶은 강의입니다. 신사업 개발에서도 추가 비용과 외주없이 프로토타입을 만들 수 있을 것입니다. 기존 사업의 리소스 효율화에도 효과적일 것이라 생각합니다.

김성수
김성수
스타트업 대표

IT 비전공자여서 좀더 IT 개발에 흐름을 이해하기위해 수업을 듣게되었습니다. 노코드의 세계가 내가 생각한 것보다 넓은것 같고, 스타트업들이 항상 말하는 린하게 가설을 검증해 볼 수 있는 아주 좋은 도구라고 생각합니다. 스타트업 대표님들께 너무 추천드립니다.

허필선
허필선
작가

노코드로 구현할 수 있는 것이 생각보다 많다는 것을 알았습니다. 우선 제가 생각한 아디이어를 구현할 수 있게 해주셔서 너무 감사했습니다. 그리고 웹 클립핑을 이용한 서비스 구현, 커뮤니티 사이트 구현 등 기존에 생각하지 못했던 아이디어를 알 수 있어 감사했습니다. 정말 듣기를 잘했다고 생각합니다.

이수진
이수진
술펀 대표

신규 서비스를 적은 비용으로 빠르게 피봇해 보고 싶은 스타트업, 개발자 쓰기는 부담스럽고 커스터마이징은 필요한 초기 단계 서비스, 단기간만 필요한 제품, 서비스나 프로젝트를 위한 랜딩페이지... 이런 걸 고민하신다면 노코드보다 좋은 툴은 없다고 생각합니다. 그리고 강의 리더 병준님이 아낌없이 퍼부어 주세요. 가성비와 가심비를 모두 만족시키는 프로그램입니다.

황경환
황경환
발란 전략담당

웹서비스를 만든다고 하면 어렵게만 다가왔었고, 어디서부터 시작해야할지 몰랐습니다. 다른 사이트에서 HTML이나 CSS 수업을 듣다가도 쉽게 완주를 하지 못했구요. 그러던 중 우연히 알게된 이 수업을 통해서, 코딩 없이도 충분히 MVP레벨에서 사용 가능한 혹은 홍보 목적으로 사용이 가능한 프로덕트를 만들 수 있게 되었습니다.

서동인
스타트업 대표

짧은 기간만에 비전공자인 제가 코딩 없이 개발을 할 수 있는 것이 충분히 가능하다는 희망을 얻었습니다. 선생님이 자세하고 친절하게 강의해주시고, 적극적으로 도와주고자 하시는 것을 보며 정말 감사했습니다. 차근차근 만들어가면 제가 구상하고 있는 서비스 개발을 할 수 있을 것 같습니다.

최호성
예비창업자

아이디어를 서비스로 만들기 위해서 그동안 개발자 채용이 답이라고만 생각하고 전전긍긍하던 제게 이 강의는 한줄기의 빛이었습니다! 단연코 국내 최고의 노코드 툴 강의이고, 개발 지식이 없으신 분들도 노코드 툴을 통해 내 아이디어를 직접 서비스로 만들어낼 수 있는 강의입니다. 강추합니다!

임수연
스타트업 기획자

코드없이 웹앱을 빠르게 만들 수 있어서 개인 프로젝트 뿐만 아니라 업무에서도 잘 쓰고 있습니다! 나중에는 노코드가 엑셀같은 도구가 될 것 같아요.

강사 소개