Flutter Web SEO 가이드 2편 : 에셋 최적화

by

<< Flutter Web SEO 가이드 1편 : 태그

Flutter Web SEO

Flutter Web SEO 가이드 2편을 시작하며

1편에서는 Flutter와 같은 SPA 형식의 웹 애플리케이션에서 동적으로 태그를 생성하는 방법에 대해 다루었습니다. SEO는 웹사이트가 검색 엔진 결과 페이지에서 상위에 랭크되도록 하는 중요한 기술입니다. 특히, 사이트의 SEO에서 중요한 요소 중 하나는 로딩 속도입니다. 이번 2편에서는 초기 로딩 데이터를 줄여 사이트 성능을 최대화하는 방법에 대해 공유합니다.

SEO란?

SEO는 Search Engine Optimization의 약자로, 검색 엔진 최적화를 의미합니다. 웹사이트가 검색 엔진 결과 페이지에서 상위에 랭크되도록 최적화하는 기술을 뜻합니다. SEO를 통해 웹사이트의 가시성을 높이고 더 많은 트래픽을 유도할 수 있습니다. 이는 웹사이트의 성공에 매우 중요한 요소입니다. 특히, 콘텐츠가 풍부한 웹사이트일수록 SEO의 중요성이 더욱 부각됩니다.

SEO는 단순히 검색 결과 상위에 랭크되기 위한 기술이 아니라, 사용자 경험을 개선하고 웹사이트의 신뢰성을 높이는 데도 기여합니다. 검색 엔진은 사용자에게 가장 관련성 높은 결과를 제공하려고 노력하므로, SEO는 사용자에게 더 나은 정보를 제공하고자 하는 노력의 일환이라고 할 수 있습니다.

Flutter Web의 랜더링 방식

Flutter Web은 기본적으로 클라이언트 사이드 렌더링(CSR)을 제공합니다. CSR은 페이지 콘텐츠가 사용자의 브라우저에서 동적으로 로드된다는 것을 의미합니다. Flutter의 경우 콘텐츠를 구성하고 렌더링하기 전에 Flutter 프로세스가 웹 브라우저에 먼저 런칭되어야 하며, 이 과정에서 폰트, 이미지 에셋 등 필요한 데이터를 불러옵니다. 따라서, 초기에 불러올 데이터가 많으면 초기 로딩 속도가 느려질 수 있습니다.

CSR은 웹 애플리케이션의 사용자 경험을 향상시키는 데 유리하지만, 초기 로딩 시간은 길어질 수 있습니다. 이는 SEO에 부정적인 영향을 미칠 수 있기 때문에, 초기 로딩 데이터를 줄이는 최적화 작업이 필요합니다.

Flutter Web 로딩 속도 줄이기

초기 로딩을 줄이는 방법은 초기 로딩 시 불러오는 데이터의 크기를 줄이고, 초기 로딩 시 데이터 처리 시간을 줄이는 것입니다. 이를 위해 다음과 같은 다섯 가지 방법을 체크해야 합니다:

  1. 사용하지 않는 에셋 제거: 프로젝트에 포함된 사용하지 않는 에셋을 확인하고 삭제합니다. 이를 통해 불필요한 파일이 로딩되는 것을 방지할 수 있습니다. 예를 들어, 테스트 중에 사용된 이미지나 더 이상 사용하지 않는 폰트 파일 등이 여기에 해당합니다.
  2. 이미지 로딩 최적화: 사이즈가 큰 에셋은 렌더링 이후에 불러올 수 있도록 Image.network 위젯을 사용하여 이미지 대신 URL로 대체합니다. 이는 초기 로딩 시 불필요한 대용량 파일이 로딩되는 것을 방지합니다. 또한, Lazy Loading 기법을 적용하여 사용자 스크롤에 따라 이미지를 로드하는 것도 좋은 방법입니다.
  3. 이미지 포맷 변경: 이미지 에셋은 JPG/PNG보다 WebP 포맷을 사용하는 것이 좋습니다. WebP는 더 작은 파일 크기로 동일한 품질을 유지할 수 있어 로딩 속도를 개선할 수 있습니다. 이는 특히 모바일 환경에서 유용하며, 데이터 사용량을 줄이는 데 도움이 됩니다.
  4. 커스텀 폰트 최적화: 커스텀 폰트를 사용할 경우, TTF보다 사이즈가 작은 OTF/WOFF 포맷을 사용합니다. 폰트는 Flutter 웹 구성을 위해 필요하므로 초기 로딩 이후에 불러오도록 해야합니다. 초기로딩시 폰트를 불러오면 구성데이터로써 작동하면서 초기로딩이 길어지는 문제가 생깁니다.
  5. 불필요한 패키지 제거: pubspec.yaml에서 사용되지 않는 패키지들을 정리합니다. 이는 프로젝트의 크기를 줄이고 불필요한 파일 로딩을 방지합니다. 추가적으로, 디버깅 도구나 테스트에만 사용되는 패키지들도 배포시에는 제거하는 것이 좋습니다.

Flutter Web에서 절대하지 말아야 할 행동 (폰트)

기본 폰트를 사용하는 것이 가장 빠르지만, 꼭 정해진 커스텀 폰트를 사용해야 한다면 다음과 같은 방법을 사용해야 합니다. pubspec.yaml에서 폰트를 추가하는 대신, font loader를 이용하면 폰트를 더 빠르게 로드할 수 있습니다. 아래 코드는 이를 구현하는 예시입니다:

import 'package:flutter/services.dart';
void main() async {
  final fontLoader = FontLoader('pretendard');
  fontLoader.addFont(rootBundle.load("your_font_path/Pretendard-Thin.woff"));
  fontLoader.addFont(rootBundle.load("your_font_path/Pretendard-Light.woff"));
  fontLoader.addFont(rootBundle.load("your_font_path/Pretendard-Regular.woff"));
  fontLoader.addFont(rootBundle.load("your_font_path/Pretendard-Medium.woff"));
  fontLoader.addFont(rootBundle.load("your_font_path/Pretendard-Bold.woff"));
  // 필요한 다른 폰트들도 동일하게 추가
  await fontLoader.load();
  runApp(const App());
}

결론

Flutter Web은 특성상 최초 빌드시 웹페이지 로딩이 발생하며, 이 딜레이로 인해 일반 웹페이지보다 초기 로딩 속도가 다른 웹 빌드에 비해서 특히 더 느려질 수 있습니다. 따라서 빌드시에는 에셋 용량을 최대한 줄여 초기 로딩을 줄이는 방법을 선택해야 합니다. 이를 위해 이미지 및 폰트 최적화가 필수적이며, 불필요한 에셋 로딩을 최소화해야 합니다. 특히, 커스텀 폰트를 사용하는 경우 font loader를 통해 폰트를 로드하면 로딩 시간을 크게 단축할 수 있습니다.

이러한 최적화 작업을 통해 Flutter Web의 초기 로딩 속도를 최적화하는 것은 사용자 경험을 개선하고 SEO를 강화하는 데 중요한 요소입니다. 이를 통해 더 나은 웹사이트 성능을 달성할 수 있습니다.
다음 포스트에서는 폰트 로딩의 부담을 줄이는 방법에 대해 더 자세히 다룰 예정입니다.

Leave a Comment