올리브영 iOS 앱 개발자모드 구축 경험

개발자모드 도입 배경 및 설계

매일 매일 들어오는 디버깅 요청: 개발자모드의 등장

• 하이브리드 앱 환경에서 FE와 iOS 간 **WKScriptMessage (JS Interface)**를 통한 데이터 송수신 과정에서 디버깅의 비효율성 발생.
• Xcode 및 Safari 웹 인스펙터를 이용한 양방향 디버깅은 상당한 시간과 노력을 요구.
• 개발자 및 FE 개발자의 생산성 향상을 위해 개발자모드 도입 결정.

SwiftUI를 활용한 개발자모드 구현

• 하이브리드 앱 구조에 특화된 커스텀 기능을 위해 외부 라이브러리 대신 직접 구축.
• SwiftUI의 선언형 UI와 높은 생산성을 활용하여 빠른 UI 구현 및 유연한 변경 가능성 확보.
• 개발자모드의 기획 → 개발 → 배포 사이클을 단축하고 필요한 기능을 신속하게 제공.

개발자모드의 핵심 기능 상세

개발자모드 플로팅 버튼

• 앱과 별도의 UIWindow에 배치하여 모든 화면 위에 항상 노출되는 플로팅 버튼 구현.
• 앱 버전, iOS 버전, 현재 서버 등 주요 정보를 버튼에 표시하여 이슈 추적 속도 향상.

WebView Debugger 기능

• URL Editor, 웹 로그 탐색기, 웹 스토리지 뷰어, Javascript Console, 스택 스크린 로그 등을 통해 웹뷰 디버깅 지원.
• WKScriptMessage 및 Javascript 실행 로그 확인을 통해 FE 및 앱 개발자의 디버깅 효율 증대.

로컬 플래그 스위치를 통한 기능 제어

• 기능 플래그 기반의 안정적인 기능 배포 및 롤백 전략 지원.
• 개발/QA 환경에서 서버의 기능 플래그 값을 직접 변경하는 비효율과 리스크 해소.
• OYFlag 모듈, FlagProvider 프로토콜, **OYContainer (DI 컨테이너)**를 활용하여 추상화된 플래그 관리 시스템 구현.
• 운영 환경과 개발 환경의 FlagProvider를 분리하여 안전성을 확보하고, OCP를 준수하여 향후 A/B 테스트 확장에 용이하게 설계.

성과 및 주니어 개발자의 성장

생산성 향상 및 디버깅 요청 0건 달성

• 웹뷰 관련 단순 디버깅 요청 0건으로 감소.
• 기능 플래그 관련 서버 값 변경 작업 완전히 제거.
• FE 개발자와 QA 엔지니어가 직접 앱 내에서 디버깅 및 테스트를 수행하여 불필요한 커뮤니케이션 비용 절감.

주니어 개발자로서의 성장 경험

• 올리브영 앱의 하이브리드 아키텍처와 도메인 지식을 빠르게 습득.
• SwiftUI의 높은 생산성 덕분에 UI 개발 시간을 절약하고, FlagProvidable 프로토콜 설계와 같은 근본적인 기술적 고민에 집중.
• 추상화, 모듈화, 디자인 패턴의 실질적인 적용을 경험하며 문제 해결 능력 및 엔지니어링 역량 강화.