"어드민스튜디오" 웹 에디터 설계하기: 스키마 기반 렌더링, 데이터 연동과 인프라까지 #우아콘2025 #우아한형제들

컨퍼런스

"어드민스튜디오" 웹 에디터 설계하기: 스키마 기반 렌더링, 데이터 연동과 인프라까지 #우아콘2025 #우아한형제들

우아콘 2025 우아한형제들 · YouTube

AI 핵심 요약

내부 어드민은 개발 우선순위가 낮아 사용성이 제각각이고 유지보수와 보안 대응에도 사각지대가 생겼다. 이를 개선하기 위해 JSON 기반 Studio DSL로 어드민을 정의하고, 블록 렌더러가 API 데이터와 이벤트 핸들러를 연결해 화면으로 변환하는 웹 에디터를 만들었다. 편집 화면은 렌더링 레이어와 인터랙션 레이어로 분리했으며, Zustand 기반 데이터 관리와 IndexedDB 임시 저장, OpenAPI 파싱·검증·DSL 변환 파이프라인, 콘텐츠 해시 기반 버전 관리와 CloudFront 대체 도메인을 적용했다. 그 결과 개발자 도움 없이 어드민을 빠르게 만들 수 있는 수준에 도달했으며, 표준화된 정의와 모듈 분리가 유지보수성과 확장성의 기반이 된다는 점을 공유했다.

편집 데이터와 실행 코드를 분리하는 DSL을 두면 컴포넌트 구현을 바꿔도 기존 어드민 정의를 유지할 수 있다.
에디터의 편집 UI는 실제 페이지 렌더링과 분리하고, 위치 정보는 ResizeObserver 계열의 관찰과 캐시로 공유한다.
모듈 간 직접 참조를 줄이려면 이벤트 버스로 변경 이벤트를 전달하고, 상태는 선택적 구독으로 리렌더링 범위를 제한한다.
API 연동을 자동화하려면 OpenAPI 스펙을 입력 규약으로 삼고 파싱·검증·DSL 변환 단계를 명확히 나눈다.
임시 저장소는 데이터 크기와 동시 편집 요구를 고려해 선택하고, 저장소가 바뀔 가능성에는 어댑터 계층으로 대비한다.

소개

[세션 설명] 웹앱 에디터라는 복잡한 서비스를 구축하며 마주한 다양한 문제와 해결 과정을 공유합니다. Definition-to-Component 해석기, 인터랙티브 캔버스 레이어, 전역 데이터 관리, 스펙이 다양한 API의 손쉬운 연동, 임시 저장과 미리 보기, 그리고 배포 인프라까지. 복잡성을 넘나들며 쌓은 실전 설계 인사이트를 나눕니다. [발표자 소개] 김요욱(프런트엔드 개발자), 이재원(프런트엔드 개발자)

비슷한 학습 자료

컨퍼런스 우아콘 2025

진화하는 스트리밍 플랫폼: 견고함을 향한 여정과 인사이트 #우아콘2025 #우아한형제들

컨퍼런스 우아콘 2025

[세션 설명] 우아한형제들의 실시간 데이터 파이프라인은 비즈니스 성장과 함께 끊임없이 진화해왔습니다. 처음에는 단순한 데이터 파이프라인에 불과했지만, 지금은 수많은 기술적 도전과 극복을 거쳐 견고한 스트리밍 플랫폼으로 자리잡았습니다. 그 과정에서 얻은 실패와 성공의 기록을 바탕으로, 안정적이고 확장 가능한 시스템을 만드는 실질적인 노하우와 인사이트를 전합니다. [발표자 소개] 김민호(데이터 엔지니어)

데이터베이스 데브옵스 · 인프라

컨퍼런스 우아콘 2025

똑같아 보이는데 다르다고? 큐레이션 중복 개발 탈출기 #우아콘2025 #우아한형제들

컨퍼런스 우아콘 2025

[세션 설명] 배달의민족에는 고객의 선택을 돕는 수많은 큐레이션들이 있습니다. 여러 화면에 노출하기 위하여 지면별로 개발을 진행하면서 발생했던 문제들과 이를 하나의 통합 플랫폼으로 발전시킨 실제 경험을 공유합니다. 메인홈, 검색결과 등 주요 지면에 성공적으로 적용하여 개발 효율성을 크게 향상시킨 구체적인 사례와 함께, 기술과 조직 문화가 함께 변화한 생생한 이야기를 들려드립니다. [발표자 소개] 강미경(PM), 이화영(안드로이드 개발자)

백엔드

컨퍼런스 우아콘 2025

같은 시간, 더 나은 디자인을 할 수 있는 방법 #우아콘2025 #우아한형제들

컨퍼런스 우아콘 2025

[세션 설명] 본 세션에서는 배달의민족 DesignOps를 소개하고, 실무에서 활용 중인 생산성 향상 도구 제작 경험을 공유합니다. 원클릭으로 데이터를 시안에 반영하는 방법과 디자인 QA 프로세스 효율화라는 두 가지 사례(or 주제)를 중심으로, 제작 과정과 이를 통해 얻은 인사이트를 소개합니다. [발표자 소개] 이재희(프런트엔드 개발자), 최동빈(프로덕트 디자이너)

프론트엔드 UI/UX 로드맵 3개에 담김

컨퍼런스 우아콘 2023

낯선 서드파티와의 동행: 믿을 만한 배민커넥트 서버 구축하기 #우아콘2023 #우아한형제들

컨퍼런스 우아콘 2023

[WOOWACON2023 세션 다시보기] 👉 세션 설명 배민커넥트앱은 라이더의 안전한 운행을 위해 시간제보험, 정산, 본인인증, 실명확인, 계좌검증, 운전면허검증 등 다양한 서드파티와 함께 서비스를 만들어나가고 있어요. 잘 만든 서비스도 에러가 발생하기 마련인데, 낯선 서비스를 100% 믿는 것이란 어려운 일이죠. 그래서 우리는 서드파티 서비스를 더 꼼꼼하게 살펴보기로 했어요. 다양한 파트너와 함께 믿을 수 있는 서비스를 만드는 과정을 함께 알아가 볼까요?ㅤ ㅤ 👉 발표자 소개 라이더플랫폼팀 김형준 배민커넥트앱의 서버를 개발하고 있는 백엔드 개발자입니다. 시간제 보험, 정산, 본인 인증, 실명 확인, 운전면허 등 다양한 서드 파티와 함께 안정적인 서비스를 만들고 있습니다. 라이더플랫폼팀 김도원 서버 개발 일꾼입니다. 항상 즐겁게 개발하고 있습니다. 👍 추천 대상 - 3rd Party를 사용해봤거나 개념에 대해 아는 개발자 - 시스템 안정성에 고민이 많은 개발자 🙋...

백엔드

컨퍼런스 우아콘 2021

배민은 개발자 없이 웹앱을 만듭니다 #우아콘2021 #셋째날_꿈꾸는우아한형제들

컨퍼런스 우아콘 2021

코딩 없이 누구나 쉽게 웹앱을 만들 수는 없을까? 그런 고민에서 시작한 사내 프로젝트 '만다오'. 배민은 어떻게 개발자 없이 웹앱을 만들 수 있게 되었는지 그 기능을 중심으로 소개합니다. [발표자 소개] 장해민, 웹프론트개발그룹 더 아름답고 유용한 소프트웨어를 만들기 위해 끊임없이 고민하고 시도합니다.

웹 개발 프론트엔드

컨퍼런스 FEConf 2025 B트랙

FEConf 2025 [B6] 그리드 기반 웹 에디터 / 빌더 구현기

컨퍼런스 FEConf 2025 B트랙

FEConf 2025 2025.8.23 11:00 ~ 17:40 세종대학교 광개토관 컨벤션센터 TRACK B-6 그리드 기반 웹 에디터 / 빌더 구현기 이선협 | 마플코퍼레이션 그리드 기반 에디터는 웹에 최적화된 자유도를 가진 에디터입니다. 이런 장점을 기반으로 노코드 웹사이트 제작, 사용자 정의 대시보드 등 다양한 제품에서 사용할 수 있습니다. 대표적으로 Squarespace, 큐샵과 같은 서비스에서도 사용하고 있습니다. 본 발표에선 그리드 기반 에디터에 대한 소개와 구현 전략, 구현 시 주의할 점에 대해 다룹니다.

웹 개발 프론트엔드