Velopers
모든 블로그
우아한 형제들

우아한 형제들

도메인techblog.woowahan.com
주요 카테고리 AI · 백엔드 · 프론트엔드

활동 요약

대표 인기 포스트하네스 엔지니어링(harness engineering)으로 팀 맞춤형 AI 환경 구축하기471 조회
최근 30일
6개
평균 조회
64
누적 조회
7,177
전체 글
113개
마지막 발행
2026. 11. 13.
블로그 방문

우아한 형제들 기술 블로그 글 (22)

프론트엔드

아이폰 카메라로 B마트 상품을 찾는다고?

배민 앱에 Apple Visual Intelligence 기반 B마트 이미지 검색을 App Intents로 연동했습니다. 응답 지연과 시스템 제약에 대비해 압축·타임아웃·폴백 전략을 적용했습니다.

#iOS#Apple Intelligence#Visual Intelligence
4000

프론트엔드

critical-script, 배달의민족 웹뷰 로딩 성능을 30% 개선한 인라인 스크립트 로딩 전략 이야기

인라인 스크립트로 초기 API 요청을 번들 로딩과 병렬화해 웹뷰 LCP를 37% 개선했습니다. Vite 플러그인으로 타입 공유, 페이지 인접 배치, 스크립트 크기 제한을 지원했습니다.

#React#Next.js#Vite
5800

프론트엔드

플랫폼 행성에 떨어진 서비스 개발자

전시어드민의 사용자 행동 로그를 구축해 공통 컴포넌트와 개선 과제의 우선순위를 정했습니다. AI·MCP·Playwright로 분석과 QA를 자동화해 운영 효율과 검증 안정성을 높였습니다.

#BigQuery#MCP#Claude
5200

프론트엔드

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

전자계약서 화면을 AI와 함께 다시 설계하고, 뷰·폼·스토어로 나눠 구현한 과정을 소개했습니다. AI는 반복 구현을 맡기고 사람은 경계 설정과 명세 승인, 최종 품질 확인을 담당했습니다.

#React#디자인 시스템#react-hook-form
1900

프론트엔드

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

네트워크 복구 후에도 React.lazy 재시도가 막히는 이유를 모듈 맵 캐시로 설명했습니다. 정적 import 전환과 사전 로딩으로 오류를 해결했습니다.

#React#Vite#SPA
1300

프론트엔드

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

커스텀 ESLint 플러그인으로 다국어 번역 누락과 오역을 탐지해 해결했습니다. 사람과 AI 검수의 한계를 보완하기 위해 린트와 AI를 나눠 적용했습니다.

#ESLint#i18next#react-i18next
4900

프론트엔드

pnpm 모노레포에서 React 19 마이그레이션하기: 숨겨진 호이스팅 레이어가 만든 타입 충돌 트러블슈팅

pnpm 모노레포에서 React 18과 19를 공존시키며 발생한 타입 충돌을 트러블슈팅했습니다. 호이스팅 차단과 packageExtensions 주입으로 잘못된 React 타입 참조를 해결했습니다.

#pnpm#React#TypeScript
13200

프론트엔드

끊김 없는 사용 경험을 위하여 : 카카오톡 선물함 속 교환권을 배달의민족 주문으로 연결한 여정

카카오톡 선물 교환권을 배민 주문에 연결하는 과정과 바코드 인식 문제를 다뤘습니다. 노란 테두리 이미지로 인한 이진화 실패를 분석하고 직접 이진화로 개선했습니다.

#바코드#JavaScript#zxing.js
3300

프론트엔드

배달의민족 주문접수 채널에 Flutter를 도입하며 고민한 것

Flutter와 Clean Architecture로 주문접수 채널의 멀티 플랫폼 확장성과 유지보수성을 높인 사례를 소개했습니다. 또한 웹뷰 기반 전환으로 배포 속도와 긴급 대응력을 개선하려는 방향을 설명했습니다.

#Flutter#Clean Architecture#BLoC
6800

프론트엔드

우리는 코드처럼 문화도 리팩토링한다

커머프팀이 조직 구조와 소통, 기록 방식을 함께 리팩토링한 과정을 소개했습니다. 경계 없는 파트, 불판, 코질라, ADR로 협업 효율을 높였습니다.

#GitLab#Slack#Jira
9700

프론트엔드

잃어버린 접근성을 찾아서

상품 상세 페이지의 접근성을 스크린 리더 기준으로 점검해 탐색 단위, 텍스트 발화, 버튼 역할을 개선했습니다. 구매하기까지 스와이프 횟수를 20회 미만으로 줄이고 실제 사용 경험을 크게 높였습니다.

#접근성#스크린 리더#ARIA
4800

프론트엔드

우리 팀엔 자바스크립트 상차만 하는 프런트엔드가 있었다

프런트엔드의 index.html을 백엔드에서 분리해 독립 배포 구조로 전환했습니다. S3, CloudFront, Lambda@Edge를 활용해 성능과 운영 효율을 함께 개선했습니다.

#React#TypeScript#webpack
5100

프론트엔드

우아한 디버깅 툴 2부: 좀 더 편하게 일하기 위한 개선들

QA 재현과 기록, 티켓 전달을 자동화해 업무 흐름을 단방향으로 개선했습니다. rrweb 세션 리플레이와 어드민, Network Rewrite로 이슈 처리 효율을 높였습니다.

#QA#rrweb#Next.js
5000

프론트엔드

우아한 디버깅 툴 1부: 웹뷰/웹페이지 원격으로 디버깅하기

웹뷰·웹페이지 이슈를 당시 DevTools 상태 그대로 원격 재현하는 디버깅 툴을 소개했습니다. Chrome DevTools Protocol과 WebSocket으로 기록·재생하는 구조를 설명했습니다.

#Chrome DevTools Protocol#webview#websocket
5000

프론트엔드

JavaScript Proxy를 활용한 상태 추적 도구 개발기

JavaScript Proxy로 상태 객체의 변경을 가로채 추적 도구를 만들었습니다. Redux 도입 없이도 디버깅 속도와 팀 생산성을 크게 높였습니다.

#JavaScript#Proxy#DevTools
6300

프론트엔드

타입 안전한 API 모킹으로 프론트엔드 생산성 높이기

JSON 모킹의 스펙 변경 대응 한계를 줄이기 위해 TypeScript 기반 타입 안전 모킹을 도입했습니다. 공통 베이스 파일과 시나리오 변형 구조로 유지보수성과 생산성을 높였습니다.

#TypeScript#MSW#immer
4200

프론트엔드

디자인 생산성을 높이는 피그마 플러그인을 만들어보자 2부: 개발 편

피그마 플러그인으로 실제 데이터를 디자인 시안에 적용하는 구조와 구현 과정을 정리했습니다. 샌드박스, CORS, 라우팅 제약을 우회한 방법과 로그 수집 개선 사례도 소개했습니다.

#Figma#React#TypeScript
9000

프론트엔드

디자인 생산성을 높이는 피그마 플러그인을 만들어보자 1부: 디자인 편

UT용 프로토타입 데이터 입력의 반복 작업과 리소스 탐색 비효율을 줄이기 위해 피그마 플러그인 데이터브릿지를 만들었습니다. 실제 데이터 적용과 기능 단순화로 작업 시간을 크게 줄이고 인터뷰 몰입도를 높였습니다.

#Figma#UI/UX#LLM
9200