오즈코딩 스쿨 사업개발 캠프 32일차

Chapter 4-19. 노코드 툴의 개요 및 부상 이유

• 로우코드/노코드 룰 소개
  • 로우코드/노코드 룰은 사용자가 복잡한 코딩 없이 애플리케이션을 개발할 수 있게 해주는 플랫폼 또는 툴입니다.
  • 드래그 앤 드롭 인터페이스를 사용하여 사용자 친화적인 방식으로 기능을 구현할 수 있습니다. 
  • 노코드 :  아주 코딩을 사용할 필요 없다는 것
  • 로우코드 : 아주 적은 양의 코딩을 통해서도 일을 해나갈 수 있다는 것.
• 토스는 왜 "노코드"를 이야기 할까?
  • 토스는 '노코드(No code)운영' 방식으로 별도 비용 없이 직접 결제 화면을 다룰 수 있는 결제 위젯이 영세 중소,사업자에게 큰 도움이 될 것이라고 설명했다. 
  • 전담 개발팀에서 다루기 어려운 대다수의 영세,중소 사업자는 전자 결제 시스템 구축 및 보수를 외주 개발 인력에 의존하고 있기 때문이다. 
  • 복잡한 개발은 개발사에게, 사용자에게도 힘들어요.
• 전통적인 코딩과는 이렇게 달라요.
  • 전통적인 코딩 방식은 "풀코드(Full Code)"라고 불립니다. 
  • 풀코드는 소프트웨어 개발 과정에서 전체 코드를 수동으로 작성하는 방식을 말하며, 개발자가 특정 프로그래밍 언어를 사용하여 애플리케이션의 모든 기능을 직접 코딩해야 합니다. 
    • 풀코드는 광범위한 코딩 지식을 요구하지만 노코드는 사용자가 코딩 지식 없이도 개발할 수 있습니다. 
    • 풀코드는 높은 학습 곡선을 가지지만 노코드는 상대적으로 낮은 학습 곡선을 가져 빠른 출시에 유리합니다. 
    • 풀코드는 개발자가 코드에 대한 완전한 제어를 가져 구현범위가 자유롭지만 노코드는 제한된 영역에서 구현 가능합니다. 
• 왜 지금 노코딩 툴이 각광을 받을까?
  • 기술 발전의 영향
    • 클라우드 컴퓨팅, AI의 발전이 복잡한 기능들을 간소화하고, 자동화하여 로우코드/노코드 툴의 개발 및 성능 향에 기여합니다. 
  • 시장 수요 증가
    • 디지털 전환 가속화, 개발자 부족 현상, 기업의 비용 및 시간 절약 요구 증가로 인한 수요 증가로 노코드 툴이 각광을 받고 있습니다.  
• 노코드 툴의 장점은?
  • 개발 시간과 비용 절감
    • 빠른 프로토타이핑과 즉각적인 피드백 반영으로 개발 기간 단축, 개발자에 대한 의존도 감소로 비용 절감.
  • 사용의 용이성과 접근성
    • 사용자 친화적 인터페이스, 빠른 학습 곡선, 코딩 기술이 없는 사용자도 개발 작업에 참여할 수 있습니다. 
• 노코드 툴의 한계는?
  • 기능적 제한
    • 노코드 플랫폼은 종종 제한된 맞춤 설정과 기능을 제공하여 복잡한 요구 사항을 충족시키기 어려울 수 있습니다. 
  • 확장성 문제
    • 대규모 사용자 기반 또는 데이터를 처리하는데 있어 성능 및 확장성 문제가 발생할 수 있습니다. 
  • 통합 제한
    • 기존 시스템이나 복잡한 API와의 통합에 어려움을 겪을 수 있습니다. 
• 노코드 툴의 전망은?
  • 접근성 증가
    • 기술 진보로 인해 노코드 툴은 점점 더 사용자 친화적이고 접근성이 높아지고 있습니다. 
  • 시장 성장
    • 디지털 전환의 가속화로 인해 노코드/로우코드 시장은 지속적으로 성장할 것으로 예상 됩니다. 
  • 기능 향상
    • 개발자 커뮤니티와 업계의 지원으로 기능성과 통합 능력이 향상될 것으로 기대됩니다. 

Chapter 4-20. MVP 제작을 위한 주요 노코드 툴 및 툴별 장단점 소개

• Bubble - 웹 어플리케이션 빌더
  • 전 세계에서 가장 유명한 노코드 툴 중 하나.
  • 코드로 구현할 수 있는 거의 모든 것들을 구현 가능한 사이트.(+백엔드, 반응형)
  • https://bubble.io/

Bubble: The full-stack no-code app builder. Start for free!

 

• 장점
  • 강력한 사용자 정의 
    • 복잡한 기능와 사용자 인터페이스를 맞춤 설정 할 수 있는 높은 유연성을 제공합니다. 
  • 데이터베이스 통합
    • 자체 데이터베이스 시스템을 내장하여 복잡한 데이터 관리가 가능합니다.
  • 반응형 디자인
    • 다양한 화면 크기에 맞춰 자동으로 조정되는 반응형 웹사이트를 제작할 수 있습니다. 
• 단점
  • 학습 곡선
    • 다양한 기능과 설정으로 인해 초보자가 배우기에는 다소 복잡할 수 있습니다. 
  • 성능 제한
    • 매우 복잡하거나 대규모 트래픽을 처리하는 애플리케이션에는 적합 하지 않을 수 있습니다. 
• Wix -  웹사이트 빌더
  • https://www.wix.com/
  •  

무료 홈페이지 제작 | 웹사이트 만들기 | Wix.com

• 장점
  • 직관적인 드래그 앤 드롭 인터페이스
    • 사용이 매우 쉬우며 빠르게 웹사이트를 구축할 수 있습니다.
  • 다양한 템플릿
    • 다양한 업종과 스타일에 맞는 템플릿을 제공합니다.
  • SEO 및 마케팅 도구
    • 내장된 SEO 도구와 마케팅 기능을 통해 웹사이트의 가시성을 높일 수 있습니다

• 단점
  • 유연성 제한
    • Wix의 템플릿과 레이아웃은 일정 수준 이상으로 맞춤화 하기 어려울 수 있습니다. 
  • 데이터 이전의 어려움
    • 다른 플랫폼으로의 데이터 이전이 복잡하거나 불가능 할 수 있습니다.(데이터를 따로 관리 중)
      
      
• Adalo - 모바일 앱 빌더
  • https://www.adalo.com/

Adalo - The #1 Best No-Code Mobile and Web App Builder

 

 

• 장점
  • 앱스토어 통합 
    • iOS 및 Android 앱스토어에 직접 배포할 수 있는 기능을 제공합니다. 
  • 사용자 친화적 인터페이스
    • 드래그 앤 드롭 방식으로 간단하게 앱을 제작 할 수 있어 사용자 친화적입니다. 
  • 데이터 관리 및 API 연동
    • 내부 데이터베이스 관리 기능과 외부 API와의 연동이 가능합니다. 
• 단점
  • 기능성 제한
    • 복잡한 기능이나 맞춤화된 앱 로직을 구현 하는 데 제한이 있을 수 있습니다. 
  • 성능 문제
    • 대규모 사용자나 데이터를 다루는 앱에는 최적화된 성능을 제공하지 못할 수 있습니다. 
• Glide - 스프레드시트 기반 앱 빌더.
  • https://www.glideapps.com/

Glide | No Code App Builder | No Code Application Development | Power Your Apps with AI

 

• 장점
  • 간단한 데이터 통합: 
    • 구글 스프레드시트를 데이터 소스로 사용하여 쉽게 앱을 제작할 수 있습니다.
  • 빠른 개발 과정
    • 빠른 시간 내에 앱을 제작하고 배포할 수 있는 효율적인 프로세스를 제공합니다. 
  • 시각적으로 매력적인 템플릿
    • 다양한 사전 제작된 템플릿으로 시각적으로 매력적인 앱을 쉽게 제작할 수 있습니다. 
• 단점
  • 데이터 소스의 제한
    • 주로 구글 스프레드시트에 의존하기 때문에 다른 데이터 소스의 통합이 제한적일 수 있습니다. 
  • 기능적 제약
    • 매우 기본적인 앱 기능에 초점을 맞추고 있어 복잡한 기능을 구현하는 데는 적합하지 않을 수 있습니다. 
• Zapier - 워크플로우 자동화 툴
  • https://zapier.com/

Automate your work today | Zapier

 

• 풍부한 통합 옵션
  • 다양한 웹 애플리케이션과 서비스를 연결하여 자동화 할 수 있습니다. 
• 간단한 자동화 설정
  • 복잡한 코딩 없이도 워크플로우를 자동화 할 수 있습니다. (스타트업들이 유용하게 활용 가능)
• 유연한 자동화 규칙
  • 다양한 조건과 액션을 설정하여 복잡한 자동화 규칙을 만들 수 있습니다. 
• Framer의 장점
  • https://www.framer.com/
  • 고급 인터렉션 및 애니메이션
    • Framer는 사용자 인터페이스에 복잡한 인터렉션과 애니메이션을 추가할 수 있어, 매우 동적이고 생동감 있는 프로토 타입 제작이 가능합니다. 
  • 직관적인 인터페이스
    • 드래그 앤 드롭 방식을 포함하여 사용하기 쉬운 인터페이스를 제공하며, 디자이너들이 비교적 쉽게 사용 할 수 있도록 설정 되었습니다. 
  • 협업 기능
    • 팀원들과 실시간으로 프로젝트를 공유하고 협업 할 수 있는 기능을 제공합니다. 
    • 이는 팀 작업의 효율성을 높여줍니다. 
  • 통합 및 확장성
    • 다른 디자인 툴(ex: Skatch, Figma 등)과의 통합이 용이하며, 외부 라이브러리와 코드를 통해 확장할 수 있는 기능이 있습니다. 
  • 반응형 디자인
    • 다양한 화면 크기와 디바이스에 맞게 쉽게 조정할 수 있는 반응형 디자인 기능을 제공합니다. 

Framer — The internet is your canvas

 

• 고려해야 할 요소
  • 각 노코드 플랫폼별 특성을 이해하고, 목표 달성을 위한 최적의 솔루션을 선택해야 합니다. 

Chapter 4-21. [실습] 고객을 사로잡는 랜딩페이지 만들기 실전 1

• Framer 툴을 사용할 것.
  • Academy를 통해 어떻게 시작해야 하는지 설명을 하고 있음.
  • 초보자, 중급자 마크가 따로 붙어 있음.
  • 홈페이지 제작의 툴의 필수는 얼마나 template를 많이 가지고 있는가가 핵심.
  • 각각의 카테고리를 나누어서 굉장히 다양한 템플릿을 제공하고 있는 편임.
  • 홈페이지 템플릿을 만들어서 판매도 가능.
  • 무료 런칭 옵션을 선택하게 된다면 1페이지 밖에 만들지 못함.
  • 템플릿 수정 사이트에서 더블 클릭 만으로 수정 가능.
  • 개별 섹션, 컨텐츠에 대한 채널은 레이어 참조할 것.
  • 섹션 복사 등 다양한 툴을 활용해서 랜딩페이지를 만들 수 있다. 
  • 데스크탑 섹션에서 삭제를 한다면 테블릿, 폰 페이지도 동시에 삭제가 가능함. 

Chapter 4-22. [실습] 고객을 사로잡는 랜딩페이지 만들기 실전 2

• 여러 페이지를 만들고자 할 경우 : 유료 옵션을 사용해야 함. 
• 다이아몬드 표시 : 누군가가 만들어 놓은 asset.
• Nav bar 더블클릭 : Components 표시가 나오게 됨.
• 레이어를 고치거나 다른 것을 조정 하고 싶은 것이 있는 경우 오른쪽 레이어 바를 참조할 것.
• 간격 조절(Padding) 가능.
• 최대 높이가 설정 되어 있으면 일반 높이 설정 못함. 
• 자리를 차지 하고 있는 것은 삭제 가능.
• 아이콘은 되도록 이면 자동 맞춤으로 : 내가 원하는 위치가 아닐 경우 제목을 볼 수 없기 때문.
• fill 버튼을 통해 사진 추가도 가능함.
• style 버튼을 통해 글자 색상 변경 가능.
• section 별 이름 지정 가능. => scroll section.

Chapter 4-23. [실습] 고객을 사로잡는 랜딩페이지 만들기 실전 3

• AI를 통해서 자동으로 랜딩페이지를 만들어 줄 수 있는 기능.
• Action 기능을 통한 AI 활용 랜딩페이지 제작(Generate page)
  
  • 최대한 자세히 문장을 적어 넣을 것.
  • 문장은 최대한 영문으로 작성하되, 짧은 명령문은 한글로 적어도 문제 없음.
  • 수정이 필요한 경우 layer => regenerate
    • 명령어 일부를 입력만 해도 완전히 새롭게 section 추가 가능
  • 테마 관련 된 것을 shuffle를 통해 고칠 수 있음.
• ChatGPT를 통해서도 홈페이지 제작 가능
  • 한국어로 작성해도 문제 없음.(되도록이면 영어로)
  • ChatGPT 4로 작성하는 경우
    • 기초 정보 및 어떤 것이 들어가야 하는지 등을 미리 설정을 해줌.(FAQ, Design등)
    • 하지만 ChatGPT가 완벽하게 맞출 수 없음.
  • 기본 뼈대를 만든 자료를 바탕으로 Framer AI 툴 사용해 랜딩페이지 제작 가능.
  • domain 이름까지 만들어줌.