스크래치부터 구축하고 고도화하는 것에 익숙합니다.
About
Open Source Contribution
mui-x
mui-x contributor•
React 기반 테이블을 다룰 때 사용자 관점에서의 안정성과 예측 가능성을 중요하게 생각하며, 코드로 실현한 경험
•
내부 useGridCellEditing 훅 수정해 내 각 타입별 의미 있는 초기값을 반환하도록 구조 개선
•
키 입력 기반 회귀 테스트를 통해 안정성을 검증 → 제안한 수정 사항 MUI-X v7 부터 반영됨
turborepo
turbo contributor•
개발 문서는 누구나 쉽게 이해할 수 있어야 한다고 생각해 Turborepo 테스트 설정 문서 파트에서 직관적 이해 필요성 느낌
•
실제 구조 기반의 비교 스크린샷을 첨부해 메인테이너에게 제안, 공식 문서에 반영됨
twenty
twenty contributor•
Salesforce 같은 상용 CRM을 대체할 수 있는 모던 기술스택의 오픈소스로 Recoil 상태 동기화 이슈 개선에 기여해 SaaS 제품의 상태 일관성 유지에 기여
•
메인테이너와의 코드 리뷰를 통해 적절한 Recoil 패턴 적용과 상태 관리를 경험하고 새롭게 학습
eztracker Chrome Extension
eztrackr contributor hacktoberfest 참가 •
DigitalOcean, GitHub이 주관하는 Hacktoberfest 2020 참가, 오픈소스 4건 기여 및 모두 PR 머지 경험, 티셔츠 상품 획득
•
해당 프로젝트는 한건에 해당하는 프로젝트
•
첫 오픈소스 기여로 PR 및 리뷰 전 과정을 체계적으로 경험하고 메인테이너와의 원활한 협업 수행
•
Google Maps Autocomplete API를 활용해 LinkedIn 채용 정보 Trello에 통합
•
지역 자동완성 기능 구현 →도시·국가 추천 옵션 설정 통해 입력 편의성 개선
Code Review Activity
•
다른 개발자들과 1-2주일에 한번씩 작은 프로젝트를 통해 코드 리뷰 활동을 지속하고 있어요.
•
코드리뷰에서 회자된 상태 관리에 대한 개인적인 생각을 블로그에 기고하고, 팀원들과 공유했어요
Projects
가맹점 관리 시스템/주문 예약 웹서비스
Tech Stack
Next.js, TypeScript, GraphQL,
Relay ,Fastify , AWS Elasticbeanstalk
개요
베이킹 클래스 가맹점 관리 시스템, 예약 모바일 웹 서비스입니다.
지인의 신사업 프로젝트에 합류해 기획·디자인 산출물이 전무한 초기 단계부터 이해관계자와 직접 소통했습니다. 핵심 기능을 Slack API와 JSON 기반의 최소 스펙으로 MVP를 빠르게 릴리즈 해 실제 운영이 가능한 환경을 만들었습니다.
이 후 가맹점 시스템 추가와 운영을 반복 하면서 1인 개발에서 프론트, 백엔드, 어드민을 다루면서 유지보수가 원활한 구조를 만들 수 있도록 구조 리팩토링, 스택 변경 등 시도 했습니다.
고객 니즈 맞춤형 웹 서비스 도입 전 약 30%였던 예약 취소율을 10% 이하로 낮춰 사용자 만족도 및 운영 효율을 개선했습니다. (월 평균 180건 중 13건 취소율 7.2%) , 6개월 내 전국으로 7개 가맹점 오픈 .
예약 서비스 개발
사용자가 빠르게 원하는 것을 찾고 예약하고 나가는 목적 지향적 서비스의 특성을 이해하고 개발
1년간 누적 7,000+, 월평균 400+ 실사용자의 예약 처리
역할
•
v1 - 초기 MVP
Slack API와 JSON 기반의 주문/예약 처리 → 비어있는 어드민 없이도 운영 가능한 구조로 빠른 시장 테스트 가능
•
v2 - 단계적 고도화
클래스 등록, 가맹점별 예약 관리, 주문 조회 등 기능 추가
•
v3 - 시스템 구조 개선
유지보수 가능한 구조로 리팩토링, 스택 개선 시도
( Express 서버 의존 제거 및 GraphQL 도입)
•
모든 개발 파트 수행: 프론트, 백엔드, 어드민
•
사용자 주문 웹페이지 내 클래스 리스트 필터링, 타임슬롯 선택, 예약 정보 입력, 약관 동의, Toss 결제 연동, 예약 후 kakao알림 등 전체 예약/결제 흐름 구현
•
실질적인 창업과 같은 경험을 통해 기술 외에도 비즈니스, 운영의 관점까지 고민하고 설계
GraphQL 도입
AS-IS
•
기획이 변경되어 API 개발을 하게 되면 어드민, 프론트, 백엔드 전체 계층에서 요청/응답 흐름을 반복적으로 대응 → 더 적은 수정 범위로, 더 빠르게 변화에 대응할 수 있는 방법은 없을까를 고민하게 됨
•
특히 초기 v0 API는 구현 위주로 진행되어 데이터 요청시 admin과 front 양쪽에서 overfetching 과 underfetching문제가 반복 → 데이터의 일관된 방식과 덜 민감함 구조를 고려하게 됨.
TO-BE
•
Fastify 서버에 mercurius를 등록해, 동일한 서버에서 REST API와 GraphQL API 동시 제공
•
Schema-first 접근으로 GraphQL API 설계 및 스토어, 클래스, 타임슬롯 리졸버 구현
서버 폴더 구조
리졸버
•
스키마 기반 codegen 도입 통해 프론트, 백엔드, 어드민 데이터 계층의 표준화 및 타입 자동 동기화 개선
codegen.yml 설정 파일
•
Relay 스펙 커서 기반 페이지네이션 구조 개선을 통해 클래스 예약 목록 조회 요청 최적화
Relay 커서 기반 스펙 코드 참조
.png&blockId=68ebc592-a863-4a49-9a27-6681550f902a)
.png&blockId=4397c048-a7fa-4ac9-acd0-565be8731781)
오프널 소비의 미학
개요
•
핀테크 스타트업, MZ 세대를 타겟으로 등록된 계좌를 통해 분할 결제할 수 있는 결제 대행 서비스
역할
•
추첨 혜택 이벤트개발
•
스노우볼 신규 서비스 개발 및 유지보수
•
주문 변경 처리 기능 어드민 설계 및 개발
•
주문 변경 플로우 상태 설계
•
이벤트 및 신규 서비스 런칭과 운영에 필요한 백오피스 병행 개발
•
사내 툴 개발
•
Jira/Confluence 도입 주도
•
팀 내 스터디 주도
Skills
React, TypeScript, Redux-Toolkit, SWR, Styled-Components , Tailwind CSS , Next.js
추첨 혜택 이벤트 퍼포먼스 개선
구성원 : 프론트엔드 2, 백엔드1, 기획자1, 디자이너 1
사용자 경험을 해치는 문제를 주도적으로 찾아 LayoutShift를 분석하고 렌더링 구조를 개선해 매끄러운 화면 전환 구현
상황
추첨 혜택 서비스에서 추첨 인터랙션 시, UI 요소들이 순간적으로 튕기거나 깜빡이며 전환이 굉장히 부자연스러워 사용자에게 악영향을 주는 문제
원인
•
빠르게 움직이는 화면이고 여러 컴포넌트에서 동시다발적으로 각각 움직여 육안으로 원인파악이 쉽지 않았음
•
불필요하게 리렌더링을 유발하는 요소들을 분석하고 layoutShift에 영향을 주는 요소들을 지표를 통해 찾아보고자 performance를 측정했습니다.
◦
일부 요소는 layout shift 지표에 드러나 개선이 가능했지만, 사용자의 실제 입력과 맞물린 인터랙션에서 발생한 shift는 hadRecentInput 플래그로 인해 CLS 지표에 반영되지 않아 본질적인 원인 파악 어려움
해결
•
PerformanceObserver와 Layout Instability API를 활용해 커스텀 레이아웃 시프트 추적
•
비동기 데이터 로딩으로 인해 뒤늦게 렌더링되는 요소들에 CSS 기반의 공간 선점 방식적용
•
비동기 렌더링으로 지연된 요소에는 고정된 레이아웃으로 변경할 수 있게 CSS로 대응 하고 불필요한 useEffect 를 제거 및 derived state 로 변환가능한 부분 적용
성과
•
지표상 드러나지 않지만 실제로 사용자가 불편함을 느끼는 상황에서 사용자 인지 기반 문제를 수치화 가능한 구조로 바꾸는데 집중해 실제 사용자 경험을 향상시키는 성능
스노우볼 신규 서비스 개발 및 고도화
구성원 : 프론트엔드 2, 백엔드1, 기획자1, 디자이너 1
사용자가 특정 상품에 대해 분할결제를 진행하는 동안 결제 현황(성공/실패)을 시각적으로 추적할 수 있도록 하며, 다음 단계 결제를 유도하고 성취감을 제공하는 UI,UX 입니다.
스노우볼 베타 챌린지 개발 •
스노우볼 베타 챌린지 결제 여부 30일 트래킹 대시보드 개발
•
챌린지 중단
스노우볼 서비스 개발•
조각 결제 시작 단계 구현 (상품선택, 결제 주기 선택, 계좌등록 및 리스트 불러오기, 동의하기)
•
퍼널 기반 멀티 스텝 시스템 UI 와 비즈니스의 강결합 구조 개선 (Redux Toolkit 상태 관리→ Context API)
•
컴포넌트 재마운트 시에도 사용자 입력값 유지로 이탈 후 재진입시 화면 깜빡임 없이 즉시 데이터 복원 가능하게 함
배송 정보 Slack Bot 알림 자동화
구성원 : 프론트엔드 1, 운영자 1
운영팀으로부터 배송 관련 VOC(고객 문의)가 반복된다는 피드백에 대한 팀 내 논의 후, 아이디어 검증 차원에서단기간 구축된 프로젝트
AS-IS
•
운영팀은 매일 수작업으로 하루 3번 배송 상태를 확인해 유저에게 전달하는 방식으로 운영팀이 바쁘거나 , 인력이 부족한 경우 고객에게 대응이 늦어지는 상황
•
시스템상 배송 상태 확인을 위한 API 또는 내부 툴이 존재하지 않아, 매번 웹사이트에서 수동 조회가 필요함
TO-BE
•
AWS Lambda, Playwright를 이용해 배송현황 추출 후 Slack API를 통해 운영 채널로 전송, 실시간 확인
( 1일 3회 자동 스케줄링 처리 )
•
운영팀의 수작업 확인 시간을 월 30시간 이상 절감하고 서버리스 구조로 운영 비용 없이 유지보수 가능
monorepo 기반 공통 UI 라이브러리 패키지 (@hensley-ui/ui)
Tech Spec
Vite Storybook GithubAction pnpm Vitest Chromatic radix-ui shadcn/ui
ReactTestingLibrary
개발 기간
2025.2~ 현재
개요
디자인 시스템 없는 환경에도 웹접근성과 커스터마이징이 쉬운 UI 라이브러리에 대한 DX경험을 높이고자 만든 재사용 가능한 UI 라이브러리
초기에는 npm publish 수동 배포
npm link 를 통해 라이브러리 프로젝트 동기화
이후 changeset과 pnpm workspace를 도입
monorepo 점진적으로 구조들을 개선 하는 중
구현 사항
polymorphic 패턴 지원 심플하게 사용할 수 있는 Async/await를 지원하는 dialog 컴포넌트 Storybook 컴포넌트 문서화 ReactTestingLibrary + Vite + Chromatic 컴포넌트 테스트 자동화 환경 구축 개인화 할일 추천 웹 어플리케이션 Tickley (외부 활동)
Tech Stack
React Zustand Vite TypeScript MaterialUI
개발 기간
2024.12 - 1week
개요
자투리 시간에 지금 할 수 있는 일을 추천해주고, 완료한 일은 자동으로 캘린더에 기록해 나만의 생산성 패턴을 시각화 해주는 모바일 웹 서비스 입니다. 해당프로젝트는 카카오 개발자(테오)가 진행하는 협업 프로젝트로 Google Sprint 방식을 결합해 빠르게 아이디어 구상부터 MVP를 만들어 내는데 목표합니다.
•
구성원 : 디자이너와 개발자 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 상태를
중앙화한 가독성 있는 코드 구조로 개선
개요
학생과 튜터를 매칭하는 튜터링 플랫폼 스타트업에서 프론트엔드 서버, 클라이언트 개발
미국 뉴욕 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 기반 폴더 구조 설계와 공통 컴포넌트 개발 → 반복되는 구조와 재사용성 개선
글로벌 서비스 지원•
국제 전화번호 입력 필드에 국가별 국기 이미지 및 드롭다운 선택 기능 개발
•
키 입력 이벤트 기반 자동 포커스 및 연속 입력 처리 구현
•
Stripe 결제 인터페이스 개발
