[12/16 부트캠프] 카타, 강의: 노코드 종합반 2·3주차

 

내일배움캠프 D-39 (9주차)

 

📌To Do List

* 카타: SAAS ✅

* 강의: 노코드 종합반 2·3주차 ✅

 

 

 

 

01 카타: SAAS

✏️SAAS란?

Software As A Service

클라우드 기반 소프트웨어!

뭐.. 이렇다고한다

 

내가 서치하게 된 건 slack.

지난 조에서 슬랙 ux개선하려고했다가 아닌것 같다는 피드백에 바로 고쳤던..

의미있었던......(?) 앱이다 ^^^^....

그걸 또 맡게될줄이야. 그때 당시에 조사해놨던 자료들이 있어서 빠르게 조사를 진행할 수 있었다.

 

saas기반으로 찾으라고 했는데 잘 찾았는지 모르겠다..ㅎ

 

 

 

 

02 강의: 노코드 종합반 2주차

✏️CMS

- Contents Management System

- 웹사이트에 콘텐츠 게시하는 소프트웨어

- CMS구성: 프론트엔드, 백엔드 (DB관리하는 영역과 보여지는 영역이 존재한다고함)

- 게시판, 이미지, 텍스트, 댓글 배치를 자동화시키기 때문에 웹 사이트 제작에 드는 시간과 비용이 감소함

- ex: Wix, Webflow, Ghost, MediaWiki, Shopify, Wordpress 등 

 

 

✏️에어테이블 vs 구글 스프레드시트

에어테이블과 구글 스프레드 시트를 비교해가며 에어테이블의 사용성이 왜 더 좋은지에 대해 설명을 들었다.

구글보다 에어테이블이 보다 다양한 폼 형식을 제공하고 데이터마다 관계를 잘 설정해줄 수 있다고 한다. 

데이터마다 비교가 수월하다는 뜻으로 해석했다.

 

기존에 구글 스프레드시트를 잘 쓰고있었는데 에어테이블이 더 좋다니 어떤 부분에서 좋은지 궁금했다.

전체적인 구조는 처음봐서 좀 낯설었지만 뭔가.. 노션같은 느낌으로 여러가지 기능이 제공된다고 느꼈다.

엑셀이랑 비슷한 것 같기도 하고 요새는 상당히 노션같은 느낌의 소프트웨어가 많아진 것 같다.

처음 이용할 때 어려웠지만 기능을 다 알면 정말 편리하게 이용할 수 있다!! 에어테이블도 그런 거겠지..?ㅋㅋ

 

 

 

✏️본격 구조 파악하기

 

상단 Spt 코딩클럽 노코드 DB부분이 전체적인 데이터 그룹이고

'잠재고객'라고 적힌 부분은 Table인데

그 안에 더 세부적인 건 필드라고 한다. 그냥 엑셀 생각했을 때 다양한 sheet를 만드는 개념이라고 생각했다.

DB = 엑셀 파일명 / Table = sheet / 필드 = 그 안에 여러가지 세부적인 뭐 그런것 ㅋㅋ!!

이런거...↓

 

 

 

 

 

각 섹션별 이름이 수정 가능하고 하단에 이런식으로 드롭박스가 떨어진다.

해당 사항에 맞게 카테고리를 지정해주면 끝! 나는 이메일로 할거라서 email을 선택했다.

엑셀에서 함수로 구현시켜할 부분을 여기서는 간단하게 클릭한번만으로 해결이 가능해서 편리했다.

 

 

오 single select를 누르면 하단에 다양한 선택지를 컬러별로 제작할 수 있다.

이런 부분까지 신경쓴다고? 컬러도 생각보다 많아서 좋았다 아주 세심한 포인트라서 학습하는 내내 기분 좋았다..ㅋㅋ

 

 

 

이렇게 많다!!

색깔을 직접 지정할 수 있는 기능까지 있었으면 더 좋았을텐데 그 부분은 아쉽지만

명도, 채도별로 이렇게 선택지를 많이 주는 것도 빠른선택에 있어서 나쁘지 않았다.

 

 

 

 

이렇게 설문폼을 제작하고 직접 그 폼에 들어가서 해당 내용을 입력 후 제출했더니

 

 

 

세상에.. 이런식으로 데이터가 잘 맞게 들어와있다.

이거 폼 진짜 미친거 아닐까? 너무 재밌었다!!!!!!!!!!!!!!!!

별거 아닌데 왜 재밌지? 나 왜 새로운 툴 익히는게 재밌지? 나 왜????

(쉬워서 그런듯 ㅎ)

 

 

 

 

✏️블로그 콜렉션 만들기

 

좌측 상단에 있는 CMS눌러서 추가버튼 누르면 이렇게 뜬다!

여기서 하나 알면 좋은 점! 

 

추가하면 무조건 name과 slug라는게 추가되는데

여기서 slug데이터값은 collection URL에서 설정한 값의 필드데이터라고 생각하면된다.

따라서 우리가 현재 설정해놓은 name과 slug가 추가된 것! 그냥 기본값이라고 생각하자

 

 

카테고리의 경우 '옵션'이라는 속성을 적용하면 되는데 하단에 +add option이 있다.

그걸 눌러서 각 카테고리를 지정하면된다! 

아마 option이라는 속성은 드롭다운처럼 떨어져서 여러개의 카테고리 리스트를 보여줘서

거기서 카테고리를 누르면 거기에 맞는 데이터들이 나올 것 같다.

 

한국어 번역기능이 아직 적용되지 않아서 메모장이나 적을 수 있는 공간에 내용 입력 후 복붙해야한다.

웹플로우를 보면 사실 텍스트 입력하는 기능이 잘 동작하지 않아서 너무 불편했다.

텍스트를 입력하면 맨 처음으로 포커싱돼서 앞쪽에 입력된다던지, 아예 입력이 안되는 경우도 있고

직접 입력했을 때 너무 불편해서 복붙을 많이 사용하곤 하는데

이 부분은 개선될 부분이라고 생각했다 ㅠㅠ

다른데 텍스트를 입력하고 복사 붙여넣기를 하면 그만큼 시간이 소요되고 무엇보다 그냥..불편하다 ㅋㅋ

 

 

 

 

블로그의 본문 같은 경우, 텍스트 + 이미지로 구성돼있기 때문에 rich text필드를 이용해야함!

 

 

이 경우, 에어테이블에서는 long text - 하단 Enable rich text formatting 을 누르면 동일한 기능으로 동작된다.

 

 

 

 

 

이렇게 웹플로우, 에어테이블 필드를 맞추고 연동하면됨!

 

연동하는 프로그램을 또 다운받아야한다고 한다. 으으..복잡하다복자배...ㅠ

 

 

 

 

 

extention에서 Nobull Airtable이라는 것을 다운받았다. 플러그인 개념이라고 생각해야할까?

 

 

오...!! 바로 이렇게 연동된다고..?ㅋㅋㅋ 신기하다!!!

웹플로우에서 만들었던 workspace가 고대로 나온다. 선택하면 요런 창이 나옴

파란버튼 클릭하면 API 키가 복사된다

 

버튼 클릭 - 에어테이블 복붙 

 

 

그러면 요런창이 뜨는데 웹플로우와 에어테이블의 어떤 필드를 연결하는지 설정해줘야한다.

 

 

 

데이터의 수정/추가가 웹플로우에서 이루어지니 웹플로우로 하고 10분텀을 두고 업데이트 가능하도록 설정했다.

publish버튼까지 누르면 데이터가 생긴다

 

 

 

드뎌 만들어짐..... 와우

이렇게 하기까지 이정도의 시간이 걸린다고...? ㅠㅠㅠ

한번 세팅하는데 시간이 좀 걸릴것 같지만 한번 알아두면 저엉말 유용할 것 같다...

 

이래서 회사에서 데이터 세팅하는데 시간이 필요하다고 하는거구나...ㅋㅋㅋ ㅠㅠ

이런 프로그램을 이용했을 때 간단했는데 많은 회사에서 엑셀을 주로 쓰기 때문에

엑셀도 알아야하나..? 싶었다.

 

 

만약 웹플로우, 에어테이블의 이메일이 다를 경우 api가 잘 호출이 되지않을 수 있는데

 

setting으로 들어가서 api토큰을 생성하면 될 듯 하다. 

혹시라도 나중에 문제됐을 때 이렇게 하면 됩니다 하면서 똑똑한 척 해야지

 

 

 

 

 

 

03 강의: 노코드 종합반 3주차

✏️컴포넌트

Page에서 텍스트 수정하면 다른 페이지에서는 수정되지 않는다.

만약, 다른 페이지와 동일한 텍스트, 스타일이 적용되어야 하는 요소가 있을 땐

컴포넌트 쓰기 → 앱으로 따지면 상단 고정값인 gnb바라던지, 하단 네비게이션바라고 생각하면 됨.

 

 

와측 사진: 우측 레이어창 / 우측사진: 좌측 레이어창

 

우측 저 박스모양이 컴포넌트 추가하는 기능임. 누르면 이름수정 창이 뜨는데 이름을 수정면 저렇게 네모박스(컴포넌트)라이브러리에 설정한 컴포넌트가 있다. 그냥 그대로 스크롤해서 대지로 드래그하면 생성됨.

수정하려면 대지에 있는 컴포넌트 클릭하고 우측 레이어에서 edit기능을 통해 수정하면된다.

 

item 블록 잡고

이렇게 설정하면 최대 3개의 콘텐츠만 보여줘! 라는 뜻임.

 

 

이거 하다가 자꾸 A블록= grid, B블록= flex를 따로따로 쓰려고했는데

자꾸 동시에 적용되는 이슈가 있어서 계속 붙잡고 있었는데

알고보니 selector의 이름이 똑같아서 계속 같은 속성이 적용이 된 것..

selector 너무 싫다 ㅠㅠㅠ!!!

알고보니 나는 자꾸 생선된 selector를 지우고 다시 생성해서 자꾸 초기화됐던것...

기존꺼에 더블클릭하면 이름수정됨 으악~~~

 

 

 

✏️GA4

구글에서 제공하는 웹로그 분석 툴.유저들이 어디서 유입했는지, 얼마나 눌렀는지 등의 데이터 분석 가능!이거를 웹플로우와 연동하기는 또 웹플로우 - setting 가서 integrations에서 Mesurement ID를 복붙!ㅇㅏ이고... 이거는 강의봐야할듯ㅋㅋㅋ ㅠ

 

유저 트래픽 연동하고 보는 방법하고 trigger설정해서 이럴 경우, 이메일을 보내고, 이럴 경우엔 필드에 자동으로 표시되게 만드는 걸 배웠는데 흠. 까먹을 것 같다!ㅋㅋㅋ ㅠㅠㅠ과제를 하다보면 늘겠지!!

 

 

 

 

 

 

마무리하며...

마지막에 뒷북으로 팀원한테 궁금한거 물어봤다가 서로 모른다고...ㅋㅋㅋ그러면서

같이 튜터님한테 찾아가기로했다.

생각보다 웹플로우 관련된 자료들이 인터넷에 많이 없었음...ㅠ

설명서도 부족해서 이건 무조건 튜터님한테 물어볼 수 밖에 없었다...

 

<내일 물어볼 것들>

- 이미지 2:1 비율을 왜 하는건지?
- selector 설정값 어떻게 변경하는지? 설정값 + 새로운 셀렉터까지 다 설정했는데 추후 다시 수정하려면?

 

오늘 강의 3까지 모두 마무리하고 내일부터 디자인 시안/기획 모두 완성해야겠다!오늘도 잘해줘서 참 고맙다 내 몸뚱어리야