Read Original
#Frontend

‘왜 이렇게 만들었을까’라는 질문으로 성장하는 웹 에디터 팀

‘왜 이렇게 만들었을까’라는 질문으로 성장하는 웹 에디터 팀
01

Summary

"왜 이렇게 만들었을까?" 코드 작성보다 '본질적 구조'를 고민하는 웹 에디터 팀의 성장기

디자인 패턴과 성능 최적화, 그리고 건강한 질문 문화로 만들어가는 프론트엔드 에디터 엔진

미리캔버스의 웹 에디터 팀 개발자들이 복잡한 편집 로직을 해결하며 성장해온 과정과 기술 협업 방식을 소개합니다. 커맨드 패턴, Jotai, 메모이제이션 기법을 활용한 아키텍처 개선부터 지적 대신 질문으로 성장을 돕는 코드 리뷰 문화까지 대규모 프론트엔드 에디터 개발의 실무 인사이트를 제공합니다.

  • 01싱글톤 및 커맨드 패턴을 활용한 복잡한 에디터Undo/Redo 동작 및 공통 로직 구조화
  • 02Jotai 상태 관리와 메모이제이션 및 비동기 처리 최적화를 통한 브라우저 렌더링 성능 방어
  • 03‘지적’ 대신 ‘이유’를 묻는 질문 중심의 매주 정기 코드 리뷰 및 회고 문화 구축
  • 04애니메이션 엔진을 제로베이스부터 설계하며 재사용 가능한 인터페이스 추상화 성과 달성

RECOMMENDATION

복잡한 웹 애플리케이션의 프론트엔드 아키텍처와 성능 최적화, 그리고 함께 성장하는 피드백 문화를 도입하고자 하는 개발자 및 리더에게 권장합니다.

The Problem

복잡한 그래픽 요소와 많은 페이지를 다루는 웹 에디터 개발 시, 단순 기능 구현에 치우치면 구조적 확장성이 떨어지고 불필요한 렌더링으로 인한 성능 저하가 발생할 수 있습니다.

The Solution

싱글톤, 커맨드 패턴 등 아키텍처 설계 패턴을 적극 도입하고 Jotai 상태 관리와 비동기 처리, 메모이제이션을 적용하여 렌더링 성능을 최적화했으며, 질문 중심의 코드 리뷰 및 회고 문화를 정착시켰습니다.

The Result

팀원들이 단순 구현자를 넘어 문제 정의와 구조 설계를 주도하는 엔지니어로 성장했으며, 코드 리팩토링 및 새로운 애니메이션 인터페이스 설계를 통해 에디터의 완성도를 높였습니다.

Trade-off

초기 구조 설계 및 매주 진행되는 깊이 있는 코드 리뷰 프로세스에 일정 수준의 리소스 투입이 필요하지만, 장기적인 코드 품질과 유지보수성을 위해 이를 수용하고 있습니다.

03

Key Concepts

Concept · 01

Command Pattern (커맨드 패턴)

요청 자체를 객체로 캡슐화하여 실행할 연산, 취소, 재실행 동작을 유연하게 제어할 수 있게 하는 객체지향 디자인 패턴입니다.

  • 도형 편집, 되돌리기(Undo), 다시 실행(Redo) 등 복잡한 에디터 내 편집 동작을 안정적으로 관리하기 위해 도입함
Concept · 02

Jotai

React에서 원자(Atom) 단위로 상태를 관리하여 불필요한 리렌더링을 줄이고 유연하게 상태를 조합할 수 있는 상태 관리 라이브러리입니다.

  • 웹 에디터의 복잡한 상태를 효율적으로 관리하고 렌더링 성능을 최적화하기 위해 사용함
Concept · 03

Memoization & Rendering Optimization

이전 연산 결과를 재사용하여 불필요한 재계산과 컴포넌트 재렌더링을 방지하는 브라우저 성능 최적화 기법입니다.

  • 페이지 수가 늘어나도 에디터가 버벅이지 않도록 비동기 처리와 함께 불필요한 렌더링을 차단하는 데 활용함