문제 / 동기
수학 공식이 많은 게시글을 편집할 때, 마크다운 작성기에서 렌더링된 수식의 정확한 소스 위치를 찾는 것이 종종 어렵습니다.
인라인 $…$ 식이 많거나 $$…$$ 디스플레이 블록이 여러 개인 긴 게시글에서는 워크플로가 다음과 같이 됩니다:
미리보기에서 오류 발견 → 원본 마크다운을 수동으로 탐색 → 수정 → 미리보기 재확인
이 과정은 작은 수정(빼기 부호 누락, 잘못된 인덱스, 간격 조정 등)에서 특히 번거로우며, 게시글이 길어질수록 더 불편해집니다.
제안하는 동작
작성기에서:
- 미리보기 영역에서 렌더링된 요소를 클릭하거나 강조하면:
- 원본 마크다운 편집기가 해당 소스로 스크롤되고,
- 해당 요소를 생성한 소스 텍스트 내부에 커서가 위치(또는 선택)되어야 합니다.
이 기능은 특히 다음 요소들에 잘 작동할 것입니다:
• 수학 (…, $$…$$)
• 인용문
• 목록
• 링크
• 기타 렌더링된 요소
수학이 가장 설득력 있는 사용 사례이지만, 이 동작은 전반적으로 유용할 것입니다.
스크롤 동기화와 어떻게 다른가
이것은 타이핑 중 동기화된 스크롤에 관한 것이 아닙니다.
LaTeX 편집기의 SyncTeX와 유사한 개념으로, 미리보기 → 소스 점프입니다:
“이 렌더링된 요소를 보고 있는데, 어디서 왔는지 보여주세요.”
가능한 구현 방향 (고수준)
렌더링(cooking) 과정에서 출력 노드에 가벼운 소스 매핑 메타데이터(예: data-sourcepos="start:end" 또는 유사한 것)를 포함할 수 있습니다.
작성기 미리보기에서:
- 클릭/선택 시, 소스 위치 메타데이터가 있는 가장 가까운 노드로 DOM을 상향 탐색합니다.
- 기존 작성기 API를 사용하여 원본 편집기의 선택 범위를 설정하고 해당 위치로 스크롤합니다.
이러한 소스 매핑은 개념적으로 CommonMark 도구에서 이미 존재하며, 특히 수학 블록은 이미 개별적으로 토큰화되므로 자연스러운 후보입니다.
왜 이 기능이 가치 있는가
- 수학이 많은 콘텐츠에 대한 훨씬 빠른 반복 작업
- 긴 기술적 게시글 편집 시 인지 부하 감소
- 미리보기 영역이 수동적인 것이 아닌 진정한 인터랙티브 요소가 됨
- 수학 외 다른 렌더링된 요소로 잘 확장 가능
상호작용을 더 잘 설명하는 데 도움이 된다면 짧은 GIF를 만들어 보겠습니다.