배달의민족 Flutter 도입과 아키텍처 설계 교훈

배달의민족은 주문접수 채널에서 Flutter를 도입하여 멀티 플랫폼 대응력을 높이고, Clean Architecture를 통해 효율적인 코드 관리를 실현했습니다. 이 글에서는 Flutter 도입과 아키텍처 설계의 과정에서 얻은 교훈을 바탕으로, 변화하는 비즈니스 요구에 맞추기 위한 혁신적인 접근을 소개합니다. 또한, 이러한 경험이 다른 기업이나 개발자에게도 유용한 전략이 될 수 있도록 공유하고자 합니다. Flutter 도입으로 인한 혁신적인 변화 배달의민족은 Flutter 도입을 통해 플랫폼 전환과 유지보수 측면에서 큰 혁신을 이루었습니다. 기존의 Windows, Android, iOS 플랫폼에 추가하여 macOS와 다양한 Android 디바이스로까지 확장할 필요성을 느꼈습니다. Flutter의 도움으로 단일 코드베이스에 의해 멀티 플랫폼을 동시에 지원할 수 있게 되었고, 이를 통해 개발자 수를 줄이고 생산성을 향상시킬 수 있었습니다. 개발자들은 각 플랫폼에 대해 반복적으로 구현할 필요가 없어졌고, 버그 수정이나 기능 변경 시에도 이전에 비해 적은 시간에 모든 플랫폼에 적용할 수 있게 되었습니다. Flutter의 도입은 크로스 플랫폼 반응형 UI 구현을 가능하게 하여, 사용자 경험의 일관성을 높였습니다. 이제 파트너들은 다양한 OS 환경에서 동일한 경험을 하게 되므로, 학습 비용도 줄어들고, 혼란이 줄어드는 장점을 경험하고 있습니다. 이러한 변화는 단순히 기술적인 접근방식이 아닌, 사업의 방향성을 전환하는 계기로 작용했습니다. 파트너사들이 원하는 효율적인 주문 관리 시스템을 제공하기 위해, 기존의 네이티브 아키텍처에서 벗어나 새로운 기술 스택으로 과감히 옮겨갔습니다. Firebase와 같은 클라우드 서비스를 활용하여 실시간 데이터 업데이트와 동기화가 가능하게 되었고, Flutter의 강점을 극대화하여 사용자 친화적인 UI/UX도 구현됐습니다. 이로 인해 즉각적인 피드백을 수렴할 수 있는 구조가 마련됐습니다. 결국 Flutter의 도입은 배달의...

프런트엔드 독립 배포로 변화한 서비스 구조

우리 팀의 프런트엔드 개발 환경은 과거의 방식에서 벗어나 독립적인 배포 체계로 전환하는 과정을 거쳤습니다. 이 과정에서 index.html 파일을 프런트엔드 리포지터리로 이관하며 팀 내에서 발생했던 여러 문제를 해결하게 되었습니다. 이제는 프런트엔드 개발자들이 자율적으로 배포할 수 있는 환경이 조성되어, 효율성은 물론 역할 분담의 명확성까지 확보할 수 있었습니다.

프런트엔드 독립 배포의 의미

프런트엔드 독립 배포는 단순히 프런트엔드 리포지터리의 자율성을 강화하는 데 그치지 않습니다. 과거에는 백엔드 리포지터리에서 index.html 파일을 관리하면서 프런트엔드 개발자들이 HTML 파일의 수정이나 배포에 큰 제약을 받았습니다. 이는 서비스의 민첩성을 저하시켰고, 결국 성능 최적화 작업 또한 버겁게 만들었습니다. 독립 배포 체계 구축을 통해 프런트엔드 개발자들은 직접 HTML 파일을 수정하고 즉시 배포할 수 있게 되어, 신속하게 변화하는 사용자 요구에 대응할 수 있는 능력을 갖추게 되었습니다. 이러한 변화는 프런트엔드 리포지터리에 대한 책임을 명확히 하는 계기를 만들었습니다. 이제 프런트엔드 개발자들은 index.html 파일뿐만 아니라 모든 정적 리소스의 관리와 배포를 전적으로 담당하게 되었습니다. 이는 팀 내의 커뮤니케이션 비용을 줄이고, 문제가 발생했을 때 보다 빠른 원인 파악과 해결 방안을 제시할 수 있는 역량을 키우게 됩니다. 결과적으로 프런트엔드 독립 배포는 팀 전체의 업무 효율성을 크게 향상시켰습니다.

정적 리소스 관리의 체계적 변화

index.html 파일을 포함한 정적 리소스의 관리는 이전까지 백엔드와 프런트엔드 간의 경계가 불명확했습니다. 백엔드 리포지터리에서 모든 정적 자원을 관리하다보니, 프런트엔드 개발자는 자주 전화 연락이나 이메일을 통해 수정보다 불편을 느끼는 경우가 많았습니다. 하지만 프런트엔드 독립 배포가 자리잡으면서 이러한 문제는 해결되었습니다. 이제는 프런트엔드 팀이 직접 정적 리소스를 관리함으로써, HTML 수정 및 장애 대처가 신속하게 이루어질 수 있습니다. 이를 통해 서비스의 가용성과 성능을 극대화할 수 있게 되었습니다. 또한, 프런트엔드 개발자들은 새로운 기능을 추가하거나 수정할 때 즉각적으로 Changeset을 반영하여 불필요한 지연 없이 보다 동기화된 개발 환경을 유지할 수 있기 때문에 개발 주기가 단축되고, 결과적으로 사용자 경험이 개선되었습니다. 이번 변화는 또한 전반적인 코딩 구조의 단순화를 가져왔으며, 개발자들은 실제 비즈니스 요구에 따라 더욱 집중할 수 있는 환경을 마련하게 되었습니다. 프런트엔드 독립 배포를 통해 팀 내의 협업이 원활해지고, 각자의 전문성 또한 높아지는 선순환이 형성되었습니다.

서비스 구조 전환의 성과와 미래 방향

프런트엔드 독립 배포 구현은 다양한 긍정적인 성과를 창출했습니다. 로딩 시간과 성능이 눈에 띄게 개선되고, Lighthouse Performance 점수 또한 향상되었습니다. 내부 어드민의 로딩 시간은 72% 감소하였고, 외부 어드민의 경우에는 77%까지 감소하였습니다. 이러한 정량적 효과는 사용자 만족도를 높이고, 서비스를 사용하는 데 있어 쾌적함을 제공할 뿐만 아니라 결국 회사의 전반적인 비즈니스 성과에 기여하는 중요한 요소로 작용합니다. 향후 프런트엔드 독립 배포로 확보한 기반을 활용하여, 더 많은 기능을 개발하고 안정성을 높이는 방향으로 나아갈 계획입니다. 사용자 피드백을 수집하여 지속적인 개선 작업을 진행하고, 서비스의 품질을 한층 더 끌어올릴 것입니다. 사용자 요구에 대한 신속하고 효율적인 대응이 가능하여 서비스 향상을 위한 기반이 마련되었습니다. 프런트엔드 독립 배포는 팀워크와 신뢰를 더욱 강화하고, 개발자들이 자신의 전문성을 바탕으로 업무를 수행할 수 있게 함으로써 성공적인 서비스 제공을 목표로 하고 있습니다. 다음 단계에서는 이러한 노력들을 바탕으로 새로운 기능 개발과 서비스 확장을 모색할 예정입니다. 또한 정적 리소스의 관리와 유지 보수에 있어 더 나은 시스템과 도구를 제공하여 업무 효율성을 극대화할 것입니다.

이 블로그의 인기 게시물

우아한형제들의 실시간 알림 혁신: SSE(Server-Sent Events)로 이룬 효율성과 안정성

이미지
운영 효율성의 혁신 기존의 MQTT 기반 실시간 알림 시스템은 빠르지만, 운영의 복잡성과 네트워크 제약이 존재했습니다. MQTT는 별도의 포트를 필요로 하기 때문에 방화벽 이슈가 잦았고, 각 클라이언트별 Polling 로직은 서버 트래픽을 불필요하게 증가시켰습니다. 이러한 문제는 인프라 비용 증가로 직결되었습니다. 우아한형제들은 이 문제를 해결하기 위해 Server-Sent Events(SSE)를 도입했습니다. SSE는 HTTP 표준 포트를 이용해 통신하므로 방화벽 문제를 근본적으로 해결했습니다. 또한 Polling 구조가 제거되면서 네트워크 요청 횟수가 급감하고, 서버 처리 부하 역시 현저히 감소했습니다. 결과적으로 서버 대수가 줄고, 일평균 약 4천만 건 이상의 이벤트를 안정적으로 처리할 수 있게 되었습니다. 개인적인 견해로는, 단순한 기술 교체를 넘어 “운영 효율성”이라는 비즈니스 가치로 확장된 사례라 평가할 수 있습니다. 개발 효율이 인프라 절감과 사용자 만족을 동시에 이끈 대표적인 케이스입니다. 안정적인 메시지 전달 체계 구축 SSE의 도입은 단순한 비용 절감이 아니라, 메시지의 신뢰성과 안정성을 강화한 기술적 진화이기도 합니다. SSE는 서버에서 클라이언트로 단방향 실시간 스트림을 유지하여, 연결 상태가 유지되는 한 발생하는 모든 이벤트를 즉시 전달할 수 있습니다. 특히 우아한형제들은 Last-Event-ID 기능을 적극 활용했습니다. 이 기능은 클라이언트가 잠시 연결이 끊겼다가 재접속하더라도, 마지막으로 받은 이벤트 이후의 메시지를 재전송받을 수 있도록 합니다. 덕분에 프린트 명령 등과 같은 중요한 이벤트가 유실되는 일이 사라졌습니다. 모든 메시지는 Kafka와 같은 고성능 메시지 브로커를 통해 순서가 보장된 상...
자세한 내용 보기

우아한 디버깅 툴 개선으로 QA 업무 효율화

이미지
세션 리플레이로 이슈 재현 시간 단축 QA 업무의 핵심은 “문제를 얼마나 정확하게 재현하느냐”입니다. 과거에는 문제가 발생한 상황을 영상으로 녹화하고, 동일한 조건을 맞추는 데 많은 시간이 소요됐습니다. 그러나 **세션 리플레이** 기능이 도입되면서 상황이 완전히 달라졌습니다. DOM 스냅샷, 사용자 클릭, 입력 이벤트 등 모든 상호작용이 자동 기록되어 마치 영상을 돌려보듯 확인이 가능합니다. 이제 QA 담당자는 반복적인 수동 재현 작업에서 벗어나 보다 분석 중심의 업무에 집중할 수 있게 되었죠. 저는 특히 이 기능이 단순한 자동화 이상의 의미를 가진다고 생각합니다. 문제를 ‘정확히’ 보여줄 수 있다는 점에서, 개발자와 QA 간의 오해를 줄이고 문제 해결의 속도를 높여줍니다. 이처럼 시각적 정보 기반의 재현 방식은 QA 효율을 끌어올리는 중요한 도약점이 되었습니다. 슬랙 DM 알림으로 신속한 정보 전달 QA 업무의 또 다른 어려움은 정보를 제때 전달하는 문제였습니다. 이슈 발생 후 기록방 링크를 수동으로 공유하고, 개발자가 확인하기까지 지연이 발생하는 경우가 많았습니다. 이 불편을 해소하기 위해 **슬랙 DM 자동 알림** 기능이 도입되었습니다. 테스트 디바이스 정보를 입력하면 자동으로 관련 기록방 링크와 로그 정보가 개발자에게 전달됩니다. 덕분에 QA는 더 이상 “공유 늦음”이나 “링크 누락” 문제로 시간을 낭비하지 않게 되었습니다. 물론 구현 과정은 간단하지 않았습니다. 사용자별로 계정과 디바이스가 달라 연결 구조를 만드는 것이 까다로웠기 때문입니다. 이를 해결하기 위해 구글 시트를 연동하여 Slack ID와 디바이스를 매칭하는 방식을 적용했습니다. 이 결과, 알림 전송 속도와 정확성이 개선되었고 QA-개발 간 커뮤니케이션이 실시간으로 이어졌습니다. 개인적으로 이런 자동화 기능은 “툴이 사람의 시간을 되돌려주는” 대표 사례라 생각합니다. 티켓 생성 기능으...
자세한 내용 보기

물어보새의 진화와 지식 공유 확장

이미지
1. 물어보새의 지속적인 진화 ‘물어보새’의 시작점은 구성원이 데이터에 쉽게 접근하고, 이를 통해 업무 효율성을 높이는 것이었습니다. 초기 모델은 단순한 데이터 조회 중심의 기능을 제공했지만, 시간이 지남에 따라 사용자 요구에 맞춰 고도화되었습니다. 이제는 질문의 맥락과 의도를 파악해, 다양한 부서의 실제 업무 흐름에 맞춘 답변을 제시할 수 있게 되었습니다. 발전 과정은 크게 네 가지 축으로 이루어졌습니다. 첫째, 지식의 확장 입니다. 단일 데이터베이스 중심에서 벗어나, 사내 Wiki·Confluence·Jira 등 다양한 비정형 정보원을 통합하여 한 번의 질문으로 여러 지식 자원에서 답변을 도출할 수 있습니다. 이를 통해 구성원은 더 이상 여러 플랫폼을 이동하지 않고도 필요한 정보를 한 곳에서 즉시 확인할 수 있습니다. 둘째, 기억 기능의 도입 입니다. 과거의 대화 이력을 기반으로 질문의 맥락을 이해하고, 연속된 대화처럼 응답하는 시스템이 구축되었습니다. 사용자는 이전 대화의 내용을 기억한 상태에서 후속 질문을 이어갈 수 있으며, ‘물어보새’는 질문이 많아질수록 더 정교하게 학습된 응답을 제공합니다. 이러한 ‘기억 기반 대화 구조’는 사용자 경험을 한층 풍부하게 만들어줍니다. 셋째, 맥락 분석 강화 입니다. 단순 키워드 매칭이 아닌 의미 기반 검색(Semantic Search)을 적용하여, 사용자의 질문 의도에 따라 적합한 데이터 세트를 자동으로 선택합니다. 이로써 데이터 분석 결과가 더 구체적이고 실무에 적용 가능한 형태로 제공됩니다. 마지막으로, 자기 학습 시스템(Self-learning) 이 도입되었습니다. 구성원의 질문 패턴과 피드백 데이터를 활용해, 시스템이 스스로 정확도를 향상시키며 더 자연스러운 응답을 제공합니다. 이를 통해 ‘물어보새’는 시간이 지날수록 조직...
자세한 내용 보기