프로젝트에서 보기 →

구글이 드디어 해냈구나… #flutter #앱개발

태그
기술 프로그래밍 프로그래밍 기초 프로그래밍 독학
시작일
종료일
수정일

https://www.youtube.com/watch?v=d-MSD1MHn5w

1. 이건 꼭 알아야 한다[^1]

[? 질문] 이번 **Flutter Forward(플러터 포워드)**에서 발표된 업데이트/기능 중 개발자가 체감할 “진짜 변화”는 무엇인가[^1]
[= 답] 웹/임베딩/퍼포먼스/디자인 시스템(Material 3)/그래픽(커스텀 셰이더)/언어(Dart 패턴 매칭)까지 “앱 품질과 개발 경험”을 직접 끌어올리는 기능들이 대거 공개됐고, 특히 iOS 애니메이션 끊김 개선 같은 퍼포먼스 업그레이드와 Flutter의 자체 렌더링 구조가 그 배경이라고 설명한다.[^8]

[? 질문] Flutter가 “기존 크로스플랫폼이 못한 것”을 해낼 수 있는 이유는 무엇인가[^9]
[= 답] 다른 크로스플랫폼처럼 각 플랫폼의 UI 프레임워크에 의존해 그려주는 방식이 아니라, Flutter가 렌더링 자체를 직접 수행하기 때문에 더 자유롭게 최적화/표현을 할 수 있고 이번에 그 성과(스무스함, 렉 감소 등)가 두드러졌다고 말한다.[^9]

[? 질문] Dart의 패턴 매칭은 실제 코드에서 무엇을 더 쉽게 만드는가[^7]
[= 답] 기존에는 여러 값을 리턴하려면 클래스를 만들고 오브젝트로 감싸 리턴하는 식이었는데, 이제는 (예시에서) 두 개 값(int, string)을 리턴하고 이를 패턴 매칭으로 간단히 받아 처리하는 방식이 가능해졌다고 설명한다.[^7]

[^1]: @[00:14] “어떤 거를 발표를 했는지 하나씩 살펴봅시다” [^8]: @[01:40]~@[02:08] “업데이트만 하면 공짜로 얻는 퍼포먼스 업데이트… iOS에서… 끊기는… 많이 좋아졌다고… 오른쪽이 훨씬 스무스… 퍼포먼스가… 발전” [^9]: @[05:39]~@[05:51] “어떻게 그렇게 할 수 있냐… 각 플랫폼 프레임워크에 의존… 아니라… 렌더링… 플러터 자체에서 렌더링… 퍼포먼스를… 좋게…”

2. 큰 그림[^2]

이 콘텐츠는 The Coding Papa가 Flutter Forward에서 발표된 내용 중, 개발자가 바로 체감할 만한 기능/개선점을 골라 “하나씩 보여주며” 설명하는 영상이다.[^1] Flutter로 이미 많은 앱이 배포되었고(“70만 개”), 구글 앱(맵스/페이 등)도 Flutter로 릴리즈된 흐름을 언급한 뒤, 덜 흥미로운 항목은 빠르게 넘어가고 “익사이팅한 것들” 중심으로 데모/사례를 곁들여 소개한다.[^2]

  • Flutter는 이미 대규모 채택(70만 앱 퍼블리시, 구글 앱 사례)을 기반으로 업데이트의 실효성을 보여주려 한다.[^2]
  • 이번 발표에서 특히 체감되는 건 **퍼포먼스 개선(iOS 스무스함/렉 감소)**과 웹/임베딩 방식 개선, 그리고 그래픽/디자인(Material 3, 셰이더) 및 **Dart 언어 기능(패턴 매칭)**이다.[^8]
  • Flutter가 이런 개선을 빠르게 밀어붙일 수 있는 배경으로, 발표자는 플랫폼 의존이 아닌 Flutter 자체 렌더링 구조를 핵심 이유로 든다.[^9]

[^2]: @[00:20]~@[00:34] “70만 개의 앱… 플러터… 퍼블리쉬… 구글 앱 맵스 구글 페이… 플러터… 릴리즈… 중요한 거… 익사이팅 한 것들…”

3. 하나씩 살펴보기[^3]

3.1 발표를 “하나씩” 훑되, 진짜 중요한 것 위주로 보겠다는 선언[^3]

📸 0:14

영상은 Flutter Forward에서 “어떤 것을 발표했는지 하나씩 살펴보자”는 말로 시작한다.[^1] 이어서 Flutter 생태계의 규모를 먼저 제시한다:

  • Flutter로 70만 개 앱이 이미 퍼블리시됐다고 언급한다.[^2]
  • “작은 스타터”에서부터 “큰 회사들”까지 사용하며, 구글 내부에서도 구글 맵스, 구글 페이 같은 앱이 Flutter로 릴리즈됐다고 말한다.[^2]

그 다음 발표자는 “다 집어치우고”라는 표현으로, 현황 소개는 여기서 끊고 본인이 생각하는 “중요하고, 약간 익사이팅한 것들”을 위주로 설명하겠다고 방향을 전환한다.[^2]

[^3]: @[00:14]~@[00:34] “발표… 하나씩… 70만 개… 구글 앱… 중요한 거… 익사이팅…”

3.2 (덜 익사이팅) 동시 2차원 스크롤: 좌우/상하를 함께 스크롤하는 기능[^4]

📸 0:44

발표자는 “플러터에 대해서 약간 덜 익사이팅”한 항목이라고 전제하면서도, 기존 제약이 풀리는 점을 짚는다.[^4]

  • 기존에는 화면에서 좌우(가로)와 위아래(세로) 스크롤을 “동시에 스크롤링”하는 것이 안 됐었다고 말한다.[^4]
  • 이번 발표/업데이트로는 이런 2차원(가로+세로) 동시 스크롤이 가능해진다고 소개한다.[^4]

즉, 복잡한 그리드/캔버스형 UI처럼 “가로도 세로도 움직여야 하는” 화면 구성에서 기본 지원이 강화되는 뉘앙스로 전달된다.[^4]

[^4]: @[00:44]~@[00:55] “기존에는… 좌우 위아래… 다이멘셔널 스크롤링이 동시에… 안 됐었는데 이번에는… 될 수…”

3.3 웹에 Flutter를 더 자연스럽게 끼워 넣기: iFrame 대신 “div 기반 엘리먼트 임베딩”[^5]

📸 0:55

다음으로 발표자는 **엘리먼트 임베딩(Element Embedding)**을 소개한다.[^5] 핵심은 “기존 웹 페이지에 Flutter 웹을 포함시키는 방식”의 변화다.

3.3.1 기존 방식: iFrame으로 포함시키기[^5]

발표자는 기존에는 “웹을 전달할 때” Flutter 웹을 기존 웹사이트/웹페이지에 넣으려면 iFrame을 사용하는 방법을 썼다고 설명한다.[^5] 즉, 기존 자바스크립트 웹사이트 안에 Flutter 웹을 하나의 프레임으로 삽입하는 방식이었다는 맥락이다.[^5]

3.3.2 새로운 방식: div로 간단히 넣기[^5]

이번에는 iFrame이 아니라, 웹을 개발해본 사람이라면 아는 div를 통해 “간단하게 넣을 수 있는 방법”을 제공한다고 말한다.[^5]

발표자는 다음을 덧붙인다:

  • 해당 사이트에 가면 “테스트를 해볼 수 있다”고 안내한다.[^5]
  • 지금 화면 예시에서는 “기존의 자바스크립트 웹사이트에 플러터를 이렇게 div를 통해 넣어준 부분”을 보여주고 있다고 말한다.[^5]

정리하면, Flutter 웹을 “외부 프레임”처럼 다루는 느낌(iFrame)에서, 더 DOM 요소(div) 기반으로 자연스럽게 임베딩하는 방향으로 진화한다는 취지로 소개된다.[^5]

[^5]: @[00:55]~@[01:33] “엘리먼트 인베딩… 기존에는… 아이프레임… 포함… 이제… 디브(div)… 간단하게… 사이트… 테스트… 기존 자바스크립트 웹사이트에… dive/div를 통해서 플러터…”

3.4 업데이트만 하면 얻는 “공짜” 퍼포먼스: iOS 렉/애니메이션 끊김 개선 + 새 렌더러 비교[^6]

📸 2:45

발표자는 다음 소개를 “업데이트만 하면 공짜로 얻는 퍼포먼스 업데이트”라고 표현하며, 특히 iOS에서의 렉/애니메이션 끊김이 많이 좋아졌다고 강조한다.[^8]

3.4.1 무엇이 좋아졌나: iOS에서 렉/끊김이 줄어듦[^8]

  • iOS에서 “렉이 있거나”, “애니메이션 할 때 끊기는 부분”이 많이 개선됐다고 말한다.[^8]

3.4.2 예시 화면: 기존 렌더러 vs 새 렌더러[^6]

발표자는 예시를 보여주며 비교 구도를 만든다.[^6]

  • 왼쪽: “기존 렌더러”[^6]
  • 오른쪽: “새로 나온 렌더러”[^6]

그리고 오른쪽 새 렌더러가:

  • “훨씬 스무스”하고[^6]
  • 그래프를 보면 “훨씬 잘 핸들링”하며[^6]
  • 렉도 “잘 안 보인다”고 말한다.[^6]

결론적으로 “퍼포먼스가 엄청나게 많이 발전”했다고 정리한다.[^8]

[!IMPORTANT] 퍼포먼스 파트에서 발표자가 전달하는 메시지 “그냥 업데이트만 해도” 체감 퍼포먼스를 얻는다는 점(특히 iOS)을 강하게 어필하며, 새 렌더러가 더 스무스하다는 비교 시연으로 설득한다.[^6]

[^6]: @[01:46]~@[02:03] “왼쪽… 기존 렌더러… 오른쪽… 새로 나온… 오른쪽이 훨씬 스무스… 그라프… 훨씬 잘 핸들링… 렉도…” [^6]: @[02:08] “퍼포먼스가 엄청나게 많이 발전을 했죠”

3.5 Material 3 지원: 디자인 언어를 쉽게 적용하고, 테마 코드를 복사해 쓰는 흐름[^7]

📸 2:13

다음은 “Material 3” 지원이다.[^7] 발표자는 Material 3을 “구글 디자인 랭귀지”라고 설명한다.[^7]

3.5.1 왜 도움이 되나: 컬러/디자인이 약한 개발자에게 특히 유용[^7]

발표자는 관련 링크(설명 중 “팝다팁 링크”로 표현)를 통해, 사용/적용을 “쉽게” 할 수 있게끔 도와준다고 말한다.[^7] 특히:

  • “컬러에 대해서 잘 모르신다”
  • “디자이너가 아니다”

이런 경우에 Material 3 지원/도구가 “엄청나게 도움이” 된다고 강조한다.[^7]

3.5.2 보너스: 원하는 쓰임을 선택 → 선택한 테마 코드를 그대로 카피해서 사용[^7]

발표자는 “보너스”로 다음 워크플로를 말한다.[^7]

  1. 원하는 “쓰임”을 선택해볼 수 있고[^7]
  2. 선택 후 중요한 점은 그 “테마”를 코드를 그대로 카피해서 사용할 수 있다는 것[^7]

마지막으로 “반드시 사용해 보시기 바랍니다”라고 권유하며 실사용을 강하게 푸시한다.[^7]

[!TIP] Material 3를 발표자가 권하는 사용 방식 (1) 제공 페이지에서 목적/용도에 맞게 옵션을 선택하고 → (2) 생성된 테마 코드를 복사해 프로젝트에 바로 붙여 넣어 적용하라는 흐름으로 안내한다.[^7]

[^7]: @[02:13]~@[02:40] “matterial 3… 구글 디자인 랭귀지… 링크… 적용… 칼라… 잘 모르신다… 도움이… 원하는 쓰임 선택… 팀(테마) 코드를 그대로 카피… 반드시 사용…”

3.6 커스텀 셰이더 데모: 로고/글로우 텍스트 등 “쿨한 이펙트”를 쉽게[^8]

📸 2:45

발표자는 다음 주제로 **커스텀 셰이더(Custom Shader)**를 꺼내며 예제를 보여주겠다고 한다.[^8]

3.6.1 데모 1: 더코딩파파 로고에 셰이더 효과 적용[^8]

화면에는 “더 코딩 파파 로고”와 함께 “와 코딩 파파” 같은 텍스트가 보이고, 발표자는 “이게 지금 플러터”라고 강조한다.[^8]

또한 “쉐이더”를 통해 어떤 효과가 발생하는지 설명하는데, 표현은 다소 구어체지만 요지는 다음과 같다:

  • 어떤 “각도”를 “자동적으로 계산”해서[^8]
  • 그 계산 결과를 바탕으로 시각 효과가 나타나는 식으로 보여준다는 것[^8]

그리고 “많은 사람들이 테스트”해서 예제 형태로 올라와 있다고 덧붙인다.[^8]

3.6.2 데모 2: 글로잉(Glowing) 텍스트를 테스트 + 기존 예제를 조금 수정해 적용[^8]

이어서 “글로윙 텍스트”를 보여주며 테스트한다고 말한다.[^8]
여기서 발표자는:

  • “이분이 만든 거를” (누군가의 예제) 기반으로[^8]
  • 본인이 “살짝 고쳐”서[^8]
  • “코딩파파” 텍스트로 바꿔 적용해봤다고 말한다.[^8]

3.6.3 결론: 커스텀 셰이더로 이런 이펙트를 “아주 쉽게”, “쿨한” 표현 가능[^8]

발표자는 커스텀 셰이더를 통해 “아주 쉽게 이런 이펙트를 줄 수” 있으니, 이를 활용하면 Flutter로 “아주 쿨한 이펙트”를 보여줄 수 있다고 정리한다.[^8]

[^8]: @[02:45]~@[03:31] “커스텀 쉐이더… 더 코딩 파파 로고… 이게 지금 플러터… 각도를 자동적으로 계산… 많은 사람들이 테스트… 글로윙 텍스트… 이분이 만든 거 살짝 고쳐… 커스텀 쉐이드… 아주 쉽게… 쿨한 이펙트…”

3.7 Dart 언어 기능: 개발자들이 원했던 “패턴 매칭” + 다중 값 리턴/처리 흐름[^9]

📸 2:08

발표자는 이제 Flutter 프레임워크가 아니라 Dart 언어 관련 업데이트를 소개한다고 말하며, 그게 바로 패턴 매칭이라고 한다.[^6]

  • “많은 다트 언어 개발자들이 정말로 원했던 기능”이라고 전제한다.[^6]
  • “패턴 매칭”을 직접 보여주겠다고 하며 코드 예시를 든다.[^6]

3.7.1 예시 상황: 함수가 한 개가 아니라 “두 개 값”을 리턴[^9]

발표자는 화면의 “간단한 다트 코드”를 지칭하며 설명한다.[^9]

  • 함수(function) 안에서 리턴 값이 “한 개 값만 리턴”하는 게 아니라[^9]
  • “지금 두 개 값으로 리턴”을 해주고 있다고 한다.[^9]
  • 그 예로 “인티저(정수)나 스트링(문자열)”을 “이런 식으로” 할 수 있다고 설명한다.[^9]

즉, 데모는 “다중 값 리턴”을 전제로 깔고 간다.[^9]

3.7.2 패턴 매칭으로 받는 방식: 패턴만 매칭하면 그대로 리턴/바인딩 가능[^9]

발표자는 “리턴을 어떻게 주냐”라고 물으며[^9], 답으로:

  • “이렇게 패턴만 매칭을 해주시면 그대로 리턴해 줄 수 있다”고 말한다.[^9]

여기서의 요지는, 리턴된 구조를 해체/바인딩하는 과정이 패턴 매칭으로 간단해진다는 소개다.[^9]

3.7.3 기존 방식과 비교: 클래스/오브젝트로 감싸서 리턴하던 번거로움[^9]

발표자는 “기존에는 이걸 어떻게 썼냐”라고 하며, 예전 방식의 번거로움을 비교한다.[^9]

  • 클래스를 생성하고[^9]
  • 클래스 오브젝트를 만들어[^9]
  • 오브젝트 자체를 리턴하는 형태로 처리했었다는 설명이다.[^9]

이번에는 “이렇게 간단하게 패턴 매칭을 통해서” 가능해졌다는 흐름으로 결론을 낸다.[^9]

[!IMPORTANT] Dart 패턴 매칭 파트의 핵심 비교 구도 “(이전) 여러 값 전달 → 클래스 만들고 오브젝트 리턴” vs “(이제) 여러 값 리턴 + 패턴 매칭으로 간단 처리”라는 대비를 통해 개발 경험 개선을 강조한다.[^9]

[^9]: @[03:31]~@[04:15] “다트… 패턴 매칭… 두 개 값으로 리턴… 인티저나 스트링… 패턴만 매칭… 기존에는… 클라스 생성… 오브젝트… 리턴… 간단하게 패턴 매칭…”

3.8 마무리: Flutter를 구글이 강하게 밀고 있고, ‘자체 렌더링’이 성능/자유도의 근거[^10]

📸 5:25

발표자는 “플러터 포워드에서 발표한 것들을 간단히 살펴봤다”고 정리하며 결론 파트로 넘어간다.[^10]

3.8.1 구글이 Flutter를 “엄청나게” 밀어준다[^10]

  • “플러터가 구글에서 엄청나게 밀어주고” 있다고 말한다.[^10]
  • 그래서 “기존 크로스 플랫폼에서 하지 못한 것들을 많이 해내고 있다”고 평가한다.[^10]

3.8.2 왜 가능하냐: 플랫폼 프레임워크 의존이 아니라 Flutter가 직접 렌더링[^10]

가장 중요한 이유를 설명하는 대목에서 발표자는 구조를 비교한다.[^10]

  • 기존 크로스 플랫폼처럼 “각 플랫폼 프레임워크에 의존”하는 방식이 아니라[^10]
  • Flutter는 “렌더링 자체를 만들어” Flutter “자체에서 렌더링”한다고 말한다.[^10]
  • 이 때문에 더 “자유로움”이 있고, 그것을 “잘 개발해” 성능을 “아주 좋게” 만들고 있는 것 같다고 덧붙인다.[^10]

3.8.3 다음 영상 예고: 크로스플랫폼 퍼포먼스 테스트를 위한 웹사이트(A4) 티저[^10]

발표자는 본인도 “크로스 플랫폼이 얼마나 퍼포먼스가 좋은지”를 테스트해보기 위해 “A4 웹사이트”를 “살짝 만들어 놨다”고 말한다.[^10] 이 영상은 그 “티저 영상”이고, 다음 영상에서 보자며 끝맺는다.[^10]

[^10]: @[05:25]~@[06:12] “발표한 것들… 간단히… 구글에서 엄청나게… 기존 크로스 플랫폼에서… 렌더링 자체… 플러터 자체에서… 퍼포먼스… A4 웹사이트… 티저…”

4. 핵심 통찰[^11]

  1. [h 발표자는 ‘채택 규모(70만 앱, 구글 앱 사례)’로 Flutter의 성숙도를 먼저 깔고, 이후 체감 포인트(성능/웹/그래픽/언어)를 공격적으로 소개한다.] 이는 업데이트가 “실험”이 아니라 이미 커진 생태계 위에서의 진화라는 인상을 만든다.[^2]
  2. [c 퍼포먼스 개선은 “업데이트만 하면 공짜”라는 표현으로, 개발자의 비용(리팩터링/재작성) 부담 없이 체감 효과를 강조하는 설득 장치로 쓰인다.] 특히 iOS 끊김 개선을 전면에 둔다.[^8]
  3. [h 웹 임베딩에서 iFrame → div로의 전환 소개는 Flutter 웹이 기존 웹 생태계와 더 자연스럽게 섞이도록(통합/삽입 난이도↓) 가는 방향성을 보여준다.] 발표자는 테스트 가능한 데모 사이트가 있다는 점도 같이 말한다.[^5]
  4. [h Material 3 파트는 “디자인을 잘 모르는 개발자도 바로 쓸 수 있게” 컬러/테마 적용을 도구화하고, 결과 코드를 복사해 쓰게 하는 실전 워크플로를 강조한다.] 즉 디자인 시스템을 ‘개발 생산성’ 문제로 다룬다.[^7]
  5. [h 커스텀 셰이더는 ‘플러터로 이런 이펙트까지 쉽게 된다’는 메시지로, 크로스플랫폼이 표현력에서 약하다는 편견을 깨는 데모 역할을 한다.] 로고/글로잉 텍스트 같은 눈에 띄는 사례를 보여준다.[^8]
  6. [c “Flutter가 직접 렌더링한다”는 구조적 차이를 결론에서 다시 못 박으며, 앞서 소개한 성능/표현력 개선을 ‘우연한 개선’이 아니라 구조적 필연으로 연결한다.] 이로써 “왜 Flutter가 해냈나”에 답한다.[^9]
  • 실행 관점에서 발표자가 권하는 행동(암묵적/명시적):
    • Material 3 테마 생성 페이지에서 옵션 선택 후 테마 코드를 복사해 즉시 적용해보라.[^7]
    • 새 렌더러/퍼포먼스 개선 체감을 위해 Flutter를 업데이트하고, iOS 애니메이션/스크롤에서 직접 비교해보라.[^8]
    • 웹 프로젝트가 있다면 iFrame 대신 div 임베딩 데모/가이드를 확인하고 기존 JS 웹에 통합 테스트를 해보라.[^5]

[^11]: @[00:20]~@[06:12] 영상 전반의 주장/구성(채택 규모→기능 소개→구조적 이유→다음 테스트 예고)

5. 헷갈리는 용어 정리 (해당 시에만)[^12]

  • Flutter Forward: Flutter 관련 발표(이 영상에서 ‘이번에 발표한 것들’의 출처로 언급되는 이벤트).[^10]
  • 2차원(다이멘셔널) 스크롤: 가로(좌우)와 세로(상하) 방향 스크롤을 동시에 처리/지원하는 스크롤 동작을 지칭.[^4]
  • 엘리먼트 임베딩(Element Embedding): Flutter 웹을 기존 웹 페이지에 포함시키는 방법으로, 영상에서는 iFrame 대신 div 기반 삽입을 소개한다.[^5]
  • iFrame: 기존 웹페이지에 다른 웹 콘텐츠를 프레임 형태로 삽입하는 방식으로, 영상에서는 “기존 방식”으로 언급된다.[^5]
  • div: 웹 개발에서 흔히 쓰는 HTML 요소. 영상에서는 Flutter 웹을 기존 JS 웹사이트에 더 간단히 넣는 방식으로 언급된다.[^5]
  • 렌더러(Renderer): 화면을 그리는 구성요소/엔진을 가리키는 표현. 영상에서는 기존 렌더러(왼쪽)와 새 렌더러(오른쪽)를 비교한다.[^6]
  • Material 3: 구글의 디자인 언어로 소개되며, 테마/컬러 적용을 쉽게 해주는 흐름으로 설명된다.[^7]
  • 커스텀 셰이더(Custom Shader): 그래픽 효과(로고 효과, 글로잉 텍스트 등)를 주기 위한 기술로 소개되며, “아주 쉽게 쿨한 이펙트”를 낼 수 있다고 말한다.[^8]
  • 패턴 매칭(Pattern Matching): Dart 언어 기능. 영상에서는 함수가 여러 값을 리턴할 때 이를 “패턴만 매칭해서” 간단히 처리하는 식으로 설명한다.[^9]

[^12]: @[00:44]~@[04:15] 각 용어가 실제로 언급/설명되는 구간

참고(콘텐츠 정보)[^13]

  • 제목: 구글이 드디어 해냈구나… #flutter #앱개발[^13]
  • 채널: The Coding Papa 더코딩파파[^13]
  • 길이: 6분 22초[^13]
  • 링크: https://www.youtube.com/watch?v=d-MSD1MHn5w[^13]
  • 키워드(제공): 프로그래밍, 프로그래밍 기초, 프로그래밍 독학, 프로그래밍 입문, 코딩, 코딩 기초, 코딩 독학, 강의, 강좌, flutter 3.7[^13]

[^13]: 사용자 제공 메타데이터(제목/채널/길이/링크/키워드) 및 영상 전체 범위

← 프로젝트에서 보기