29CM

RSS

게시글: 97
등록: 2026년부터

All Frontend Backend AI DevOps Architecture Etc

Frontend
당신2 9하던 디자인 시스템? 0.5인 리소스로 효율적으로 구축하기
29CM 프론트엔드 플랫폼 팀에서 0.5인 리소스라는 제한된 환경에서 디자인 시스템을 효율적으로 구축하고 관리하는 방법을 공유합니다. 디자인 시스템을 하나의 제품으로 간주하고, 도널드 노먼의 사용자 중심 디자인 원칙을 적용하여 개발자와 사용자 모두에게 가치를 제공하는 것을 목표로 합니다. 초기에는 MVP(Minimum Viable Product) 접근 방식을 통해 빠르게 구축하고 반복적인 개선을 추구하며, TailwindCSS와 ANTD와 같은 라이브러리를 활용하여 생산성을 높이는 실무적인 경험과 인사이트를 제공합니다.
디자인 시스템29CMTailwindCSS
29CM·2025년 1월 15일
Frontend
Mergeable libraries 로 29% 빠르게 앱 실행하기
29CM 모바일팀은 iOS 앱의 Cold Start 시간을 개선하기 위해 성능 측정 및 개선 과제를 진행했습니다. Sentry 도입 결과, 앱 시작 시간이 p50 기준 1.5초, p90 기준 2.3초로 다소 느린 것을 확인하고 개선에 집중하기로 했습니다. 애플 개발자 문서에서 Dynamic libraries와 Static libraries의 차이점을 확인했으며, 특히 Debug 빌드 환경에서 Dynamic libraries가 빌드 시간을 단축하고 Release 빌드 환경에서는 Static libraries와 유사한 앱 시작 시간을 제공한다는 점에 주목했습니다. 29CM iOS 프로젝트는 Tuist의 Modular Architecture를 적용하고 있으며, 80개 이상의 모듈이 Dynamic library로 구성되어 있습니다. Mergeable libraries 도입을 통해 앱 시작 시간을 크게 개선할 수 있을 것이라는 확신을 얻었습니다. Static library는 빌드 시 앱 실행 파일에 병합되어 빌드 시간과 파일 크기가 커지는 반면, Dynamic library는 앱 실행 파일 크기를 줄이고 앱 시작 시 동적 링커에 의해 연결됩니다.
앱 실행 시간Cold Start성능 개선
29CM·2025년 1월 7일
Frontend
잘 쓰이는 디자인 시스템을 위한 여정
29CM의 프론트엔드 개발팀은 MFA(Micro Frontend Architecture) 구조에서 발생하는 UI 파편화 문제를 해결하기 위해 디자인 시스템 'Ruler'를 개발했습니다. 여러 목적 조직이 독립적으로 제품을 개발하는 환경에서 UI 일관성을 유지하고 개발 생산성을 높이는 것이 목표였습니다. 디자인 시스템 도입 전, 29CM 앱에서는 버튼 등 UI 요소들이 사용자에게 다양한 형태로 노출되어 혼란을 야기하고, 내부적으로는 의사소통 및 개발 비용 증가로 생산성 저하를 초래하는 문제가 있었습니다. 이러한 문제를 해결하고자 Ruler 디자인 시스템을 통해 일관된 UI 경험을 제공하고 개발 효율성을 증대시키고자 합니다.
디자인 시스템UI 파편화MFA
29CM·2024년 6월 10일
Frontend
iOS와 Android 간 UI 자동화 실행 속도 차이 해결하기 (부제 : ActionChains로 iOS 테스트 자동화 속도에 로켓 달아주기)
이 글은 29CM QA팀에서 iOS와 Android 간 UI 자동화 실행 속도 차이 문제를 해결하기 위한 과정을 다룹니다. 동일 시나리오의 자동화 스크립트 실행 시 iOS가 Android보다 최대 2배 느린 현상을 발견하고, QA팀의 자동화 원칙(BVT 수행 시간 20분 이내) 준수를 위해 원인 분석 및 최적화 방안을 모색합니다. iOS가 느린 주요 원인으로 element 클릭 후 화면 전환 시간, 자동 롤링 영역으로 인한 element 탐색 시간 지연, webview에서 native 전환 후 element 탐색 시간 등을 파악했습니다. 특히 ActionChains를 활용하여 iOS 테스트 자동화 속도를 개선하는 데 초점을 맞추고 있습니다.
iOSAndroidUI 자동화
29CM·2024년 2월 13일
Frontend
Jetpack Compose 로 검색 진입 화면의 복잡한 상태 관리하기
이 글은 Android 개발에서 Jetpack Compose를 활용하여 복잡한 검색 진입 화면의 상태 관리를 개선한 사례를 소개합니다. 기존 XML 기반의 명령형 프로그래밍 방식은 복잡한 화면에서 상태 관리의 어려움과 코드 복잡성을 야기했지만, Jetpack Compose는 선언형 UI 툴킷으로서 코드 감소, 직관적인 UI 업데이트, 빠른 개발 속도, 강력한 성능 등의 장점을 제공합니다. 글에서는 Jetpack Compose를 통해 기존의 복잡했던 코드를 간결하고 직관적인 코드로 변경하여 실험을 가속화한 경험을 공유하며, Android UI 개발의 효율성을 높이는 방법을 제시합니다.
Jetpack ComposeAndroidUI
29CM·2023년 12월 1일
Frontend
6년 묵은 레거시, RootController 리팩토링하기
29CM iOS 팀에서 6년 이상 된 레거시 클래스인 RootController를 리팩토링한 경험을 공유하는 글입니다. RootController는 앱의 UI 구조 최하단에서 네비게이션 로직을 담당하며, 1000줄이 넘는 코드와 다양한 화면 전환, 딥링크, 유니버셜 링크 등 복잡한 의존성을 가지고 있었습니다. 비즈니스 임팩트가 낮아 우선순위에서 밀려났지만, 팀은 점진적인 개선을 통해 안정적인 서비스를 구축하려는 노력을 기울였습니다. 이 글은 이러한 레거시 코드의 문제점과 이를 해결해 나가는 과정을 상세히 설명하며, 팀의 기술 부채 해소 과정을 보여줍니다.
레거시 코드리팩토링iOS
29CM·2023년 11월 16일
Frontend
새로운 메인 화면엔 iOS 팀의 거의 모든 것이 들어있다
29CM iOS 팀은 서비스 초창기부터 유지되어 온 메인 화면을 전면 개편했습니다. 기존 메인 화면은 배너가 카테고리별로 분류되지 않아 운영 및 개인화된 콘텐츠 제공에 어려움이 있었습니다. 이번 개편을 통해 배너를 카테고리 하위 컴포넌트로 재설계하여, 하루 평균 약 24개의 다양한 배너 콘텐츠를 제공함으로써 패션 플랫폼에서 라이프스타일 플랫폼으로의 확장을 꾀했습니다. 새로운 메인 화면은 전체 컴포넌트를 관리하는 상위 ViewController와 피드를 표시하는 하위 ViewController로 구성되며, 사용자가 선택한 탭 정보가 하위 ViewController의 Reactor로 전달되는 구조를 채택했습니다. 이는 iOS 앱의 UI/UX 개선 및 운영 효율성 증대에 기여했습니다.
iOS메인 화면개편
29CM·2023년 10월 11일
Frontend
탐색의 시작점, 카테고리
본 글은 29CM의 프로덕트 디자이너가 고객의 정보 탐색 경험 개선을 위해 진행한 '카테고리' 기능 실험에 대한 내용을 다룹니다. 기존 카테고리 페이지는 대 카테고리만 제공하여 고객이 원하는 중, 소 카테고리 상품에 도달하기까지 여러 단계를 거쳐야 하는 불편함이 있었습니다. 또한, 비즈니스 니즈에 맞춰 카테고리를 유연하게 확장하기 어려운 구조적 문제도 존재했습니다. 이러한 문제점을 해결하기 위해 디자이너는 고객 여정을 분석하고, UI/UX 개선을 통해 사용자가 원하는 상품을 더 쉽고 빠르게 찾을 수 있도록 하는 방안을 탐구했습니다. 실험 결과, 개선된 카테고리 구조는 고객의 탐색 효율성을 높이고 비즈니스 유연성을 확보하는 데 기여할 것으로 기대됩니다.
카테고리UI 디자인UX
29CM·2023년 8월 17일
Frontend
EventDispatcher 는 Android 의 View 와 Event 를 어떻게 분리하였을까?
29CM Android 팀은 서비스 개발 시 발생하는 다양한 종류의 이벤트(Visit, View, Impression, Click 등)를 효율적으로 관리하기 위해 EventDispatcher라는 개념을 도입했습니다. 기존에는 Activity, Fragment에서 직접 이벤트를 처리하여 View가 비대해지고, 이벤트 관련 로직이 비즈니스 로직과 혼재되며, 이벤트 타입이 파편화되는 문제점이 있었습니다. EventDispatcher 도입을 통해 이벤트 흐름을 일관되게 유지하고 View와 ViewModel의 결합도를 낮추어 코드의 복잡성을 줄이고 개발 생산성을 향상시키는 것을 목표로 합니다. 이 글은 이러한 문제점을 해결하기 위한 EventDispatcher의 도입 과정과 그 효과를 소개합니다.
AndroidEventDispatcherMVVM
29CM·2023년 7월 25일
Frontend
중요한 건 꺾이지 않는 API (feat. Next.js API Routes)
29CM 프론트엔드 개발자가 Next.js API Routes를 활용하여 콘텐츠 큐레이션 API를 개발한 경험을 공유하는 글입니다. 백엔드 리소스 없이 프론트엔드 개발만으로 MVP(Minimum Viable Product)를 빠르게 개발하고 검증하는 것을 목표로 했습니다. API Routes 기능을 통해 하나의 프로젝트 내에서 API 개발을 진행했으며, 특정 카테고리 기반의 콘텐츠 정보를 반환하는 API를 구축했습니다. 이 경험은 린하게 결과물을 만들고 빠르게 실행하는 조직 문화와 맞닿아 있습니다.
Next.jsAPI RoutesFrontend
29CM·2023년 2월 10일
Frontend
Tuist 로 가는 여정 Part 1 — XcodeGen 에서 Tuist 로 전환하기
29CM iOS 팀은 서비스 성장과 팀원 증가에 따라 프로젝트 관리 도구를 XcodeGen에서 Tuist로 전환하는 과정을 공유합니다. 기존 XcodeGen은 Git Conflict와 멀티 타겟 관리에 효율적이었지만, yml 스크립트 작성의 번거로움, 멀티 프로젝트 관리의 어려움, 의존성 캐싱 관리의 아쉬움이 있었습니다. 특히 iOS 개발 시 빈번하게 발생하는 .pbxproj의 reference 변경 및 UUID 충돌로 인한 Git Conflict 문제를 해결하고자 했습니다. 본 글에서는 이러한 고민과 이슈를 어떻게 해소했는지 소개하며, Tuist로의 전환 여정을 Part 1으로 다룹니다. Part 2에서는 Tuist에서 오픈소스 라이브러리 관리하는 방법을 다룰 예정입니다.
TuistXcodeGeniOS
29CM·2022년 12월 5일
Frontend
카테고리 자동완성 개발기
29CM 팀에서 검색 자동완성 기능에 카테고리 바로가기를 추가하여 상품 상세 페이지(PDP) 진입 수를 늘리고자 하는 가설을 검증하기 위한 개발 과정을 공유합니다. 이 글은 기능의 목표와 비목표를 명확히 구분하고, 세 가지 옵션을 도출하는 과정에서 요구사항을 구체화하는 방법에 대해 설명합니다. 각 옵션별 장단점과 변경 영향 범위 분석을 통해 최적의 솔루션을 찾아가는 과정을 담고 있으며, 이는 사용자 경험 개선과 비즈니스 목표 달성에 기여할 수 있는 실질적인 개발 사례를 제시합니다.
카테고리 자동완성검색UI
29CM·2022년 10월 28일
Frontend
상품 상세 React전환기
29CM의 상품 상세 페이지를 Angular에서 React로 전환한 경험을 공유하는 글입니다. Angular 개발자 채용의 어려움, 느린 배포 속도, Docker 환경의 비효율성, 에러 로깅 부재로 인한 디버깅 어려움, 관리되지 않는 레거시 코드 등 기존 시스템의 문제점을 해결하기 위해 React 전환을 결정했습니다. 또한, 백엔드 팀의 MSA 전환 추세에 맞춰 장기적으로 Micro Frontend 아키텍처를 지향하며 전환을 진행했습니다. 이 글은 전환 결정 배경, 과정에서의 어려움, 그리고 해결 방안에 대한 내용을 담고 있습니다.
ReactAngularFrontend
29CM·2022년 9월 26일
Frontend
당신2 9하던 Storybook
이 글은 프론트엔드 팀에서 UI 컴포넌트 개발 및 관리를 위해 Storybook을 도입하고 활용하는 경험을 공유합니다. Storybook은 비즈니스 로직과 분리된 UI 컴포넌트를 독립적으로 개발하고 시각적으로 테스트할 수 있게 해주는 도구입니다. 29CM 프론트엔드 팀은 Angular에서 React로 전환하는 과정에서 발생한 중복 컴포넌트 생성, 컴포넌트 동작 확인 시간 소요, UI 테스트의 비효율성 등의 문제를 해결하기 위해 Storybook을 도입했습니다. 컴포넌트와 스토리를 1:1로 매칭하고, 작은 컴포넌트부터 페이지까지 스토리로 관리하며, VSCode의 코드 조각 기능을 활용하여 스토리 작성을 간소화하는 등 구체적인 활용 방안을 소개합니다. 이를 통해 개발 속도를 높이고 컴포넌트의 효율성과 재사용성을 증대시키는 것을 목표로 합니다.
StorybookUI 컴포넌트React
29CM·2022년 9월 20일