매스프레소

RSS

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

All Frontend Backend AI DevOps Architecture Etc

Frontend
Jetpack Compose 로 기능전체를 Refactoring 해보자
이 글은 안드로이드의 새로운 UI 개발 패러다임인 Jetpack Compose를 사용하여 기존 기능을 리팩토링하는 과정을 다룹니다. 저자는 Kotlin Coroutines와 함께 Jetpack Compose를 안드로이드의 가장 핫한 기술로 꼽으며, 비록 아직 베타 단계이지만 빠른 개발 속도를 고려할 때 곧 프로덕션 환경에 적용될 날이 멀지 않았다고 주장합니다. Jetpack Compose는 SwiftUI, Flutter와 같은 선언형 UI 프레임워크로, 기존의 명령형 방식과 달리 특정 상태에 따라 UI가 무엇을 보여주면 되는지에 집중하여 코드를 간결하게 작성하고 유지보수성을 높일 수 있다는 장점을 설명합니다. 이를 통해 다가올 UI 개발 패러다임 변화에 대비하고자 합니다.
Jetpack ComposeAndroidUI 개발
매스프레소·2021년 5월 13일
Frontend
콴다의 홈 화면 UX개선
콴다의 프로덕트 디자이너가 글로벌 서비스인 콴다의 홈 화면 UX 개선 과정을 공유하는 글입니다. 기존 홈 화면에서 카메라 진입 경로의 낮은 인지도와 4가지 촬영 모드의 인지 어려움이라는 두 가지 주요 문제점을 발견했습니다. 사용자 테스트를 통해 콴다 로고 버튼이 직관적이지 않고, 텍스트로만 표시된 촬영 모드가 사용자에게 혼란을 준다는 것을 확인했습니다. 이에 대한 개선 방향으로 카메라 화면을 처음부터 바로 보여주어 직관적인 검색 경험을 제공하고, 촬영 모드를 명확하게 인지시킬 수 있도록 하는 가설을 세웠습니다. 이 글은 이러한 문제점을 분석하고 개선 방향을 설정하는 과정에 초점을 맞추고 있습니다.
UX 개선UI 디자인프로덕트 디자이너
매스프레소·2020년 7월 29일
Frontend
After the Frontend framework war, here is the State management one…
이 글은 프론트엔드 개발자로서 겪은 프레임워크와 상태 관리 경험을 공유합니다. 필자는 React를 주로 사용하지만, 회사 내부에 Angular와 Vue.js로 개발된 도구들도 존재한다고 언급합니다. 각 프레임워크의 특징을 간략히 설명하며, Angular는 '내장된' 접근 방식, React는 프로그래밍적인 방식, Vue.js는 두 가지의 장점을 결합한 중간적인 접근 방식을 취한다고 설명합니다. 글의 제목은 '프론트엔드 프레임워크 전쟁 이후, 상태 관리 전쟁이 시작되었다'를 암시하며, 프레임워크 선택만큼이나 상태 관리의 중요성을 강조하려는 의도를 보입니다. 다만, 제공된 본문에서는 상태 관리에 대한 구체적인 논의가 시작되기 전까지만 다루고 있습니다.
ReactVue.jsAngular
매스프레소·2020년 2월 12일
Frontend
After the Frontend framework war, here is the State management one…
이 글은 프론트엔드 개발자가 겪었던 프레임워크 전쟁 이후, 상태 관리의 중요성과 다양한 프레임워크(React, Vue.js, Angular)의 특징을 비교 분석합니다. 저자는 React 개발자로서 Mathpresso에 합류하여 기존 Angular 및 Vue.js로 개발된 내부 도구들을 경험하며 각 프레임워크의 접근 방식 차이를 설명합니다. Angular는 '내장된' 접근 방식을, React는 프로그래밍적인 방식(JSX)을, Vue.js는 두 가지의 장점을 결합하려는 시도를 한다고 설명하며, 특정 프레임워크가 절대적으로 우월하다고 말하기보다는 개발자의 선택에 달려있음을 강조합니다. 글의 초점은 프레임워크 자체보다는 상태 관리에 대한 논의로 이어질 것을 암시합니다.
ReactVue.jsAngular
매스프레소·2020년 2월 12일
Frontend
Web debugging tool Charles 사용법
이 글은 iOS 개발자가 네트워킹 코드를 디버깅할 때 유용한 웹 디버깅 도구인 Charles의 사용법을 소개합니다. Charles는 앱과 인터넷 사이에 위치하는 웹 프록시 툴로, 모든 네트워킹 요청을 기록하고 검사할 수 있습니다. 또한, 네트워크 요청 및 응답 값을 변경하여 클라이언트에 적용하는 기능도 제공합니다. 글에서는 Charles 다운로드 및 설치 방법, 프록시 설정, 기기 인증서 설치, 그리고 다른 앱에서 Charles 프록시를 사용하는 방법까지 단계별로 설명합니다. 특히 macOS 환경에서의 사용법을 중심으로 다루며, Java 기반으로 macOS, Windows, Linux를 모두 지원함을 언급합니다. Charles를 통해 네트워크 통신을 효율적으로 디버깅하고 관리하는 방법을 배울 수 있습니다.
CharlesWeb debugging tool네트워크 디버깅
매스프레소·2019년 9월 13일
Frontend
QANDA IOS 리뉴얼 후기 및 리펙토링 방향 — 1. ReSwift 와 RxSwift의 만남
이 글은 QANDA iOS 앱의 리뉴얼 및 리팩토링 경험을 공유하며, 특히 ReSwift와 RxSwift를 활용한 단방향 데이터 흐름 구조에 대해 설명합니다. ReSwift는 Redux와 유사한 개념으로 Swift 환경에서 상태(State), 뷰(View), 상태 변화(State Changes)를 분리하여 앱 구조를 체계화하는 라이브러리입니다. 글에서는 ReSwift의 핵심 요소인 State, Store, Action, Reducer를 소개하고, 이들이 어떻게 상호작용하며 상태 관리를 수행하는지 그림과 함께 설명합니다. 이를 통해 iOS 앱 개발에서 복잡한 상태 관리를 효율적으로 처리하는 방법에 대한 인사이트를 제공합니다.
ReSwiftRxSwiftSwift
매스프레소·2018년 6월 2일
Frontend
안드로이드 코틀린 적용 이슈와 해결법 — (1)
이 글은 안드로이드 개발에서 코틀린 도입의 장점과 실제 적용 과정에서 겪는 이슈 및 해결법을 공유하는 시리즈의 첫 번째 글입니다. 코틀린은 간결한 코드 작성, 높은 가독성, 코드 품질 향상, 생산성 증대 등의 이점으로 인해 자바를 대체할 강력한 안드로이드 개발 언어로 주목받고 있습니다. 특히 구글의 공식 지원 이후 관심이 더욱 높아졌습니다. 필자는 이러한 장점 때문에 코틀린 도입을 결정했으며, 현재 콴다 앱에 코틀린을 점진적으로 적용하고 있습니다. 이 글에서는 코틀린 적용 시 가장 먼저 만만하게 시도해볼 수 있는 간단한 자바 클래스 변환 사례를 다루며, 앞으로 이어질 시리즈에서 더 많은 이슈와 해결법, 유용한 참조 링크를 공유할 것을 예고합니다.
안드로이드KotlinAndroid
매스프레소·2018년 5월 21일
Frontend
QANDA Android Rebranding Story
콴다 안드로이드 앱의 리브랜딩 과정을 공유하는 글입니다. 2015년 출시 이후 장기간 서비스되며 누적된 기술 부채와 디자인 일관성 부족 문제를 해결하기 위해 리브랜딩을 진행했습니다. 이번 리브랜딩은 단순히 UI 변경을 넘어, 앱의 근본적인 구조 개선과 디자인 시스템 구축을 목표로 했습니다. 특히, 콴다의 핵심 가치인 '학습 경험 향상'을 사용자에게 효과적으로 전달하기 위한 디자인 원칙을 수립하고, 이를 바탕으로 새로운 디자인 언어를 적용했습니다. 이를 통해 사용자 경험을 개선하고, 향후 앱의 유지보수성과 확장성을 높이는 데 기여했습니다.
AndroidRebrandingUI/UX
매스프레소·2017년 12월 24일