[Flutter] 프로젝트 구조 - Web FE 프레임워크와 비교하여

저우웅·2025년 10월 11일

Flutter

목록 보기

3/8

최근 동아리에서 flutter를 공부하고 있습니다.
저는 최근까지 웹 프로젝트만을 진행했던 만큼, Flutter의 프로젝트 구조가 낯설게 느껴졌습니다.
따라서 오늘은 프론트엔트 프레임워크와 Flutter의 프로젝트 구조를 간단히 비교해 보고자 합니다.

해당 글은 개인 공부를 위해 작성된 글로, 틀린 내용이 포함될 수 있습니다.

진입점 entry point

위 사진은 제가 최근 진행한 프로젝트(Vue)의 프로젝트 구조입니다.
웹 프론트엔드의 주요 코드는 src폴더 안에 들어있습니다.
웹 프로젝트의 entry point는 main.js죠!

main.js에는

// Vue
import App from './App.vue'
const app = createApp(App)
app.mount('#app')

또는

// React
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

요런 코드가 있을테고, 이는 App을 루트 컴포넌트로 하여 앱을 실행하겠다는 의미입니다.

한편 Flutter의 프로젝트 기본 구조는 이렇습니다.

Flutter의 주요 코드는 lib폴더 안에 위치하게 됩니다.
Flutter에서는 main.dart가 존재합니다.

import 'app.dart';

void main() {
  runApp(const App());
}

여기서 runApp은 App을 루트 위젯으로 하여 위젯 트리를 구성하라는 신호를 보냅니다.

그러면 웹에서의 컴포넌트가 플러터의 루트 개념과 동일할까요?
그렇진 않습니다.

Component

웹 프론트엔드에서 컴포넌트는 화면의 한 조각을 구성하는 단위입니다.
React나 Vue에서는 버튼, 카드, 네비게이션 바 등을 각각의 컴포넌트로 분리해 재사용합니다.

예를 들면 BottomNavbar.vue 파일로 네비게이션 컴포넌트를 만들어놓고,

// Vue
<template>
// 기타 코드들...
<BottomNavbar />
</template>

<script setup>
import BottomNavbar from '@/components/common/BottomNavbar.vue'
</script>

이런 식으로 네비게이션 바 컴포넌트를 가져와서 페이지 내부에서 사용하죠.

반면 Flutter의 위젯(Widget) 은 조금 더 포괄적인 개념이라고 생각하면 됩니다.
버튼이나 텍스트 같은 UI 요소뿐만 아니라 스타일, 앱 전체 구조 자체도 위젯이기 때문입니다. (모든 게 위젯인 세계관)

// Flutter
class MyButton extends StatelessWidget {
  final String text;
  const MyButton({required this.text});

  @override
  Widget build(BuildContext context) {
    return Padding( // padding도 위젯!
      padding: const EdgeInsets.all(8.0),
      child: ElevatedButton(onPressed: () {}, child: Text(text)),
    );
  }
}

따라서 Flutter에서는 UI를 그리는 것과 레이아웃을 배치하는 것이 동일한 개념으로 취급됩니다.

정리하자면, component가 화면 조각의 단위라면 widget은 앱 전체를 표현할 수 있는 단위입니다.