Hybrid Structured Editing: Structures for Tools, Text for Users

이 논문은 도구 개발자에게 구조적 보장을 제공하면서 사용자에게는 친숙한 텍스트 편집 인터페이스를 유지하는 '하이브리드 구조적 편집' 방식을 제안하여, 코드 구조를 기반으로 한 도구와 텍스트 소스 간의 긴밀한 통합을 가능하게 함으로써 프로그래밍 환경의 확장을 안전하게 지원합니다.

핵심

1. 문제: "코드는 텍스트지만, 프로그램은 구조물이다"

우리가 코드를 작성할 때는 키보드로 글자 (텍스트) 를 입력합니다. 하지만 컴퓨터가 이해하는 코드는 단순한 글자 나열이 아니라, **나무 가지처럼 연결된 복잡한 구조 (트리)**입니다.

• 기존의 딜레마:
  • 텍스트 편집기 (일반적인 코드 에디터): 글자를 입력하고 지우기 쉽지만, "이 글자가 어떤 구조의 일부인지"를 실시간으로 파악하기 어렵습니다. 예를 들어, 코드를 수정할 때 툴이 "아, 이 부분이 변했구나!"라고 알아차리려면 매번 코드를 다시 해석 (파싱) 해야 해서 번거롭고, 실수하면 툴이 제자리를 잃어버립니다.
  • 구조 편집기 (레고 방식): 코드를 글자가 아닌 '블록'으로 다룹니다. 구조가 항상 정확하므로 툴이 정보를 얻기 쉽습니다. 하지만 사용자가 글자를 치듯 자유롭게 코드를 수정하기 어렵고, 배우는 데 시간이 많이 걸립니다.

이 논문은 이 두 세계를 섞으려 합니다. 사용자는 익숙한 **텍스트 (글자)**로 코드를 수정할 수 있지만, 그 뒤에서는 **구조 (레고 블록)**가 자동으로 정리되어 툴이 항상 정확한 위치에 붙어 있도록 해주는 것입니다.

---

2. 해결책: "보이지 않는 마법사 (HybridSE)"

이 시스템의 핵심은 **하이브리드 구조 편집 (HybridSE)**이라는 '마법사'입니다. 이 마법사는 다음과 같은 일을 합니다.

① 구조 추적 (Structure Tracking): "이름표가 붙은 레고"

코드를 수정할 때, 마법사는 "이 글자가 삭제된 게 아니라, 그냥 위치가 바뀐 거야"라고 알아냅니다.

• 비유: 레고 성을 짓다가 벽돌 하나를 옮겼다고 해서, 그 벽돌 위에 붙여둔 '작은 전구 (툴)'가 떨어지는 게 아니라, 벽돌이 이동할 때 전구도 자연스럽게 따라가게 만드는 것입니다.

② 중첩 편집 (Nested Editors): "작은 창문 속의 또 다른 창문"

코드 중 특정 부분만 떼어내어 별도의 편집창으로 보여주는 기능이 있습니다.

• 비유: 책 한 장을 찢어내어 작은 창문으로 만든 뒤, 그 창문 안에서도 다시 책을 읽거나 수정할 수 있게 하는 것입니다. 이때 원래 책의 들여쓰기 (인덴테이션) 가 깨지지 않도록 마법사가 자동으로 정리해 줍니다.

③ 구조 접근 (Structured Access): "실시간 데이터 연결"

코드를 실행했을 때의 값 (예: 변수의 현재 숫자) 을 코드 바로 옆에 보여줍니다.

• 비유: 요리할 때 냄비 위에 온도계를 꽂아두는 것처럼, 코드를 실행하는 순간 그 부분의 '온도 (값)'가 바로 표시되는 것입니다.

---

3. 실제 작동 원리: "잠시 멈춤과 되돌리기"

사용자가 코드를 수정하다가 문법 오류를 만들면 어떻게 될까요?

• 기존 방식: 에디터가 "오류!"라고 붉게 표시하고, 툴이 사라지거나 엉뚱한 곳으로 이동할 수 있습니다.
• 이 시스템의 방식:
  1. 사용자가 글자를 입력하면, 마법사는 "잠깐, 이 상태로 가면 툴이 사라질 것 같아!"라고 판단합니다.
  2. 잠시 멈춤 (Freeze): 글자는 화면에 보이지만, 실제 구조는 마지막 안전한 상태로 유지됩니다.
  3. 알림: 화면에 "잠시만요, 코드가 아직 완성되지 않았습니다"라고 부드럽게 알려줍니다.
  4. 해결: 사용자가 코드를 완성하면 마법사가 "이제 안전해!"라고 판단하고, 모든 툴과 구조를 한 번에 업데이트합니다.

이 과정은 마치 교량 공사와 같습니다. 다리를 수리할 때, 통행이 완전히 끊기는 게 아니라 임시 다리를 설치해 두었다가, 본 공사가 끝나면 자연스럽게 연결하는 방식입니다.

---

4. 왜 이것이 중요한가요? (사례)

이 기술을 사용하면 다음과 같은 멋진 도구들을 만들 수 있습니다.

• 플레이스홀더 (Placeholder): "여기에 코드를 입력하세요"라고 빈칸을 만들어두면, 사용자가 입력하는 순간 자동으로 코드로 변환됩니다.
• 언어 중첩 (Language Composition): 자바스크립트 코드 안에 SQL(데이터베이스 언어) 을 넣을 때, 따옴표나 특수 문자를 일일이 처리할 필요 없이, 마치 SQL 전용 에디터처럼 자연스럽게 작성할 수 있습니다.
• 코드 브라우저: 파일 전체를 한눈에 보기 좋게 나열하고, 클릭하면 해당 부분만 확대되어 편집할 수 있습니다.

5. 결론

이 논문이 제안하는 하이브리드 구조 편집은 "사용자는 편하게 텍스트를 타이핑하고, 개발자 (툴 제작자) 는 구조를 안전하게 다룰 수 있게" 해주는 교량 역할을 합니다.

기존의 텍스트 에디터의 익숙함과, 구조 편집기의 강력한 기능을 모두 가져와서, 코드를 더 직관적이고 안전하게 다룰 수 있는 미래의 개발 환경을 만드는 것이 목표입니다. 마치 운전자가 핸들을 돌리는 것만으로도 차가 자동으로 차선을 유지하고 사고를 예방하는 '자율주행' 같은 기술이 코드 편집기에 적용된 셈입니다.

기술 요약

1. 문제 정의 (Problem)

현대 통합 개발 환경 (IDE) 은 코드에 대한 다양한 도구 (툴팁, 디버거, 시각적 디자인 등) 를 제공하지만, 기존 도구들은 대부분 텍스트 기반 소스 코드에서 멀리 떨어진 패널에 표시되거나 가벼운 주석 형태로만 존재합니다. 연구자들은 소스 코드의 특정 부분과 도구를 물리적으로 가깝게 배치하여 (코드 중심 도구) 정보의 관계를 더 직관적으로 이해할 수 있도록 하는 것이 중요하다고 주장합니다.

그러나 코드 중심 도구를 구현하는 데에는 다음과 같은 세 가지 주요 기술적 난제가 존재합니다:

1. 구조 추적 (Structure Tracking): 사용자가 텍스트를 편집할 때, 도구가 속한 프로그램 트리 (Program Tree) 의 구조가 변하지 않고 안정적인 위치에 유지되도록 추적해야 합니다. 텍스트 편집은 파싱 오류를 유발하거나 구조를 변경할 수 있어, 도구가 올바른 위치에 남도록 하는 것이 어렵습니다.
2. 중첩 편집기 (Nested Editors): 도구 내부에 또 다른 코드 편집기가 중첩되어 있을 때 (예: SQL 쿼리가 포함된 JavaScript 코드), 편집 및 네비게이션이 예측 가능하게 작동해야 합니다. 텍스트의 들여쓰기 (indentation) 나 구문 오류가 중첩된 편집기에서 어떻게 처리될지 복잡합니다.
3. 구조화된 접근 (Structured Access): 도구는 정적 정보 (문법 구조) 와 동적 정보 (런타임 값) 에 접근해야 하며, 이를 수정할 때 문법적 정확성을 유지해야 합니다. 텍스트 기반 편집기는 구조적 수정을 위한 추상화 수준이 낮습니다.

기존의 구조적 편집기 (Structured Editors) 는 구조 추적을 해결하지만, 텍스트 편집에 익숙한 사용자에게는 낯선 인터페이스를 제공하여 채택이 어렵습니다. 반면, 텍스트 기반 편집기는 익숙하지만 구조적 보장이 부족합니다.

2. 방법론 (Methodology)

저자들은 **하이브리드 구조적 편집 (HybridSE)**을 제안합니다. 이는 일반적인 텍스트 편집기를 확장하여 **선택적인 구조적 보장 (selective structural guarantees)**을 제공하고, 도구와 편집기를 재귀적으로 중첩할 수 있는 프래그먼트 (fragments) 를 지원하는 메커니즘입니다.

핵심 아키텍처 및 프로세스

HybridSE 는 도구 빌더가 도구를 정의할 수 있는 프레임워크를 제공하며, 다음과 같은 5 단계 흐름을 따릅니다:

1. 프로그램 구조 매칭 (Program Structure Match): 도구가 매칭하려는 프로그램 구조를 쿼리 (Query) 로 정의합니다. (예: 특정 주석 마커가 포함된 표현식).
2. 데이터 추출 (Extract Data): 매칭된 구조에서 정적 정보 (구문 트리) 와 동적 정보 (런타임 값) 를 추출합니다.
3. 제약 조건 선언 (Constraints): 도구가 유지되어야 하는 구조적 제약 조건을 정의합니다. (예: "이 도구가 감싸는 표현식이 유효한 문법 구조를 유지해야 함").
4. 뷰 정의 (View): 매칭된 구조를 대체하거나 주변에 표시할 사용자 인터페이스 (UI) 를 정의합니다.
5. 상호작용 (Interactions): UI 에서 발생하는 사용자 입력을 프로그램 구조 변경으로 변환하는 콜백을 정의합니다.

기술적 구현 메커니즘

• 구조적 Diffing 및 트랜잭션: 사용자가 텍스트를 편집하면, HybridSE 는 기존 파싱 트리와 새 파싱 트리를 비교하는 **구조적 Diffing 알고리즘 (truediff 기반)**을 사용하여 노드의 정체성 (Identity) 을 추적합니다.
  • 만약 편집이 도구의 제약 조건을 위반하면 (예: 유효하지 않은 문법 생성), 변경 사항이 즉시 트리에는 적용되지 않고 **대기 목록 (Pending Changes)**에 저장됩니다.
  • 시스템은 사용자에게 유효하지 않은 상태임을 알리고, 사용자가 편집을 계속하여 제약 조건이 다시 만족되거나, 강제로 적용/취소할 때까지 기다립니다. 이를 통해 도구가 사라지거나 불안정해지는 것을 방지합니다.
• 프래그먼트 (Fragments): 도구 UI 내부에 소스 코드의 특정 범위만 표시하는 완전한 편집기 (Fragment) 를 중첩할 수 있습니다. 프래그먼트는 들여쓰기 (Indentation) 를 정규화하고, 텍스트와 구조 간의 매핑을 자동으로 처리하여 중첩 편집의 복잡성을 해결합니다.
• 구조 인식 편집 API: 도구 빌더는 문자열로 구조를 수정할 수 있는 API 를 제공합니다. (예: node.insert(), node.replaceWith()). 이 API 는 언어 문법 (괄호, 구분자, 이스케이프 규칙 등) 을 자동으로 처리하여 유효한 소스 코드를 생성합니다.
• 동적 정보 매핑: 소스 코드 재작성 (Source Code Rewriting) 기법을 사용하여 특정 노드의 런타임 값을 수집하고 이를 도구 UI 에 표시합니다.

3. 주요 기여 (Key Contributions)

1. 하이브리드 편집 모델 제안: 텍스트 기반 편집기의 친숙함과 구조적 편집기의 강력한 보장을 결합한 새로운 패러다임을 제시했습니다.
2. 코드 중심 도구 개발 프레임워크: 도구 빌더가 구조 추적, 중첩 편집, 구조적 접근이라는 3 가지 난제를 직접 해결할 필요 없이, 선언적 방식으로 도구를 만들 수 있는 프레임워크를 제공합니다.
3. 구현 및 사례 연구:
   • CodeMirror v6, Lively 4, Squeak/Smalltalk에 대한 참조 구현을 개발했습니다.
   • 실제 사례:
     • Watch Tool: 표현식 주위에 런타임 값을 실시간으로 보여주는 도구.
     • SQL 편집기: JavaScript 문자열 내에 중첩된 SQL 코드를 별도의 편집기로 편집 가능하게 함 (이스케이프 처리 자동화).
     • 구조적 코드 브라우저: 파일 전체를 정의 단위로 분할하여 트리 형태로 탐색 및 편집 가능한 브라우저.
     • Livelits 재현: 슬라이더, 컬러 피커 등 동적 UI 컴포넌트를 소스 코드에 직접 매핑.

4. 결과 (Results)

• 기술적 타당성: CodeMirror, Lively 4, Squeak 등 다양한 에디터 환경에서 HybridSE 가 성공적으로 구현 및 작동함을 증명했습니다.
• 도구 개발 효율성: 사례 연구에서 보듯, 복잡한 구조 추적 로직을 HybridSE 가 처리함으로써 도구 빌더는 도구의 비즈니스 로직 (뷰 및 상호작용) 에만 집중할 수 있게 되었습니다. (예: SQL 중첩 도구는 17 줄의 코드로 구현 가능).
• 사용자 경험: 사용자는 기존 텍스트 편집기의 동작 방식을 유지하면서도, 도구가 코드와 밀접하게 통합된 새로운 기능을 경험할 수 있었습니다.
• 유연성: 언어에 독립적이며, 파싱 트리만 생성 가능한 언어라면 적용 가능합니다.

5. 의의 및 의의 (Significance)

• 도구 생태계 확장: 기존 텍스트 기반 에디터 생태계를 유지하면서, 구조적 편집기의 장점을 활용할 수 있게 되어 더 풍부하고 강력한 개발 도구 (코드 중심 도구) 의 개발을 촉진합니다.
• 지속 가능성: 도구 마커가 소스 코드 내의 유효한 표현식으로 존재하므로 (주석이나 별도 파일이 아님), 버전 관리 시스템 (Git 등) 과 기존 언어 지원 툴과 호환됩니다.
• 미래 지향적 접근: IDE 의 진화 방향을 제시하며, 텍스트와 구조의 이분법을 넘어선 통합된 개발 환경을 위한 기초를 마련했습니다.

결론적으로, HybridSE 는 텍스트 편집기의 익숙함과 구조적 편집기의 안정성을 모두 갖춘 하이브리드 접근법을 통해, 프로그래밍 도구 개발의 장벽을 낮추고 사용자 경험을 혁신적으로 개선할 수 있는 실용적인 솔루션을 제시합니다.