Anthropic의 Claude 인터페이스를 위한 Tiptap 성능 개선

안녕하세요, Tiptap의 Philip입니다. 최근 저희는 Anthropic이 그들의 claude.ai 인터페이스에 저희의 오픈 소스 (open-source) 에디터를 사용하고 있다는 사실을 발견했습니다. 이 소식은 매우 기쁘지만, M3 MacBook Pro와 같은 고사양 하드웨어에서도 일부 성능 이슈가 발생하는 것을 확인했습니다. 저희는 그 원인을 파악했으며, 저희의 조사 결과와 해결책을 공유하고자 합니다.

개발자로서 저희는 복잡한 애플리케이션에 리치 텍스트 에디터 (rich text editor)를 통합할 때 발생하는 어려움을 잘 알고 있습니다. Claude의 인터페이스에서 느린 성능을 목격했을 때, 저희는 조사가 필요하다는 것을 직감했습니다.

저희의 시니어 엔지니어인 Nicholas (HN 사용자 이름: nickthesick)가 Chrome Dev Tools를 사용하여 구현 내용을 심층 분석했습니다. 그가 발견한 내용은 다음과 같습니다:

1. 에디터에서 키를 입력할 때마다 PromptInput 컴포넌트의 렌더링 (render)이 두 번 발생했습니다.

2. Dev tools 콘솔에 보고된 바와 같이, 동일한 이름을 가진 몇 가지 확장 기능 (extensions)이 있었습니다 (이는 확장 기능에 name 속성을 부여함으로써 해결할 수 있습니다).

3. 에디터가 업데이트될 때마다, 사용자가 프롬프트 (prompt)를 제출하기도 전에 에디터가 HTML에서 마크다운 (markdown)으로 변환됩니다.

이를 해결하는 방법은 다음과 같습니다:

• Tiptap 2.5의 최신 릴리스를 사용하면 에디터의 성능을 훨씬 더 높일 수 있습니다. 올바르게 통합된다면, 에디터의 초기 렌더링 (initial render)만 필요하며 키 입력 시 재렌더링 (re-render)은 발생하지 않아야 합니다. 더 자세한 정보와 예시는 다음 가이드를 참조하세요: https://tiptap.dev/docs/guides/performance#react-tiptap-editor-integration

• 에디터 콘텐츠를 제출할 때만 마크다운으로 변환하는 것을 고려해 보세요. 현재는 새로운 마크다운으로 setState를 수행해야 하기 때문에 추가적인 재렌더링 (re-render)을 유발하는 것으로 보입니다. 만약 이것이 불가능하다면, 이 작업은 React의 렌더링 사이클 (rendering cycle) 외부에서 이루어져야 하므로 ref 사용을 고려해 보세요.

• Tiptap 2.5 이전에는 useEditor를 호출하는 컴포넌트가 렌더링될 때마다 에디터를 완전히 재초기화(re-initialize)해야 했으나, 이제는 에디터 인스턴스(editor instance)를 재사용할 수 있습니다. 이로 인해 리렌더링 (re-renders)에 대한 민감도는 낮아졌지만, 매끄러운 타이핑 경험 (typing experience)을 보장하기 위해서는 여전히 리렌더링 횟수를 가능한 한 줄이는 것을 권장합니다.

이 내용을 공유하는 것은 비판하기 위함이 아니라 도움을 드리기 위함입니다. 저희 또한 Claude의 사용자이자 팬이며, Claude가 최상의 성능을 발휘하기를 바랍니다. 저희는 Tiptap 통합 (integrations)을 최적화하려는 동료 개발자들을 돕는 것을 언제나 환영합니다.

이러한 발견에 대한 여러분의 의견을 듣고 싶습니다. 유사한 문제를 겪은 적이 있으신가요? 공유해주실 다른 최적화 전략이 있으신가요? AI 인터페이스에서 리치 텍스트 편집 (rich text editing)을 위한 개발자 경험 (developer experience)을 어떻게 개선할 수 있을지 함께 논의해 봅시다.