B2C 서비스 레거시의 가르침 - Part2. Planning
운영 중인 B2C 프론트엔드 레거시를 개선하기 위한 플래닝 과정과 원칙을 정리했습니다. 기술 부채 정렬, 점진적 개선, 공유 문화를 통해 팀워크와 서비스 이해도를 높였습니다.
#레거시#JavaScript
3000
프론트엔드 기술 블로그 최신 글
필터 0
난제를 해결한 iOS 키보드 레이아웃 최적화 전략
난제를 해결한 iOS 키보드 레이아웃 최적화 전략
iOS 키보드 레이아웃을 PinLayout과 FlexLayout으로 단계적으로 전환해 최적화했습니다. 안정성을 크게 높이고 사용자 경험과 성능을 개선했으며, 필요한 기능은 직접 구현해 오픈소스에도 기여했습니다.
#iOS#UI/UX
2200
잘 쓰이는 디자인 시스템을 위한 여정
29CM가 디자인 시스템 Ruler를 만들며 UI 파편화와 컴포넌트 구현 비용을 줄인 과정을 공유했습니다. Headless UI와 Figma 측정 도구로 재사용성과 운영 체계를 함께 강화했습니다.
#디자인 시스템#Headless UI
7300
DAU를 64% 성장시킨 문제 해결법
DAU를 64% 성장시킨 문제 해결법
유저의 실제 허들을 다시 정의해 온보딩과 설정 흐름을 개선한 사례를 다뤘습니다. 다이얼로그, 안내 방식, 브랜드 경험을 조정해 활성화와 DAU 성장을 이끌었습니다.
#UI/UX#onboarding
2700
infer, never만 보면 두려워지는 당신을 위한 고급 TypeScript
infer, never만 보면 두려워지는 당신을 위한 고급 TypeScript
TypeScript 타입 추론을 타입 이론과 순서론으로 설명하는 고급 세션을 공개했습니다. 라이브러리 개발과 오픈소스 참여를 염두에 둔 실전형 구성입니다.
#TypeScript
2800
Flutter에서 커스텀 린트 활용하기
Flutter 프로젝트에 custom_lint를 도입해 팀 전용 린트 규칙과 자동 수정 기능을 구성한 사례를 소개했습니다. 웹 빌드에서 Platform 사용 문제를 계기로 PlatformHelper와 린트 규칙을 함께 정리하는 흐름을 설명했습니다.
#Flutter#Dart
4600
Vite로 구버전 브라우저 지원하기
Vite 레거시 플러그인으로 구버전 Safari와 Chrome의 흰 화면 문제를 해결한 사례를 다루었습니다. targets 설정만으로는 부족해 modernPolyfills를 함께 조정한 과정도 설명했습니다.
#Vite#React
6600
테스트 자동화도 무신사(QA)랑해
무신사 QA팀의 웹 테스트 자동화 운영 방식과 도구 구성을 소개했습니다. 릴리스 전후 회귀 테스트를 통해 품질과 안정성을 높인 사례입니다.
#test#자동화
3700
여러 프레임워크에서 사용할 수 있는 라이브러리 만들기
Framework Agnostic 개념을 바탕으로 코어와 어댑터를 분리하는 라이브러리 설계 방식을 소개했습니다. Tanstack Query와 계산기 예시로 프레임워크 독립성과 통합 구조를 설명했습니다.
#JavaScript#TypeScript
3900
B2C 서비스 레거시의 가르침 - Part1. Mental Model
레거시와 기술 부채를 부정적으로만 보지 말고, 문제 정의와 정렬부터 시작해야 한다고 정리했습니다. 5 Whys와 이해관계자 매핑 같은 프레임워크로 개선의 출발점을 잡는 방법을 제안했습니다.
#legacy#technical debt
3200
드래그 앤 드롭은 사실 편한 UX가 아니다?
드래그 앤 드롭 순서 변경 기능을 접근성 관점에서 재설계한 사례를 소개했습니다. 스크린 리더, 초점 이동, ARIA 적용과 디바이스별 대응 방법도 함께 정리했습니다.
#UI/UX#accessibility
4100
API 없이 웹 애니메이션 구현: 인터랙티브 웹 개발 2편
라이브러리 없이 수학과 물리로 웹 애니메이션을 구현한 과정을 공유했습니다. 카카오페이의 트리 조명 인터랙티브 개발 사례를 중심으로 설명했습니다.
#web#CSS
1600
Transpiler, “사용”말고 “활용”하기
토스뱅크는 transpiler를 활용해 클릭 요소에 로깅 속성을 자동 주입하는 방식을 만들었습니다. 이를 통해 개발자는 로깅을 신경 쓰지 않고 비즈니스 로직에 집중할 수 있게 되었습니다.
#transpiler#React
3300
iOS 멀티 프레임워크 환경에서 리소스 효율적으로 관리하기
iOS 멀티 프레임워크 환경에서 리소스를 효율적으로 관리하기 위한 리소스 모듈 구축 과정을 소개합니다. 앱 용량 영향을 줄이기 위한 분리 관리 방향을 다룹니다.
#iOS#module
4200