flutter

배달의민족 주문접수 채널에 Flutter를 도입하며 고민한 것 | 우아한형제들 기술블로그 (새 탭에서 열림)

배달의민족 주문접수 채널은 다양한 디바이스 환경에 대응하고 개발 생산성을 극대화하기 위해 Flutter와 클린 아키텍처를 도입했습니다. 단일 코드베이스를 통해 Android, macOS 등 멀티 플랫폼 지원을 효율화하는 한편, 플랫폼별 차이는 추상화 계층으로 격리하여 유지보수성을 확보했습니다. 나아가 비즈니스 로직의 빠른 변화에 대응하기 위해 Flutter 기반 앱 셸(App Shell)에 웹뷰를 결합한 하이브리드 구조로 진화하며 일관된 사용자 경험을 제공하고 있습니다. ### 멀티 플랫폼 대응을 위한 Flutter 도입과 전략 * Windows, Android, iOS를 넘어 macOS 및 POS 환경까지 확장되는 파트너 요구사항에 대응하기 위해 단일 코드베이스인 Flutter를 선택했습니다. * "Write Once, Run Everywhere"의 이상보다는 플랫폼별 차이(업데이트 방식, 권한 관리 등)를 인정하고 공통 인터페이스로 대응하는 "Write Once, Adapt Everywhere" 접근법을 취했습니다. * 플랫폼별 구현이 다르거나 외부 라이브러리 의존성이 높은 경우, 혹은 테스트를 위해 Mock이 필요한 지점에만 선택적으로 추상화를 적용하여 불필요한 코드 복잡도를 제어했습니다. * 최근 실시간 통신 방식을 MQTT에서 SSE(Server-Sent Events)로 변경할 때, 인터페이스 기반 설계 덕분에 비즈니스 로직 수정 없이 구현체만 교체하여 작업을 완료할 수 있었습니다. ### 클린 아키텍처와 BLoC을 활용한 안정적인 상태 관리 * 계층 간 관심사를 명확히 분리하기 위해 데이터(Data), 도메인(Domain), 프레젠테이션(Presentation), 인프라(Infrastructure) 계층으로 구성된 클린 아키텍처를 적용했습니다. * 상태 관리 도구로는 BLoC(Business Logic Component) 패턴을 채택하여, 이벤트와 상태 변화를 명시적으로 로깅하고 추적함으로써 복잡한 주문 흐름의 디버깅 효율을 높였습니다. * 기능(Feature) 단위로 모듈을 분리하여 각 기능이 독립적으로 동작하고 확장될 수 있는 구조를 마련했습니다. ### 웹뷰 기반 앱 셸(App Shell)로의 전환과 유연성 확보 * 잦은 비즈니스 요구사항 변경에 실시간으로 대응하기 위해, 핵심 로직은 웹(WebView)으로 구현하고 기기 제어 기능은 Flutter(Native)가 담당하는 하이브리드 구조를 도입 중입니다. * Flutter는 프린터 제어, 오디오 출력, 푸시 알림, 로컬 DB 관리 등 하드웨어 및 OS 밀착형 기능을 '앱 셸'로서 제공합니다. * 웹과 Flutter 간의 통신은 JavaScript Bridge를 통해 이루어지며, 이를 통해 앱 스토어 심사 없이도 웹 업데이트만으로 새로운 비즈니스 기능을 즉시 반영할 수 있는 체계를 구축했습니다. 성공적인 멀티 플랫폼 서비스를 위해서는 단일 프레임워크 도입에 그치지 않고, 플랫폼별 차이를 수용할 수 있는 인터페이스 설계와 비즈니스 변화 속도에 맞춘 아키텍처(하이브리드 구조 등)를 전략적으로 선택하는 것이 중요합니다. 특히 클린 아키텍처를 통한 계층 분리는 기술적 부채를 최소화하면서도 급변하는 요구사항에 유연하게 대응할 수 있는 기반이 됩니다.

앱 성공을 위한 필수 요소: 장애 모니터링 (새 탭에서 열림)

모바일 서비스의 성공을 위해서는 사용자 신고 이전에 장애를 포착하고 대응할 수 있는 체계적인 모니터링 시스템 구축이 필수적입니다. 단순히 에러를 수집하는 것에 그치지 않고, 로그 레벨을 정교하게 설계하고 핵심 이벤트를 시각화함으로써 운영 환경의 예기치 못한 문제를 실시간으로 파악할 수 있습니다. 이를 통해 장애 대응 시간을 단축하고 사용자 이탈을 방지하여 서비스의 전반적인 품질과 신뢰도를 높일 수 있습니다. **Flutter 환경에서의 Sentry 초기 설정과 데이터 보호** * **의존성 및 환경 설정**: `sentry_flutter`와 네트워크 로그 자동 기록을 위한 `sentry_dio` 패키지를 사용하며, DSN 설정 시 운영(production)과 개발(dev) 환경을 명확히 구분하여 태깅합니다. * **비용 및 성능 최적화**: 모든 트래픽을 수집하는 대신 `tracesSampleRate`를 조절하여 샘플링 비율을 최적화하고 운영 비용을 관리합니다. * **민감 정보 마스킹**: `beforeSend` 콜백을 활용해 서버로 로그를 전송하기 전 사용자 인증 토큰이나 IP 주소 등 개인정보를 삭제하거나 마스킹 처리합니다. * **맥락 파악을 위한 장치**: 사용자 아이디를 설정하는 `configureScope`와 클릭 및 화면 이동 경로를 기록하는 `Breadcrumb`, `NavigatorObserver`를 연결해 에러 발생 직전의 사용자 행동을 복원할 수 있게 합니다. **효율적인 운영을 위한 5단계 로그 레벨 설계** * **Debug & Info**: 개발 단계의 로그는 로컬에서만 확인하고, `info` 레벨은 회원 가입이나 결제처럼 데이터 상태가 변하는 핵심 행위에 대해서만 기록하여 불필요한 트래픽을 방지합니다. * **Warning**: 외부 시스템 연동 실패(API 오류, 푸시 유실 등) 시 기록하며, 사용자의 일시적인 네트워크 문제는 제외하여 노이즈를 줄입니다. 이는 '10분간 100회 발생'과 같은 특정 임계치 기반의 알림 설정 대상으로 활용됩니다. * **Error**: 코드상으로 통제할 수 없는 내부 로직 오류(Null 객체 접근, 파싱 실패, 불가능한 비즈니스 상태 등) 발생 시 기록하며, 즉각적인 확인과 대응이 필요한 단계입니다. * **Fatal**: 앱 크래시나 처리되지 않은 예외 상황을 기록하며, 서비스 가용성에 치명적인 영향을 주는 지표로 관리합니다. **데이터 기반 대응을 위한 커스텀 이벤트 및 대시보드 구성** * **태그 기반 쿼리**: 로그 전송 시 `module`, `eventName`, `reason` 등 커스텀 태그를 명확히 부여하면 특정 기능별 실패율을 쿼리로 쉽게 검색하고 분석할 수 있습니다. * **성능 지표 모니터링**: HTTP 인터셉터를 통해 API 응답 시간과 병목 구간을 측정하고, 화면 로딩 속도 등 사용자 경험에 직결되는 지표를 추적합니다. * **시각화와 알람**: 수집된 데이터를 바탕으로 '비정상 종료 발생 없는 사용자(Crash-free users)' 비율과 주요 이벤트 실패율을 시각화한 대시보드를 구성하고, 장애 지속 시 수신 대상을 단계적으로 확대하는 알람 체계를 구축합니다. 성공적인 모니터링을 위해서는 로그 메시지의 형식을 통일하고 팀 내에서 엄격한 로그 레벨 가이드라인을 공유하는 것이 중요합니다. 처음부터 모든 알람을 활성화하기보다는 핵심 지표부터 시작하여 점진적으로 임계치를 조절해 나감으로써, 알람 피로도를 줄이고 실제 장애 상황에 집중할 수 있는 환경을 만드는 것을 추천합니다.

한 달짜리 과제, 바이브 코딩으로 5일 만에!(ChatGPT·Cursor) (새 탭에서 열림)

기존의 전통적인 개발 방식은 상세한 요구 사항 정의와 설계 단계에 많은 비용이 소모되어 급변하는 시장 트렌드에 대응하기 어렵습니다. 이 글은 생성형 AI를 활용해 '작동하는 데모'를 빠르게 만들고 이를 수정해 나가는 '바이브 코딩(Vibe Coding)' 전략을 통해, 한 달이 걸릴 과제를 단 5일 만에 해결한 과정을 담고 있습니다. 완벽한 정답보다는 충분히 괜찮은 해답을 빠르게 도출해 검증 루프를 돌리는 것이 핵심입니다. ### 요구 사항과 도메인의 간결한 정의 - 복잡한 메뉴 등록 시스템을 단순화하기 위해, 초기 요구 사항은 메모장에 한 줄 요약과 최우선순위 1~2가지만 정리하여 시작합니다. - 데이터 구조는 화면 구성의 기반이 되므로 가능한 사실에 가깝게 정의하되, 세부적인 내용은 AI의 창의적인 제안을 수용할 수 있도록 여백을 둡니다. - 처음부터 완벽한 명세서를 작성하려 하기보다, AI가 맥락을 파악할 수 있는 핵심 도메인 지식을 전달하는 데 집중합니다. ### 5가지 솔루션 후보 선정 및 구체화 - ChatGPT를 활용해 '스텝퍼형 마법사', '라이브 미리보기', '템플릿 복제', '채팅 입력', 'OCR 사진 촬영' 등 서로 다른 접근 방식의 솔루션 5가지를 도출합니다. - 각 솔루션의 장단점을 분석하여 실무 적용 가능성을 판단하고, 프롬프트를 미세 조정하며 원하는 수준의 답변이 나올 때까지 반복 요청합니다. - 이 과정에서 AI는 맥락을 축적하며 결과물의 품질을 높이며, 사용자는 여러 대안 중 최적의 사용자 경험(UX)을 선택할 수 있는 시야를 확보합니다. ### AI 기반의 와이어프레임 및 상세 설계 - 선정된 각 솔루션별로 필요한 화면 수, UI 요소, 공통 패턴(진행률 표시, 유효성 검사 등)을 AI가 상세히 설계하도록 유도합니다. - 예를 들어 '스텝퍼형'의 경우 8단계의 상세 화면 구성을 정의하고, 각 단계에서 입력받을 필드와 도움말 문구까지 구체화합니다. - 설계 과정에서 누락된 기능이나 우선순위 변경이 발견되면 프롬프트를 수정해 즉시 재설계하며, 물리적 설계 문서 작성의 부담을 최소화합니다. ### Cursor와 Flutter를 활용한 고속 구현 - AI 통합 개발 환경인 Cursor를 사용해 Flutter 기반의 모바일 앱 코드를 생성하며, 단일 코드베이스의 이점을 살려 실험 속도를 극대화합니다. - 먼저 5가지 솔루션의 진입점이 포함된 공통 뼈대(Main Screen)를 작성한 뒤, 각 솔루션을 개별 파일로 나누어 점진적으로 구현합니다. - 처음부터 상태 관리 라이브러리(Riverpod)나 데이터베이스(SQLite) 같은 기술 스택을 고민하지 않고, 기능 위주의 화면 데모를 먼저 만든 후 필요에 따라 스택을 추가하는 역순 방식을 취합니다. 이러한 방식은 '완성물이 최고의 디버거'라는 철학을 바탕으로 합니다. 문서 상의 논의에 시간을 쏟기보다 작동하는 앱을 빠르게 만들어 직접 만져보며 수정하는 것이 결과적으로 더 높은 품질의 제품을 더 빨리 만드는 길입니다. AI는 반복적인 재작업 요청에도 지치지 않으므로, 개발자는 이를 활용해 끊임없이 가설을 검증하고 정답에 가까워지는 '반복의 힘'을 믿어야 합니다.

Flutter Riverpod 200% 활용하기 (새 탭에서 열림)

Riverpod은 기존 Provider 라이브러리의 한계를 극복하고 개발자가 더욱 직관적이고 유연하게 상태를 관리할 수 있도록 설계된 Flutter 상태 관리 라이브러리입니다. 서버 데이터 처리 최적화, 자동 생명 주기 관리, 의존성 주입 등 강력한 기능을 기본으로 제공하여 코드의 복잡성을 대폭 낮춰줍니다. 결과적으로 개발 생산성을 높이고, 성능 저하나 디버깅 오류와 같은 상태 관리의 고질적인 문제들을 효과적으로 해결해 줍니다. **서버 데이터 처리 및 상태 관리 최적화** * 서버에서 데이터를 가져올 때 필수적인 로딩, 에러, 데이터 유무 상태를 별도 로직 없이 기본적으로 제공합니다. * API 호출 도중 해당 데이터가 더 이상 필요하지 않게 되면 요청을 자동으로 취소하거나, 데이터의 유효 기간 및 재사용 설정을 손쉽게 관리할 수 있습니다. * '당겨서 새로 고침(pull to refresh)'과 같은 빈번한 UI 패턴을 `ref.refresh` 기능을 통해 간결하게 구현할 수 있어 반복적인 코드 작성을 줄여줍니다. **자유로운 의존성 주입과 자동 생명 주기 관리** * 위젯 계층 구조에 묶이지 않고 어디서든 Provider에 접근할 수 있어, 복잡한 순서나 구조를 신경 쓰지 않고 데이터를 참조할 수 있습니다. * Riverpod이 Provider의 생성과 소멸 시점을 자동으로 관리하므로 메모리 누수 방지와 같은 자원 관리가 용이합니다. * 개발자는 상태를 정의하는 Model과 이를 관리하는 Provider, 데이터를 소비하는 View를 명확히 분리하여 깔끔한 아키텍처를 유지할 수 있습니다. **효율적인 데이터 연동 및 캐시 활용 기법** * **Provider 간 상태 구독:** 필터 조건이 변경되면 이를 구독 중인 목록 Provider가 자동으로 데이터를 새로 불러오도록 설정할 수 있어 수동 리빌드 로직이 필요 없습니다. * **즉각적인 사용자 경험 제공:** 상세 화면 이동 시 목록에서 미리 불러온 데이터를 즉시 노출하고, 동시에 서버에서 추가 정보를 가져오는 방식으로 로딩 지연을 최소화합니다. * **오프라인 데이터 결합:** 로컬 DB 데이터와 서버 데이터를 유연하게 결합하여 네트워크가 불안정한 환경에서도 사용자에게 끊김 없는 인터페이스를 제공할 수 있습니다. * **화면 간 동기화:** 상세 화면에서 수정된 즐겨찾기 상태나 업데이트 내역이 목록 화면에도 즉각 반영되도록 구현하여 앱 전반의 데이터 일관성을 보장합니다. Riverpod은 단순히 상태를 저장하는 도구를 넘어, 비동기 프로그래밍과 의존성 관리를 우아하게 해결해 주는 솔루션입니다. 특히 서버 통신이 많고 화면 간 데이터 동기화가 복잡한 앱을 개발할 때, Riverpod의 선언적인 코드 스타일과 리액티브한 특징을 활용하면 유지 보수성이 뛰어난 코드를 작성할 수 있습니다.

테크 컨퍼런스 Tech-Verse 2025를 개최합니다 (새 탭에서 열림)

LY Corporation은 오는 6월 30일부터 7월 1일까지 양일간 글로벌 테크 컨퍼런스인 'Tech-Verse 2025'를 개최합니다. 이번 행사는 AI와 보안을 메인 테마로 하여 전 세계 그룹사 엔지니어들이 경험한 127개의 기술 세션을 온라인으로 공유할 예정입니다. 누구나 무료 사전 등록을 통해 참여할 수 있으며, 한국어, 영어, 일본어 실시간 통역이 제공되어 글로벌 기술 트렌드를 깊이 있게 파악할 수 있는 기회를 제공합니다. **Tech-Verse 2025 행사 개요 및 참여 방법** * **일정 및 방식**: 2025년 6월 30일(월)부터 7월 1일(화)까지 매일 오전 10시에서 오후 6시 사이에 진행되며, 전 세션 온라인 스트리밍으로 생중계됩니다. * **참여 대상**: 공식 사이트에서 사전 등록만 하면 누구나 무료로 시청할 수 있어 접근성이 높습니다. * **글로벌 협업**: 한국의 LINE Plus를 비롯해 일본, 대만, 베트남 등 LY Corporation 그룹사 전체의 엔지니어, 디자이너, 프로덕트 매니저가 참여하여 폭넓은 기술 생태계를 다룹니다. **12개 분야의 방대한 기술 세션 구성** * **일자별 트랙 구성**: 1일 차에는 AI, 보안, 서버사이드, 프라이빗 클라우드 등 인프라 중심의 세션이 배치되며, 2일 차에는 AI 유즈 케이스, 프론트엔드, 모바일 앱, 디자인 및 제품 관리 등 사용자 접점 기술을 중점적으로 다룹니다. * **다국어 지원**: 총 127개의 세션에 대해 3개 국어(한/영/일) 실시간 통역을 지원하여 언어 장벽 없이 기술적 디테일을 학습할 수 있습니다. * **핵심 테마**: 최근 IT 업계의 화두인 생성형 AI의 실무 적용과 고도화된 보안 전략이 전체 컨퍼런스의 중심축을 이룹니다. **분야별 주목해야 할 주요 기술 사례** * **AI 및 데이터 파이프라인**: 단순한 코드 작성을 넘어 전문적인 AI 코딩 프로세스로의 진화와 생성형 AI를 활용한 데이터 파이프라인 구축 및 분석 자동화 사례가 소개됩니다. * **인프라 및 서버사이드**: 'Central Dogma Control Plane'을 활용해 수천 개의 마이크로서비스를 연결하는 대규모 인프라 관리 기법과 LINE Call의 영상 품질 개선을 위한 서버 기술이 공유됩니다. * **앱 개발 및 사용자 경험**: 배달 서비스 '데마에칸(Demae-can)'의 개발 환경을 React Native에서 Flutter로 전면 교체한 과감한 이행 전략과 데이터 기반의 LINE Talk 사용자 인사이트 도출 과정이 포함되어 있습니다. **참여 권장 및 실용 가이드** 최신 기술 트렌드와 대규모 서비스 운영 노하우를 얻고 싶은 개발자라면 Tech-Verse 2025 공식 사이트를 통해 관심 있는 세션을 미리 타임테이블에 등록해 두는 것이 좋습니다. 특히 현업에서 AI 도입을 고민하거나 대규모 트래픽 처리를 위한 인프라 구조를 연구하는 엔지니어들에게 실질적인 기술적 영감을 줄 것으로 기대됩니다.