에디터를 만들어라

이번 미션은 VSCode처럼 코드를 입력할 수 있고, 상호작용이 가능한 에디터를 만드는 것이었다. 코드 입력 기능을 구현할 때는 기본 틀을 제공하는 다양한 라이브러리를 활용할 수 있는데, 그중 나는 Monaco를 사용했다.

회사 서비스에서는 Monaco를 이용해 인터랙티브한 기능을 구현하는 일이 많았다. 예를 들어, 내가 처음 적응 기간에 진행했던 D3 시각화 작업 에서도 Monaco를 활용했으며, 현재는 Vience Canvas의 Workspace에서 Custom Processing과 Training AI 기능 구현에도 사용되고 있다.

그렇다면 Monaco는 무엇일까?

<Editor
  height="90vh"
  defaultLanguage="javascript"
  defaultValue=""
  onValidate={handleEditorValidation}
/>

위처럼 Editor 컴포넌트를 선언하기만 하면, 기본적인 코드 에디터가 바로 나타난다. 이후 요구사항에 맞게 문법 강조, 자동 완성, 유효성 검사, 커스텀 단축키 등 다양한 기능을 추가하며 확장할 수 있다.

Monaco의 가장 큰 장점은 VSCode와 거의 동일한 사용자 경험을 제공하면서도, 웹 환경에 맞게 손쉽게 커스터마이징할 수 있다는 점이다. 따라서 복잡한 에디터 기능을 처음부터 구현할 필요 없이, 필요한 기능만 선택적으로 추가할 수 있어 개발 생산성을 크게 높일 수 있다.

---

Custom Processing에서의 Monaco 커스텀

Custom Processing은 들어온 데이터를 python 코드를 통해 원하는 형태로 출력할 수 있도록 해주는 노드이다.

A부터 Z까지 코드를 작성할 수도 있지만 위와같이 템플릿을 사용해서 약간의 코드 변경을 통해서도 출력이 가능하다. 여기서 import Module이나, 이미지를 주로 처리하는 부분에서 매번 이미지의 절대경로를 입력하기에는 귀찮거나 놓칠 수 있기 때문에 이부분에서 동기화 작업이 필요했다. 예를들어 현재 선택한 모듈을 보면 아래와 같다.

import torch
import torch.nn as nn
import torchvision
import numpy as np

실제 사전에 미래 생성되어있는 import module과 동기화가 되어 입력한 모듈이 표시가 된다. 반대로, 코드를 직접 작성하지 않고도 모듈을 선택해서 코드에 직접 넣을 수도 있다.

약식으로 코드를 나타낸 것인데, 위에서 부터 기능을 설명하면,

handleCategoryClick : 카테고리 클릭 → 상태 토글: syncImports : 선택된 카테고리 기반 import 동기화 extractImports : 코드에서 import 라인 추출 updateImports : 선택된 import 상태 업데이트

이렇게 지역상태와 에디터의 defaultValue(코드)와 엮어 서로 동기화를 시켰다. 또한 datahub(파일 관리 서비스)에서 파일을 받아와 코드에 직접 드래그 앤 드랍하여 조합할 사진을 적용시킬 수 있다.

이또한 이동하고자 하는 데이터를 지역상태에 보관하고, Monaco Editor에서 행과 열의 좌표를 얻은 뒤에 해당 지점으로 defaultValue(코드)와 엮어 코드에 합쳐 적용시킬 수 있었다.

---

Training AI에서의 Monaco 커스텀

Custom Processing이 이미지를 약간의 코드로, output을 바꾸는 역할을 한다면 Training AI 서비스는 정말 모델을 만드는 것이다.

정말 실제, Model, Dataset, Loss, Metric, Training 5개의 속성으로 사전에 기본 코드가 정의되어있는 상태에서 모델을 쉽게 만들 수 있도록 해준다. 여기서 오른쪽 패널을 잘 보면, setting 부분에 parameter, type, value를 지정할 수 있다. 즉, 모델 레이어 수, 학습률, 배치 크기 등 핵심 하이퍼파라미터를 GUI에서 쉽게 조정할 수 있는 것인데 이부분은 코드랑 동기화가 되어있다. 예를들어 Model부분에서는 Class Model의 생성자에 있는 것과 같다.

• 패널에서 값을 조정하면 코드에 즉시 반영
• 코드에서 값을 변경하면 패널에도 즉시 반영

이처럼 양방향 동기화가 이루어지기 때문에, 사용자는 GUI와 코드 중 어느 쪽을 사용하든 항상 최신 상태를 유지하며 모델을 구성할 수 있다.

Monaco에서 작성된 코드중, 필요한 부분을 파싱하는 코드, 그리고 실제 UI에서 변수명/타입/값을 변경하면, 업데이트하여 실제 코드에도 적용시키도록 하는 update함수들로 동기화를 시킬 수 있었다.

이렇듯 Monaco는 단순히 코드 입력 도구를 넘어서, 웹에서 인터랙티브한 코드 기반 UI를 구현하는 데 최적화된 라이브러리라서 재밌었다.