Flutter 기반 크로스 플랫폼 웹 개발

아토믹데브_6_Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발

atomicdev 2024. 8. 15. 05:23
728x90

6강: Bootstrap으로 UI 기본 구성하기

내용 요약

  1. Bootstrap 개요 및 사용 이유:
    • Bootstrap은 가장 널리 사용되는 프론트엔드 프레임워크 중 하나로, 반응형 웹 디자인을 쉽게 구현할 수 있는 다양한 CSS 및 JavaScript 컴포넌트를 제공합니다.
    • 기본적으로 미리 스타일링된 컴포넌트들이 포함되어 있어, 빠르고 일관된 사용자 인터페이스(UI)를 구축하는 데 매우 유용합니다.
    • Bootstrap을 사용하면 웹 애플리케이션의 UI를 보다 쉽게 구성하고, 다양한 기기에서 일관된 디자인을 유지할 수 있습니다.
  2. Flutter와 Bootstrap의 조합:
    • Flutter는 주로 모바일 및 데스크탑 애플리케이션을 대상으로 하지만, 웹 플랫폼도 지원합니다. 웹 애플리케이션에서 Bootstrap을 사용하면 기존의 Flutter 위젯 외에 강력한 HTML/CSS 기반의 UI 컴포넌트를 활용할 수 있습니다.
    • Bootstrap과 Flutter를 조합하면, 웹 애플리케이션의 사용자 인터페이스를 더욱 풍부하고 유연하게 구성할 수 있습니다.
  3. 기본 Bootstrap 컴포넌트 사용법:
    • Bootstrap의 주요 컴포넌트에는 그리드 시스템, 버튼, 카드, 폼 등이 있습니다.
    • 예를 들어, 그리드 시스템을 사용하면 반응형 레이아웃을 쉽게 구성할 수 있으며, 카드를 사용하면 콘텐츠를 정돈된 형태로 표시할 수 있습니다.

실습

1. Flutter 프로젝트에 Bootstrap 연동

  • Bootstrap CDN 추가:
    • Flutter의 웹 프로젝트에서 Bootstrap을 사용하려면 index.html 파일에 Bootstrap의 CSS와 JavaScript를 추가해야 합니다.
    • Flutter 프로젝트의 web/index.html 파일을 열고, <head> 태그 내부에 다음 코드를 추가합니다:
<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">

<!-- Bootstrap JS and dependencies -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

  • Flutter와 Bootstrap 조합:
    • Flutter 위젯과 함께 Bootstrap을 사용할 수 있습니다. 예를 들어, index.html 파일에서 Flutter 앱 외에 Bootstrap을 활용한 HTML 구조를 추가할 수 있습니다.

2. 간단한 웹 페이지 레이아웃 구성

  • Bootstrap을 사용한 레이아웃 예제:
    • 아래 코드는 Bootstrap의 그리드 시스템을 사용하여 간단한 웹 페이지 레이아웃을 구성하는 예제입니다. index.html 파일에 다음 코드를 추가하거나, 새로운 HTML 파일로 작성할 수 있습니다:
<div class="container mt-5">
  <div class="row">
    <div class="col-md-8">
      <h1 class="mb-4">Welcome to My Flutter Web App</h1>
      <p>This is a simple web page layout using Bootstrap. You can use this layout to structure your web content effectively.</p>
      <button class="btn btn-primary">Click Me</button>
    </div>
    <div class="col-md-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Side Content</h5>
          <p class="card-text">This is some additional content you can place on the side of your main content.</p>
        </div>
      </div>
    </div>
  </div>
</div>
    • 기존 index.html <body>태그 내에 작성

    • 코드 설명:
      • 그리드 시스템: container, row, col-md-8, col-md-4 클래스를 사용하여 반응형 레이아웃을 구성했습니다.
      • 카드 컴포넌트: Bootstrap의 카드 컴포넌트를 사용하여 사이드 콘텐츠를 구성했습니다.
      • 버튼: Bootstrap의 기본 버튼 스타일을 적용한 예제입니다.

3. Flutter 프로젝트에서 Bootstrap을 활용한 웹 페이지

  • Flutter 웹 페이지에 Bootstrap 연동:
    • 위에서 설명한 Bootstrap 코드를 Flutter 프로젝트에 통합하여, 기존의 Flutter 위젯과 함께 사용할 수 있습니다.
    • Flutter 웹 애플리케이션의 index.html 파일에 Bootstrap 레이아웃을 추가하여 Flutter 앱 외부에 HTML 콘텐츠를 배치할 수 있습니다.
    •  

flutter 프로젝트 빌드

  • lib/web/index.html: 개발 중에 사용하는 원본 파일.
  • build/web/index.html: Flutter가 빌드 후 최종적으로 실행할 수 있는 완성된 파일.

Flutter의 웹 프로젝트에서 lib/web/index.html 대신 build/web/index.html 폴더가 생성되고 사용하는 이유는, Flutter의 빌드 과정과 개발 환경에서의 파일 구조와 관련이 있습니다.

이유:

  1. 개발용 소스 파일 (lib 폴더):
    • lib 폴더는 Flutter 애플리케이션의 소스 코드가 있는 곳입니다. Dart 코드와 UI 정의 등이 포함되어 있습니다.
    • **web/index.html**은 Flutter 웹 애플리케이션의 진입점 파일로, 여기에 Bootstrap과 같은 외부 라이브러리를 포함시키는 작업을 합니다.
    • 이 폴더의 파일들은 빌드 전에 애플리케이션을 구성하는 원본 파일입니다.
  2. 빌드 결과물 (build 폴더):
    • build/web 폴더는 Flutter가 빌드한 후에 애플리케이션을 실행할 준비가 된 파일들이 모이는 곳입니다.
    • flutter build web 명령어를 실행하면, Dart 코드가 자바스크립트로 변환되고, lib 폴더에 있는 소스 파일들이 압축되거나 최적화되어 build/web에 저장됩니다.
    • 이 과정에서 index.html 파일도 복사되고, Flutter가 필요한 JavaScript와 서비스 워커 같은 부가 파일들도 이곳에 포함됩니다.

왜 **lib/web/index.html**에서 바로 실행할 수 없나요?

  • 개발 중에 사용하는 web/index.html 파일은 최적화되지 않은 상태입니다. 이 파일은 Flutter가 빌드 후에 필요한 파일들로 변환되기 위한 준비 단계일 뿐, 최종적인 실행용 파일이 아닙니다.
  • 빌드 후에 생성된 build/web/index.html은 최적화된 상태로, Dart 코드가 자바스크립트로 변환되고, 애플리케이션의 성능을 향상시키기 위한 다양한 최적화 작업이 완료된 파일들이 포함됩니다.

요약:

  • lib/web/index.html: 개발 중에 사용하는 원본 파일.
  • build/web/index.html: Flutter가 빌드 후 최종적으로 실행할 수 있는 완성된 파일.

이 때문에, Flutter 애플리케이션을 브라우저에서 실행하려면 빌드 후의 build/web/index.html 파일을 사용해야 합니다.

이 때문에, Flutter 애플리케이션을 브라우저에서 실행하려면 빌드 후의 build/web/index.html 파일을 사용해야 합니다.

빌드이후 build/web 경로에 index.html 업데이트

 

index.html 파일을 더블 클릭하면 기본 브라우저에서 열리게 됩니다.

스크린샷

  1. Bootstrap 컴포넌트 예제 화면:
    • Bootstrap 그리드 시스템을 사용한 레이아웃, 카드 컴포넌트, 버튼 등의 사용 예제를 보여주는 화면 스크린샷.
  2. Bootstrap을 사용한 Flutter 프로젝트 화면:
    • Flutter 프로젝트에서 Bootstrap을 연동하여 실행된 웹 페이지의 스크린샷. Flutter 위젯과 Bootstrap UI 요소가 함께 표시된 화면을 포함합니다.

이 강의를 통해 여러분은 Flutter 웹 프로젝트에서 Bootstrap을 사용하는 방법을 배우고, 간단한 UI 레이아웃을 구성해 보았습니다. Bootstrap의 강력한 CSS 프레임워크를 활용하면, Flutter 애플리케이션의 웹 인터페이스를 더욱 다채롭게 만들 수 있습니다.

728x90

'Flutter 기반 크로스 플랫폼 웹 개발' 카테고리의 다른 글

아토믹데브_8_Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발  (28) 2024.08.15
아토믹데브_7_Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발  (28) 2024.08.15
아토믹데브_5_Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발  (30) 2024.08.15
아토믹데브_4_Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발  (51) 2024.08.14
아토믹데브_3_Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발  (64) 2024.08.14

'Flutter 기반 크로스 플랫폼 웹 개발'의 다른글

  • 현재글아토믹데브_6_Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발

관련글

티스토리툴바