[ 패스트 캠퍼스 PM 부트캠프 6기 ] 현직자 특강 : 노코드 툴 활용하기 feat. webflow

노코드의 시대가 왔다(아마?)

늦지 않았다!

안녕하세요? 코딩 수업에서 결과물을 만들다가 너무 힘들어 눈물을 흘리며 코드를 입력했던.. 사람입니다. 예. 그 뒤로 코딩과는 손절하고 살아왔지만 코딩을 할 줄 알아야 된다는 소리를 듣고, 개발을 해보면 좋을 거 같은데 못하겠는데,, 어,, 어뜩하라고,, 생각하면서 지내다가 이번 부트캠프에서 노코드 툴 강의를 듣게 되었다. 나에게도 기회가 왔다..~~!

---

노코드?

노코드란

노코드는 말 그대로 코딩 없이, 프로그래밍 지식이 없어도 소프트웨어나 웹 애플리케이션을 개발할 수 있는 툴이다. 이러한 노코드 툴은 비개발자, 디자이너, 마케터 등 다양한 직군의 사람들이 아이디어를 쉽게 현실화할 수 있도록 도와준다.

 

노코드 툴 종류

현재 다양한 노코드 툴이 사용되고 있으며 카테고리 별로 나눠 구분할 수 있다. 우리는 추후 랜딩페이지를 구성할 예정이었기 때문에 Webflow를 이용했다.

웹 및 모바일 애플리케이션 개발 
Webflow : 웹사이트 디자인 및 개발을 위한 노코드 플랫폼
Bubble : 복잡한 웹 애플리케이션을 구축할 수 있는 도구
Adalo : 모바일 앱 개발을 쉽게 할 수 있는 플랫폼.

자동화 및 워크플로우 관리
Zapier : 다양한 애플리케이션을 연결해 자동화 워크플로우를 구성할 수 있는 도구
Integromat (Make) : 더 복잡한 자동화를 설정할 수 있는 툴
Airtable : 데이터베이스와 스프레드시트 기능을 통합하여 쉽게 관리할 수 있는 도구

e커머스 및 마케팅
Shopify : 프로그래밍 지식 없이 온라인 쇼핑몰을 구축할 수 있는 플랫폼
Unbounce : 랜딩 페이지를 쉽게 만들고 A/B 테스트를 할 수 있는 도구
Mailchimp : 이메일 마케팅 캠페인을 쉽게 관리하고 자동화할 수 있는 툴

데이터베이스 및 백엔드 관리
Airtable : 스프레드시트와 데이터베이스의 기능을 결합한 도구
Glide : 구글 스프레드시트를 기반으로 모바일 앱을 제작할 수 있는 툴
Notion : 작업 공간 및 데이터베이스를 효율적으로 관리할 수 있는 노코드 도구.

디자인 및 프로토타이핑
Figma : 협업 기반의 디자인 도구로, UI/UX 디자인 작업에 사용됨
Sketch : 웹 및 모바일 UI 디자인을 쉽게 할 수 있는 도구
Canva : 그래픽 디자인을 쉽게 할 수 있는 툴로, 비즈니스 카드부터 SNS 포스터까지 다양한 디자인을 지원.

 

 

노코드 툴의 범위와 대중성

노코드 툴을 사용하면 웹사이트 및 웹 애플리케이션 구축은 물론 모바일 애플리케이션 개발, 업무 프로세스 자동화, 데이터 관리 및 분석, 마케팅 캠페인 운영을 할 수 있다. 노코드 툴은 최근 빠르게 성장하고 있는 시장이다. 비개발자가 결과물을 만들 수 있고, 빠른 프로토타이핑이 가능하며 개발자에게 의존하지 않아 개발 비용 절감, 협업 강화, 다양한 분야에서의 높은 사용성 등과 같은 이유로 앞으로가 더 기대되는 시장이다.

강사님께서도 노코드를 소개하실 때 이제는 패스트파이브(기획자, 디자이너, 웹앱개발자, 서버개발자, 마케터)가 아닌 패스트원(기획자)의 시대가 오며 기획자가 어느 정도 수준이 아닌 모든 걸 할 수 있는 시대가 올 것이라고 말씀하셨다. 

 

---

실습과 함께한 강의

웹플로우

강의는 총 3강으로 구성되었고, 1강에서는 웹플로우에 대한 소개와 간단한 툴 사용법, 2강에서는 직접 강의 자료를 보고 따라서 만들어 보기(카드만들기), 3강에서는 반응형, 데이터 연동 작업에 대해서 배웠다.

 

실습과 웹플로우 용어

실습은 강사님께서 먼저 천천히 예시와 함께 알려주시고, 실습 시간을 제공해 직접 만들어 보는 과정으로 구성되었다. 노코드 툴이라서 프로그래밍에 대한 지식이 없어도 되지만 아무래도 기본 베이스는 코딩이 바탕이 되기 때문에 관련 지식이 있으면 좀 더 수월하게 작업할 수 있겠다는 생각이 들었다. 강사님께서도 웹플로우에서 사용하는 용어들이 생소할 수 있어 쉬운 이해를 위해 HTML, CSS, JS에 대한 개념을 설명해 주셨었다. 나는 코딩에 대한 개념이 살짝 있는 상태라서 그런지 진입장벽이 높게 느껴지진 않았다.

 

---

 

인상 깊었던 부분

강의에서 배웠던 내용이 많아서 개인적으로 좋았고, 공유하고 싶었던 내용들 위주로 정리해 보았다.

 

1. 검색 단축키 control + E / command + E

검색 단축키

웹플로우에서는 이미지, 텍스트 등 요소들을 쉽게 추가할 수 있는데 이때 Add Elments 카테고리를 선택해서 해당 요소들을 확인하고 추가할 수 있다. 하지만 자주 쓰는 요소들은 빠르고 효율적으로 추가하는 것이 좋기 때문에 검색 단축키를 사용해(control + E / command + E) 해당 요소들을 검색하면 쉽고 빠르게 요소를 추가할 수 있다. 이 단축키를 몰랐으면 작업 시간이 2배는 더 걸렸을 것 같다..

 

 

2. Flex 기능

Flex

강사님이 강조하셨던 Flex 기능이다. 쉽게 설명해보자면 여러 가지 요소들이 들어가고 그걸 정렬해야 할 때 사용되는 기능이다. 만약 내가 이미지, 제목, 본문을 넣고 싶다면 Div Block이라는 방을 만들고(그룹화 개념) 그 안에 이미지, Heading, text 요소들을 넣는다. 이후 Flex를 활용해 수평, 수직 정렬을 조절하면 그 요소들이 가로, 세로 형태로 쉽게 정렬할 수 있으며 Gap을 통해 요소 사이사이 간격을 조절할 수 있다. 그룹화 개념이다 보니 하나하나 손 쓸 필요가 없고, 한 번에 그룹값을 설정할 수 있다는 장점이 있다.

 

01

Flex 설정

1번 사진이 Flex 설정을 Vertical(세로) 정렬한 것, 2번 사진이 Flex 설정을 Horizontal(가로) 정렬한 것이다.

 

 

3. Margin, Padding 값 설정 단축키 Shift, Alt(Option)

01

Margin, Padding

요소의 바깥 부분의 공백을 Margin, 요소의 안쪽 부분 공백을 Padding이라고 부른다. 1번 사진이 Margin, 2번 사진이 Padding이다. 요소를 구성할 대 시각적인 부분에서 Margin, Padding 설정을 필수이기 때문에 값 설정 단축키도 정말 많이 사용했다.

 

01

Margin, Padding 설정

Spacing에서 Margin, Padding 값을 설정할 수 있고 변경하고 싶은 값을 누르면 2번째 사진처럼 확인할 수 있다. 상하좌우 개별적으로 값을 다 다르게 입력할 때는 하나하나 입력하면 되지만 거의 상하좌우, 상하, 좌우 값은 통일하기 때문에 관련 단축키를 알면 편하다.

 

값을 입력하고 Shift + Enter을 누르면 상하좌우 모든 값이 동일하게 적용된다. 상하/좌우 값만 통일하고 싶은 경우 상 또는 하 / 좌 또는 우 둘 중 하나의 값을 입력하고 Alt / Option + Enter을 누르면 상하/좌우 값만 동일하게 적용된다.

 

---

 

웹플로우 단축키 정리

검색 단축키 : control + E / command + E
Margin, Padding 설정 단축키 : 모든 값 통일 Shift + Enter, 상하/좌우 값 통일 Alt / Option + Enter
화면 확대 축소 단축키 : control + +/- / command + +/-

 

지금 생각하는 건 이정도,, 나중에 또 생각나는 거 있으면 추가해야겠다!

 

---

웹플로우를 알게 된 후 세상이 바뀌었어요!

빵긋

광고 멘트 따라해봤다. 근데 맞는 말이다. 노코드 툴이라는 걸 알기 전엔 코딩 장벽이 너무너무너무 높았는데 이젠 내가 결과물을 만들 수 있다니.. 사실 나는 앞에서 언급만 강사님 말씀처럼 패스트원. 혼자서 프로젝트를 A부터 Z까지 진행하고 싶다는 생각을 항상 하고 있었는데 어쨌든 움직이는 결과물을 만들려면 개발을 해야 돼서 항상 디자인 결과물까지만 만들 수 있었다. 그런데 이제 내가 개발까지 할 수 있다면,, 기회가 왔다!! 그래서 이번 신규프로젝트에서도 익숙한 것보다는 새로운 랜딩페이지 만들기에 좀 더 집중해서 결과물을 만들었다. 나에게 코딩은 항상 해결해야 할 과제 같은 느낌이었는데 노코드 툴이라는 것으로 조금 해결된 것 같아서 좋다. 늘 만들고 싶었던 결과물을 만들 수 있게 돼서 정말 좋다! 웹플로우도 더 공부해서 뿌듯하고 자랑하고 싶은 결과물을 내 손으로 직접 만들고 싶다ㅎㅎ

 

나처럼 개발 과정을 거쳐서 나오는 결과물을 얻고 싶은데 그럴 수 없을 때 노코드 툴 사용을 추천한다!! 웹플로우도~~

 

---

Webflow 웹플로우 정보

웹플로우 관련 정보를 알려드리며 글을 마무리하려고 한다.

 

웹플로우 가입 링크

https://webflow.com/?utm_medium=affiliate&ps_partner_key=cGF1bGp1bmc2NDk&ps_xid=2JWkoTEEBN8Bzc&gsxid=2JWkoTEEBN8Bzc&gspk=cGF1bGp1bmc2NDk

Webflow: Create a custom website | Visual website builder

 

 

유튜브 채널

강사님께서 직접 운영하시는 웹플로우 유튜브 채널

여기서 웹플로우의 기본적인 내용들을 알 수 있으니 한 번 들어보시길 추천합니당~~

https://youtube.com/@mfl-webflow?feature=shared

웹플로우전문가

 

오픈채팅방 

웹플로우 관련 궁금한 것들을 공유하는 공간이다.

https://open.kakao.com/o/gtRFl5ig

Webflow community