프론트엔드 low-code 는 무엇을 의미하는가？

일.low-code 란 무엇인가？

A low-code development platform (LCDP) is software that provides a development environment used to create application software through graphical user interfaces and configuration instead of traditional hand-coded computer programming. A low-code model enables developers of varied experience levels to create applications using a visual user interface in combination with model-driven logic.

GUI, 설정화 방식으로 전통적인 수기 코드 프로그래밍을 대체하여, 경험 배경이 다른 개발자 모두가 로우코드 개발 플랫폼에서, 시각화된 UI 와 모델 기반의 로직을 기반으로 애플리케이션을 생성할 수 있습니다

로우코드 플랫폼을 이용하여 전체 App 을 생성하거나, 또는 일부 특정 장면에서만 인공 코딩이 필요하여, 필요한 인공 코드량을 줄입니다. 한편으로는 비즈니스 전달 속도를 향상할 수 있고, 다른 한편으로는 광대한 비전문 개발자가 애플리케이션 개발에 참여할 수 있어, 개발 문턱과 인력 비용을 낮춥니다

기술적으로, 로우코드 플랫폼을 구현하는 핵심 요소는모델 기반 설계, 코드 자동 생성과 시각화 프로그래밍입니다. 이러한 수단을 통해 하층의 코드 세부사항을 숨깁니다

low-code 와 no-code

가장 low 한 정도의 low-code 는 no-code 입니다. 즉, 최대 차이는 no-code 가 코딩을 필요로 하지 않는다는 것입니다:

No-code development platforms are similar to low-code development platforms but require no coding at all.

구체적으로, 주요 차이는 다음과 같습니다:

플랫폼 사용자: 모든 업무 인원이 no-code 플랫폼을 사용할 수 있으며, low-code 플랫폼은 개발자만을 대상으로 합니다 (전문 요구가 그렇게 높지는 않지만)
핵심 설계: no-code 플랫폼은 선언식 모델 기반 메커니즘을 채택하는 경향이 있어, 사용자가 드래그 앤 드롭 또는 간단한 표현식을 통해 애플리케이션 설계를 조작 완성합니다. 반면 low-code 플랫폼은 인공 코딩을 통해 애플리케이션의 핵심 구조를 지정하는 경향이 있습니다
사용자 인터페이스: no-code 플랫폼은 애플리케이션 설계를 간소화하기 위해, 일반적으로 내장 UI 라이브러리만 지원합니다. 반면 low-code 플랫폼은 더 유연한 UI 옵션을 제공할 수 있지만, 대가로서 추가 코딩이 필요하며, 사용의 복잡성이 증가합니다

이.20 년 전의 Dreamweaver 와 무엇이 다른가？

듣기로는, 웹페이지 삼총사 시대의 Dreamweaver 와 별 차이 없는 것 같습니다:

[caption id="attachment_2251" align="alignnone" width="625"] Dreamweaver[/caption]

현대의 프론트엔드 low-code 개발 플랫폼과 비교하면, 표면만 보면, 시각적으로 자동으로 일부 코드를 생성하는 것은 확실히 큰 차이가 없습니다. 내재적인 실질적인 차이는 다음과 같습니다:

목표 장면이 다름: Dreamweaver 는 더 많이 프론트엔드 개발 장면에 초점을 맞추고 있습니다. 반면 low-code 개발 플랫폼에서, 프론트엔드는 완전한 애플리케이션의 일부일 뿐이며, 서버 측 데이터, 라우트, 로직 흐름 등도 고려해야 합니다
시각화 조작 입자가 다름: 현대의 low-code 플랫폼은 일반적으로 컴포넌트, 블록, 페이지, 템플릿 등의多级재사용 추상이 있습니다. Dreamweaver 는 HTML 네이티브 태그만을 대상으로 합니다
엔지니어링 링크 완비 정도가 다름: Dreamweaver 는 개발, 미리보기, 배포 (FTP 업로드) 단계만 커버합니다. 반면 현대의 low-code 플랫폼 대부분은 완전한 라이프사이클을 커버하며, 배포 전 디버깅, 테스트, 배포 후 모니터링 운영 등 각 단계를 포함합니다

프론트엔드 엔지니어링 시스템의 일련의 진화에 따라, 현대의 low-code 플랫폼은 모듈 재사용, 생태 접촉, 전후단 연동, 엔지니어링 관리 등 중요한 요소를 충분히 고려했으며, 성숙도와 개발 효율 면에서 Dreamweaver 와 비교하여 질적인 도약을 이루었습니다

삼.프론트엔드는 왜 low-code 가 필요한가？

최근 몇 년 low-code 이념이 프론트엔드 분야에서 점차 유행해 왔습니다. 주로 이러한 이유가 있습니다:

자원화된 프론트엔드 개발자: 작업량은 많지만, 기술 요구는 대부분 높지 않아, 생산 효율이 해결해야 할 문제가 되었습니다
개방된 프론트엔드 기술 시스템: low-code 류 코드 생성 도구는 프론트엔드 기술 시스템과 결합하기 쉽습니다
성숙해가는 프론트엔드 엔지니어링 시스템: 성숙 안정을 전제로 해야만, 변혁적인 생산 효율 돌파를 추구할 수 있습니다

자원화된 프론트엔드 개발자

대량의 저기술含量 수요에 직면하여, 프론트엔드 개발자는 극히 대체 가능한 자원이 되었습니다 (저가 소모성 자산과 같습니다). 프론트엔드 인력이 제품 수요 이터레이션의 병목 현상이 되었습니다

이때, 최선의 해결책은도구화, 자동화 방식을 통해 생산 효율을 향상시키고, 프론트엔드 자원 병목을 돌파하는 것입니다. 자연스럽게 low-code 방향의 탐색과 실천이 생겼습니다. 예를 들어 jQuery 시대의 폼 생성기, 모바일 시대의 H5 페이지 제작 도구 등

개방된 프론트엔드 기술 시스템

모바일 Native 클라이언트, 서버 측 등 기술과 비교하면, 프론트엔드 기술 시스템이 가장 개방적입니다 (심지어 모든 소스 코드가 공개되어 있습니다). 구체적으로는:

서드파티 모듈 도입 비용이 극히 낮음: 레이아웃 컨테이너, 스타일 테마, 로직 모듈, 심지어 전체 사이트라도, 한 줄 태그로 직접 도입하여 사용할 수 있으며, 심지어 언제든지 동적으로 도입할 수 있습니다
Web 표준 기반의 개방된 생태를 보유: 전체 프론트엔드 생태가 통일된 표준층 위에 구축되어 있어, 어떤 점의 혁신도 쉽게 축적될 수 있으며, 항상 거인의 어깨 위에 서서 더욱 혁신할 수 있습니다

따라서, low-code 플랫폼은 거인의 어깨 위에 서서 전진할 수 있으며, 컴포넌트 라이브러리, 구축 도구, 심지어 시각화 설계, 코드 자동 생성의 기반 위에서 더욱 탐색할 수 있습니다. 다른 한편, 프론트엔드 low-code 산출물은 기존의 어떤 프론트엔드 애플리케이션에도 적용할 수 있습니다. React/Vue 컴포넌트, jQuery 폼, 또는 SPA（Single Page App）, MPA（Multiple Page App）라도

성숙해가는 프론트엔드 엔지니어링 시스템

10 여 년 전도 아니고, 더 먼 미래도 아닌, 왜 지금인가？

가장 중요한 한 점, low-code 플랫폼의 발전은 프론트엔드 엔지니어링 시스템이 성숙해가는 배경 아래에 있습니다. 결국 온饱 문제가 거의 해결되어야만, 더 높은 생산 효율을 추구할 수 있습니다

기술 진화의角度来看, 프론트엔드 low-code 탐색은 프론트엔드 엔지니어링의 발전 과정과 밀접하게 관련되어 있습니다:

프론트엔드 엔지니어링은 이러한 몇 단계를 거쳤습니다:

CLI 도구: 스캐폴딩, 구축 도구, 디버그 서비스 등

GUI 클라이언트: GUI 화된 CLI 도구, 상호작용 방식 외에는 큰 차이가 없음

커스터마이즈 단 IDE: IDE 를 기반으로 스캐폴딩, 구축, 디버그, 배포, 모니터링 등 엔지니어링 링크 능력 확장

클라우드 IDE: Web IDE 를 기반으로 일련의 엔지니어링 링크 능력 확장, 클라우드 연구개발 시대 진입

（[커스터마이즈 IDE 의 핵심 가치](/articles/커스터마이즈 ide 의 핵심 가치/) 에서 발췌）

CLI/GUI 도구 시대, 코딩 레벨의 효율 향상은 주로스캐폴딩을 통해 템플릿 코드를 자동 생성하는 것으로体现되어, 보일러플레이트 코드 작성을 줄여, 개발자가 더 적게 코딩하도록 했습니다

다음 단/클라우드 IDE 시대, API 힌트, 자동 완성, 코드 스니펫 (Snippets) 등 실용 기능도 모두 통합되었습니다. 개발자가 더 빠르게 코딩하도록 했습니다

IDE 시대 이후, 코딩 레벨의 효율 향상은 극치에 달했고, 한 걸음 더 생산 효율 향상은 변혁적인 돌파가 필요합니다. 그래서, low-code 시대를 맞이하여, 비전문 개발자도 "코딩"을 더 잘 더 빠르게 할 수 있게 되었습니다

프론트엔드 엔지니어링의角度来看, low-code 는 엔지니어링 효율 향상의 중요한 방향 (또한 필수 길) 입니다. 그 중의 low-code 진화 흔적을 발견하는 것은 어렵지 않습니다:

모델 기반 설계: 직접 DOM 조작에서 데이터 기반 뷰로, 코드 예측 가능성 향상
코드 자동 생성: 템플릿에서 코드 스니펫에서 구축으로, 인공 코드량을不斷히 감소
시각화 프로그래밍: 컴포넌트 조립에서 드래그 생성으로, 저효율의 반복 작업 감소

P.S. 실제로, low-code 플랫폼의 발전은 프론트엔드 분야에 국한되지 않으며, 모바일 Native 클라이언트, 서버 측에도众多의 low-code 탐색이 있습니다. 예를 들어 Xcode SwiftUI:

VS Server Explorer:

및 알리 클라우드 논리编排:

또한, 연구 기관 Forrester 의 추정에 따르면, 로우코드 개발 플랫폼은 극히 광활한 시장을 가지며, 데이터베이스, 요청 처리, 모바일 단, 프로세스와 일반 로우코드 플랫폼으로 세분화할 수 있습니다:

Segments in the market include database, request handling, mobile, process and general purpose low-code platforms.

（Low-code development platform 에서 발췌）

사.프론트엔드 분야의 low-code 탐색

전통적인 프론트엔드 워크플로우를审视:

업무 수요 -> 설계도 -> 애플리케이션/페이지/컴포넌트 개발 (설계 복원) -> 업무 로직 코드 -> 구축 -> 배포

구체적으로, 설계 복원은 3 가지 방식으로 나뉩니다:

단일 컴포넌트 개발: 시각 효과 복원 및 모듈 기능 개발
컴포넌트 기반 페이지 개발: 컴포넌트 조립, 컴포넌트 간 상호작용 및 페이지 전체 로직 연결
페이지 기반 애플리케이션 개발: 라우트 설정

그 중 많은 단계는 코드 생성 도구를 통해 효율을 향상할 수 있습니다:

설계도 -> 컴포넌트 코드: 즉자동화 설계 복원, 예를 들어 imgcook
컴포넌트 코드 -> 설계 소재:反向변환, 설계 소재 풍부화
컴포넌트 -> 페이지: 시각화搭建을 통해 컴포넌트 조립 간소화, 자동으로 페이지 코드 생성
페이지 -> 애플리케이션: 시각화 설정으로 SPA 또는 MPA 생성
업무 수요 -> 업무 로직 코드: 시각적으로 조건 편집, 데이터 바인딩, 데이터 흐름 지정 등 방식을 통해 보일러플레이트적인 업무 로직 코드 생성

설계 복원 자동화 (및反向변환) 의 기반 위에서, UI 소재와 프론트엔드 컴포넌트 사이의 경계는 거의 존재하지 않게 되었습니다. UI 소재와 프론트엔드 컴포넌트는 상호 통행할 수 있으며 (UI 소재는 프론트엔드 컴포넌트, 프론트엔드 컴포넌트는 UI 소재), 쌍방의 생산 효율을 향상시켰을 뿐만 아니라, 협력 비용도 대폭 낮췄습니다

오.low-code 모드에서의 새로운 가능성

시각화 연구개발 모드: 복잡도를 도구로 이전, 전문성 요구 감소
low-code 와 지능화 결합: 소재/컴포넌트 지능 일괄 생성, 단말 지능, 개인화 추천 등 기술과 결합, 사용자가 근본적으로 멈출 수 없게 됨
low-code 가 전문 개발 도구로 진입: 전문 개발자 대상 IDE 에서 일부 시각화 보조 도구 제공, 예를 들어 알리페이 미니프로그램 IDE
전후단 일체의 low-code 방안: 단말 클라우드 일체화 개발 기반 위에서 한 걸음 더 나아가, 자동으로相應의 BFF/SFF 코드 생성, 배포

클라우드 컴퓨팅 제품이 전문 운영 작업을 클라우드 공급자로 이전한 것과 마찬가지로, low-code 모드는 전문 컴포넌트 개발 작업, 심지어 BFF 인터페이스 개발 작업도 시각화 연구개발 도구 측으로 이전하여, 전문 프론트엔드 기술을 보편화 방식으로 더 많은 비전문 개발자에게 부여했습니다. 동시에 시각화 보조 도구와 전문 IDE 가 결합하여, 전문 개발자도 더 효율적이게 되었습니다

다른 한편, 프론트엔드 생산력과 생산 효율이 향상되고, 전문성 요구가 낮아진 후, 이전 개발 비용에 제한되어 실현할 수 없었던 일 모두 탐색을 시작할 수 있습니다. 예를 들어 해량의 세분화 사용자 그룹 대상 개인화 UI (소위 천인천면), 자미디어 시대의 개인建站 (아무리 작은 개체도 자신의 플랫폼을 가질 수 있음), 고효율성의百变운영 (push 메시지 보내는 것만이 아님)……