Compose와 MVI로 다시 태어난 Android UI: MVVM에서 MVI로의 전환기
검색 화면의 복잡한 상태 관리를 개선하기 위해 MVVM에서 MVI로 전환하고, Compose와 결합한 구조를 소개했습니다. 단방향 데이터 흐름과 SideEffect 분리로 가독성과 유지보수성을 높였습니다.
#Android#Jetpack Compose
8400
프론트엔드 기술 블로그 최신 글
필터 0
웹 접근성을 지켜라
웹 접근성의 기본 개념과 접근성 트리, ARIA 활용법을 정리했습니다. 또한 Radix UI Dialog 예시로 포커스 관리와 상태 전달 방식을 살펴보았습니다.
#웹 접근성#ARIA
3500
여기어때 Compose Perfomance 해결 이야기
여기어때는 Compose 도입 후 알림함 화면의 성능 저하 원인을 stability와 recomposition 관점에서 분석했습니다. Immutable Collection과 MutableState, derivedStateOf 조정으로 화면 성능을 개선했습니다.
#Android#Jetpack Compose
3700
Part 1. 여기어때 디자인 시스템 기반 커스텀 SnackBar 개발기
여기어때 디자인 시스템 YDS 6.0 기반 커스텀 SnackBar 개발 과정을 소개했습니다. 상태 관리, 애니메이션, 드래그 제스처를 통합해 재사용성과 확장성을 높였습니다.
#Android#Jetpack Compose
4300
더 나은 유저 몰입감을 위해서는 Edge-to-edge 적용은 필수
Android Compose에서 Edge-to-edge 적용 방법과 API별 동작 차이를 정리했습니다. WindowInsets와 padding으로 시스템 UI 겹침을 조정하는 실무 포인트도 설명했습니다.
#Android#Jetpack Compose
7900
iOS 앱개발자가 Appium으로 구현해본 웹뷰 테스팅
iOS 앱 개발자가 Appium으로 웹뷰 UI 테스트를 구현한 과정과 장단점을 정리했습니다. 환경 설정, 시나리오 작성, 트러블슈팅과 협업 포인트까지 함께 공유했습니다.
#iOS#Appium
6300
사용성을 고려한 앱 구조 만들기
여기어때 iOS 카테고리 홈의 긴 로딩 문제를 해결하기 위해 네이티브 전환과 즉시 뷰 업데이트 구조를 적용했습니다. Compositional Layout과 로딩 뷰로 사용성을 높이고 화면 노출 속도를 크게 개선했습니다.
#iOS#Swift
4600
2024 선물카드 제목 짓기 대회가 탄생하기까지: 운영, PM, 개발 이야기
배민선물하기 2024 참여형 캠페인을 제목 짓기 대회로 바꾸고, 협업과 제약 속에서 구현한 과정을 소개했습니다. 반응형 웹, 비로그인 참여, OTP, 영상 최적화 같은 실무 포인트도 함께 다뤘습니다.
#Next.js#SSR
3000
시니어 사용자가 어려워하는 UX 5가지
시니어 사용자가 금융 앱에서 겪는 공통 오인지 패턴을 UT로 분석해 UX 가이드라인으로 정리했습니다. 버튼, 예시 이미지, 모션, 라이팅, 화면 구조를 시니어 관점에서 점검해야 한다고 제안했습니다.
#UI/UX#유저 리서치
6900
프론트엔드 서비스 최적화? 토스에서는 '이렇게' 합니다! 모닥불 | EP.9
프론트엔드 서비스 최적화의 본질과 실무 노하우를 토스 개발자 관점에서 다뤘습니다. 초기 로딩과 런타임 성능, React 리렌더링 최적화 사례를 소개했습니다.
#성능#React
3300
프론트엔드 서비스 최적화? 토스에서는 '이렇게' 합니다! 모닥불 | EP.8
토스 개발자들이 프론트엔드 성능 최적화의 본질과 실무 노하우를 공유했습니다. 초기 로딩과 런타임, React 리렌더링 최적화 사례를 다뤘습니다.
#성능#최적화
3900
디자인 시스템 중 디자인 토큰을 여러 도구를 이용하여 자동화 하는 방법
디자인 토큰을 Figma에서 정의하고 GitHub Actions와 token-transformer로 자동 변환하는 과정을 소개했습니다. 또한 Panda CSS에 맞게 토큰을 재구성해 디자인 시스템에 연결한 흐름을 설명했습니다.
#디자인 시스템#Figma
5800
2024 프론트엔드 뉴스 한 방에 몰아 보기
2024년 프론트엔드 생태계에서 주목할 만한 뉴스와 도구를 분야별로 정리했습니다. React, Next.js, 런타임, 패키지 매니저의 주요 변화와 실무 적용 포인트를 함께 살펴봤습니다.
#React#Next.js
4500
다나와 PC견적 Tuist 도입기
다나와 PC견적 Tuist 도입기
다나와 PC견적 iOS 앱에 Tuist를 도입한 배경과 Project.swift 기반 설정 구성을 소개했습니다. Xcode 프로젝트 충돌을 줄이고 모듈화 기반을 마련하려는 방향을 설명했습니다.
#Tuist#iOS
4400