웹 텍스트 에디터 개발에 필요한 고민과 신규 에디터 소개 (박민규 Eliot)
if kakao 카카오 · YouTube
AI 핵심 요약
브라우저의 편집 API는 동작이 일관되지 않고 문서 제어권도 충분히 제공하지 않아, 개행·붙여넣기·IME 같은 기능을 안정적으로 구현하기 어렵다. 카카오의 신규 웹 에디터는 여러 서비스에서 재사용할 수 있도록 자체 코어를 만들고, 플러그인·이벤트·커맨드 구조와 모델·DOM 분리로 기능 확장과 브라우저 동작 처리를 나눴다. 데이터 변환에는 토큰화·파싱·생성 단계와 컨버터 체이닝을 적용하고, 원자적 모델 변경과 배치 기반 히스토리로 Undo/Redo 및 비동기 이미지 변경을 다뤘다. 에디터 개발에는 정답이 없으므로 구조뿐 아니라 테스트·문서화·코드 리뷰를 통해 유지보수 비용을 관리해야 하며, 향후 Input Events와 EditContext 같은 웹 API 표준이 개선되면 구현 부담이 줄 수 있다는 점을 짚었다.
- 브라우저 이벤트를 그대로 기능 코드에 노출하기보다 이벤트 매니저에서 저수준 이벤트를 에디터의 고수준 이벤트로 변환하세요.
- 모델 변경은 원자적 단위로 기록하고 배치로 묶으면 Undo/Redo와 변경 이력 관리가 단순해집니다.
- IME 입력 중 발생하는 DOM 변형은 임시 버퍼 모델로 흡수하고, 조합이 끝난 뒤 실제 입력으로 반영할 수 있습니다.
- 붙여넣기와 문서 포맷 변환은 토큰화·파싱·생성 단계를 분리하고, 컨버터 체이닝으로 확장성을 확보하세요.
- 테스트 유틸과 문서화, 코드 리뷰의 공통 용어는 개인에게 집중되는 지식과 장기 유지보수 비용을 줄이는 데 도움이 됩니다.
소개
[2024.04.11. 제5회 Kakao Tech Meet 발표] 웹 텍스트 에디터 개발의 근본적인 문제를 정의하고 제시합니다. 카카오에서 신규 에디터를 개발하게 된 배경과 사용 목적을 소개합니다. 에디터 개발 시 마주한 다양한 챌린지를 어떻게 해결하였는지 공유합니다. 마지막으로 웹 텍스트 에디터 개발 관련 논의되고 있는 미래의 웹 API 스펙을 간략히 소개합니다. 툴체인을 넘어 근본적인 문제 해결에 관심 있는 프론트엔드 개발자들에게 추천합니다. #kakaotechmeet #TextEditor #IME #FrontendArchitecture 발표자: 박민규(eliot.p) 로컬FE에서 확장형 웹 텍스트 에디터 개발을 하고 있습니다. 기술 이전에 기술 윤리와 같은 철학적 사유에도 관심이 많습니다. 🔥발표자 GitHub: https://github.com/vlwkaos 🔥발표자 블로그: https://vlwkaos.netlify.app/ 💬 발표자 인터뷰와 비하인드 보...
비슷한 학습 자료
컨퍼런스 if kakao
라이브러리 버전관리 #npm #cdn
컨퍼런스 if kakao
Chrome Devtools를 활용하여 나만의 웹뷰 디버깅 환경 만들기 (조민지 Teenie)
컨퍼런스 if kakao
[2024.04.11. 제5회 Kakao Tech Meet 발표] 웹뷰 서비스를 개발하는 과정에서 겪었던 불편함과, 이를 해결하기 위해 새로운 웹뷰 디버깅 환경을 구축해 나간 이야기를 소개합니다. ChromeDevTools의 오픈소스인 devtools-frontend와 devtools-protocol을 활용하여 익숙하면서도 더욱 편리하게 웹뷰 디버깅을 수행할 수 있는 환경을 만든 과정을 공유드립니다. 웹뷰와 같이 디버깅을 하기 복잡한 환경에서 서비스를 개발하는 프론트엔드 개발자들에게 추천합니다. #kakaotechmeet #webview #debugging #ChromeDevTools #websocket 발표자: 조민지(teenie.jo) 톡유저서비스FE의 티니입니다! 잔여백신, 전자증명서, 전자문서 등 카카오톡 지갑의 다양한 웹뷰 서비스를 개발하고 있습니다 :) 💬 발표자 인터뷰와 비하인드 보러가기: https://tech.kakao.com/2024/04/29/techmee...
프론트엔드 개발 도구
컨퍼런스 if kakao
FE개발 리드가 말하는 웹에디터(2)
컨퍼런스 if kakao
FE개발 리드가 말하는 웹에디터(1)
컨퍼런스 if kakao
Preview Frontend @if(kakao)2022
컨퍼런스 if kakao
if(kakao)2022 컨퍼런스에서 Frontend 관련 기술 발표 트랙을 소개합니다. 01:28 1. MFA, 누구냐 너: 공통 플랫폼개발 파트의 MFA도입기 by 어호선(sun.kist) 카카오 공통플랫폼개발파트에서 프론트앤드 개발을 담당하고 있는 썬입니다. 01:58 2. 마이크로프론트엔드. 실무에 쓸만할까? by 김수찬(tony.chan) 카카오워크의 관리자 서비스를 개발하고 있습니다. 02:17 3. 웹 반응성 개선하기: Lighthouse Userflow를 사용한 웹 반응성 개선기 by 박은우(ethan.eunwu) 카카오 FE플랫폼팀에서 FE개발자를 위한 개발을 하는 에단입니다. 02:35 4. 카카오페이 프론트엔드 개발팀의 Client Side Rendering 환경 고도화 by 박병현(eric.dev) 카카오페이 FE인프라TF TF장 에릭입니다. 카카오페이 FE 서비스의 근간을 이루는 다양한 환경에 대한 고민을 하고 있습니다. 02:56 5. 광고 웹 ...
프론트엔드
컨퍼런스 if kakao
Preview Web+Mobile @if(kakao)2021
컨퍼런스 if kakao
if (kakao) 2021 컨퍼런스에서 Data 관련 기술 발표 세션을 소개합니다. 1. 이게 진짜 일 리 없어 : 초보 리더가 프로젝트에서 마주치는 어려운 상황들 @effie.seo 올해 6월에 카카오맵 매장관리 서비스를 오픈했습니다. 매장관리 프로젝트 진행 과정을 통해서 카카오맵 FrontEnd 개발자들은 어떻게 협업하는지, 프로젝트에서 마주쳤던 상황들을 대처 하기 위해서 초보 리더인 제가 동료들과 함께 고민하고 시도했던 과정에 대해서 공유해보고자 합니다 2. Next.js와 Typescript를 이용한 프론트엔드 개발기 @jaden.js @luffy.yeon Next.js를 사용한 서버사이드 랜더링, Next.js 환경 Typescript 포팅을 하며 겪은 경험 공유 3. 톡패스워드 크롬 익스텐션 개발기 @felix.lee 입사 후 처음으로 혼자 프로젝트를 설계하면서 고민했던 구조선택과 고민거리에 대한 공유 4. UI 테스트 경험기 @jay.choi 리팩토링에 대한...
프론트엔드 소프트웨어 테스트 애자일 · 협업