![FEConf 2025 [B6] 그리드 기반 웹 에디터 / 빌더 구현기](https://i.ytimg.com/vi/capnMvoFN04/maxresdefault.jpg)
FEConf 2025 [B6] 그리드 기반 웹 에디터 / 빌더 구현기
FEConf 2025 B트랙 · YouTube
AI 핵심 요약
웹사이트 빌더를 짧은 기간에 구현해야 했던 상황에서, 자유도는 높지만 웹 제작에 복잡한 포지션 기반 방식 대신 직관적인 그리드 기반 에디터를 선택했다. CSS Grid로 레이아웃을 표현하고, 블록과 그리드 속성을 JSON 트리 데이터로 모델링해 렌더러가 화면을 구성하도록 설계했다. UI 이벤트와 액션 로직을 분리하고 드래그 중에는 프리뷰를, 완료 시에는 트랜잭션 단위의 데이터 변경을 적용했으며, 규칙을 명확히 보여주는 UI와 확장 가능한 블록 구조도 강조했다. 구현 과정에서는 사용자 입력 보안, 자동 저장 용량과 전송 크기, 동시 편집 충돌을 미리 고려해야 하며, 설계와 제약을 구체화하면 바이브 코딩으로 초기 구현을 시작할 수도 있다고 설명했다.
- CSS Grid의 행·열과 배치 속성을 활용하면 좌표 계산을 직접 구현하지 않고도 블록 레이아웃을 구성할 수 있다.
- UI 이벤트 처리와 에디터의 데이터·액션 로직을 분리하고, 드래그 중에는 프리뷰 상태를 보여준 뒤 완료 시점에 데이터를 갱신한다.
- 여러 명령을 트랜잭션으로 묶으면 일부 명령이 실패했을 때 전체를 롤백할 수 있고, 실행 취소·다시 실행도 설계하기 쉽다.
- 이동 가능 영역과 규칙 위반 여부를 프리뷰·상태 표시·애니메이션으로 드러내면 사용자가 편집 결과를 예측하기 쉽다.
- 사용자 입력과 임시 저장 데이터는 XSS, 저장 용량, 요청 크기 제한, 동시 편집 충돌을 고려해 검증하고 관리해야 한다.
소개
FEConf 2025 2025.8.23 11:00 ~ 17:40 세종대학교 광개토관 컨벤션센터 TRACK B-6 그리드 기반 웹 에디터 / 빌더 구현기 이선협 | 마플코퍼레이션 그리드 기반 에디터는 웹에 최적화된 자유도를 가진 에디터입니다. 이런 장점을 기반으로 노코드 웹사이트 제작, 사용자 정의 대시보드 등 다양한 제품에서 사용할 수 있습니다. 대표적으로 Squarespace, 큐샵과 같은 서비스에서도 사용하고 있습니다. 본 발표에선 그리드 기반 에디터에 대한 소개와 구현 전략, 구현 시 주의할 점에 대해 다룹니다.
비슷한 학습 자료
컨퍼런스 if kakao
웹 텍스트 에디터 개발에 필요한 고민과 신규 에디터 소개 (박민규 Eliot)
컨퍼런스 if kakao
[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
FE개발 리드가 말하는 웹에디터(1)
컨퍼런스 FEConf 2025 A트랙
FEConf 2025 [A4] 완전한 ZERO COST CSS-IN-JS, Devup-UI
컨퍼런스 FEConf 2025 A트랙
FEConf 2025 2025.8.23 11:00 ~ 17:40 세종대학교 광개토관 컨벤션센터 TRACK A-4 완전한 ZERO COST CSS-IN-JS, Devup-UI 오정민 | ㈜데브파이브 정말 티끌 하나도 코스트가 없는 CSS-in-JS 라이브러리 Devup-UI! 그러면서 반응형, 선택자, 테마까지 많은 기능을 제공하는 Devup-UI는 어떻게 이런 성능과 기능들을 모두 제공할 수 있을까? Next.js 의 서버컴포넌트 도입으로 하락세를 겪고 있는 CSS-in-JS 라이브러리에 대한 완벽한 대안기능 구현에 대한 아이디어부터 Rust와 웹 어셈블리를 통하여 개발하게 된 개발기 그리고 실제 작동까지! 어떤 라이브러리 보다 효율적이고(심지어 Tailwind CSS보다도!) 성능 이슈가 전혀 없는 완벽한 해결법을 향한 여정을 공유드립니다.
웹 개발 프론트엔드
컨퍼런스 FEConf 2025 B트랙
FEConf 2025 [B3] 중요하지만 긴급하지 않은 일, 그럼에도 계획해야 하는 웹 접근성
컨퍼런스 FEConf 2025 B트랙
FEConf 2025 2025.8.23 11:00 ~ 17:40 세종대학교 광개토관 컨벤션센터 TRACK B-3 중요하지만 긴급하지 않은 일, 그럼에도 계획해야 하는 웹 접근성 김무훈 | A11YKR 커뮤니티 모든 사람을 위한 웹 접근성 지원과 설계, 제대로 알아봅시다. 웹 프런트엔드 서비스에서 접근성 지원은 여전히 제도적으로 의무화된 항공사 웹 서비스와 정부/공공기관 외에 모범 사례가 흔치 않고, 확실한 정답이 정해져 있지 않은 분야입니다. - 혹시 웹 접근성이 장애 사용자만을 위한 특수한 경험이라고 오해하고 계신가요? 웹의 본연의 힘은 보편성에 있습니다. 장애와 관계없이 모든 사람의 콘텐츠 접근은 필수적이라고 생각합니다. - 웹 접근성을 지원하기 위한 UI 컴포넌트 설계에 막연함을 느끼시나요? 웹 접근성 표준을 준수하면서, 일관된 UI 제어 경험을 어떻게 설계할 수 있는지 제가 고려했던 사항을 소개합니다. 따라서 아래 명제에 대한 발표자의 생각이 궁금하시면 꼭 보러 와주세...
프론트엔드 UI/UX
컨퍼런스 FEConf 2025 B트랙
FEConf 2025 [B4] 음성 인터페이스 개발에서 DX 향상하기: 모델 비교부터 직관적인 인터페이스 설계
컨퍼런스 FEConf 2025 B트랙
FEConf 2025 2025.8.23 11:00 ~ 17:40 세종대학교 광개토관 컨벤션센터 TRACK B-4 음성 인터페이스 개발에서 DX 향상하기: 모델 비교부터 직관적인 인터페이스 설계 김민수 | DevCra 음성 인식, 합성의 최근 기술 동향을 살펴보고 종합 핵심 키워드를 파악합니다. 음성 인터페이스를 만들기 위한 요구사항 분석 및 기술 검토부터 어떻게 구현할 수 있을지 고민해보고 Web API의 한계, 다양한 클라우드 서비스 모델 중 적합한 모델을 선택하기 위해 디자인 패턴을 활용했던 설계를 소개합니다. 그리고 좋은 사용자 경험을 제공하기 위해 에러 처리, 사용성을 고려한 엔지니어링, 유틸리티 등 경험을 공유합니다.
프론트엔드 UI/UX