iOS 모듈화, 컴포넌트 분리부터 QA 자동화까지
iOS 앱의 모듈화를 위해 공통 UI 컴포넌트를 Component 모듈로 분리하여 피처 모듈 분리의 기반을 마련함
서버 드리븐 환경에서 컴포넌트 가시성 부족 문제를 해결하기 위해 스토리북(Storybook) 형태의 데모앱을 구축함
스냅샷 테스트(Snapshot Test)를 도입하여 컴포넌트 변경 시 QA 범위를 시각적으로 파악하고, CI/CD(CI/CD) 연동을 통해 효율성을 높임
Component 모듈 분리의 필요성
본문에서는 피처 모듈(Feature Module) 분리를 위한 선결 조건으로 공통 UI 컴포넌트의 Component 모듈 분리를 제시한다. 기존 모놀리식(Monolithic) 구조에서 공통 UI 컴포넌트(Common UI Component)들이 여러 피처 모듈에 얽혀 있어, 피처 모듈의 독립적인 분리가 어려웠기 때문이다.
재사용성(Reusability) 증대: Component 모듈을 통해 여러 피처에서 공통 UI 컴포넌트를 재사용하여 코드 중복을 줄이고, 유지보수성을 향상시킴
의존성 관리(Dependency Management) 용이: Core 레이어(Core Layer) 분리를 선행하여 Component 모듈 분리 시 의존성 문제를 최소화
결과적으로, Component 모듈 분리는 iOS 앱 모듈화(iOS App Modularization)의 핵심 단계임을 강조한다.
서버 드리븐 환경에서의 가시성 확보
글에서는 서버 드리븐(Server-Driven) 환경에서 컴포넌트의 가시성 부족 문제를 해결하기 위해 Component 스토리북(Storybook) 형태의 데모앱을 구축한 과정을 설명한다. 서버에서 내려오는 데이터에 따라 UI가 결정되는 구조는 유연성을 제공하지만, 어떤 컴포넌트가 있는지 파악하기 어렵다는 단점이 존재한다.
데모앱(Demo App) 구축: ZComponent 모듈을 import하여 컴포넌트만으로 화면을 구성, 서버 의존성 없이 컴포넌트의 모습을 확인
JSON 기반 Mock 데이터: 각 컴포넌트의 다양한 상태(State)와 옵션(Option) 조합을 JSON 파일로 관리하여 모든 케이스를 빠르게 검증
팀 전체의 컴포넌트 카탈로그(Component Catalog): iOS 개발자, 서버 개발자, 디자이너 모두가 데모앱을 통해 컴포넌트 정보를 공유
이러한 접근을 통해, 서버 드리븐 환경(Server-Driven Environment)의 가시성 문제를 해결하고, 개발 생산성을 향상시켰다.
스냅샷 테스트(Snapshot Test)를 통한 QA 효율 증대
본문은 Component 모듈 변경 시 QA 범위를 시각적으로 파악하기 위해 스냅샷 테스트(Snapshot Test)를 도입한 과정을 설명한다. 컴포넌트 수정 시 다른 컴포넌트에 미치는 영향도를 파악하고, QA 범위를 명확하게 정의하는 것이 목표였다.
uber/ios-snapshot-test-case 라이브러리 활용: PR(Pull Request)에 변경된 UI 스냅샷을 코멘트로 표시하여 시각적인 영향도 분석(Visual Impact Analysis) 지원
CI/CD 연동: CI/CD(Continuous Integration/Continuous Delivery) 파이프라인에 통합하여 자동화된 테스트 환경 구축
PR(Pull Request) 리뷰 효율 증대: PR 작성자와 코드 리뷰어 간의 UI 변경 사항에 대한 빠른 이해(Fast Understanding)를 돕고, QA팀에 변경 사항을 쉽게 전달
결과적으로, 스냅샷 테스트를 통해 QA(Quality Assurance) 프로세스 효율성(Process Efficiency)을 높이고, 개발 생산성을 향상시켰다.
모듈 분리 커밋 전략: 리뷰어 친화적인 코드 관리
글에서는 모듈 분리 과정에서 리뷰어의 이해를 돕고, 코드 리뷰의 효율성을 높이기 위한 커밋 전략을 소개한다. 단순히 파일을 옮기는 과정에서도 수백 줄의 변경 사항이 발생할 수 있으며, 로직 변경까지 섞이면 리뷰어가 중요한 변경을 놓치기 쉽기 때문이다.
의존성 분리 커밋: 모듈 분리 대상과 관련된 의존성 코드를 먼저 분리하여 변경 범위를 최소화(Minimize Change Scope)
파일 이동 커밋: 대상 파일만 모듈로 이동하여 Git의 rename/move를 인식하도록 하고, 리뷰어가 변경 사항을 빠르게 파악
public + import 정리 커밋: public 접근 제어자 추가 및 import 구문을 정리하여 접근 제어자/임포트 정리(Access Control/Import Organization)
로직 변경 커밋: 실제 로직 변경은 별도의 커밋으로 분리하여 리뷰어가 로직 변경에 집중할 수 있도록 지원
이러한 커밋 전략을 통해 리뷰 속도와 품질을 모두 개선하고, 코드 품질(Code Quality) 향상을 달성했다.
