flutter web으로 모바일 청첩장 만들기
flutter를 이용해서 모바일 청첩장을 만들면서 알게 된 점을 정리하고자 한다.
청첩장 링크: 모바일 청첩장
flutter를 선택한 이유
web 쪽에서는 아직 js진영이 두텁다 보니 flutter web을 이용해서 만들어보겠다는 시도가 조금은 어리석을 수도 있었을 것이다.
다른 개발자 분들의 모바일 청첩장을 봐도 대부분 next 혹은 react를 이용해 개발 된 레퍼런스들을 볼 수 있었다. (간간히 flutter로 개발 된 모바일 청첩장도 있었고 만날 때 마다 반가웠다.)
프로젝트를 시작할 때 언어와 프레임워크를 선택함에 있어 요구사항은 아래와 같았다.
-
개발에 있어서 퍼포먼스를 조금 더 낼 수 있는 언어와 프레임 워크는 무엇인가?
- 이전 공부 한 내용들 + 검색을 하면서 진행할 수 있을 거라 판단
-
Deadline이 나름 정해져 있는데 해당 기간 안에 퀄리티를 뽑으면서 완성 시킬 수 있는 언어와 프레임 워크는 무엇인가?
next와react로 가능하겠지만flutter를 이용한 것 만큼ui적으로css를 다룰 수 없을 것으로 판단하였음.
-
이번 건 뿐만 아니라 추 후 토이프로젝트에 적용 가능한 기술인가?
- 다음 프로젝트를 앱개발로 생각을 하고 있어서 적용 가능하다고 판단
flutter는 위 3개의 요구사항을 전부 만족 할 수 있다고 판단하여 선택을 하게 되었다.
flutter로 구현하는 모바일 우선 레이아웃
모바일 청첩장이다 보니 모바일 우선 레이아웃을 구현해야 했다.
먼저 css를 이용해서는 max-width와 margin을 이용하여 구현이 가능했었다.
flutter에서는 Container에 BoxConstraints를 이용하여 최대 및 최소의 width를 적용해주었으며 height는 MediaQuery를 이용하여 기기의 height를 부여하였다.
css의 margin으로 가운데 정렬을 하던 부분은 Container를 Center로 감싸주었다.
return Container(
child: Center(
child: ConstrainedBox(
constraints: BoxConstraints(
maxWidth: 430,
minWidth: 340,
minHeight: MediaQuery.of(context).size.height,
),
child: Scaffold(...),
),
),
);위와 같이 구현 후 child에 Scaffold 위젯을 선언하여 구현해 나가기 시작했다.
모바일 우선 레이아웃이 flutter에서는 불가능 할 거 같아서 flutter를 포기하려 했었다.
og(open graph), 오픈그래프
모바일 청첩장이다 보니 카카오톡을 이용하여 링크를 전달하는 경우가 많다. 링크가 공유 될 때 해당 링크의 title, description, image와 함께 공유하고 싶다는 생각을 하며 검색하던 도중 og태그에 대해 알게 되었다.
og 태그란 웹 페이지의 메타데이터를 정의하는 태그 중 하나이다. 이 태그는 페이스북에서 개발되었으며, 웹사이트가 소셜 미디어에 공유될 때 해당 웹페이지의 제목, 설명, 이미지 등을 정의할 수 있다.사용자가 클릭하기 전에 크롤러가 해당 웹사이트를 방문하여 이 태그를 크롤링하여 미리보기로 나타나는 정보를 지정하고 띄워준다.
flutter web에서 og tag를 설정하는 방법은 간단하다. 프로젝트에 web 디렉토리에 index.html이 있는데 해당 html안에 적용해주면 된다.
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<!-- ... -->
<!-- og -->
<meta property="og:title" content="우길❤️은하 결혼식에 초대합니다" />
<meta property="og:description" content="모바일 청첩장" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://leewoooo.github.io/wedding/#" />
<meta
property="og:image"
content="https://leewoooo.github.io/wedding/assets/assets/images/grid_asset_2.jpeg"
/>
<!-- ... -->
</head>
<body>
<script src="flutter_bootstrap.js" async></script>
</body>
</html>og tag를 위와 같이 정의 후 배포하면 링크를 공유했을 때 이쁘게 공유 되는 것을 볼 수 있을 것이다.
flutter web의 장,단점
flutter로 개발을 하였을 때 장,단점은 확실했던 것 같다.
장점
이번에 개발하면 서 느낀 것은 확실 히 개발 속도가 next로 시도했을 때 보다 빠르게 나왔다. 모바일 청첩장을 만드는 데 총 든 개발시간이 2일보다 조금 덜 걸린 것 같다. (디테일 제외)
또한 앱 개발을 위해 배웠 던 개념을 그대로 사용할 수 있어서 좋았다.
단점
custom initialization을 구현했다고 하더라도 느린 초기 로딩 속도는 어쩔 수 없는 것 같다.
그리고 디버깅에도 개발자 도구를 통해 디버깅이 익숙한 필자한테는 디버깅 측면에서도 조금은 낯설게 느껴지는 부분이 있었다.
결론
걱정했던 것에 비해 모바일 청첩장 프로젝트를 잘 마무리 할 수 있었다. 회사에서 사용하는 메인 기술 스택이 아니였지만 개인적으로 스터디 하고 적용하면서 성장이 있는 것 같다.
이러 한 경험들을 하기 위해 토이 프로젝트를 하는 것이 아닐까 하는 생각이 든다.
무엇보다 중요한 것은 끝 맺음을 할 수 있는 힘인거 같다. 결국 배포를 하지 않으면 공개되지 않고 주머니 안에만 가지고 있게 되는데 주머니에 있을 때는 그 것을 결과라고 보기는 어려울 것이다. 나 이외의 사람들에 대한 피드백은 더더욱 받기 힘들 뿐더러..
결국 서비스라는 것이 그런 것이지 않을까 한다. 소소한 토이프로젝트였지만 배포 후 반응을 보며 더 고도화해나가는 작업을 통해 또 한번 배워갈 수 있었다.
