웹 개발을 위한 Flutter: 이점, 위협, 애플리케이션

2022년 Google에서 만든 소프트웨어 개발 키트인 Flutter는 공식적으로 가장 강력한 경쟁자인 React Native를 능가하여 크로스 플랫폼 기술의 새로운 리더가 되었습니다. Google 보고서에 따르면 100,000개 이상의 Flutter 기반 애플리케이션이 공개되었습니다. 인기가 높아지고 있음에도 불구하고 Flutter는 여전히 멀티플랫폼(Android 및 iOS) 모바일 개발 도구로 가장 잘 알려져 있습니다. 한편, 소수의 업계 전문가만이 Flutter가 웹 애플리케이션에서도 사용될 수 있다는 사실을 알고 있습니다! 웹 개발용 Flutter 와 관련된 가능성, 애플리케이션 및 위험을 알아보고 비즈니스에 어떤 가치를 추가할 수 있는지 알아보십시오.

Flutter는 비용 효율성과 시간 효율성 때문에 시장에서 가장 흥미로운 솔루션 중 하나가 되었습니다. 업데이트할 때마다 Flutter의 성능이 기본 솔루션에 가까워지고 있습니다. 물론 많은 회사에서 고객 접점 수를 늘리는 데 중점을 두고 모바일 제품에 대한 추가 기능으로 웹용 Flutter를 선택합니다 . 그러나 개별 기능만을 위해 웹용 Flutter를 고려할 가치가 있습니까?

당연하지! Flutter는 복잡하고 고유한 인터페이스로 웹 애플리케이션을 빠르게 개발할 수 있게 해주며 모바일과 같은 경험을 제공하는 데 있어서는 누구에게도 뒤지지 않습니다. 예가 필요하십니까? 우리 팀이 웹용 Flutter로 만든 놀라운 고객 참여 도구인 PAJO를 확인해 보세요.

웹용 Flutter의 이점, 애플리케이션 및 위험은 무엇입니까? Flutter는 웹 개발에 적합합니까? 자세히 알아보려면 더 읽어보세요!

웹용 Flutter: 기본부터 시작하겠습니다.

가장 기본적인 정보부터 시작하겠습니다.

대상 : Flutter는 개발자가 하나의 공유 코드베이스를 사용하여 모바일, 웹, 데스크톱 및 임베디드 애플리케이션을 빌드할 수 있게 해주는 Google 프레임워크입니다.

시기: Flutter의 첫 번째 안정 버전은 2018년 말에 출시되었습니다.

그리고 그 이유: Google은 모바일 애플리케이션의 녹아내리는 예산과 React Native의 인기가 높아짐에 따라 Flutter를 만들어 주요 경쟁자가 되었습니다.

이제 좀 더 구체적인 기술 정보로 이동하겠습니다.

Flutter는 많은 도메인 전문가에 따르면 모든 모바일, 웹 및 데스크탑 개발의 미래인 Google의 객체 지향 언어인 Dart에 주목합니다. JavaScript(주요 경쟁자인 React Native에서 사용)와 비교할 때 Dart는 완전히 객체 지향적이며 강력한 유형입니다. 이것이 귀하의 비즈니스에 의미하는 바는 무엇입니까? Dart에서 제공되는 코드는 오류에 훨씬 더 강하고 변화하는 팀에서 수년 동안 유지 관리하기가 훨씬 쉽습니다. 의심할 여지 없이 Flutter 프로그래밍 언어는 Flutter의 가장 큰 장점 중 하나입니다.

웹 개발을 위한 Flutter

Flutter의 웹 개발 기능이 비교적 새로운 기능이라는 사실을 알고 계셨나요? 몇 년 전 Google은 Hummingbird라는 연구 프로젝트를 수행했습니다. Hummingbird와 관련된 Google 개발자 그룹은 iOS 및 Android 앱에서 사용된 것과 동일한 Flutter 코드에서 웹 앱을 생성하는 방법을 찾으려고 했습니다.

이 프로젝트의 효과는 프레임워크 개발에 크게 기여했습니다. 시간이 좀 걸렸지만 2021년 3월에 Google 은 웹용 Flutter가 완전히 안정적 이며 상업 프로젝트에서 사용할 준비가 되었다고 발표했습니다. 하나의 코드, 하나의 기술, 하나의 돌로 여러 새.

Google의 최신 프로젝트 중 하나인 웹용 Flutter는 어떻게 작동하나요? 즉, 2021년 릴리스 이후 개발자는 크로스 플랫폼 모바일 앱을 개발하는 데 사용하는 것과 동일한 Flutter 프레임워크를 사용하여 기존 Dart 코드를 웹 제품으로 컴파일할 수 있습니다. 이러한 맥락에서 웹은 모바일 애플리케이션의 또 다른 대상 장치일 뿐이며 다른 웹 개발자를 개입시킬 필요가 없습니다.

웹용 Flutter의 이점

웹용 Flutter의 주요 이점은 무엇인가요? 가장 중요한 점은 체계적인 개선 및 릴리스(2022년에는 거의 20개 릴리스!)에서 알 수 있듯이 Google이 SDK 프로젝트에 대한 참여를 늘리고 있다는 것입니다. 상대적으로 짧은 역사에도 불구하고 Flutter는 이미 많은 조기 성숙 문제를 극복했습니다. Flutter Web의 다른 가장 중요한 이점은 무엇입니까?

가장 중요한 Flutter 업데이트를 최신 상태로 유지하고 싶으신가요?

뉴스레터 구독

1. 웹용 Flutter로 개발 비용 절감

웹용 Flutter를 사용하면 기술적으로 연결된 하나의 팀 내에서 하나의 속도로 하나의 코드베이스를 사용하여 세 개의 앱이 생성됩니다 . Flutter로 애플리케이션을 개발하는 고객은 서로 다른 세 가지 기술의 공급업체를 찾은 다음 작업을 동기화할 필요가 없습니다. 예를 들어, 동일한 지불 기능이나 소셜 미디어 승인과 같이 복제할 필요가 없습니다. 이것이 바로 3배 절약을 의미합니까? 정확히!

물론 Flutter는 개발 비용을 크게 줄여줍니다. 그러나 이것이 크로스 플랫폼 애플리케이션 개발이 기본 애플리케이션 개발과 동일하다는 의미는 아닙니다. 크로스 플랫폼을 위한 특정 기능을 제공하는 것은 종종 조금 더 복잡합니다. 일반적으로 플랫폼 간 승수는 약 1.2-1.5입니다. 그게 무슨 뜻이야? 기능이 하나의 플랫폼에서 X시간의 개발 시간이 걸린다면 크로스 플랫폼에서는 (1.2-1.5) * X가 걸립니다. 그럼에도 불구하고 x3에 비해 x1.5는 예산에서 승리할 수 있습니다.

2. 손쉬운 확장성 및 비용 효율적인 아이디어 검증

비용 및 시간 효율성 덕분에 Flutter는 PoC 및 제품 아이디어 검증에 탁월한 선택입니다. 몇 주 안에 앱 스토어에 쉽게 릴리스하고 웹을 통해 배포할 수 있는 완벽하게 작동하는 애플리케이션을 개발할 수 있습니다. 잠재적인 성공 후에 예를 들어 플랫폼 간 모바일 앱을 기본 앱으로 확장하여 모바일 및 웹 앱 확장을 고려할 수 있습니다.

에어비앤비(Airbnb)와 같은 여러 업계 거인들이 이 길을 따랐습니다. 크로스 플랫폼 모바일 애플리케이션의 성공 이후 Airbnb는 제품을 대상 그룹에 더 자유롭게 적용할 수 있는 기본 솔루션으로 전환하기로 결정했습니다.

3. 간소화된 유지보수 프로세스

애플리케이션이 마침내 성공하면 어떻게 될까요? 정비 들어갑니다! 또한 한 명의 Dart/Flutter 전문가와 협력하는 것이 단지 코드를 유지하기 위해 세 명의 개발자를 고용하는 것보다 훨씬 쉽고 비용 효율적입니다. 개발자 기술의 불균형으로 인해 작업 속도에 변화가 생긴다는 것은 말할 것도 없습니다.

서로 다른 플랫폼에서 공유되는 모양과 느낌을 고려할 때 개발 팀의 기술도 중요합니다. 세 가지 프로젝트를 개발하기로 결정하면 최종 형태는 개발자의 기술과 UI 태도에 크게 좌우됩니다. iOS 사용자는 둥근 모서리를 선호하고 Android 사용자는 둥근 모서리를 선호하지 않는 경우 이 두 애플리케이션이 제품 전략에 미치는 영향이 다를 수 있습니다.

4. 화려한 앱 중심 경험

Flutter의 웹 창립자들에 따르면 현재 Flutter는 대화형 경험을 내장하기 위한 완벽한 도구라고 합니다. UI 프레임워크로서 Flutter는 웹사이트를 위한 앱 중심 서비스를 제공할 수 있으므로 프로그레시브 웹 앱, 단일 페이지 앱 및 기존 Flutter 모바일 앱 향상을 위한 완벽한 솔루션입니다. 아래의 기회 섹션에서 자세한 내용을 읽을 수 있습니다. 그러나 먼저 가장 중요한 Flutter 웹 위험에 대해 마지막으로 논의하겠습니다.

웹용 Flutter의 위협

이미 언급한 바와 같이 Flutter Web은 크로스 플랫폼 전문가에 의해 지속적으로 개선되는 비교적 새로운 프로젝트입니다. Flutter 팀이 2021년에 Flutter 웹 개발과 관련된 잠재적 위험 목록을 작성했을 때 14개의 문제를 발견했습니다. 오늘날 Flutter의 웹 위험 목록은 1/3로 줄었습니다. 그러나 SEO 문제 또는 일부 브라우저에 대한 지원 부족과 같은 일부 문제는 여전히 해결해야 합니다. 2022년 웹용 Flutter의 가장 큰 단점은 무엇인가요?

1. 웹용 Flutter의 웹 애플리케이션 예외

아마도 이것은 Flutter Web의 직접적인 단점이 아니라 언급할 가치가 있는 면책 조항일 것입니다. Android 및 iOS 애플리케이션의 세계는 매우 유사하며 대부분의 경우 코드베이스는 95-100% 동일합니다. 그러나 이것은 브라우저 버전에 적용되지 않을 수 있습니다!

바텀 시트 서랍, 바텀 탭 메뉴 또는 수평 캐러셀은 웹에 잘 적용되지 않는 훌륭한 모바일 UX 패턴입니다. 웹앱에 대해서만 예외를 만들어야 하는 경우가 많습니다. 건축 설계는 종종 모바일과 웹에서 완전히 달라야 합니다. 작업 초기에 디자이너와 개발자 간의 원탁 토론을 설정하는 것이 좋습니다. 특히 예산과 일정에 관심이 있는 경우 그들이 자신의 관점을 공유하고 합의에 도달하도록 하십시오.

2. 검색엔진최적화(SEO)의 문제점

간단히 말해서 Flutter Web은 SEO를 지원하지 않습니다. 프레임워크 제작자는 Flutter로 만든 웹 애플리케이션의 SEO 비호환성을 어떻게 설명합니까?

Flutter 웹은 성능, 충실도 및 일관성을 우선시합니다. 이는 응용 프로그램 출력이 검색 엔진이 적절하게 인덱싱하는 데 필요한 것과 일치하지 않음을 의미합니다. 정적이거나 문서와 유사한 웹 콘텐츠의 경우 flutter.dev, dart.dev 및 pub.dev에서와 마찬가지로 HTML을 사용하는 것이 좋습니다. 또한 Flutter에서 생성된 기본 애플리케이션 경험을 검색 엔진에 최적화된 HTML을 사용하여 생성된 랜딩 페이지, 마케팅 콘텐츠 및 도움말 콘텐츠와 분리하는 것도 고려해야 합니다.

출처: Flutter.dev의 웹 FAQ

Stack Overflow에 따르면 SEO 친화성은 Flutter 팀의 다음 목표 중 하나입니다. 하지만 이때 SEO 측면에서 웹 애플리케이션을 최적화하려는 개발자는 추가 라이브러리를 사용해야 합니다.

3. 웹용 Flutter에서 핫 리로드 없음

핫 리로드는 모바일 개발을 위한 Flutter의 가장 눈에 띄는 이점 중 하나입니다. 이 기능을 통해 개발자는 프론트 및 백엔드 변경 사항을 즉시 미리 보고 프로덕션 초기 단계에서 필요한 수정을 수행할 수 있습니다. 안타깝게도 핫 리로딩은 아직 Flutter Web과 호환되지 않습니다.

다행히 웹용 Flutter에는 핫 리로딩에 대한 특정 대안이 있습니다. 바로 핫 리스타트입니다. 핫 재시작을 사용하면 웹 앱을 다시 시작하지 않고도 변경 사항을 미리 볼 수 있습니다. 유일한(가장 고통스러운) 차이점은 핫 리로드와 달리 핫 리스타트는 앱 상태를 잃어 잠재적으로 개발 변경 도입의 유연성을 감소시킨다는 것입니다.

4. 일부 브라우저와의 제한된 호환성

Flutter 개발자에 따르면 Flutter 웹 앱 은 가장 널리 사용되는 네 가지 브라우저에서 실행할 수 있습니다.

• 크롬
• 원정 여행
• 가장자리
• 파이어폭스

이론적으로 사용자가 선택한 브라우저에 관계없이 웹 애플리케이션이 효율적으로 작동하는지 확인해야 합니다. 그러나 실제로 어떻게 작동합니까? 일부 Flutter 개발자는 Safari 관련 문제를 보고하고 있으며 여러 기능에 대해 시간이 많이 걸리는 해결 방법을 수행해야 한다고 불평합니다.

Flutter Web은 여전히 ​​SEO 문제, Safari와의 제한된 호환성 또는 누락된 라이브러리와 같은 몇 가지 사소한 문제에 직면해 있습니다. 그러나 동시에 Flutter가 업데이트될 때마다 더 효율적이고 완전한 기능에 가까워진다는 데는 의심의 여지가 없습니다. 그리고 1년만 지나면 이 모든 문제가 과거의 일이 될 수 있다고 해도 과언이 아닙니다!

웹 개발을 위한 Flutter의 응용

이제 본론으로 들어가겠습니다. 웹 개발을 위해 Flutter를 가장 많이 활용할 수 있는 사람은 누구입니까? Flutter 제작자는 Flutter Web의 세 가지 이상적인 사용 사례를 나타냅니다.

프로그레시브 웹 앱

2021년 Flutter 2 안정적인 릴리스가 출시된 이후 Flutter 개발자는 PWA(프로그레시브 웹 애플리케이션)를 구축할 수 있었습니다. 웹 애플리케이션은 오프라인에서 작동할 수 있을 뿐만 아니라 브라우저를 통해 실행되는 동안 모바일 기능을 모방할 수도 있습니다.

간단히 말해서 PWA는 네이티브와 같은 경험을 제공하기 위해 모든 장치에 설치할 수 있는 웹 페이지이며 전용 iOS 및 Android 애플리케이션과 달리 모든 장치에서 사용할 수 있습니다.

PWA는 광범위한 대상 고객에게 제품을 제공하고 모든 소비자 접점에서 완벽한 사용자 경험을 제공하고자 하며 잠재적인 사용자와 상호 작용할 수 있는 모든 기회를 활용해야 하는 회사에서 자주 사용합니다. 예? Starbucks, Flipboard, the game 2048. 이 매력적인 앱 중 적어도 하나는 사용해 보셨을 것입니다!

단일 페이지 앱

Facebook, Gmail, Google Maps, Spotify – 이 모든 인기 있는 애플리케이션에는 최소한 한 가지 중요한 공통점이 있습니다. 페이지를 다시 로드하지 않고 작동합니다. 단일 페이지 앱과 상호 작용하는 동안 사용자는 새 페이지가 로드될 때까지 기다릴 필요가 없습니다. 처음부터 관련 콘텐츠와 함께 있습니다.

SPA는 응답성이 뛰어나고 상대적으로 코딩, 최적화 및 유지 관리가 쉽습니다. 마지막으로 Flutter를 사용하여 빠르게 개발할 수 있으며 우수한 품질의 최소 실행 가능 제품 역할을 할 수 있습니다.

프로그레시브 웹 및 단일 페이지 앱에 대해 더 알고 싶으십니까? 비즈니스에 적합한 유형의 앱을 선택하는 방법에 대한 기사를 꼭 읽어보세요!

기존 Flutter 모바일 앱 을 웹용 Flutter로 쉽게 변환할 수 있습니다.

기존 Flutter 기반 모바일 프로젝트에 웹 지원을 추가하는 것은 빠르고 쉽습니다. 웹 디렉토리를 만들고… 실행 버튼을 눌러야 합니다! 물론 완벽한 성능을 보장하기 위해서는 웹 애플리케이션이 응답성이 뛰어나고 탐색하기 쉽게 만드는 것이 중요합니다. 그러나 처음부터 앱을 구축하는 것과 비교할 때 Flutter의 기존 모바일 앱에 웹 버전을 추가하는 것은 정말 노력의 일부입니다.

웹용 Flutter를 사용해 볼 가치가 있나요?

웹용 Flutter를 사용해 볼 가치가 있나요? 분명히 이 질문에 스스로 답해야 합니다. 제품에 적합한 프레임워크를 선택하는 것은 회사의 사명, 비전, 예산, 규모 또는 기술 스택과 같은 여러 비즈니스 및 기술 요소에 따라 달라집니다. 그러나 일부 특정 경우에는 최소한 Flutter Web 사용을 고려해 볼 가치가 있습니다.

첫째, Flutter Web은 초기 단계 스타트업을 위한 전례 없는 기회를 창출합니다. 방금 멋진 제품 아이디어를 생각해 냈고, 비즈니스 목표를 정의하고, 경쟁 분석을 수행했다고 상상해 보세요. 이제 가능한 한 빨리 MVP를 확인해야 합니다. 이 시나리오에서 웹 개발을 위해 Flutter를 선택하는 것은 확실히 안전하고 시간 효율적이며 합리적인 선택입니다.

둘째, Dart 프로그래밍 언어의 유연성 덕분 에 Flutter Web은 디지털 제품을 향상시키기 위한 탁월한 선택입니다. Flutter를 사용하면 다양한 플랫폼에서 애플리케이션을 빠르게 개발할 수 있으므로 제품의 가시성과 사용자에 대한 접근성이 높아집니다.

위의 시나리오 중 하나에서 비즈니스 상황을 조금이라도 발견했다면 Flutter Web에 관심을 가질 가치가 있습니다.

그리고 Flutter를 사용하여 웹 애플리케이션을 개발하는 것에 대해 생각할 가치가 없는 때는 언제입니까? 프레임워크 제작자조차도 현 시점에서 모든 웹 페이지가 Flutter에서 의미가 있는 것은 아니라는 점을 인정합니다.

(…) Flutter는 텍스트가 풍부한 흐름 기반 콘텐츠가 있는 정적 웹사이트에는 적합하지 않습니다. 예를 들어 블로그 기사는 Flutter와 같은 UI 프레임워크가 제공할 수 있는 앱 중심 서비스가 아니라 웹이 구축된 문서 중심 모델의 이점을 얻습니다. 그러나 Flutter를 사용하여 이러한 웹사이트에 대화형 경험을 포함할 수 있습니다. 사용 가능한 라이브러리에 대한 조사는 모든 프로젝트에 선행되어야 합니다.

출처: Flutter.dev의 웹 FAQ

모든 비즈니스 결정은 여러 업계 전문가와 철저한 조사 및 상담을 거쳐야 합니다.

웹용 Flutter의 (예상되는) 밝은 미래

이 시점에서 각각의 모든 웹 프로젝트에 대해 Flutter를 선택하는 것이 최선의 생각이 아닐 수 있습니다. 그러나 빠르게 진화하는 이 프레임워크의 미래는 점점 더 밝아질 것으로 기대합니다. 왜요?

이전에는 사용자가 플랫폼 간에 이렇게 분산된 적이 없었습니다. 모바일 장치와 웹 브라우저는 빙산의 일각에 불과합니다. 사람들은 자동차, 시계, TV에서 응용 프로그램을 사용합니다.

따라서 프로세스를 단순화하고 소프트웨어 생산 비용을 절감할 필요가 있습니다. 웹 및 모바일 개발을 위한 하나의 코드베이스는 이미 일반적인 패턴이며 웹용 Flutter 가 좋은 예입니다.

오랫동안 저는 Flutter Web을 신생 기술로 여겼습니다. 최근 작업으로 인해 마음이 바뀌었습니다. Flutter는 밝은 미래 앞에 서 있는 성인 청년을 연상시킵니다. 예산이 적고 기한이 짧은 아이디어에 매력적인 선택인 것 같습니다. Flutter는 아이디어를 신속하고 적은 비용으로 검증하고 싶은 사람과 아이디어가 있고 시장의 요구에 대응하고 있는 사람에게 완벽한 선택입니다.