Thumbnail
개발 · 프로그래밍 웹 개발

웹플로우(Webflow) 시작하기 - 코딩 없이 자유도 높은 프로토타입 만들기 대시보드

(5)
8개의 수강평 ∙  219명의 수강생
78,100원

월 15,620원

5개월 할부 시
지식공유자: 일잘러 장피엠
총 33개 수업 (7시간 2분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

초급자를 위해 준비한
[웹 개발, 기획 · 전략 · PM] 강의입니다.

나만의 멋집 웹사이트와 프로토타입을 웹플로우로 만드세요! 쉽고 빠르게 시작할 수 있게 핵심 개념 잡고, 참고할만한 템플릿/플러그인도 정리해 드립니다.

✍️
이런 걸
배워요!
웹플로우로 웹사이트 만들기
웹플로우로 프로토타입 만들기
웹플로우 프로젝트를 빨리 시작할 수 있는 템플릿과 플러그인 사용 방법
데이터베이스, 프론트엔드, 백엔드 등 IT 개발의 큰그림

강력한 웹사이트 빌더인 웹플로우를 이용해서
디스콰이엇 웹사이트를 만들어요! 🙋

이런 분들이라면 추천해요 👀

아름다운 웹페이지를
만들고 싶은 분

최소한의 완성도가 있는
MVP를 만들고 싶은 분

내 서비스의 SEO를
중요하게 생각하는 분

개발자가 없는 1인 기업가,
스타트업 실무자

강의에서 만들 것 ✍️

노코드로 구현한 디스콰이엇 사이트

  • 실제 동작하는 프로토타입이므로 회원 가입해서 테스트해보셔도 좋습니다.
  • 회원 가입, 권한에 따른 로직 구현, 필터, 검색, 결제, 댓글, 알림 등을 직접 구현해볼거예요.

가장 강력한
노코드 툴, 웹플로우(Webflow)

웹플로우는 노코드 커뮤니티에서 가장 주목받고 있으며, 가장 강력한 노코드(No-code) 툴입니다. 웹플로우만 가지고도 상상하시는 거의 모든 웹사이트를 다 만들 수 있습니다. PC, 테블릿, 모바일에 모두 최적화된 아름다운 사이트를요!


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

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

강의에서 배울 것 ✍️

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

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

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

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

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

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

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

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


예상 질문 Q&A 💬

Q. IT에 대한 사전 지식이 있어야 하나요?

입문자를 배려해서 강의를 제작했습니다. IT 개발을 처음해보신 분도 쉽게 따라하실 수 있습니다. 다만 코딩을 안할 뿐이지, 코딩의 결과물과 비슷한 결과물을 만드는 강의입니다. 그래서 HTML, CSS, 데이터베이스 등 웹 개발과 관련 개념들은 나오게 됩니다. 오히려 이런 노코드 강의를 통해서 웹 개발에 대해서 학습해보시는 것도 저는 좋다고 생각합니다.

Q. 그렇다면 따로 개념 공부를 해야하나요?

컴퓨터 공학적 개념이 없어도 충분히 할 수 있습니다. 오히려 이 과정을 통해 프로그래밍적인 개념을 잡고, 프로그래밍적 사고력을 키우시게 될 것 같습니다. 비개발자로서 IT 업계에 계신 분들께 노코드가 정말 좋은 교육 컨텐츠라고 생각합니다.

Q. 웹플로우를 사용해서 프로토타입을 만들게 되면 비용이 어느정도 드나요?

강의에서 다루는 데이터베이스와 연동되는 웹플로우 프로젝트 결과물을 만드시려면 최소 CMS 플랜 (월 $29)은 결제해주셔야 합니다. 또한 회원 가입 및 멤버십 기능을 붙이시려면 회원 관리와 관련된 플러그인인 멤버스텍 (월 $29)도 결제해야 합니다. 웹플로우는 무료 기능으로는 1페이지 웹사이트 정도만 만들 수 있습니다.

Q. 어떤 경우에 웹플로우를 추천하나요?

  • 자유롭게 디자인을 커스터마이징하고 싶을 때
  • 리스트에서 필터, 검색 기능이 중요할 때 (복합 필터링, 이미지로 필터링 등)
  • 검색엔진 최적화(SEO)를 중요하게 생각하는 경우

Q. 따로 컨설팅이나 코칭을 해주시나요?

VOD에 대한 별도의 1:1 코칭은 어렵지만 댓글 남겨주시면 피드백 드려볼게요. 노코드 관련해서 소통하고 피드백 드리는 채널로는 제가 운영하고 있는 "한국 노코드 커뮤니티" 웹사이트 및 카톡 오픈채팅방이 있으니 여기에 참여하시는 것도 추천드립니다. 무료이고 실시간으로 피드백도 드려볼게요.

지식공유자 소개 ✒️

안녕하세요, 저는 노코드 에반젤리스트 일잘러 장피엠입니다.

저도 문과 출신의 IT업계 기획자였습니다. 10년의 커리어를 쌓으면서도 코딩/IT 개발을 몰라서 답답하고, 좌절할 때가 많았습니다. 그러다가 '노코드(No-code)'라는 새로운 기술 트렌드를 발견했습니다. 이제 아이디어만 있다면 코딩을 몰라도 디지털 세상에서 멋진 결과물을 만들 수 있다는 것을 스스로 확인했습니다.

노코드라는 기술은 이제 막 도입되는 최신 트렌드입니다. 노코드를 학습해서 내 일과 비즈니스에 적용할 수 있게 되면 여러분들은 훨씬 더 큰 성과와 커리어적인 성취를 얻으실 수 있을 것이라 생각합니다. 노코드는 코딩보다 훨씬 쉽습니다. 코딩 만큼의 자유도는 아니지만 꽤 완성도 있는 결과물을 훨씬 쉽게 만들 수 있습니다. 그러니 수강생들이 훨씬 빠르게 결과물을 만들고, 더 큰 효능감과 재미를 느낍니다. 우린 전문 개발자가 아니잖아요. 어렵게 배우다가 지치지 말고, 노코드로 재밌게 배우고 빠르게 내 일에 적용해보세요!

강의에서 활용하는 구글 스프레드시트 DB를 복제할 수 있는 링크를 정리해 드립니다. 도서 구매 신청 프로젝트 DB 복제에어비앤비 프로토타입 프로젝트 DB 복제에서 확인하실 수 있어요.

  • 전) 팀블라인드 사업개발팀 리더
  • 전) 사운들리 제품 관리자
  • 전) SK텔레콤 세일즈 매니저
  • 서울대학교 경제학부 졸업 (찐문과!)
  • 국내 최대 노코드 커뮤니티 '한국 노코드 커뮤니티' 리더
  • 유튜브 일잘러 장피엠 채널 운영
  • 노코드 강의 사이트인 '노코드캠프' 대표
  • 누적 수강생 500명 이상
  • 매우 높은 수강생 만족도 (평점 4.9)

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
멋지고 아름다운 웹페이지를 만들고 싶은 분
최소한의 완성도가 있는 최소기능제품(MVP)을 만들고 싶은 분
내 서비스의 검색엔진 최적화(SEO)를 중요하게 생각하는 분
개발자 없는 팀의 창업가 / 1인 기업가 / 스타트업 실무자

안녕하세요
일잘러 장피엠 입니다.
일잘러 장피엠의 썸네일
노코드 에반젤리스트 일잘러 장피엠입니다. 커리어 동안 초기 스타트업에서 제품-시장 적합성(Product-Market Fit)을 찾는 일을 주로 했습니다. 한국 노코드 커뮤니티 리더이자 노코드캠프 운영자로서 노코드를 널리 알리는 노코드 에반젤리스트로 활동하고 있습니다. 빠르게 실행하는 것에 초점을 두고 노코드를 활용한 MVP 제작, 업무 자동화 등에 대해서 강의하고 있습니다.

- 한국 노코드 커뮤니티 리더
- 노코드 강의 사이트 “노코드캠프” 운영
- 노코드 관련 유튜브 “일잘러 장피엠” 운영
- 전) 팀블라인드 사업개발팀 리더
- 전) 사운들리 제품 관리자
- 전) SK텔레콤 세일즈 매니저
- 서울대학교 경제학부 졸업 (찐문과!)
커리큘럼 총 33 개 ˙ 7시간 2분의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 웹플로우의 기초
웹플로우 툴 소개 미리보기 11:54 웹플로우 에디터 메뉴 구성 및 프로젝트 시작 준비 미리보기 15:07 웹플로우의 주요 Component 및 Class 개념 소개 미리보기 16:32
웹플로우의 Size 개념 소개 04:18
웹플로우의 Layout 개념 소개 14:27
웹플로우의 반응형 디자인 기초 06:38
웹플로우 CMS 개념 소개 02:51
섹션 3. 웹플로우 중급 응용 - 큐레이션 사이트
CMS 구성 10:08
화면 구성 18:31
애니메이션 적용 02:54
CMS Template 페이지의 추가 팁 11:19
반응형 디자인 적용 07:01
섹션 4. 웹플로우 고급 응용 - 디스콰이엇 프로토타입 복제
CMS 데이터 가져오기 15:57
기본 화면 디자인 1 - Layout, Class, Symbol 41:43
기본 화면 디자인 2 - 기타 요소 마무리 17:43
회원 관리 플러그인, 멤버스텍 설치하기 18:48
팝업 모달 디자인 19:34
멤버스텍 이용해 멤버십 기능 적용하기 07:47
Zapier로 회원 CMS 업데이트하기 08:10
Finsweet Attribute 1 - CMS Nest 17:12
Finsweet Attribute 2 - CMS Sort 08:38
Finsweet Attribute 3 - CMS Slider 03:23
Finsweet Attribute 4 - CMS Filter & 검색 14:19
Disqus 댓글창 구현 05:52
Airtable로 데이터베이스 동기화하기 12:05
새 제품 등록하기 기능 구현하기 25:25
Upvote 기능 구현하기 19:49
검색엔진 최적화(SEO) 개선하기 06:48
노코드로 결제 구현하기 18:44
강의 게시일 : 2022년 12월 16일 (마지막 업데이트일 : 2023년 05월 26일)
수강평 총 8개
수강생분들이 직접 작성하신 수강평입니다.
5
8개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
김성은 thumbnail
5
쉽게 이해할 수 있었어요
2023-08-03
충실한 날치 thumbnail
5
정말 재밌게 수강했습니다. 구현하는데 필요한 기능은 모두 들어가있어서 강추합니다.
2023-10-01
assist.bsl.investment thumbnail
5
무한복습갈게요 ㅎㅎ 좋은강의 감사드립니다.
2023-10-03
컴온1004 thumbnail
5
개념이 잡히고 좀더 연습하면 혼자서도 개발 가능할듯요~^^ 감사해요
2023-07-29
김태화 thumbnail
5
너무 알차게 공부하고있습니다!
2024-04-17