[flutter] Flutter Extension for Gemini CLI//gemini-cli 테스트 버전 사용해보기 (gemini-cli vs copilot)

https://medium.com/flutter/meet-the-flutter-extension-for-gemini-cli-f8be3643eaad

 

Meet the Flutter Extension for Gemini CLI

 

미디움에서 플러터 관련글을 검색하던 중에 flutter extension을 발견하여 설치해봤다.

 

이 포스트에서는 간단한 설정과 사용방법 후기를 남긴다.

 

flutter 용으로 튜닝된 느낌의 LLM인것같다.

 

 

파워쉘에서 실행

1. 선행 설치

• Node.js 18+ 설치. 확인: node -v Google Codelabs+1
• Gemini CLI 설치: npm i -g @google/gemini-cli 또는 npx https://github.com/google-gemini/gemini-cli Google Codelabs+1
• Git 설치(필수). Git 없으면 GitHub URL 설치가 실패함 Google Gemini

 

설치 후 gemini extensions install https://github.com/gemini-cli-extensions/flutter.git --auto-update 실행

 

설치가 완료되면 다음과같은 상태

 

사용방법은 아래 깃헙 레파지토리 참고

https://github.com/gemini-cli-extensions/flutter

GitHub - gemini-cli-extensions/flutter

 

 

설치 후 cmd에서 gemini를 실행하면 설정할 수 있다.

 

설정이 완료되면 프롬프트를 입력하는 창이 나온다.

 

나는 어떻게 시작하는지를 먼저 질문했다.

 

프롬프트를 입력하면 사용량이 얼마나 남았는지도 표시해준다.

 

커서나 코파일럿에서도 명령어를 생성해서 실행 할 수도 있는데, 얘를 사용하면 어떤게 장점인지 궁금해서 한글로 물어봤다.

그러면 한글로도 대답해준다

 

그런데 어떤 장점이 더 있는지 명확하지 않아서 vscode의 코파일럿과 같은 질문을 해봤다

현제 중복코드가 많이 있어서 내가 리펙토링할 화면이었는데 예시로 써먹어봤다.

-간단한 UI수정안 제시해줘 파일은 communitiy_screen.dart야

 

gemini-cli

 community_screen.dart 파일의 코드를 분석해 보았습니다. 현재 UI 구조도 훌륭하지만, 코드의 재사용성과 일관성을
  높이고, 가독성을 개선할 수 있는 간단한 UI 수정안을 제안해 드립니다.

  제안: PostListItem 위젯 추출 및 테마 적용

  현재 _PostsPlaceholderState와 _AllPostsViewState에 게시물 목록을 표시하는 UI 코드가 각각 구현되어 있어 중복이
  발생하고 있습니다. 또한, 텍스트 스타일이 TextStyle로 직접 하드코딩되어 있어 앱의 전체적인 테마와 일관성을
  유지하기 어렵습니다.

  따라서 다음과 같은 개선을 제안합니다.

   1. `_PostListItem` 위젯 추출: 게시물 하나를 표시하는 UI를 별도의 _PostListItem 위젯으로 추출합니다. 이렇게 하면
      코드 중복을 줄이고, UI를 재사용하기 쉬워지며, community_screen.dart 파일의 전체적인 가독성이 향상됩니다.

   2. `Theme.of(context).textTheme` 활용: 하드코딩된 TextStyle 대신 Theme.of(context).textTheme을 사용하여 텍스트
      스타일을 적용합니다. 예를 들어, 게시물 제목은 textTheme.titleMedium, 닉네임과 날짜는 textTheme.bodySmall을
      사용하는 방식입니다. 이를 통해 앱의 다른 부분과 디자인 일관성을 유지하고, 나중에 폰트나 테마를 변경할 때 더
      쉽게 대응할 수 있습니다.

   3. 시각적 계층 구조 개선: 새로운 _PostListItem 위젯에서 제목, 날짜, 닉네임 등의 폰트 크기와 굵기를 조절하여
      사용자가 정보를 더 쉽게 파악할 수 있도록 시각적 계층 구조를 개선합니다.

  이러한 변경을 통해 코드는 더 깔끔하고 유지보수하기 쉬워지며, UI는 더 일관되고 정돈된 느낌을 줄 것입니다.

  이 제안에 따라 UI 개선 작업을 진행해 드릴까요?

 

 

copilot

다음 단계: community_screen.dart 파일을 읽어 현재 구조와 개선 가능한 지점을 파악한 뒤, 간단한 UI 수정안(설명 + 코드 스니펫)을 제시하겠습니다. 기대 결과: 2–4개의 낮은 위험도 수정안과 적용 예시 제공.

읽기 community_screen.dart, 1 줄에서 400 줄까지

읽기 community_screen.dart, 400 줄에서 800 줄까지

시작(2/3) UI 수정 제안 문서 작성

좋습니다 — community_screen.dart를 기반으로 적용하기 쉬운 UI 개선안 4가지를 제안합니다. 각 항목에 짧은 목적, 기대효과, 그리고 적용 가능한 코드 스니펫(부분)을 포함합니다. 필요하면 제가 바로 코드 패치도 만들어 드립니다.

제안 1 — 위치 표시를 클릭 가능한 "위치 칩"으로 바꾸기 (앱바)

목적: 사용자가 위치 등록/변경으로 바로 이동하게 하여 글쓰기/목록 필터링 유도.
기대효과: 더 명확한 CTA, 장소 변경이 직관적.
적용: 현재 AppBar title의 Text(location) 대신 작은 Chip 또는 TextButton 사용.
예시 변경 (AppBar title의 일부 교체):

제안 2 — 게시글 카드 레이아웃을 반응형으로 정리 (이미지 오버레이 위치/사이즈 개선)

문제: 현재 하드코딩된 Positioned(left: 220, top: 50)로 이미지가 깨질 수 있음(다양한 화면에서).
개선: Row 내부에 이미지 영역을 만들고 Expanded/Fixed width를 사용, 이미지에 FadeInImage 적용.
기대효과: 다양한 화면에서 레이아웃 깨짐 방지, 깔끔한 썸네일 표시.
예시 스니펫 (컨테이너 내부 Row 대체):

제안 3 — 게시글 카드에 ListTile 스타일 적용 + 터치 피드백 강화

목적: 일관된 UI 컴포넌트 사용으로 가독성 향상, 접근성 개선.
적용: 현재 Container 내부 구조를 ListTile 또는 Ink + InkWell로 전환해 Material 터치 이펙트 확보.
예시 변경:

제안 4 — 빈 상태에서 CTA(글쓰기) 추가

목적: '아직 게시글이 없습니다' 화면에서 사용자가 바로 글쓰기 할 수 있는 행동 유도.
기대효과: 사용자 참여 증가, 빈 화면 활용.
적용: _PostsPlaceholder와 _AllPostsView의 빈 상태 뷰에 버튼 추가.
예시 스니펫:

검증 & 적용 가이드

각 스니펫은 낮은 위험도로, 기존 구조를 크게 뒤바꾸지 않습니다.
적용 후 확인 포인트:
앱바 위치 버튼 탭 시 라우팅 작동 여부.
카드 레이아웃이 다양한 화면/가로모드에서 깨지지 않는지.
터치 시 잔상(오버레이) 및 Ink 효과 정상 동작 여부.
빈 상태에서 글쓰기 버튼이 정상 동작하고 권한(로그인) 체크 정상 동작 여부.
적용 방법:
작업 분량이 작으므로 한 건씩 적용하고 빌드/기본 수동 테스트를 권장합니다.
UI 변경은 주로 community_screen.dart 내부의 게시글 카드(rendering)와 AppBar 부분을 수정하면 됩니다.
원하시면:

위 중 1~2개를 제가 직접 패치(코드 수정)해서 PR-ready로 만들어 드리겠습니다. (원하면 변경사항을 작은 commit/patched 파일로 적용)
또는 어떤 제안을 먼저 적용할지 알려주시면 그에 맞는 구체적 패치를 만들겠습니다. 어떤 것부터 적용할까요?

 

gemini-cli는 전체 파일을 살펴보고 중복코드를 찾아내어 해결안을 제시했다.

특히 Widget context를 파악하여 코드구조 최적화를 잘해준것 같다.

 

반면 코파일럿(GPT5모델)은 Flutter의 context까진 생각을 못하고 있는 듯한 느낌이 든다. 단순 UI로써 화면에 보여지는 부분만 살펴보는 느낌이다.(커서도 마찬가지)

 

gemini-cli로 리펙토링 결과 1000줄 가까지 되던 코드가 700자 후반까지 줄어들었다.

물론 결과물이 완벽하진 않아서 몇군데(2~3줄)정도는 손을 보았다.

그래도 이정도면 가려운곳을 잘 긁어주는것같다.

 

테스트버전이라 그런지 몇가지 버그가 있긴한데 정식출시가 되었으면 좋겟다