Read Original
#Frontend

미리캔버스의 편집 로직을 책임지는 웹 에디터 팀 엔진 개발자들

미리캔버스의 편집 로직을 책임지는 웹 에디터 팀 엔진 개발자들
01

Summary

화면을 그리는 개발자에서 에디터의 동력을 만드는 엔지니어로: 미리캔버스 웹 에디터 엔진의 비밀

마이크로 프론트엔드 기반 위에서 실시간 그래픽 에디팅 성능을 끌어올리는 기술적 고민과 성장의 이야기

미리캔버스 웹 에디터 팀은 사용자 동작에 지연 없이 정교하게 반응하는 웹 편집 엔진을 개발합니다. 독립된 서비스 모듈로 나누어진 마이크로 프론트엔드 아키텍처(MFA)와 책임이 분리된 모듈 레이어를 적용하여 확장성과 안정성을 동시에 확보하고 있습니다. 본 아티클에서는 에디터 엔진 개발의 구체적인 구조와 직무적 가치, 그리고 팀의 성장 과정을 소개합니다.

  • 01편집 영역, 템플릿, 패널을 세부 분리한 마이크로 프론트엔드 아키텍처(MFA) 활용
  • 02상태 관리와 상호작용 레이어의 엄격한 역할 분리를 통한 모듈성 극대화
  • 03사용자 의도를 해석해 프레젠테이션 페이지를 자동 추천하는 AI 에디터 엔진 연동
  • 04객체지향 설계와 함수형 프로그래밍을 적절히 결합한 캔버스 조작 로직 최적화

RECOMMENDATION

단순 UI 구현에서 벗어나 복잡한 클라이언트 상태 관리, 캔버스 최적화, 마이크로 프론트엔드 아키텍처 설계에 깊게 파고들고 싶은 3년 차 이상 프론트엔드 엔지니어에게 적극 추천합니다.

The Problem

미리캔버스는 다양한 도형, 텍스트, 템플릿 요소를 복잡하게 조작하는 편집 환경에서 사용자 동작에 즉각 반응하는 매 매끄러운 렌더링 성능과 확장성 있는 상태 관리를 필요로 했습니다.

The Solution

편집 영역, 템플릿, 요소 패널을 분리한 마이크로 프론트엔드 아키텍처(MFA)를 도입하고, 디자인 요소 및 상태 관리 레이어와 사용자 상호작용 전담 레이어로 모듈을 분리 구축했습니다.

The Result

요소 추가 및 조작시의 실시간 반응 속도를 확보했으며, 객체지향과 함수형 프로그래밍 패턴을 혼용하여 복잡한 에디터 내부 로직과 AI 프레젠테이션 기능 유연한 확장을 구현했습니다.

Trade-off

독립된 소형 서비스 모듈 분리로 인해 초기 온보딩 및 구조 파악의 난이도가 높으며, 한 상태의 변경이 다른 기능에 영향을 줄 수 있어 정교한 코드 검토 과정이 필수적입니다.

03

Key Concepts

Concept · 01

Micro Frontend Architecture (MFA)

단일 웹 애플리케이션을 독립적으로 빌드 및 배포할 수 있는 소형 프론트엔드 앱 모듈 단위로 나누어 개발하는 아키텍처 패턴입니다.

  • 미리캔버스 내 편집 영역, 템플릿, 요소 패널을 각각 독립된 서비스로 분리 및 운용
Concept · 02

에디터 모듈 레이어링 (Layered Architecture)

시스템을 성격과 역할에 따라 여러 층으로 분리하여 모듈 간 높은 독립성과 결합도 감소를 도모하는 설계 방식입니다.

  • 디자인 요소와 상태를 관장하는 레이어와 사용자 인터랙션을 처리하는 레이어를 엄격히 분리하여 유지보수성 확보
Concept · 03

엔진 최적화 (Engine Optimization)

사용자의 드래그, 리사이즈, 실행 취소(Undo/Redo) 등 실시간 그래픽 이벤트 동작 시 렌더링 지연을 최소화하는 기술적 최적화 과정입니다.

  • 수백 개의 디자인 요소를 동시 처리하면서도 화면 반응 지연을 줄이기 위해 내부 데이터 흐름 최적화