코드에 국한되지 않고 기술, 운영, 조직의 병목 현상을 해결해 비즈니스 임팩트에 기여해 온 프론트엔드 엔지니어입니다. 특정 도구에 얽매이지 않고 효율을 높일 방법을 고민하고 개선합니다.
About
Skills
Open Source Contribution
mui-x
mui-x contributor•
React 기반 테이블을 다룰 때 사용자 관점에서의 안정성과 예측 가능성을 중요하게 생각하며, 코드로 실현한 경험
•
내부 useGridCellEditing 훅 수정해 내 각 타입별 의미 있는 초기값을 반환하도록 구조 개선
•
키 입력 기반 회귀 테스트를 통해 안정성을 검증 → 제안한 수정 사항 MUI-X v7 부터 반영됨
turborepo
turbo contributortwenty
twenty contributor•
고객 정보 및 상호작용을 관리하는 업무용 웹 애플리케이션(CRM)
•
처음 경험하는 Recoil 상태관리 중 발생한 동기화 문제를 분석해 useRecoilCallback 도입 리팩터링 UI 렌더링 안정성 개선
eztracker Chrome Extension 툴 개발 기여
eztrackr contributor hacktoberfest 참가 •
LinkedIn 채용 정보를 Trello와 연동하여 관리하는 크롬 확장 프로그램
•
Google Maps Autocomplete API를 활용해 LinkedIn 채용 정보 Trello에 통합
•
JavaScript를 이용해 지역 자동완성 기능 구현 →도시·국가 추천 옵션 설정 통해 입력 편의성 개선
Projects
소상공인 가맹점 관리 시스템/주문 예약 웹서비스
개요
Private 베이킹 클래스 가맹점 관리 시스템, 예약 모바일 웹 서비스입니다.
지인의 신사업 프로젝트에 합류해 기획·디자인 산출물이 전무한 초기 단계부터 이해관계자와 직접 소통했습니다. 핵심 기능을 Slack API와 JSON 기반의 최소 스펙으로 MVP를 빠르게 릴리즈 해 실제 운영이 가능한 환경을 만들면서 점차 고도화하는 방식으로 진행하고 GraphQL을 도입해 단일공급진실원(Ssot)을 통해 기존 코드보다 유지보수가 쉬운 방식으로 개선했습니다.
해당 서비스 도입 전 약 30%였던 예약 취소율을 10% 이하로 낮춰 사용자 만족도 및 운영 효율을 개선했습니다. (월 평균 180건 중 13건 취소율 7.2%) , 6개월 내 전국으로 7개 가맹점 오픈 .
역할
•
Next.js기반 가맹점 관리 및 클래스 예약 플랫폼 기획, 설계, 개발, 런칭, AWS배포, 운영 전체 프로세스 주도 (0 → 1 풀사이클)
•
이해관계자의 니즈파악 및, 피그마 툴 기반 프로토 타입 제작, 개발 런칭 일정 조율 , 테크 스펙 문서화
•
v1 - 초기 MVP
Slack API와 JSON기반의 주문/예약 처리→어드민 없이도 운영 가능한 구조로 빠른 시장 테스트 가능하게 함
•
v2 - 단계적 고도화
클래스 등록, 가맹점별 예약 관리 대시보드, 주문 조회 등 기능 추가
•
v3 - 해당 사업의 브랜드 인수화로 시스템 확장 구조 개선
유저들의 유입이 많은 예약, 결제 페이지에 먼저 GraphQL 도입, GraphQL 서버 구축, 스키마 및 리졸버 설계, 프론트단 GraphQL Relay적용
•
렌더링 성능 개선
•
사용자 주문 웹페이지 내 클래스 리스트 필터링, 타임슬롯 선택, 예약 정보 입력, 약관 동의, Toss 결제 연동, 예약 후 kakao알림 등 전체 예약/결제 흐름 구현
•
AWS Elasticbeanstalk 환경별 생성 (staging, production)
•
실질적인 창업과 같은 경험을 통해 기술 외에도 비즈니스, 운영의 관점까지 고민하고 설계
Tech Stack
왜
Next.js, TypeScript, GraphQL, Relay ,Fastify , AWS Elasticbeanstalk
비즈니스 성과
주요 기능
[Admin] 지점별, 날짜별 예약 현황 대시보드
[Admin] 클래스 컨텐츠 등록/ 수정/ 삭제 기능 (이미지 업로드 포함)
[Admin] 시간별 주간 스케쥴 등록 / 수정
[Admin] 특정 타임슬롯 등록 / 수정
[예약 플랫폼] 가맹점 관리 시스템을 통해 생성된 가맹점 정보와 클래스 시간 스케쥴 필터링 및 무한 스크롤 기능
[예약 플랫폼] 원하는 클래스의 타임슬롯 선택, 예약 정보 입력 후 토스 페이먼츠(Toss Payments) 결제 및 예약 기능
.png&blockId=68ebc592-a863-4a49-9a27-6681550f902a)
.png&blockId=4397c048-a7fa-4ac9-acd0-565be8731781)
기술적 과제 및 성과
데이터 응답 및 렌더링 최적화
AS-IS
•
GraphQL 도입 초기 서버 네트워크 레이턴시 최적화가 어려운 상황에서 클라이언트 레벨에서 렌더링과 네트워크 지연이 직렬로 처리되어 UX 체감지연이 발생하는 문제를 정의하고, 데이터 페칭(Network I/O)과 렌더링을 디커플링해 체감 지연을 줄이고 응답성 개선 (blog 참조)
•
Relay Fragement기반 구조 마이그레이션을 통해 지점,날짜,클래스 리스트,타임슬롯을 컴포넌트 단위 데이터 의존성으로 명시적 선언
•
특히 초기 v0 API는 구현 위주로 진행되어 데이터 요청시 admin과 front 양쪽에서 overfetching 과 underfetching문제가 반복 → 데이터의 일관된 방식과 덜 민감함 구조를 고려하게 됨.
TO-BE
•
수업 검색 UI 에서 클래스 수 증가 시 초기 API 호출 O(n) → O(1) 최적화 , API 응답시간 46% 단축
•
날짜 선택, 클래스 검색결과 렌더링 사이 사용자 이벤트 10ms 내 네트워크 요청 시작 기존 대비 71% 응답성 개선
•
Profiler 렌더링 처리시간 26%단축 / 사용자 수(GA) 110% 이상 증가에도 안정성 유지
•
시스템 도입 후 예약 취소율/노쇼율 3배 (25→7%) 로 낮추고, 3개월 이상 평균 7%대 유지
•
Fastify 서버에 mercurius를 등록해, 동일한 서버에서 REST API와 GraphQL API 동시 제공
•
Schema-first 접근으로 GraphQL API 설계 및 스토어, 클래스, 타임슬롯 리졸버 구현
서버 폴더 구조
리졸버
•
Relay 스펙 커서 기반 페이지네이션 구조 개선을 통해 클래스 예약 목록 조회 요청 최적화
Relay 커서 기반 스펙 코드 참조
Type-Safe한 프론트엔드 API 레이어 자동 타입 생성 파이프라인
AS-IS
•
기존 REST API 환경에서 타입 불일치로 인한 런타임 오류 빈발 및 API 스키마 변경 시 수동 코드 업데이트로 인한 개발 비효율성 발생
◦
기획이 변경되어 API 개발을 하게 되면 어드민, 프론트, 백엔드 전체 계층에서 요청/응답 흐름을 반복적으로 대응 → 더 적은 수정 범위로, 더 빠르게 변화에 대응할 수 있는 방법은 없을까를 고민하게 됨
TO-BE
•
GraphQL + Relay 기반 타입 시스템을 도입하여 스키마 중심 개발 환경 구축
•
메타프로그래밍 기반 자동 코드 생성 도구(Relay Compiler, GraphQL Code Generator) 활용을 통해 프론트, 백엔드, 어드민 데이터 계층의 표준화 및 타입 자동 동기화 개선
•
빌드 파이프라인 통합을 통한 타입 생성 프로세스 완전 자동화
codegen.yml 설정 파일 코드
오프널 소비의 미학
개요
•
핀테크 스타트업, MZ 세대를 타겟으로 등록된 계좌를 통해 분할 결제할 수 있는 결제 대행 서비스
역할
•
다음 투자 유치를 위해 작은 팀에서 민첩하게 협업 하며 동료들의 생산성을 높여줄 수 있는 부분을 주도적으로 찾아 개선
•
투명한 커뮤니케이션을 위한 노력들을 주도적으로 찾아 개선
•
백오피스 개발을 주도하면서 필요시 서버 API 작업 병행
•
사내 아이디어 경진에서 수상 및 북클럽·개발 스터디 리드를 통해 문화 이루기에 개선
•
추첨 혜택 이벤트개발
•
스노우볼 신규 서비스 개발 및 유지보수
•
주문 변경 처리 기능 어드민 설계 및 개발
•
주문 변경 플로우 상태 설계
•
이벤트 및 신규 서비스 런칭과 운영에 필요한 백오피스 병행 개발
•
사내 툴 개발
•
Jira/Confluence 도입 주도
Skills
React, TypeScript, Redux-Toolkit, SWR, Styled-Components , Tailwind CSS , Next.js
백오피스 주문 시스템 고도화 및 운영 자동화
구성원 : 프론트엔드 1, 운영자 1
운영팀으로부터 배송 관련 고객 문의(VOC)가 반복적으로 발생한다는 피드백을 받아, 팀 내 논의를 통해 고객용 배송 조회 기능 개발 대신 운영 프로세스의 병목 지점을 발견하고 해결한 협업 사례
AS-IS
•
운영팀이 매일 수작업으로 하루 3번 배송 상태를 확인하여 고객에게 개별 안내
•
운영팀이 바쁘거나 인력 부족 시 고객 응답 지연으로 만족도 저하
•
배송 상태 확인을 위한 내부 시스템이 없어 매번 외부 웹사이트에서 수동 조회 필요
•
문제의 핵심: 기능 부재가 아닌 운영 프로세스의 비효율성
TO-BE
•
AWS Lambda, Playwright를 이용해 배송현황 추출 후 Slack API를 통해 운영 채널로 전송, 실시간 확인
( 1일 3회 자동 스케줄링 처리 )
•
AWS Lambda Layer를 활용해 대용량 라이브러리(Chromium 등)를 분리, 공유해 함수 패키지 용량 최적화(50MB 이하) 및 배포 효율성을 개선함
•
내부 운영팀 채널에 가공된 정보와 3회/일 자동 알림 제공으로 운영진 업무효율도 40% 향상 및 고객 경험을 안정적으로 만드는 제품적 기여 및 연간 500시간 이상 운영 인력 리소스 절감, AWS 운영 비용 프리 티어 유지
회고 및 인사이트
이번 프로젝트를 진행하면서 가장 크게 깨달은 점은 "항상 새 기능이 답은 아니다"라는 것이었습니다. 처음 운영팀으로부터 배송 관련 고객 문의가 반복된다는 피드백을 받고 배송조회시스템을 사내에서 고려하고 있었습니다. 하지만 운영팀과 깊이 있는 대화를 나누면서, 진짜 문제는 기능의 부재가 아니라 운영 프로세스의 비효율성에 있다는 것을 발견하게 되었습니다.
실제 현장에서 일하는 운영팀의 목소리를 직접 듣고 나니, 개발자 관점에서 추측했던 것들이 얼마나 부정확했는지 깨달았습니다. 운영팀이 매일 수작업으로 배송 상태를 확인하며 겪는 어려움을 이해하고 나서야, AWS Lambda와 Slack API를 활용한 자동화라는 해결책을 도출할 수 있었습니다. 복잡한 인프라 구축 없이도 서버리스 아키텍처 하나로 이런 반복 작업을 효과적으로 자동화할 수 있다는 것을 직접 체감하는 계기이기도 했습니다.
이 경험을 통해 개발자란 비즈니스를 이해하고, 다른 팀과 원활하게 소통하며, ROI를 고려한 우선순위 판단을 내리는 능력 역시 중요한 개발자 역량임을 깨달았습니다.
monorepo 기반 공통 UI 라이브러리 패키지
개요
MonoRepo의 PoC 를 목적으로한 개인 오픈 소스 라이브러리입니다.
TailwindCSS 기반 UI 라이브러리 중 가볍고 간편하게 사용할 수 있는 목적으로 shadcn/ui 의 기능을 확장해 모노레포로 전환했습니다.
Tech Spec
Build Tool | Vite(라이브러리 모드) |
Monorepo | pnpm workspaces+Turbo |
TypeScript | 5.0+ |
Bundling | Rollup(Vite 내장) |
Unit Testing | Vitest,React Testing Library |
Visual Regression Testing | Chromatic(시각 회귀 테스트) |
Document | Storybook(디자인시스템 문서) |
Code Quality | ESLint + Prettier |
CI/CD | Github Actions,Github |
역할
•
모노레포 scratch
•
CI/ CD 구축 (changesets, github actions)
•
ReactTestingLibrary + Vite + Chromatic 컴포넌트 테스트 자동화 환경 구축
•
Storybook 컴포넌트 문서화
•
패키지 배포
•
번들사이즈 최적화
기술적 과제 및 성과
단순 패키지임에서 번들 크기 증가에 대한 트러블 슈팅 및 최적화
•
shadcn의 typography 컴포넌트들을 polymorphic 한 추상화한 @hensley-ui/react-heading 컴포넌트 라이브러리는 단순패키지임에도 번들크기가 92.4KB 으로 2000줄을 차지하고 있었으며, 원인으로는 동일 의존성 중복으로 인한 성능 저하(ISSUE#28 문제점)가 있었음
•
rollup-plugin-visualizer를 활용해 성능 요소를 분석하고, 중복 의존성을 제거하는 번들링 최적화
•
코드라인 : 2015→ 총 147 lines (-93%)
•
번들 크기 원인분석 및 대응 (자세한 내용 PR 이미지첨부)
monolithic 단일 패키지에서 → 패키지 분리 monorepo구조 전환
•
기존 단일패키지 구조 개발 환경에서 사소한 수정에도 불필요한 시간이 소요되는 반복적인 수동 작업
•
pnpm workspace의 중앙 집중식 관리와 안정적인 로컬 심볼릭 링크를 통해 npm link의 단점들을 해결했습니다. 이를 통해 pnpm과 같은 최신 패키지 매니저의 이해와 의존성관리로 프론트엔드 개발 환경을 최적화하는 역량을 키울 수 있었음
CI/CD 개선
•
UI Kit내 개별 컴포넌트의 배포 및 버전 관리가 수동으로 이루어져 릴리즈 작업에 높은 오버헤드가 발생했고, 잦은 업데이트를 어렵게 만들어 비효율적인 배포 프로세스
•
Changeset과 Turborepo를 도입해 개발자가 변경 사항을 기록하면 자동으로 변경된 패키지만 버전 관리가 이루어지고 릴리즈 노트를 생성해 버전 관리 및 패키지 관리의 오버헤드를 줄이고 릴리즈 프로세스를 자동화를 통해 CI/CD 파이프라인 실행 시간 75% 단축 (예: 4분 → 1분대)
Etomomon.Inc (뉴욕 에듀테크 스타트업)
개요
학생과 튜터를 매칭하는 튜터링 플랫폼 스타트업에서 프론트엔드 서버, 클라이언트 개발
미국 뉴욕 Grand St 위치한 에듀테크 스타트업
다양한 문화권 개발자(3-6명)로 구성된 팀에서 글로벌 웹 서비스 개발
역할
•
React 기반 튜터 플랫폼 리뉴얼 및 구축
- Webpack기반 React개발 환경(V0) 기여로 팀 내 빠른 React 실험 환경 제공
- 튜터지원 프로세스 화면 개발
- 튜터 지원 폼 Playwright E2E 테스트 코드 작성
•
글로벌 서비스 지원
◦
SMS OTP 국제 전화번호 검증 인터페이스 개발로 200개국 이상에서 인증 서비스를 제공
◦
Stripe 기반 결제 인터페이스 개발 통해 40개국 이상 결제 지원 기여
•
튜터링 메인 플랫폼 유지보수
◦
메인 홈페이지 화면 리뉴얼 반응형 디자인 개발
◦
프론트엔드 뷰 레이어 리팩토링
Skills
React SCSS Webpack Express EJS jQuery JavaScript Playwright
React 기반 튜터 플랫폼 리뉴얼 및 구축
구성원 : 프론트엔드 1, 백엔드1, 기획자1, 디자이너 1
튜터와 학생을 강의 기반으로 매칭할 수 있게 도와주는 플랫폼으로 새로운 React 기반 튜터 플랫폼
튜터지원 프로세스 화면 개발•
Atomic Design Pattern 기반 폴더 구조 설계와 공통 컴포넌트 개발 → 반복되는 구조와 재사용성 개선
글로벌 서비스 지원•
국제 전화번호 입력 필드에 국가별 국기 이미지 및 드롭다운 선택 기능 개발
•
키 입력 이벤트 기반 자동 포커스 및 연속 입력 처리 구현
개인화 할일 추천 웹 어플리케이션 Tickley (외부 활동)
개발 기간
2024.12 - 1week
개요
자투리 시간에 지금 할 수 있는 일을 추천해주고, 완료한 일은 자동으로 캘린더에 기록해 나만의 생산성 패턴을 시각화 해주는 모바일 웹 서비스 입니다. 해당프로젝트는 카카오 개발자(테오)가 진행하는 협업 프로젝트로 Google Sprint 방식을 결합해 빠르게 아이디어 구상부터 MVP를 만들어 내는데 목표합니다.
Tech Stack
React Zustand Vite TypeScript MaterialUI
역할
•
구성원 : 디자이너와 개발자 4명
•
디자이너와의 협업을 통해 Figma 디자인 시스템과 MUI 테마 통합해 짧은 시간내 일관되고 퀄리티 있는 산출물을 내는 것에 집중 했습니다.
•
리액트를 처음 다루는 팀원들과는 주도적으로 페어 프로그래밍을 진행해 주어진 기능을 목표한 일정 내에 완수할 수 있도록 리드 했습니다.
•
상태 관리 zustand 도입
•
Vite 초기 환경 구축
•
할일 추천 페이지 담당
•
오늘 할일 추가하기 기능
•
시간 선택 슬라이더 UI 모듈화
주요 기술 구현
Figma 디자인 시스템과 MUI 테마 통합•
Figma Tokens 플러그인을 활용해 JSON 형식의 디자인 토큰 추출
•
Figma에서 추출한 디자인 토큰은 JSON 형태이긴 하지만, MUI의 createTheme와 타입 시스템이 기대하는 구조(palette, typography, 등)와 맞지 않았습니다.
•
declare module을 통해 MUI 테마 타입을 확장하고, Figma 토큰을 그에 맞춰 구조화
•
개발자가 자동완성과 타입 안정성을 갖춘 상태에서 디자인 시스템을 손쉽게 적용할 수 있도록 했습니다.
•
동시에 디자이너가 정의한 스타일을 더욱 정확하게 반영할 수 있게 되었습니다.
카테고리별 추천 할일 기능, 저장한 할일 기능 불러오기•
react-router의 loader 이용해 사전 로딩하고, zustand 상태와 통합해 localStorage 상태를 중앙화한 가독성 있는 코드 구조로 개선
