프론트엔드
“더 빠르고, 자연스러운 경험을 만드는 웹&에디터팀”
두줄요약
미리캔버스 웹&에디터팀이 에디터 2.0의 모듈화와 UX 개선, 성능 최적화를 중심으로 일하는 방식을 소개했습니다. 또한 모니터링, 설계 리뷰, 테스트 코드로 안정성과 확장성을 높이는 과정을 공유했습니다.
구조와 흐름
- React 기반 웹과 에디터 코어를 함께 다루는 프론트엔드 팀 소개
- 에디터 2.0에서 코어와 UI 프레임워크 분리, 모듈화와 테스트 용이성 개선
- 드래그 앤 드롭과 motion 애니메이션으로 자연스러운 UX와 성능 최적화 추구
성능/운영 포인트
- DataDog로 프로덕션 에러와 성능 저하 모니터링
- 클립보드 권한 이슈를 폴리필로 빠르게 대응
- 코드 리뷰, 설계 리뷰, 테스트 코드, AI 도구를 활용한 품질 관리
트레이드오프
- 기능 구현 편의성보다 모듈 성능, 가독성, 복잡도, 테스트 용이성 균형 고려
- 세부 기능 구현에 앞서 아키텍처와 데이터 흐름을 먼저 정리하는 중요성 인식
- 에디터 구조 복잡도가 하위 기능 구현 제약으로 이어질 수 있다는 점 확인