크몽

RSS

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

All Frontend Backend AI DevOps Architecture Etc

DevOps
kmong Android 앱에 백신 투여하기
이 글은 kmong Android 앱의 안정성을 높이기 위한 방법을 설명합니다. 앱의 비정상 종료 발생률을 줄이는 것을 목표로 하며, 이를 위해 '개발', '도구', '문화'라는 세 가지 측면에서 '백신'을 투여하는 전략을 제시합니다. 개발 측면에서는 Firebase Crashlytics를 활용하여 오류 보고 솔루션을 구축하고, userId, customKey, log, recordException 등의 기능을 통해 오류 발생 시 상세한 정보를 수집하는 방법을 소개합니다. 또한, 테스트의 중요성을 강조하며 안정성 확보를 위한 구체적인 방안들을 다룹니다. 궁극적으로 사용자 만족도를 높이고 앱 이탈을 방지하기 위한 안정성 강화 방안을 공유합니다.
Android 앱안정성비정상 종료
크몽·2021년 4월 23일
DevOps
kmong Android 앱에 백신 투여하기
이 글은 kmong Android 앱의 안정성을 높이기 위한 방법을 설명합니다. 앱의 비정상 종료 발생률을 줄이는 것이 핵심 목표이며, 이를 위해 '개발', '도구', '문화'라는 세 가지 측면에서 '백신'을 투여하는 방식을 제안합니다. 개발 측면에서는 Firebase Crashlytics를 활용하여 오류 보고를 상세하게 기록하고 분석하는 방법을 소개합니다. `setUserId()`, `setCustomKey()`, `log()`, `recordException()` 등의 기능을 통해 사용자별 오류 추적, 추가 정보 기록, 오류 직접 기록 등을 수행하여 문제 해결에 도움을 줍니다. 또한, 테스트의 중요성을 강조하며 안정성 확보를 위한 노력을 다룹니다. 전반적으로 앱의 사용자 만족도와 이탈률에 직접적인 영향을 미치는 안정성 확보를 위한 실질적인 방안을 제시합니다.
Android앱 안정성Crashlytics
크몽·2021년 4월 23일
DevOps
크몽 모바일 데브옵스
크몽 안드로이드 개발자가 입사 후 1년 3개월 동안 경험한 모바일 데브옵스 환경의 변화와 개선 과정을 소개하는 글입니다. 데브옵스를 '사용자, 개발자, 관리자 모두 서비스를 편하게 사용할 수 있도록 돕는 도구'로 정의하며, 개발자가 개발에 몰두하고 사용자는 앱을 편하게 쓰며, 관리자는 효율적인 커뮤니케이션을 할 수 있는 환경 구축의 중요성을 강조합니다. 글에서는 입사 당시의 모바일 데브옵스 환경을 간략히 보여주고, 이후 크몽 모바일 개발자들이 고민과 시도를 통해 '계획 > 개발 > 테스트 > 배포 > 운영'의 5단계 사이클을 도는 크몽만의 데브옵스 프로세스를 구축해 나가는 과정을 설명합니다. 이는 좋은 개발 문화와 효율적인 서비스 운영을 위한 노력의 일환임을 시사합니다.
모바일 데브옵스크몽안드로이드
크몽·2021년 2월 4일
DevOps
크몽 모바일 데브옵스
크몽 안드로이드 개발자가 입사 후 1년 3개월 동안 경험한 모바일 데브옵스 개선 과정을 소개하는 글입니다. 데브옵스를 '사용자, 개발자, 관리자 모두 서비스를 편하게 사용할 수 있도록 돕는 도구'로 정의하며, 개발자가 개발에 몰두하고 사용자는 앱을 편하게 쓰며 관리자는 효율적인 커뮤니케이션을 할 수 있는 환경 구축의 중요성을 강조합니다. 입사 당시의 낙후된 모바일 데브옵스 환경에서 벗어나, 계획-개발-테스트-배포-운영의 5단계 사이클을 중심으로 문화와 도구를 활용하여 개선된 크몽만의 데브옵스 프로세스를 구축해 나가는 과정을 설명합니다. 이는 더 나은 개발 문화와 서비스 제공을 위한 지속적인 노력의 일환임을 보여줍니다.
모바일 데브옵스크몽안드로이드
크몽·2021년 2월 4일
Frontend
RecyclerView In Kmong MVP
크몽 안드로이드 개발자가 MVP 패턴을 RecyclerView에 적용한 경험을 공유하는 글입니다. MVP 패턴은 Model, View, Presenter로 구성되며, 각 컴포넌트가 명확한 역할을 수행하고 서로 직접 연결되지 않는 원칙을 따릅니다. View는 Activity, Fragment 등을 포함하며 IView 인터페이스를 통해 Presenter에게 상태를 알립니다. Presenter는 View의 상태를 관리하고 Model에게 데이터를 요청하며 비즈니스 로직을 담당합니다. Repository는 Local 및 Server 데이터를 관리하며 Presenter에게 필요한 데이터를 전달합니다. RecyclerView는 View 재활용 및 성능 관리의 핵심 역할을 하므로, MVP 패턴을 적용하여 데이터 관리와 View 로직을 분리하는 것이 효과적임을 설명합니다.
RecyclerViewMVPAndroid
크몽·2021년 2월 4일
Frontend
RecyclerView In Kmong MVP
크몽 안드로이드 개발자가 MVP 패턴을 적용한 RecyclerView 구현 경험을 공유하는 글입니다. MVP 패턴은 Model, View, Presenter로 구성되며, 각 컴포넌트가 명확한 역할을 수행하고 서로 직접적인 의존성을 가지지 않는 것이 중요합니다. 글에서는 View 역할을 하는 Activity/Fragment, 핵심 로직을 담당하는 Presenter, 데이터 관리를 하는 Repository의 역할을 설명하고, 특히 RecyclerView와 같이 앱의 핵심적인 View 컴포넌트에 MVP 패턴을 어떻게 적용할 수 있는지에 대해 다룹니다. 개발자는 RecyclerView에 데이터를 잘 연결하는 데 집중하면, RecyclerView가 메모리 및 성능 관리를 알아서 처리한다는 점을 강조하며, 크몽 앱의 다양한 화면에 적용된 RecyclerView 활용 사례를 소개합니다.
RecyclerViewMVP 패턴Android
크몽·2021년 2월 4일
Backend
리팩토링! 어머 들었어? 우리 동네(코드) 재개발 들어간대!!
본 글은 크몽 안드로이드 개발자가 경험한 인박스 페이지의 리팩토링 과정을 공유합니다. 리팩토링은 노후화된 코드를 튼튼하고 안전하게 새롭게 바꾸고 침체된 상태를 활성화하는 활동으로, 특히 페이지 구조 변경에 초점을 맞춥니다. 리팩토링 대상은 높은 커플링으로 수정이 어렵고, 기존 구조와 달라 파악이 힘든 코드였으며, UI 및 기능 변경 예정이 있어 진행되었습니다. 글에서는 리팩토링 과정을 설명하고 관련 Q&A를 제공하여, 페이지 구조 변경 리팩토링에 대한 감을 잡는 데 도움을 주는 것을 목표로 합니다. 리팩토링의 개념이나 이론보다는 실제 경험 기반의 접근 방식을 다룹니다.
리팩토링코드 재개발안드로이드
크몽·2021년 2월 4일
Backend
리팩토링! 어머 들었어? 우리 동네(코드) 재개발 들어간대!!
크몽 안드로이드 개발자가 코드 재개발, 즉 리팩토링 경험을 공유하는 글입니다. 특히 페이지 구조를 변경하는 리팩토링을 어떻게 시작하고 진행할지에 대한 내용을 다룹니다. 인박스 페이지의 리팩토링 과정을 예시로 들며, 왜 리팩토링이 필요한지, 즉 페이지를 구성하는 모델들의 높은 커플링으로 인한 수정의 어려움, 오래된 구조로 인한 코드 파악의 힘듦, 그리고 UI 및 기능 변경 예정 등을 설명합니다. 이 글은 리팩토링에 대한 개념이나 이론보다는 실제 페이지 구조 변경 시 어떻게 접근하고 진행할지에 대한 실질적인 가이드라인을 제공하는 데 목적이 있습니다.
리팩토링안드로이드코드 재개발
크몽·2021년 2월 4일
Frontend
크몽에서 A/B Test 하는 법 2
이 글은 크몽 안드로이드 앱 개발자가 A/B 테스트를 실제 서비스에 적용하는 방법을 다룹니다. 1편에서 A/B 테스트의 개념과 결정 기준을 소개한 데 이어, 2편에서는 안드로이드 환경에서의 구체적인 구현 방안을 제시합니다. A/B 테스트는 사용자 경험 개선과 비즈니스 성과 증대를 위한 필수적인 실험 방법론으로, 크몽에서는 이를 통해 다양한 가설을 검증하고 데이터를 기반으로 의사결정을 내립니다. 이 글은 A/B 테스트를 도입하려는 개발자나 기획자에게 실질적인 가이드라인을 제공하며, 실험 설계부터 결과 분석까지의 과정을 이해하는 데 도움을 줄 것입니다.
A/B 테스팅크몽안드로이드
크몽·2020년 12월 23일
Etc
크몽에서 A/B Test 하는 법 2
이 글은 크몽 안드로이드 앱 개발자가 A/B 테스트를 실제로 적용하는 방법에 대한 두 번째 이야기입니다. 첫 번째 편에서 A/B 테스트의 개념과 결정 기준을 다루었다면, 이번 편에서는 안드로이드 환경에서의 구체적인 구현 방안에 초점을 맞춥니다. A/B 테스트는 사용자 경험 개선과 서비스 성장을 위한 필수적인 실험 방법론으로, 크몽에서는 이를 통해 데이터 기반의 의사결정을 추구하고 있습니다. 글에서는 실제 테스트 설계, 구현, 그리고 결과 분석까지의 과정을 공유하며, 안드로이드 개발자들이 A/B 테스트를 효과적으로 활용할 수 있도록 실질적인 가이드라인을 제공합니다.
A/B Test크몽안드로이드
크몽·2020년 12월 23일
Etc
크몽에서 A/B Test하는 법
이 글은 크몽 모바일 개발팀에서 A/B 테스트를 진행했던 경험을 공유합니다. A/B 테스트는 웹 또는 앱 페이지를 두 가지 버전으로 나누어 비교하고, 전환율 등의 지표를 통해 어떤 버전이 더 효과적인지 판단하는 방법론입니다. 크몽팀은 사용자 경험 개선을 위해 A/B 테스트를 적극 활용했으며, 특히 의견이 갈리는 개선 아이템에 대해 테스트를 진행했습니다. 서비스 카드 리스트의 썸네일 의존도에 대한 의견 충돌 사례를 들며, A/B 테스트가 데이터 기반의 객관적인 의사결정을 돕는다는 점을 강조합니다. 글은 A/B 테스트의 정의, 결정 기준, 그리고 실제 적용 사례를 통해 IT 서비스 최적화 및 비즈니스 성장을 위한 A/B 테스트의 중요성을 설명합니다.
A/B Test크몽모바일 개발
크몽·2020년 12월 23일
Etc
크몽에서 A/B Test하는 법
이 글은 크몽 모바일 개발팀이 1년간 진행한 A/B 테스트 경험을 공유하는 글입니다. A/B 테스트는 웹 또는 앱 페이지를 두 가지 버전으로 나누어 비교하여 어떤 버전이 더 효과적인지 판단하는 방법으로, 전환율, 구매율 등의 지표를 기준으로 삼습니다. 크몽팀은 사용자 경험 개선을 위해 A/B 테스트를 적극 활용했으며, 특히 개선이 필요하지만 의견이 갈리는 아이템에 대해 테스트를 진행했습니다. 서비스 카드 리스트의 썸네일 의존도에 대한 의견 충돌 사례를 예시로 들며, 데이터 기반의 의사결정이 서비스 최적화에 어떻게 기여하는지를 보여줍니다. 이 글은 A/B 테스트의 기본 개념과 실제 적용 사례를 통해 IT 서비스 개선에 대한 인사이트를 제공합니다.
A/B Test크몽실험
크몽·2020년 12월 23일
Frontend
이 익숙함은 어디서 오는 걸까?: Navigation Controller
이 글은 iOS 앱 개발에서 흔히 볼 수 있는 익숙한 화면 전환 경험의 원인을 탐구합니다. 특히 네비게이션 컨트롤러가 어떻게 일관된 UI와 사용자 경험을 제공하는지에 초점을 맞춥니다. 글에서는 네비게이션 바의 고정, 콘텐츠 영역의 이동, 타이틀 및 버튼의 페이드 인/아웃, 백 버튼 생성 등 네비게이션 컨트롤러가 제공하는 주요 기능들을 관찰하고 설명합니다. 이를 통해 개발자가 네비게이션 바 디자인에 대한 부담 없이 새로운 화면 개발에 집중할 수 있도록 돕는 네비게이션 컨트롤러의 편리성을 강조합니다. iOS 앱의 통일된 사용자 경험 뒤에 숨겨진 기술적 원리를 이해하는 데 도움을 주는 글입니다.
iOSNavigation ControllerUI
크몽·2020년 12월 10일
Frontend
이 익숙함은 어디서 오는 걸까?: Navigation Controller
이 글은 iOS 앱 개발에서 흔히 볼 수 있는 화면 전환의 일관성이 어디서 오는지 탐구합니다. 특히 네비게이션 컨트롤러가 이러한 일관성을 제공하는 핵심 요소임을 설명합니다. 네비게이션 컨트롤러는 화면 전환 시 발생하는 애니메이션, 네비게이션 바의 고정, 타이틀 및 버튼의 페이드 인/아웃 효과 등을 자동으로 처리하여 개발자가 화면 전환 로직에 집중할 수 있도록 돕습니다. 또한, 네비게이션 바를 한 번만 설정하면 모든 화면에서 재사용할 수 있어 개발 효율성을 높인다는 점을 강조합니다. 결과적으로 네비게이션 컨트롤러는 사용자에게 익숙하고 통일된 앱 경험을 제공하는 데 중요한 역할을 합니다.
iOSNavigation ControllerUI
크몽·2020년 12월 10일
Frontend
더 보기가 있는 TextView 만들기
이 글은 크몽 안드로이드 앱에서 사용되는 '더 보기가 있는 TextView' 커스텀 뷰를 만드는 과정을 설명합니다. 다양한 페이지에서 활용되는 이 뷰는 텍스트와 '더 보기' 버튼의 스타일, 간격, 미리 보기 라인 등을 설정할 수 있습니다. 텍스트와 '더 보기'를 각각의 TextView로 구성하고 이를 수직 LinearLayout에 포함시키는 방식으로 Custom View를 구현했습니다. 구현 과정은 Style 선언과 Custom View 생성으로 나뉘며, attrs.xml 파일에 ExpandableTextLayout이라는 이름으로 관련 속성들을 선언하는 것부터 시작합니다. 이를 통해 재사용 가능하고 유연한 UI 컴포넌트를 만드는 방법을 공유합니다.
AndroidCustom ViewTextView
크몽·2020년 12월 2일
Frontend
더 보기가 있는 TextView 만들기
이 글은 크몽 안드로이드 앱에서 사용되는 '더 보기가 있는 TextView' 컴포넌트를 직접 만드는 방법을 소개합니다. 다양한 페이지에서 활용되는 이 UI는 텍스트와 '더 보기' 버튼을 포함하며, 글자 크기, 색상, 간격, 미리 보기 라인 등을 커스터마이징할 수 있습니다. 특히 텍스트와 '더 보기'를 위한 각각의 TextView를 포함하는 Vertical LinearLayout을 상속받아 Custom View를 만드는 방식을 채택했습니다. 이를 통해 재사용 가능하고 유연한 UI 컴포넌트를 구현하는 과정을 설명하며, 안드로이드 개발에서 UI 컴포넌트 커스터마이징의 중요성을 보여줍니다.
TextViewAndroidCustom View
크몽·2020년 12월 2일
Frontend
크몽 iOS앱 iPad 적용기
크몽 iOS 앱을 iPad에 적용하는 과정을 다룬 글입니다. 기존 iPhone 앱을 iPad 환경에 맞게 최적화하기 위해 UI 레이아웃 조정, 반응형 디자인 적용, iPadOS의 다양한 기능을 활용하는 방안 등을 탐구합니다. 특히, iPad의 넓은 화면을 효과적으로 사용하고 사용자 경험을 향상시키기 위한 디자인 및 개발 전략에 초점을 맞춥니다. 이를 통해 다양한 디바이스 환경에서 일관되고 만족스러운 사용자 경험을 제공하는 것을 목표로 합니다.
iOSiPad앱 개발
크몽·2020년 11월 4일
Frontend
디자이너, 개발자 모두를 위한 폰트 개발기 1부
이 글은 크몽에서 웹/앱에 새로운 폰트를 개발하고 적용하는 과정을 다룹니다. 기존에 안드로이드, iOS, 웹에서 각기 다른 폰트를 사용하여 디자인 일관성이 부족하고 비효율적이었던 문제를 해결하고자 했습니다. 특히 디자이너들이 선호하지 않는 NotoSans 폰트 사용으로 인한 디자인 품질 저하와 작업 의욕 상실 문제를 지적합니다. 모바일 개발자들의 도움으로 '안구프(안나 구출 프로젝트)' 채널을 개설하여 폰트 개발 및 적용 이슈를 공유하며 진행했습니다. 폰트의 상하 패딩값 불일치, 특수 기호 디자인 문제 등 개발 과정에서의 구체적인 어려움도 함께 설명하며, 디자이너와 개발자 모두를 위한 폰트 개발의 중요성을 강조합니다.
폰트 개발크몽UI 디자인
크몽·2020년 7월 29일
Frontend
PHP, jQuery 환경에서 Vue.js 2로 점진적 전환하기
이 글은 PHP와 jQuery로 구성된 레거시 웹 서비스 환경에서 Vue.js 2로 점진적으로 전환하는 과정을 다룹니다. 서비스 성장으로 인한 복잡성 증가와 프론트엔드 전문 팀 구성 필요성이 대두되면서, React.js, Angular 대신 Vue.js 2를 선택하여 기존 코드를 리팩토링하고 점진적으로 전환하는 전략을 채택했습니다. 전환 과정에서는 기획 및 디자인 시안 확보, 배포 전략 수립, 기존 PHP 템플릿 문법을 Vue.js 2 문법으로 재작성, 컴포넌트화, Vuex 도입 등의 도전 과제를 해결했습니다. 한 페이지씩 전환하고 배포하는 전략을 사용했으며, 전환 시작 이후 개발되는 모든 프로젝트는 마이그레이션된 환경에서 진행하도록 하여 효율성을 높였습니다.
Vue.js 2PHPjQuery
크몽·2020년 7월 20일
Frontend
PHP, jQuery 환경에서 Vue.js 2로 점진적 전환하기
이 글은 PHP와 jQuery 기반의 레거시 환경에서 Vue.js 2로 점진적으로 전환하는 과정을 다룹니다. 서비스 성장으로 인한 복잡성 증가와 프론트엔드 전문 팀 구성 필요성이 대두되면서, React.js, Angular 대신 Vue.js 2를 선택하여 기존 코드를 리팩토링하고 효율적인 개발 환경을 구축하는 방안을 모색합니다. 전환 과정에서 기획 및 디자인 시안 확보, 배포 전략 수립, 기존 PHP 템플릿 문법을 Vue.js 2 문법으로 재작성, 컴포넌트화, Vuex 도입 등의 도전 과제를 해결합니다. 한 페이지씩 전환하고 배포하는 전략과 함께, 신규 프로젝트는 마이그레이션된 환경에서 개발하도록 하여 점진적인 전환을 성공적으로 이끌었습니다.
Vue.js 2PHPjQuery
크몽·2020년 7월 20일