"이번 편에서는 웹 에디터 엔진 개발자가 어떤 일을 하고, 그 안에는 어떤 기술적 매력와 도전이 담겨 있는지 소개해드리겠습니다.

이어지는 2부 인터뷰에서는 미리캔버스 웹 에디터 팀의 일하는 방식과 함께 성장하는 문화에 대해 더 깊이 들려드립니다."

-> 다음 이야기가 궁금하다면? [2부 인터뷰 바로가기]

동열님: 안녕하세요. 미리디에서 웹 에디터 엔진 개발을 맡고 있는 백동열입니다. 미리캔버스 2.0 프로젝트와 함께 프레젠테이션의 새로운 패러다임을 만들기 위한 프로젝트에 참여하여 AI가 사용자를 도와 빠르고 만족스러운 프레젠테이션 경험을 제공하는 생태계를 만들어가고 있어요.

예지님: 안녕하세요, 미리디에서 웹 에디터 엔진 개발을 맡고 있는 김예지입니다. 미리디에 합류한 지 약 3개월 정도 되었어요. 미리캔버스와 비즈하우스 유저로서 다양한 창작물이 탄생하는 과정을 지켜보며, 저도 함께 이 서비스에 기여해 보고 싶다는 생각으로 합류하게 되었습니다.

은지님: 안녕하세요. 미리디 웹 에디터 엔진 개발자 이은지입니다.애니메이션, 공유 뷰어, 슬라이드쇼 등 재생할 수 있는 기능을 중심으로 개발하고 있어요. 프론트엔드 팀에서 개발하다가 중간에 웹 에디터 팀에 합류하게 되었는데요. 정신 없이 개발하다보니 웹 에디터 팀에서 지낸 지도 벌써 1년이 지났네요!

예지님: 엔진이라는 단어는 무언가를 움직이게 하는 동력을 의미하잖아요. 웹 에디터 엔진 개발자는 사용자들이 미리캔버스에서 편집 활동을 원활하게 할 수 있도록 핵심 기능과 내부 로직을 만드는 역할을 합니다.  
예를 들어, 디자인 페이지에 진입했을 때 디자인 문서를 로드하는 것부터, 도형이나 텍스트 같은 요소를 추가, 삭제, 복사, 붙여 넣기 하는 기능, 사용자가 실행한 동작을 취소하거나 재실행하는 기능, 페이지 변경 사항을 썸네일에 반영하는 기능 등 다양한 부분을 담당하고 있어요. 여기에 더해 성능 최적화, 동시 편집 기능 지원과 같은 중요한 기술적 문제를 해결하는 것도 저희의 역할입니다.

동열님: 덧붙이자면, 특히 제가 현재 집중하고 있는 프로젝트에서는 사용자의 의도를 정확히 파악하고 최적의 디자인을 제안하는 엔진을 개발하고 있어요. 이는 단순한 UI 구현을 넘어서서, 복잡한 비즈니스 로직과 AI 모델을 효율적으로 통합하는 작업을 포함합니다. 
이 직무를 한마디로 정리하자면, '부드럽고 정확한 편집 경험'을 만들기 위한 핵심 로직을 설계하고 구현하는 소프트웨어 엔지니어'라고 볼 수 있어요.

동열님: 가장 낯설었던 것은 미리캔버스의 아키텍처였어요. 편집 영역과 템플릿, 요소 패널이 각각 독립된 서비스로 구성되어 있는 MFA(Micro Frontend Architecture) 구조였거든요. 각 기능들이 Command 패턴을 통해 서로 소통하고 있었고, OOP 설계와 함수형 프로그래밍이 적절히 혼합된 복잡한 구조였습니다. 
처음에는 '에이, 이 작은 편집화면 하나에 로직이 들어있어도 얼마나 들어있겠어?' 라는 생각을 했어요. 하지만 그 생각이 틀렸다는 것을 깨닫는 데는 오래 걸리지 않았죠.

은지님: 모듈들이 역할에 따라 분류되어 있는 구조가 조금 낯설었어요. 예를 들어, 디자인 편집기의 핵심 로직이 두 개의 계층으로 나뉘어 있는데요. 하나는 기본적인 디자인 요소와 상태를 다루는 핵심 로직이고, 다른 하나는 사용자 상호작용과 관련된 핵심 로직을 담당하고 있어요. 
이렇게 모듈들이 명확하게 역할에 따라 나뉘어 있는 구조는 처음에는 조금 어색했지만, 이 구조 덕분에 각 모듈이 명확한 책임을 가지고 있어, 개발을 진행하면서 코드의 유지보수성과 확장성을 높일 수 있다는 점을 깨달았어요.결과적으로는 더 체계적이고 효율적인 개발을 할 수 있는 기반이 되었습니다.

예지님: 입사한 지 오래되지는 않아서 그 경험들이 꽤 생생한데요. (웃음)가장 도전적이었던 지점은 단일 페이지 안에서 수많은 상태와 액션들이 서로 영향을 주며 동작한다는 점이었어요. 이러한 복잡성을 효과적으로 관리하기 위해 여러 디자인 패턴을 활용하고 있는데, 새로운 기능을 추가할 때 혹여나 다른 영역에 영향을 주진 않을지 긴장될 때도 종종 있더라고요. 
하지만 작은 이슈들을 차근차근 해결하면서 전체 구조 내에서 내가 구현하는 기능이 어떤 의미를 갖는지 잘 파악하면, 어떤 부분을 수정해야 하는지 그리고 어떤 영역에만 영향을 주어야 하는지 점점 더 명확하게 알게 되었어요.

예지님: 프론트엔드 개발이 사용자 인터페이스 구축이나 서버와의 소통 등에 집중하는 태스크를 가지고 있다면, 엔진 개발은 그 뒤편에서 사용자 액션이 정확히 동작하도록 에디터 내 로직과 구조를 설계하는 데 중점을 둡니다. 
조금 더 구체적으로 말씀드리면, 프론트엔드 개발자분들이 사용자와 소통할 수 있는 창구를 열어 명령을 전송하거나 이벤트를 발행하면, 엔진 개발자는 이를 받아 실제로 원하는 기능이 정확하게 수행되도록 내부 로직을 구현하는 역할입니다.

동열님: 일반적인 프론트엔드 포지션이 UI 구성과 사용자 경험을 중심으로 기능을 구현한다면, 저희는 그보다 한 단계 뒤에서 작동하는 '코어 로직'을 설계하고 유지보수합니다.

예를 들어 제가 현재 작업 중인 프로젝트를 보면 사용자의 의도를 파악하는 자연어 처리 로직, 디자인 요소들의 상태를 관리하는 복잡한 상태 관리 시스템, AI 모델과 실시간으로 상호작용하는 비동기 처리 로직, 수백 개의 요소를 동시에 다루면서도 성능을 유지하는 최적화 로직 등을 다루고 있어요. 마치 '디자인 도구를 만드는 도구'를 개발하는 느낌이랄까요?

은지님: 디자인 편집기 개발은 웹 프론트엔드 개발의 영역이면서도, 몇 가지 흥미로운 도전 과제들이 있어요. 

사용자가 실시간으로 요소를 조작하고 변경할 수 있도록 해야 하는데, 이때 빠르고 부드러운 반응성을 제공하는 게 핵심이에요. 
일반적인 웹 서비스에서도 성능은 중요하지만, 디자인 편집기에서는 실시간 드래그나 리사이즈 같은 작업에서의 즉각적인 반응성이 사용자 경험을 좌우하기 때문에 이 부분에 특히 집중하고 있습니다.

동열님: 단순한 화면 구현이 아닌, 도구의 작동 원리를 고민하는 개발을 하고 있다는 점이 가장 큰 매력이라고 느껴요. 예를 들어 제가 개발했던 기능인 AI 프레젠테이션의 '딱 맞는 페이지 찾기'에서 "이 기능을 어떻게 보여줄까?"에서 멈추는 것이 아닌, "이 기능은 어떤 데이터 흐름과 구조 위에서 안정적으로 작동할까?" 등 시스템의 측면에서 기능을 바라보는 시야를 얻을 수 있습니다.

구체적으로는

• 텍스트 패턴을 어떻게 구조화하고 분석할 것인가?

• 디자인 요소들 간의 충돌과 겹침을 어떻게 효율적으로 처리할 것인가?

• 사용자의 편집 히스토리를 어떻게 추적하고 반영할 것인가?

이런 깊이 있는 고민들을 하면서, 서비스를 구현하는 개발자에서 구조를 설계하는 개발자로 성장할 수 있어요. 
기능 중심 개발에서 한 단계 더 깊이 들어가고 싶은 분들이라면, 이 역할이 정말 재밌을 거예요.

은지님: 가장 큰 매력은 사용자와 직접 상호작용하는 도구를 개발한다는 점이에요. 사용자가 실시간으로 디자인을 조작하고 즉각적인 피드백을 받을 수 있도록 기능을 구현하는데, 이 과정에서 다양한 기술적 도전 과제들을 마주하게 됩니다.

특히 사용자들이 자신의 아이디어를 자유롭게 표현할 수 있도록 성능을 최적화하고, 더 나은 창작 환경을 만들어가는 과정에서 느끼는 성취감이 정말 큽니다. 웹 에디터 엔진 개발자는 이렇게 사용자의 창의적인 작업을 직접 지원할 수 있는 매력적인 직무예요!

예지님:  에디터에서 구현할 수 있는 기능은 사실상 무궁무진하기 때문에 항상 확장성을 염두에 두어야 합니다. 그렇지 않으면, 급하게 임시로 만들어 둔 분기 처리가 나중에 큰 걸림돌이 될 수 있습니다.

그래서 만약 현재 작업하는 수정 사항이 전체 구조에 영향을 미칠 수 있다고 판단되면 동료들과 함께 충분히 논의하고 검증하는 시간을 가집니다.
이렇게 건강하고 깊이 있는 논의가 꾸준히 이루어진다는 점이 개발자로서 저를 크게 성장하게 해준다고 생각해요.

지금까지 미리디의 웹 에디터 엔진 개발자가 어떤 일을 하는지, 
이 직무의 특별한 매력은 무엇인지 알아봤습니다!

웹 에디터 엔진 개발자는 단순히 코드를 구현하는 것을 넘어, 
사용자의 창의적인 경험을 책임지는 편집 환경을 만들어갑니다.

다음 2부에서는 미리캔버스 웹 에디터 팀의 생생한 협업 이야기와 

개발 문화에 대해 살펴보겠습니다.

이어지는 다음 이야기도 기대해 주세요!

-> [2부 바로가기]