<div id="readability-page-1" class="page"><article><div><p>안녕하세요. LINE Plus ABC Studio에서 앱 개발을 하고 있는 김종식, 최정연, 박유진입니다. 저희 팀은 Flutter를 활용해 일본에서 운영하는 배달 서비스인 '데마에칸(Demaecan, 出前館)'의 다양한 제품 개발에 참여하고 있는데요. 작년에 YouTube 채널 <a href="https://www.youtube.com/@linedevlog" target="_blank">라인개발실록</a>에 올라간 <a href="https://youtu.be/tlwNJ9yHyx4?si=SNJcZ97blHaHHI0Z" target="_blank">일본 1위 배달앱, Flutter로 만듭니다</a> 콘텐츠를 작업하면서 협업한 것을 계기로 Future&lt;Flutter&gt; 행사 준비 팀으로부터 컨퍼런스 초대 및 발표 요청을 받았습니다. 이 초청을 계기로 LINE Plus에서 이번 행사를 후원하기도 했는데요. 이번 글에서는 Future&lt;Flutter&gt; 2024에 참석한 후기를 공유하려고 합니다.</p>
<h2 id="행사-소개">행사 소개</h2>
<p>Flutter&lt;Flutter&gt; 2024는 Flutter Seoul &amp; Incheon 커뮤니티에서 Flutter 개발자 여러분들을 위해 국내 최대 규모로 준비한 행사로, 2024년 9월 28일 인천 송도에서 10개 세션이 300명 이상의 참가자분들과 함께 진행됐습니다. <a href="https://dart.dev/guides/libraries/c-interop" target="_blank">FFI(foreign function interface)</a>와 <a href="https://webrtc.org/" target="_blank">WebRTC(web real time clock)</a>, <a href="https://shorebird.dev/" target="_blank">Code Push</a>(over the air update, 사용자의 기기에 직접 배포하는 기술), UI 렌더링, 멀티 플랫폼 환경 개발 등 다양한 Flutter 이론과 실제 활용 사례를 오프라인에서 공유하고 공유 받을 수 있었던 귀한 행사였습니다.&nbsp;</p>
<h2 id="행사장-분위기">행사장 분위기</h2>
<p>행사 시작 전 조금 일찍 도착해 행사장 주변과 세미나 실을 한 번 둘러봤는데요. 강연장 규모가 생각보다 커서 조금 부담이 느껴지기도 했습니다. 첫 세션이 시작되기 전에 대부분의 참가자들이 입장을 완료해 주실 만큼 참석률이 높았습니다.</p>
<p><img src="https://vos.line-scdn.net/landpress-content-v2-vcfc68aynwenkh3bno0ixfx8/75763405a73845589445d9c2bfcf76a2.jpg?updatedAt=1732171610000" width="1000" height="auto" alt=""></p>
<p>입장할 때 받았던 굿즈는 특히 맘에 들어 몇 개 더 받고 싶다는 생각도 들었습니다.</p>
<p><img src="https://vos.line-scdn.net/landpress-content-v2-vcfc68aynwenkh3bno0ixfx8/7268e2ebcaa94d9aa72bd7ec878d7625.png?updatedAt=1732171645000" width="400" height="379" alt=""></p>
<p>매 세션마다 참가자분들의 발표 몰입도는 엄청났고, 발표 후 Q&amp;A도 활발히 진행됐습니다. 최근 Flutter에 대한 관심이 커지고 있다고 느꼈는데요. 강연장에서 그 관심도를 생생하게 체감할 수 있었습니다. 특별히 기억에 남는 것은 발표자 대기실 공간인데요. 다과나 음료가 잘 준비돼 있었고, 행사장에서 진행되는 발표를 별도로 모니터링도 할 수 있도록 준비돼 있어서 준비를 많이 한 행사라고 느꼈습니다. &nbsp;</p>
<h2 id="LINE-ABC-Studio의-세션-소개">LINE ABC Studio의 세션 소개</h2>
<p>저희 팀에서 준비한 발표 세션을 간략히 소개하겠습니다.&nbsp;</p>
<h3 id="풍성한-디자인-요청-사항에-대응하기,-박유진-님">풍성한 디자인 요청 사항에 대응하기, 박유진 님</h3>
<p>저는 현재 머천트 앱 개발에 참여하면서 지속적으로 앱의 사용성을 개선해 나가고 있습니다. 이번 행사에서는 머천트 앱 리뉴얼 중 실제 담당했던 UI 커스터마이징과 스켈레톤 로딩, CustomScrollView 내부에 드롭다운 팝업 표시 등의 UI 요구 사항과 구현 과정을 소개했습니다. 각 요구 사항을 어떻게 해결해 나갔는지 그 과정을 상세히 소개하면서 이미 제공되는 패키지들과 비교하기도 했습니다.</p>
<p><img src="https://vos.line-scdn.net/landpress-content-v2-vcfc68aynwenkh3bno0ixfx8/72152761a7854188849fd8a755c0fdc5.png?updatedAt=1732172075000" width="1000" height="auto" alt=""></p>
<figure><img src="https://vos.line-scdn.net/landpress-content-v2-vcfc68aynwenkh3bno0ixfx8/2122ae0082ca4d00b949ecba3516aff2.png?updatedAt=1732172093000" width="1000" height="auto" alt="">
<figcaption>원의 반경을 이용한 오각형 UI 커스터마이징</figcaption>
</figure>
<p>또한 내가 이해한 것을 정확하게 표현하기 위해 시각 자료를 그려서 첨부해 명확하게 의사소통을 하는 노하우와, 기획자 및 디자이너와 인식을 정확히 맞추기 위해 노력하면서 동료에게 신뢰받는 개발자로 성장한 이야기도 공유했습니다.</p>
<p><img src="https://vos.line-scdn.net/landpress-content-v2-vcfc68aynwenkh3bno0ixfx8/def4551ccde645abb020cfc0d169dce2.png?updatedAt=1732172301000" width="1000" height="auto" alt=""></p>
<p><img src="https://vos.line-scdn.net/landpress-content-v2-vcfc68aynwenkh3bno0ixfx8/b17c22f808c64105b09c241c0f668f83.png?updatedAt=1732172325000" width="1000" height="auto" alt=""></p>
<p>제 발표 전체 내용이 궁금하시다면 아래 링크를 참고하세요.</p>
<ul><li>발표 자료: <a href="https://speakerdeck.com/lycorptech_jp/2024_future_flutter_implements_to_rich_design_requests" target="_blank">https://speakerdeck.com/lycorptech_jp/2024_future_flutter_implements_to_rich_design_requests</a></li></ul>
<h3 id="Flutter-Web을-활용해-제품-개발-환경-개선하기,-김종식-님">Flutter Web을 활용해 제품 개발 환경 개선하기, 김종식 님</h3>
<p>저는 개인적으로 모바일 앱을 개발해 오면서 프로젝트에 참여하는 프로덕트 메이커 분들이 앱 제품을 확인할 수 있는 환경을 효율적으로 구축하는 것에 관심이 있었습니다. 이와 관련해 데마에칸 제품 중 DriverApp과 ConsumerApp, RetailApp 프로젝트에 참여하면서 각 앱이 웹에서도 작동하도록 만드는 작업을 시도한 경험이 있는데요. 이번 행사에서 이 경험을 소개하면 좋을 것 같아서 이 주제를 선택했습니다.&nbsp;</p>
<p><img src="https://vos.line-scdn.net/landpress-content-v2-vcfc68aynwenkh3bno0ixfx8/d7dc49ed76a44f67b10726c2696bec58.png?updatedAt=1732172394000" width="1000" height="auto" alt=""></p>
<p>이미 운영 중인 앱을 웹에서 작동하도록 만드는 일은 막상 시작하면 부담스러운 작업이 될 수 있습니다. 특히 앱에서 사용하고 있는 각 패키지에 대한 대응이 필요한데요. 이때 어떻게 대응하면 좋을지 정리해서 공유했습니다.</p>
<p><img src="https://vos.line-scdn.net/landpress-content-v2-vcfc68aynwenkh3bno0ixfx8/b215398c01f9488aa2895254ffc40ef6.png?updatedAt=1732172471000" width="1000" height="auto" alt=""></p>
<p>또한 웹에서 작동시키기 위해 알아야 하는 <a href="https://developer.mozilla.org/ko/docs/Web/HTTP/CORS" target="_blank">CORS</a>도 소개하면서, 로컬 개발 환경 및 배포 환경에서 CORS 이슈가 발생했을 때 어떻게 대응하면 좋을지 공유하며, 이미 앱으로 구현한 Flutter 프로젝트를 웹에서도 작동하도록 만드는 작업을 부담없이 시도해 보시면 좋겠다고 전달했습니다.</p>
<p><img src="https://vos.line-scdn.net/landpress-content-v2-vcfc68aynwenkh3bno0ixfx8/e8ae9155078144aba61fe8fe9ead8d13.png?updatedAt=1732172539000" width="1000" height="auto" alt=""></p>
<p>현장에서 발표 후 Q&amp;A에서 첨부 자료로 소개했던 슬라이드까지 추가했으니, 발표 내용이 궁금하시면 아래 발표 자료를 참고해 주세요.</p>
<ul><li>발표 자료: <a href="https://speakerdeck.com/lycorptech_jp/2024_future_flutter_using_flutter_web_to_improve_product_dev_process" target="_blank">https://speakerdeck.com/lycorptech_jp/2024_future_flutter_using_flutter_web_to_improve_product_dev_process</a></li></ul>
<h3 id="Flutter-BloC을-제품-개발에-야무지게-적용하기,-최정연-님">Flutter BloC을 제품 개발에 야무지게 적용하기, 최정연 님</h3>
<p>현재 참여하고 있는 프로젝트의 규모가 점점 커지면서, 더욱 다양한 기능이 추가되고 개발자도 증원되기로 예정돼 있었습니다. 그러다 보니 자연스럽게 프로젝트의 구조를 어떻게 하면 조금 더 효율적으로 만들 수 있을지 고민했는데요. 저는 이번 세션에서 이와 같은 고민 끝에 <a href="https://bloclibrary.dev/ko/" target="_blank">BloC</a>를 도입하게 된 이유와 BloC을 이용한 일회성 이벤트 처리, 위젯 빌드 최적화, 보일러플레이트(boilerplate) 코드를 간편하게 작성하는 방법, BloC 테스트 코드를 작성하면서 겪은 어려움과 이를 해결하는 과정 등을 예제와 함께 자세히 소개했습니다.</p>
<p><img src="https://vos.line-scdn.net/landpress-content-v2-vcfc68aynwenkh3bno0ixfx8/64cc66b586b842b4967da7f33e27bac1.png?updatedAt=1732172982000" width="1000" height="auto" alt=""></p>
<p>특히 개발 과정에서 현실적으로 고민했던 문제들을 해결해 나간 과정을 되도록 자세히 소개하려고 많은 준비를 했습니다. 보일러플레이트 코드를 효율적으로 작성하기 위한 스니펫(snippet)과 위젯 빌드 시 여러 값을 참조해 빌드할 수 있는 <code>BlocSelector</code>, 테스트 코드를 효율적으로 작성하는 방법 등을 행사가 끝난 후에도 언제든지 참조할 수 있도록 샘플 코드로 준비했습니다.</p>
<p><img src="https://vos.line-scdn.net/landpress-content-v2-vcfc68aynwenkh3bno0ixfx8/aab97f6f16a64085b96fd3fa50da54b3.png?updatedAt=1732173039000" width="1000" height="auto" alt=""></p>
<p><img src="https://vos.line-scdn.net/landpress-content-v2-vcfc68aynwenkh3bno0ixfx8/a524f97a659d4af58d7dfe15e18c7fc7.png?updatedAt=1732173052000" width="1000" height="auto" alt=""></p>
<p>더욱 자세한 내용은 아래 샘플 코드와 발표 자료를 참조해 주세요.</p>
<ul><li>샘플 코드: <a href="https://github.com/hohoins/flutter_bloc_abc_studio" target="_blank">https://github.com/hohoins/flutter_bloc_abc_studio</a></li><li>발표 자료: <a href="https://speakerdeck.com/lycorptech_jp/2024_future_flutter_dive_into_flutter_bloc" target="_blank">https://speakerdeck.com/lycorptech_jp/2024_future_flutter_dive_into_flutter_bloc</a></li></ul>
<h2 id="행사-참석-소감-">행사 참석 소감&nbsp;</h2>
<p>이번 행사에 참석한 소감을 말씀드리겠습니다.&nbsp;</p>
<h3 id="박유진-님">박유진 님</h3>
<p>발표 주제를 정한 후 어떤 사례를 소개하는 것이 좋을지 많이 고민했었는데요. 각 사례의 샘플 코드를 준비하거나 그림을 그리는 등 내 머릿속에 있던 개념을 어떻게 설명하고 시연 참석자가 더 쉽게 이해할 수 있을지 고민해 볼 수 있는 좋은 시간이었습니다.</p>
<p><img src="https://vos.line-scdn.net/landpress-content-v2-vcfc68aynwenkh3bno0ixfx8/f12ca7e5c472437296fd7e83c9247a16.jpg?updatedAt=1732173147000" width="1000" height="auto" alt=""></p>
<p>저는 주로 디자인 요청 사항을 직접 구현하는 내용에 집중했기 때문에 Flutter의 위젯과 저의 코드를 비교하는 방식으로 발표를 준비해 보면 어땠을까, 하는 아쉬움이 남습니다. 특히 제가 소개한 내용 중 <code>CustomScrollView</code>에 드롭다운 팝업을 표시하는 주제가 있었는데요. 이를 Flutter의 <a href="https://api.flutter.dev/flutter/widgets/Overlay-class.html" target="_blank">Overlay</a>와 <a href="https://api.flutter.dev/flutter/rendering/LayerLink-class.html" target="_blank">LayerLink</a>를 사용해 구현하는 방법과 비교해서 설명했으면 더 좋았을 것 같다는 생각이 듭니다.</p>
<h3 id="김종식-님">김종식 님</h3>
<p>이번 행사는 현재 운영 중인 앱 제품을 웹 환경에서 사용할 수 있도록 만드는 경험을 공유할 수 있는 의미있는 시간이었습니다. 특히 발표를 준비하면서 웹 환경에서 발생할 수 있는 CORS 문제를 설명할 수 있도록 다시 정리하는 작업은 스스로 더 깊이 이해할 수 있는 계기가 되었습니다. 또한 MapView나 WebView는 Flutter 웹 환경에서 제스처가 매끄럽지 않았던 것으로 기억하는데요. <a href="https://docs.flutter.dev/ui/interactivity/gestures" target="_blank">Flutter gestures</a>를 조금 더 연구해 봐야겠다는 생각이 들었습니다.</p>
<p><img src="https://vos.line-scdn.net/landpress-content-v2-vcfc68aynwenkh3bno0ixfx8/43587c0014704bca83e25d1a745be50e.jpg?updatedAt=1732173824000" width="1000" height="auto" alt=""></p>
<p>현장에서 Flutter 기술에 대한 높은 관심과 Flutter로 만든 여러 서비스를 알게 되고, 실제 개발 사례들을 네트워킹을 통해 알아가는 시간이 즐거웠습니다. 앞으로 Flutter 기술을 다루는 콘퍼런스가 점점 더 많아졌으면 좋겠다고 생각했습니다(개인적으로 입장할 때 나눠주신 굿즈 너무 좋았어요!).&nbsp;</p>
<h3 id="최정연-님">최정연 님</h3>
<p>저는 이번 행사를 통해 발표자로 처음 등단했는데요. 한국 최대 Flutter 콘퍼런스의 1회차 발표자로 참가할 수 있어 정말 영광이었습니다.&nbsp;</p>
<p><img src="https://vos.line-scdn.net/landpress-content-v2-vcfc68aynwenkh3bno0ixfx8/36f5097e5fe54d3ebb41c293b9d95b34.jpg?updatedAt=1732173878000" width="1000" height="auto" alt=""></p>
<p>이번 행사를 통해 국내에서도 Flutter에 대한 관심도가 높아졌다는 것을 몸소 느낄 수 있었습니다. 또한 Flutter 공부를 더 열심히 해야겠다는 생각도 들었는데요. 최근에 가장 관심 있는 학습 주제는 <a href="https://dart.dev/language/macros" target="_blank">Macros</a>입니다. Macros는 다른 코드를 매개변수로 받아서 사용자 정의에 따라 실시간으로 코드를 생성하거나 수정 혹은 추가하는 기능입니다. 예를 들어 실시간으로 클래스에 JSON 인코딩/디코딩 함수를 자동으로 생성해 줍니다. 코드를 작성하면 동시에 Macros가 코드를 생성해 내는 것이 매우 인상적이었는데요. 이 흥미로운 기능이 안정화 버전으로 릴리스되기 전에 얼른 공부를 마치고 싶습니다.</p>
<p>저는 이번 Future&lt;Flutter&gt; 2024에 참석해서 좋은 지식과 영감을 얻을 수 있었습니다. 앞으로도 국내 Flutter 개발자를 위한 좋은 컨퍼런스가 꾸준히 개최되길 바랍니다.</p>
<h2 id="마치며">마치며</h2>
<p>이번 행사는 하루 종일 타이트한 일정으로 진행됐는데요. 빡빡한 일정 속에서도 현장에서 많은 분들이 Flutter 기술에 대한 이야기를 나누고 각자 활용한 사례를 공유하는 것을 볼 수 있었습니다.&nbsp;</p>
<p>아래 사진과 같이 저희 팀 동료분들도 행사에 참석해 응원해 주셨는데요. 덕분에 발표하면서 조금이나마 긴장을 풀 수 있었습니다. 여러모로 감사한 하루였습니다.</p>
<p><img src="https://vos.line-scdn.net/landpress-content-v2-vcfc68aynwenkh3bno0ixfx8/5843c5a98da34f1f95df32265d23fea5.jpg?updatedAt=1732174179000" width="1000" height="auto" alt=""></p>
<p>저희 팀의 Flutter 이야기에 많은 관심과 응원을 보내주신 운영진 및 참가자 분들께 이 글을 통해 다시 한번 감사하다는 인사를 드리며 이만 마치겠습니다.&nbsp;</p></div></article></div>

LINE ENGINEERING

안녕하세요. LINE Plus ABC Studio에서 앱 개발을 하고 있는 김종식, 최정연, 박유진입니다. 저희 팀은 Flutter를 활용해 일본에서 운영하는 배달 서비스인 '데마...

Future<Flutter> 2024에 다녀왔습니다

댓글