#frontend

배달의민족 전자계약서 화면 개편기: AI에게 맡긴 것과 사람이 챙긴 것

들어가며 전자계약서는 파트너(사장님)가 배달의민족을 처음 시작할 때 작성하는 전자문서입니다. 영업 담당자가 파트너와 함께 작성하고, 계약 내용을 바꿀 때도 같은 문서를 씁니다. 이 문서를 쓰는 작성 화면은 사업자 정보, 가게 정보, 광고 정보 같은 섹션이 모여 계약서 한 장을 이루는 큰 폼입니다. 2026년 4월부터 6월까지 이 작성 화면을 개편했습니다.

CEOS 2주차 회고: Vanilla Memo를 React로 리팩토링하며 달라진 것들

2주차 과제는 1주차에 Vanilla JS로 구현했던 메모 서비스를 React로 리팩토링하는 것이었다. 같은 기능과 디자인을 React로 옮기면서 단순히 문법만 바꾸는 데 그치지 않고, 상태를 기준으로 UI를 구성하고 컴포넌트의 책임을 나누는 방식을 고민해보고자 했다.

집 나간 네트워크는 돌아왔는데 React.lazy는 왜 안 돌아올까

들어가며 파트너(업주)님이 영업 내내 주문을 받는 배민주문접수 웹뷰를 개발하던 중 QA 과정에서 네트워크 OFF -> ON으로 변경 후 다른 화면으로 이동 시 오류 화면이 노출된다는 티켓을 전달받았습니다. 원인을 파악해 보니 브라우저가 모듈 로드 실패를 기억하고 있었고, 이는 버그가 아니라 HTML 스펙에 명시된 동작이었습니다. 더 곤란한 것은 프런트엔드

AI가 분석한 리서치 결과, 어떻게 만들고 전달할까요?

1. 들어가며 사용자경험분석팀에서는 리서치 업무를 지원하는 사내 서비스인 리서치 AI 도우미를 만들고 있어요. “배민클럽을 선택한 이유는 무엇인가요?”처럼 수천 명이 자유롭게 답한 설문응답을 이해하기 쉬운 카테고리로 분류해 보고서를 만들고, 사용성 테스트(UT, usability test) 녹취록을 요약해 분석 리포트를 만드는 기능을 제공합니다. 리서치 설

강경원· 8월 13일 · 2분 읽기

2026년을 대비한 프론트엔드 기술 스택 변화 예측 — 3가지 핵심 트렌드와 준비 방법

프론트엔드 기술 스택은 빠르게 변화하고 있다. 2026년을 대비하며 어떤 기술이 주목받을지, 그리고 이에 대한 준비 방법을 고민해볼 필요가 있다. 다음은 앞으로의 트렌드와 그에 맞는 준비 방법을 다뤄보겠다. 1. 컴포넌트 기반 아키텍처의 지속적인 확산 컴포넌트 기반 아키텍처는 이미 많은

[Clean Architecture 적용기 1편] 잘 돌아가는 토이 프로젝트, 왜 손대기 싫어졌나

시리즈: 토이 프로젝트에 Clean Architecture 입혀보기1편(이 글)

강경원· 8월 9일 · 1분 읽기

개발자가 놓치기 쉬운 웹 접근성 최소 세트

접근성은 "나중에 여유 되면"의 영역으로 밀리기 쉽다. 그런데 최소 세트만 지켜도 스크린리더 사용자뿐 아니라 키보드 유저, 저시력 유저, 그리고 검색엔진 까지 이득을 본다. 비용 대비 효과 순으로 정리한다. 1. 버튼과 링크를 구별하라 5분 페이지 이동 → <a , 동작 실행 → <bu

강경원· 8월 8일 · 2분 읽기

Tailwind 3년 운영, 유지보수가 무너지지 않는 규칙

Tailwind는 시작이 빠른 만큼 방치하면 클래스 수프가 된다. 3년 운영하면서 코드베이스가 무너지지 않게 지켜 준 규칙들이다. 1. 디자인 토큰을 theme에 박아라 text e0533d 같은 arbitrary 색상이 코드에 3번 이상 등장하면 토큰 승격 대상이다. 색을 바꾸는 리브

강경원· 8월 8일 · 2분 읽기

프론트엔드 에러 추적, 도구 없이 시작하는 법

Sentry를 붙이면 좋지만, 사이드 프로젝트나 초기 서비스라면 도구 없이도 에러 추적의 80%를 만들 수 있다. 핵심은 수집 창구를 하나로 모으는 것이다. 전역 핸들러 두 개면 시작된다 sendBeacon은 페이지 이탈 중에도 전송이 보장되고 응답을 기다리지 않는다. 에러 리포트에 정

Figma 디자인부터 React 구현까지, Relay+ 프론트엔드 개발기

Native 온보딩으로 릴레이 스터디 플랫폼 Relay+ 프로젝트에 참여했다. Figma로 직접 디자인한 페이지를 React + TypeScript로 구현하며 겪었던 과정과 문제 해결, 프로젝트를 통해 배운 점을 기록했다.

강경원· 8월 5일 · 1분 읽기

Next.js ISR 때문에 조회수가 멈춘 것처럼 보였다

DB엔 쌓이는데 화면은 그대로라면 캐시부터 의심하라. ISR 페이지에서 실시간 데이터만 클라이언트로 분리한 과정.

배포 없이 앱과 로컬 웹을 잇다

들어가며 배달의민족은 네이티브 앱과 웹으로 구성된 하이브리드 앱입니다. 배달의민족 앱을 열면 상단 탑바와 하단 탭바가 빠르게 반응하며 자연스럽게 전환되는 모습을 쉽게 확인할 수 있습니다. OS와 직접 상호작용하고 사용자의 입력에 즉각적으로 반응해야 하는 영역은 네이티브 앱이 맡습니다. 앱의 모든 화면을 네이티브로 구현할 필요는 없습니다. 빠르게 만들고 배포

강경원· 7월 31일 · 2분 읽기

TypeScript satisfies, as를 쓰기 전에

주석은 타입을 넓히고 as는 검사를 끈다. satisfies는 검사하면서 리터럴 추론을 지킨다 — 세 방식의 차이와 쓸 곳.

강경원· 7월 30일 · 1분 읽기

한글 입력에서 Enter가 두 번 눌리는 버그

한글 조합 중 Enter는 keydown을 두 번 발생시킨다. isComposing 체크 한 줄로 해결하는 한국어 서비스 필수 지식.

BFF 서버에 SSE를 도입한 이유: 전시 서버의 통신 구조 재설계

들어가며 배달의민족에서 음식을 주문할 때 카테고리를 누르면 만나는 화면, 바로 가게목록입니다. 사용자가 가게를 탐색하는 첫 관문이자, 가장 트래픽이 많은 지면 중 하나입니다. 이 글은 그 가게목록 지면의 통신 구조를 재설계한 이야기입니다. 클라이언트가 여러 서버에 각각 요청을 보내던 구조를 하나의 API로 통합하고(1지면 1API), 통합이 만들어낼 병목을

프론트엔드와 백엔드를 한 팀으로 합치면 어떤 일이 일어날까?

사람도 AI도 놓친 번역 누락, ESLint 플러그인을 만들어 해결하기

여는 글 대 AI의 시대를 맞이하며 배달의민족 앱에 다국어 지원의 바람이 불었습니다. AI의 빠른 번역 속도는 몇 년 동안 잊혀진 다국어 지원의 실현을 앞당겼고, B마트와 장보기쇼핑을 비롯한 커머스 서비스도 예외는 아니었습니다. 이에 맞춰 커머스 웹프론트에서는 한글 문구를 체계적으로 관리 및 번역하고자, 유명한 다국어 프레임워크 i18next와 react-

우아한공방의 새로운 동료, 시스템 맥락을 가진 챗봇서비스 개발기(feat. RAG)

AI로 생성한 이미지 들어가며 디자인시스템플랫폼팀은 코어(Core, 토큰/아이콘 과 같은 디자인 리소스, 베이스 컴포넌트 등 공통 기반을 정의하는 계층), 클레이(Clay, 코어 토큰을 기반으로 Base 컴포넌트에 테마를 적용해 사용 가능한 컴포넌트 라이브러리를 제공하는 계층), 몰드(Mold, Clay/Base컴포넌트를 기반으로 각 도메인/비즈니스 요구사

프롬프트 한 줄로 화면이 나오는 시대, ‘당근스러운 화면’을 만드는 법