안녕하세요, 웹 프론트엔드 개발자 이윤희입니다.

컬리N마트 서비스 런칭

• 컬리 홈(추천) 및 자주구매 페이지 개발 - 네이버 쇼핑 홈에 컬리 추천 모듈 제공, 사용자 맞춤형 서비스 구현
• CorePack 아키텍처 전면 개편 주도 - SSR 하이드레이트 대응, 빌더 패턴 적용, React Query 레이어 구축, 에러 처리 체계 수립
• 서비스 안정화 및 이슈 해결 - 브랜드 필터 정상화, 홈 섹션 미노출 이슈 해결로 신규 매출 채널 확보
• 2025년 9월 4일 서비스 정식 오픈

쇼핑 홈 전면 개편

• React Strict Mode 사이드 이펙트 해결 - 상태 관리 문제 완벽 해결
• AuthStore/CorePack 아키텍처 개선 - 첫 실행 시 auth 데이터 누락 문제 근본 해결, store 인스턴스 단일화로 메모리 최적화, 빌더 패턴 적용
• 크로스 브라우저 호환성 확보 - PC/Mobile/Pad, Safari 특이사항 처리
• 사용자 경험 개선 - 다크패턴 제거, 웹 접근성 강화
• 2025년 10월 27일 전면 개편 완료

N3R Harbor 마이그레이션

• N2C에서 N3R Harbor로의 인프라 전환 - 쇼핑라이브 파이프라인 변경, 새로운 인프라 구조(NFront → nginx → ELB → Ingress → Pod) 이해 및 적용
• 마이그레이션 프로세스 정립 - 파편화된 워크플로 및 파이프라인 연관성 분석, 권한 관리 체계 수립
• 기술적 이슈 해결 - LoadBalancer Pending 등 예상치 못한 문제 해결로 무중단 마이그레이션 달성

히스토리 복원 시스템 재설계

• 7개 모듈 전체 적용 - cup-responsive, display-hub, quick-commerce-module, kurly-module, fashion-home, panda-responsive, shopping-web
• 명시적 클릭 이벤트 기반 저장 및 pathname 기반 키 체계 구축
• BF Cache 대응 및 CSR/SSR 환경 통합 처리 - Safari, Chrome 등 모든 브라우저 호환, GlobalPersistManager 초기화 문제 해결
• API 호출 최적화 - 204 응답 캐싱 처리로 레이아웃 시프트 해결

CorePack 아키텍처 전면 개편

• SSR/CSR 환경 통합 처리 - Provider level에서 하이드레이트 대응
• 빌더 패턴 적용 - init → auth → vertical date → page date 순서 체계화
• React Query 레이어 구축 - prefetch/query/useQuery를 이용한 props drilling 제거, 모듈 독립성 확보
• 에러 처리 체계 구축 - 페이지 레벨 에러 핸들링 시스템 구축

상품카드 찜하기 기능 고도화

• 디바운스 기반 배치 처리 시스템 구축 - 150ms 딜레이, 최대 100개 ID 배치 처리로 API 호출 횟수 대폭 감소
• 메모리 효율성 개선 - 싱글톤 패턴 도입으로 전역 상태 제거
• 크로스 플랫폼 호환성 해결 - display-hub vs market-module 인터페이스 불일치 해결
• 코드 품질 개선 - 29개 파일 리팩터링으로 112줄 순감소 (83 additions, 195 deletions)

배민공통서비스웹프론트개발팀 직속 파트

• 우아한웤플로 - 서포트 업무 자동화 시스템 운영 및 개선, 클라우드 아틀라시안 환경 구축, 서포트웤플로 200건 돌파
• 백오피스 에디터 - DSL 기반 에디터 및 뷰어 개발, HTML 렌더러 및 인터렉션 레이어 구현, 사내 시스템 연동 자동화
• 배민애즈 어드민 - CRA → Vite 전환, npm → pnpm 전환, 상태관리 일원화(redux/zustand/context 제거), 사내 디자인시스템 적용

배민공통서비스웹프론트개발팀

• 우아한웤플로 프로젝트 리드 - 전사 생산성 도구 플랫폼 개발 및 운영
• 주요 성과 - 서포트웤플로 150개 이상 적용, 위키 자동 생성으로 매월 170~215회 반복 작업 절감, 코드리뷰 자동화로 MergeRequest 28,523건 처리
• 아키텍처 개선 - Next.js 전환, Module Federation 적용, 서버 6개→3개, DB 3개→1개 통합으로 운영 비용 절감
• 업무 프로세스 표준화 - 지라 티켓 관리 표준화(173개 프로젝트 적용), CI/CD 표준화, TIL 참여자 33명→60명 증가
• 기여자 확대 - 기여자 4명→17명 증가(디자이너, 기획자, 백엔드 포함), 프로덕트 통합(5개→1개)
• 외부 발표 - Slack Tour Seoul 2024 발표, 웹프론트엔드 그룹 밋업 발표(100명 이상 참석)

• 기술 도입 및 아키텍처 개선 - Module Federation Platform 적용, Next.js 전환, CI/CD 파이프라인 구축
• 운영 및 유지보수 - 프론트엔드 아키텍처 문서화, QA 이슈 해결, 기능 안정화 및 성능 개선
• 팀워크 및 협업 - 문서화 및 온보딩 지원, 디자이너/백엔드 협업 주도
• 기능 개발 - 사용자 경험 개선, 자동화 시스템 구축(온콜 알리미, 그라파나 알림, 서포트웤플로 등)
• 공통팀 - Module Federation Platform 개발, 팀 협업 환경 구축, 문서화 및 표준화
• 프론트 그룹 - 스터디 운영 및 학습 문화 조성, 우아한스펙트럼 개발 및 운영

주문/결제 파트

• 인증 만료 처리 방식 개선 - 팝업 동작 설계로 UX 개선, 스토어 기반 팝업으로 재사용성 향상, 코드 구조 개선
• 에러 안내문구 관리 정책 개선 - 장기적 개선 방향 수립, 팀 간 협업 체계 구축
• 통합 장바구니 프로젝트 - 회고를 통한 팀워크 개선, 스프린트 방식 학습 및 적용

B마트 웹뷰 및 어드민

• 파트 리딩 - B마트 파트장으로 웹뷰 및 어드민 프론트엔드 개발 리드, 칸반과 스토리 기반 업무 프로세스 정립
• 웹뷰 개선 - 이벤트/혜택 탑바 개선, 장바구니 빈 화면 개선, 반품/교환 인증 모듈 추가, 네이버 지도 연동
• 어드민 기능 개발 - 쿠폰 메타정보 복사, 상품 썸네일 뱃지 등록, 기획전 관리 개선, 사내 디자인시스템(아틀리에 블루) 활용

우아한파티

• 인프라 구축 - 백엔드 프로젝트 세팅, 심플로이 배포 환경, 정적 파일 인프라, 사내 이미지 플랫폼 도입, 데이터베이스 설계
• 프론트엔드 개발 - MVP 화면 개발(메인, 즐겨찾기, 작업 중), 스웨거 기반 데이터 요청 파일 자동 생성, react-query 도입
• 백엔드 개발 - MVP 기능 개발(유저, 피피티, 이미지, 페이징, 좋아요, 카테고리, 태그, 검색, 정렬), 이미지/파일 업로더 개발
• 모듈 페더레이션 - 모듈 페더레이션으로 개발, CORS 해결을 위한 nginx 세팅

라이브러리

• 라이브러리 배포 자동화 - Changeset 가이드라인 마련, gitlab-ci를 활용한 changeset 자동 작성, 카나리/운영 자동 배포
• 배포 프로세스 표준화 - Trunk Based Branching과 배포 프로세스 마련
• 이미지 옵티마이저 - 이미지 최적화 도구 개발
• 임의 이미지 최적화에 사용할 수 있는 옵티마이저 개발을 통해 이미지 리소스 관리 최적화
• 옵션 목록: width, height, format, quality, object-fit
• 코어 웹 바이탈(CWV)을 통해 현재 프로덕트의 현황을 공유하고 발전 방향을 잡아가기 위한 템플릿을 구성

디자인시스템

• 컴포넌트 개발 및 문서화 - 디자인시스템 컴포넌트 개발, 커뮤니케이션 정리 및 문서 작성
• 프로젝트 리딩 - 개발 일정 산정 및 리딩, 다양한 팀 개발자들과 협업, 위클리를 통한 워킹 그룹 문화 조성
• 적용 및 표준화 - 비마트, 배민스토어 적용 일정 산정 및 리딩, 시스템 기준 문서 작성

FEOPS

• 업무 자동화 시스템 구축 - 지라 버전 자동 생성, 위키 데일리 리포트 자동 생성, 노션 주간 회의 배치, Gitlab MR 자동 머지(rebase) 기능
• 사내 서비스 연동 - 지라, 위키, 슬랙, 깃랩, LDAP 연동, 사내 서비스 검색 기능으로 데이터 찾는 시간 1/4 감소
• 인프라 구축 - Z-VPC 환경 구성(Prod/Stage/Beta), 심플로이 v6 도입, PM2 도입, gitlab ci를 통한 배포 자동화
• 프로젝트 리딩 - 다양한 팀 개발자들과 협업하여 FEOPS 개발 리드, 스프린트/칸반 보드 운영, 스토리포인트 도입
• 기능 개발 - 위키 기반 슬랙 block-kit-builder, 어드민 API, Cloud Watch/SNS 알림 구성
• 웹훅 추가 및 변경 API 개발
• 슬랙 소켓 연결을 통해 멘션, 메시지 쇼컷, 커맨드, 워크플로우 개발
• 깃랩의 MR을 슬랙 메시지로 전송
• 슬랙에 기존에 있는 앱을 통하지 않고 슬랙 워크플로우로 지라 티켓 생성 및 관리하여 더 많은 기능을 제공
• 서포트 워크플로우 등록 시 담당자에게 DM 전송하여 빠른 업무 소통 장려
• 담당자 설정
• 컴포넌트 추가
• 백엔드를 여러개의 서버로 분리 및 운영
• 깃랩 파이프라인 성공, 실패 시 슬랙 메시지 전송
• 깃랩 approve 갯수 충족 시 rebase and merge 기능 추가.
• FEOPS 기능 컨트롤을 통해 유저에게 자율적인 기능 선택 가능하게 지원
• 팀의 자유로운 질문 및 커뮤니케이션, 공유 활성화를 위한 슬랙 앱 개발
• 공공데이터를 통해 기본적인 휴일 정보 연동. 추가적으로 필요한 휴일 정보를 추가 연동
• 코드레벨에서 FEOPS 내부의 일과 각 팀에서 원하는 일을 분리
• 메시지 정책을 정리하여 유저들에게 필요한 정보를 적정한 시기에 전달
• 메시지 갯수가 허용량을 초과한 경우 최적화 로직 구성
• 중복 메시지에 따른 업무 혼란 요소 제거
• 코드의 불안 요소 제거
• 서버의 클래스 인스턴스는 인스턴스 변수를 가지면 요청이 중복되면 잘못된 응답을 줄 수 있기 때문에 인스턴스 변수 제거
• 지라/위키/깃랩 연동 강화 - 지라 프로젝트/티켓 조회 API, 릴리즈 버전 자동 생성, fix version 자동 추가, 위키 페이지 CRUD API, 깃랩 어드민 API 연동
• 성능 및 안정성 개선 - 웹훅 성능 개선(5초→2초), 에러 처리 로직 구축(loki/grafana/프로메테우스), 백엔드 아키텍처 재설계
• 개발 프로세스 개선 - 스프린트 운영, 칸반 보드 도입, 스토리포인트 도입, 티켓 상태 자동화, 리뷰어 자동 할당
• 온보딩 및 문서화 - 백엔드 온보딩 가이드, 온보딩 프로세스 도입, 문서 정리 및 최신화
• 기타 기능 - 슬랙 shortcut/커맨드 기능, 게임/랭킹 요소로 리뷰 문화 장려, 테스트 코드 추가(ava→vitest), 소나큐브 연동

커머스 백오피스 플랫폼

• TF 지원 - 디자인 QA 리딩 및 통합 관리, 시스템 기준 마련

뉴 통합 결제 플랫폼

• 프로젝트 리딩 - 데일리/위클리 회고 정리, 지라 보드 생성 및 워크플로 정리
• 인프라 및 CI/CD - 센트리 도입, CI 구성(빌드/테스트/소나큐브/슬랙 연동), 웹팩 파일 스플릿(1M 이상 파일 최적화)
• 배민페이 관리 지면 전면 개편 - 공통 모듈 재작성(2022.01.27 오픈), 접근성 개선
• 아키텍처 개선 - react-query 도입으로 서버/프론트 상태 분리, dialog 선언적 처리, functional CSS 도입, 결제페이지 코드 통일
• 디자인시스템 - typography 컴포넌트 도입

배민 통합 결제 플랫폼

• 프론트 팀 구성 및 리딩 - 서버 개발자만 있던 팀에서 프론트 팀 구성, 프론트 파트 리딩, 개발 문화 정립
• 개발 환경 개선 - 문서 최신화 및 정리, 린트/프리티어 수정, 서브모듈 제거
• 브랜치 정리 및 브랜치 전략 수정하여 다른팀 프론트와 하나에 레포에서 작업하면서도 서로 작업에서 블로커가 되지 않도록 함
• 깃랩 플로우로 변경 및 일하는 방식을 현재팀이 중심이 되어 여러 팀이 협업할 수 있게 문서 및 워크플로 정리
• 배포 프로세스 개선, 알람 정리 및 작업 방식 정리
• 센트리 소스맵 추가로 인해 디거핑 편의성 증가
• 앱 웹뷰 지원(최소 버전 안드로이드 4.x)
• CI/CD 구성
• 불법자금세탁방지를 위한 고객확인 기능을 추가하는 작업
• 배민페이 적립 포인트 노출(포장주문에서 짝수 회원만)
• 규칙없이 구성되어 있던 인프라를 회사의 기준 인프라를 기준으로 재정비하여 누구든 수정 할 수 있게 구성함
• 스프린트 도입 및 다양한 파트의 R&R 정리 및 결제플랫폼 로드맵 문서화 및 공유
• 배민페이 결제지면 개편
• 배민 쇼핑 라이브 결제플랫폼 도입
• 커머스 봉투값 도입
• 개발 환경 개인화 및 결제플랫폼 브랜치 전략 수정 및 워크플로 변경으로 효율적인 업무 프로세스 도입
• 디바이스별로 배포 환경 구성
• 공통 레이어 강화를 통해 각 서비스에서 작업해야 하는 상황 최소화
• 결제플랫폼을 모든 서비스에 적용함.
• 배민쇼핑라이브, 전국별미 결제플랫폼 도입(레거시 프로젝트인 배민페이 프론트 프로젝트 제거)
• 결제플랫폼 2.0 개발
• 결제플랫폼 2.0 개발을 통해 코드에 대한 이해와 나아갈 방향을 제시
• 업무 프로세스 일원화를 통한 유관 부서 최소화
• 워킹그룹을 운영해 이른 시일 안에 더 나은 결정을 할 수 있는 문화를 만듦.
• 브랜치 전략을 수정해 불필요한 소통과 실수를 줄여 업무 효율이 상승함.
• 유관부서를 최소화하여 일의 병목을 줄임.

배민페이 관리지면

• 프로젝트 전환 - 우아한 JS에서 React로 전환, 새로운 디자인 가이드 기반 페이지 개편
• 개발 환경 개선 - 베타 환경 개인화로 병렬 작업 지원, 개발자 불편함 개선으로 업무 능률 향상
• 성능 및 안정성 - 캐시 전략 개선으로 이미지/페이지 노출 문제 해결, 에러 로깅 시스템으로 오류 최소화

배민페이 프론트

결제하기 웹뷰

• 프론트 영역 확대 - 서버에서 관리되던 페이지를 프론트로 이관, 백엔드 개발자가 관리하던 페이지들을 프론트 영역으로 통합
• 인터페이스 통합 - 각 서비스별로 다르게 운영되던 웹뷰 인터페이스 통합, 레거시 프로젝트 제거로 관리 포인트 감소
• 결제페이지 개편 - 새로운 디자인 기반 페이지 개편, 코드 통합으로 업무 효율성 향상

PLCC 현대카드 이벤트 페이지 지원 업무

주문접수앱 웹뷰

• 배달대행사 연결 및 관리 페이지 개발
• AI 배달 예상 시간 안내 페이지 개발

post 배사광

• 프로젝트 아키텍처 설계 - React Application Architecture 설계, 브랜치 전략(master/deploy/feature), 젠킨스 구성, 허스키 도입
• 페이지 개발 - 내정보 페이지, 하위 페이지, 메인홈 페이지 작업
• 개발 환경 구축 - webpack/babel 설정, swr 도입, 글로벌 스타일 가이드 구성(boxModel, color, typo)
• 크로스 브라우저 대응 - 사파리 새로고침 이슈 해결, IE11 지원, 브라우저 뒤로가기 처리
• 배포 및 운영 - 배사광 리뉴얼 배포(2020.03.24), QA 및 배포 점검, 리팩토링

super2

• 개발 환경 개선 - tsLint를 esLint로 변경, 슈퍼2 설정 정리 및 실행 환경 간소화
• 기능 개발 - 가게 영상/사진 관리, 전통시장 카테고리, 배민오더 오프라인 정보, 가게 편의 정보, 전자계약서 메뉴 신청 양식 변경
• 테스트 - 전자계약서 e2e TEST(testcafe) 작성

ceo-moon-front

• AB test 구성 및 테스트
• 이벤트 페이지 개발

ceo-web-self-service

• 셀프 서비스 오픈 - 사장님 광장 내 셀프 서비스 오픈(2020.02.25), 메뉴 시스템 개선(2020.07.14)
• 프로젝트 마이그레이션 - ceo-selfservice-front(react, redux)를 ceo-web-self-service(react, mobx)로 내제화, 디자인시스템 활용
• 기능 개발 - 스마트 메뉴 기능 대거 추가, A/B test 구성
• 개발 환경 - 로컬 환경 https 적용, e2e test(testcafe) 작성, class component method binding 규칙 논의

ceo-web-design-system

• 아키텍처 설계 - React Application Architecture 설계, 새로운 프로젝트 개발 환경 및 구조 연구 및 설계 참여
• 디자인시스템 컴포넌트 - 공통 디자인시스템 컴포넌트 작성 및 수정, Storybook을 통한 UI 검증 프로세스 간소화

ceo-selfservice-front

• 1인분 메뉴 가격 최소/최대값 입력 제한 개발, 메뉴 타입 설정 기능 개발
• 메뉴구성/메뉴 설정 기능 추가 개발
• 옵션 최대/최소값 기능 개발
• ceo-web-self-service로 병합 후 프로젝트 종료

smartmenu-admin-front

• 메뉴 매핑 정보 체크 기능 개발
• 1인분 메뉴 가격 최소/최대값 입력 제한 개발
• 운영자 권한 관리 라이트버전 개발
• 시스템 관련 라우팅 분리
• 프랜차이즈 메뉴 할인 기능 개발

MEMEBOX Mobile Web & WebView

• 모바일 웹 리뉴얼 - handlebaz 기반 모바일 웹을 React로 전면 리뉴얼, 퍼블리싱 없이 기획서와 제플린 기반 직접 개발(HTML, CSS 리드)
• 기능 개발 - 기존 탭 리뉴얼 및 프로모션 탭 제작, Carousel 영상 추가 및 위치별 재생 컨트롤 기능
• 크로스 플랫폼 대응 - 앱 웹뷰 지원(안드로이드 4.4), iOS 스크롤 이슈 해결
• 기술 도입 - Apollo GraphQL 활용, React Hooks 도입 리드, GitLab CI 수정 및 PM2 ecosystem 도입
• 모니터링 및 로깅 - GTM 및 사내 웹 로그 로직 추가 및 모듈화

Handlebaz Web, Handlebaz Mobile-Web & WebView

PUFF APP Backend / PUFF APP Admin

• 백엔드 개발 - Ruby on Rails monolithic 프로젝트 유지보수, 앱 내 게임 관련 데이터 Redis 수집 및 제공
• API 리뉴얼 - Ruby on Rails API를 Node.js로 리뉴얼, GiftiShow Batch Server 구성(Node.js)
• 인프라 구축 - AWS 인프라 세팅 및 활용(EC2 AutoScaling, ELB, S3, Route53, API Gateway)
• API 문서화 - Swagger 작성 리드, Swagger 모듈화 및 효과적인 관리 방안 구상