https://airtable.com/appZkW4dFCnvHTbHI/tbl2mAD9KQ8m3jtxh/viw0AAsu9s4cyKOdv/recJwQtmXfZSJCU0s?blocks=hide&date=2024-06-08&mode=undefined
[디자인] 노코드 기반 나만의 웹페이지 만들기
너무나 다양한 노코드 도구들
과정명 | 파이썬 웹 크롤링을 활용한 데이터 수집 |
과정설명 | 본 과정은 웹 데이터의 구조를 분석하고, 필요한 정보를 웹에서 추출하여 컴퓨터 파일로 저장하는 방법을 파이썬으로 학습한다. HTML을 기반으로 한 웹 데이터 처리 기술을 익히며, 파이썬의 웹데이터 수집 패키지를 이용하여 웹 데이터를 효율적으로 추출하고 저장하는 방법을 학습한다. |
학습목표 | • 웹페이지의 구조와 동작 방식을 이해하고 수집할 수 있음 • 파이썬의 웹데이터 수집 패키지를 활용할 수 있음 • 수집 데이터를 구조화하고 향후 분석의 기초자료로 활용할 수 있음 |
2. 과정 내용 |
차시 | 차시명 | 차시내용 | NCS능력단위요소명 (능력단위요소코드) |
1 | 강의 소개 및 환경 설정 | ㆍ강의 소개 ㆍPython, VSCode 설치 | |
2 | 웹페이지 동작 원리 이해 | ㆍ우리가 홈페이지를 보기까지 ㆍHTML, CSS, Java Script 구조 이해 | |
3 | 웹페이지 구조 분석 | ㆍ태그와 속성 이해 ㆍ브라우저 개발자도구 활용 실습 | |
4 | 파이썬 패키지 이해 | ㆍRequests 통신 실습 ㆍBeautiful Soup 통신 실습 | |
5 | 정규표현식 구현 | ㆍPython의 정규표현식 소개 ㆍ정규표현식 활용 방법 실습 | |
6 | 웹 브라우저 자동화 | ㆍ웹브라우저 자동화 기능 소개 및 실습 ㆍ다양한 웹브라우저 자동화 기능 실습 | |
7 | 다양한 통신 방식 | ㆍGET / POST 차이 실습 ㆍ동기 / 비동기 차이 실습 | |
8 | 페이징을 위한 반복처리 | ㆍ글 목록 수집과 글 본문 수집 분리 ㆍ반복문을 사용한 빅데이터 수집 실습 | |
9 | 사례 실습1 : 뉴스 | ㆍ뉴스 목록과 뉴스 본문 수집 실습 ㆍ정규표현식을 이용한 뉴스 정제 실습 | |
10 | 사례 실습2 : 공고 | ㆍ공고 목록과 공고 내용 수집 실습 ㆍ수집 자동화 처리 실습 | |
11 | 사례 실습3 : 멀티미디어 | ㆍ이미지 수집 실습 ㆍ이미지 기초 전처리 실습 | |
12 | 데이터 수집 실습 | ㆍ실습 예제 구현 ㆍ개인 프로젝트 구현 | |
13 | 실습 프로젝트 | ㆍ실습 예제 구현 ㆍ개인 프로젝트 구현 | |
[웹앱 웹사이트 빌더 핵심 노코드 툴 비교
노코드 기반 홈페이지 구축 ( Softr & & Bubble )
Softr
•타 서비스를 데이터베이스로 활용하는 웹 앱 빌더
•Airtable 구글 스프레드 시트 , 빅쿼리 등을 데이터베이스로 사용하여 정적 동적 웹 앱을 만들 수 있음
•쉬운 웹 앱 제작
•잘 만들어진 블록을 드래그 앤 드롭하여 쉽고 빠르게 웹사이트를 만들 수 있음
•복잡한 웹 앱 제작 가능
•사용자가 참여하는 플랫폼이나 컨텐츠 큐레이션 사이트 등 복잡한 웹 앱을 쉽게 만들 수 있음
•Airtable 학습 필요
•복잡한 로직은 Airtable 을 통해 구현하므로 , Airtable 에 대한 학습이 필요
Bubble???
•고급 웹 애플리케이션 개발에 최적화
•사용자 인터랙션이 많은 복잡한 웹사이트를 제작하는 데 매우 적합
•많은 노코드 SI 에이전시들이 사용
•자유도 높은 디자인과 비교적 높은 난이도
•화면 어디든지 원하는 대로 그림을 그릴 수 있지만 , 높은 자유도 때문에 오히려 디자인이 어려울 수 있음
•로직과 데이터 처리의 유연성
•기술적으로 거의 모든 웹 서비스를 구현할 수 있는 것이 가장 큰 강점
•다른 노코드 툴에서 한계를 느끼는 경우 , 버블을 추천
•복잡한 데이터베이스와 로직 설정
•고급 데이터베이스 설계와 복잡한 로직 설정이 가능하지만 , 이를 배우는 데 상당한 시간이 필요
•Webflow
•다양한 디바이스에 최적화된 정적 웹사이트 제작
•시각적으로 미려한 PC, 테블릿 , 모바일 크기에 맞게 최적화된 웹사이트를 만드는데 매우 적합
•HTML/CSS 의 모든 개념을 구현할 수 있음
•정적인 웹사이트 제작 및 퍼블리싱에 적합
•쉬운 웹사이트 제작
•잘 만들어진 블록을 드래그 앤 드롭하여 쉽고 빠르게 웹사이트를 만들 수 있음
•다양한 플러그인 활용
•Finsweet , Flowbase 등의 무료 유료 서드파티 플러그인을 통해 더 쉽게 개발할 수 있음
•우수한 SEO 성능
•노코드 웹 앱 빌더 중 구글 SEO 가 가장 잘 되는 편
•소스 코드 내보내기 가능
•제작한 소스 코드를 export 할 수 있음
•Zapier
•자동화 서비스
•특정 앱의 특정 이벤트를 감지하여 , 다른 앱을 실행 ( 해주는 자동화 서비스
•복잡한 워크플로우 생성
•여러 단계를 통해 앱을 순차적으로 실행시키는 워크플로우를 만들 수 있음
•반복적으로 수행하는 일을 자동화할 수 있음
•업계 표준
•자동화 분야에서 Zapier 는 사실상 업계 표준 , 많은 앱이 Zapier 연동만을 지원하는 경우가 많음
•사용자 친화적
•비개발자에게 가장 직관적이고 쉬운 셋팅 방식을 제공하여 누구나 쉽게 자동화 작업을 설정할 수 있음
•Airtable
•스프레드시트 UI 를 가진 관계형 데이터베이스
•스프레드시트의 사용자 인터페이스를 유지하면서도 관계형 데이터베이스로 활용 가능
•다양한 용도
•스프레드시트로도 사용할 수 있지만 , 주로 노코드 솔루션들의 데이터베이스 역할로 사용
•엄격한 데이터 구조
•구글 스프레드시트보다 데이터형 선언과 테이블 구조가 엄격하여 데이터베이스로 적합 . 예를 들어 , 첫 행은
무조건 컬럼의 레이블이어야 하고 , 컬럼 단위로 데이터 타입을 정의해야 됨
•다양한 내장 기능
•자체적인 폼 기능 , 자동화 기능 , 대시보드 시각화 기능이 있어 업무용으로 Airtable 하나만으로도 충분히 좋은
결과물을 만들 수 있음
•Glide
•구글 시트 또는 Airtable 을 데이터베이스로 사용
•구글 시트를 데이터베이스로 사용할 수 있어 Softr 에 비해 더 익숙한 환경에서 웹 앱이나 모바일 앱을 만들수 있음
•쉬운 제작과 아름다운 결과물
•디자인 자유도는 떨어지지만 , 쉽고 빠르게 제작할 수 있으며 결과물도 예쁘게 나오는 편
•SEO 제한
•SEO 가 기본적으로 거의 안 됨
•아임웹 , Cafe24, 식스샵 , 고도몰 등
•국내 소비자 대상 쇼핑몰 제작에 최적화
•국내 소비자들을 대상으로 한 쇼핑몰을 만들기에 최적화된 툴
•한국 특화 기능 제공
•네이버 카카오 로그인 , 네이버페이 카카오페이 간편 결제 등 한국 소비자에게 특화된 기능을 제공
•한국어 고객 지원
•한국 특화 기능이나 한국어 고객 지원이 필요한 경우 추천
•글로벌 통합 기능 제한
•글로벌 툴과의 통합 기능이 제공되지 않고 커스터마이징이 제한
======================================
•Microsoft Power Apps
•SAP Build Apps
HTML / CSS / JavaScript
•
HTML웹페이지의 구조를 만들어주는 뼈대
•
CSS웹페이지의 색깔과 모양을 꾸며주는 스킨
•
JavaScript웹페이지가 사용자와 상호작용할 수 있게 만들어주는뇌
•
웹 퍼블리싱
•
HTML/CSS 영역전문 웹 퍼블리셔가 있는 경우를 제외하면 개발자가 담당
HTML / CSS / JavaScript
https://
라이브러리-개발할 때 사용하는 리소스 , 도구들의 모음
•수학 계산 라이브러리
•PDF 생성 라이브러리
•DB 연결 라이브러리
•UI 라이브러리
API (application protocol interface)는 서버와 약속한 형태로 데이터를 보내줘야 함
•JSON 이라는 key value 형태의 객체로 전달하는 것이 일반적
•데이터베이스 종류
•관계형 (•표 형태로 데이터를 저장
•SQL 문법으로 데이터를 조작
•MySQL, Oracle, MariaDB 등
•NoSQL
•Key Value 형태로 데이터를 관리
•MongoDB, Firebase 등
•현재의 대부분의 노코드 플랫폼은 SaaS 형태로 이루어져 있음
•SaaS(Software As A Service) 는 웹 브라우저를 통해 접근할 수 있는 프로
그램 또는 애플리케이션
•SaaS 형태로 제공하는 노코드를 통해 프론트엔드와 백엔드를 쉽
게 구현 가능
•SEO(Search Engine Optimization)
•검색엔진 결과 페이지에서 웹사이트 또는 웹페이지의 상위 노출도를 높이는 작업
•네이버나 구글 같은 검색엔진이 쉽게 이해할 수 있는 형태로 웹페이지를 구성하는 작업
•노코드 도구의 약점이 SEO 라는 말이 있었으나 많이 개선되었음
글
