About
Interface Enthusiast (UI & API, Interoperable Architecture)
Contact
Projects
· 유저 데이터를 활용한 1년 결산 콘텐츠 풀스택 개발
· 스토리 형태의 UX 제안 및 구현
· Sanity와 JSONata를 활용해 정적 콘텐츠와 유저 데이터를 결합
· 글로벌 환경을 고려한 성능 벤치마크 및 최적화
· 약 3000만건의 유저 데이터를 p90 50ms 이내로 서빙하는 백엔드 구성 (한국, 캐나다, 미국, 일본)
· React, Vite, Sanity, JSONata, Fastify, SQLite
· 글로벌 웹사이트의 라우팅 코어 로직 담당 (캐나다, 미국, 일본, 영국)
· SEO 지표 추적과 전략 수립, 사이트맵 구성
· Fastify, Remix
· 인앱 캠페인 용 랜딩페이지 에디팅, 개발, 렌더링 도구
· 커스텀 컴포넌트 구축 기능 (컴포넌트 레지스트리 및 SDK)
· Vanilla Extract Sprinkes를 활용해 커스텀 컴포넌트 구현에 필요한 Atomic CSS 라이브러리 구축
· 1000만 수준의 순간 트래픽의 캐싱을 위해 Cloudflare CDN 활용
· Cloudflare Image Optimization을 통한 Responsive Image 구현
· 조합 가능한 플러그인 인터페이스를 제공하는 스택 네비게이션 라이브러리
· Karrotframe을 바닥부터 다시 구현
· 이벤트 기반의 상태 기계 설계
· Zero-dependencies
· 제휴 서비스 개발을 위한 정적 웹 호스팅 서비스
· Origin 격리 (Custom Domain 통합)
· Cloudflare Workers, KV 활용
· 실행 맥락을 동기 함수로 접근할 수 있도록 `HTMLRewriter` API 활용
· 당근마켓 클라이언트의 컬러 시스템 마이그레이션 TPM
· 전사 규모의 리소스 설득과 팀 별 일정 할당 및 관리
· 당근마켓 내 신규 서비스들의 진입 문제를 돕는 바로가기 서비스
· 홈 탭 상단에 위치 마련 및 기타 실험 설계
· 당근마켓의 다음 세대 웹사이트 기반
· 데이터 레이어(GraphQL)와 페이지 정적 생성(Next.js) 설계 및 구현
· 지역화와 유니버설 링크를 고려한 Origin, Path 표준
· SEO 최적화
· 모바일 네이티브(iOS/Android)와 웹뷰간의 IPC 인터페이스를 자동 생성해주는 도구
· JSON Schema 기반
· TypeScript SDK, TypeScript SDK 문서 자동생성
· Swift, Kotlin Stub 자동 생성
· 플러그인 인터페이스를 통한 확장성 고려
· 웹뷰의 전반적인 UX 향상을 목적으로 하는 라이브러리
· react-router-dom 기반의 네이티브 화면전환 애니메이션 라이브러리
· 당근마켓 내 웹뷰를 사용하는 신규 사업, 서비스에서 활용
· 당근마켓 내 신규 구인구직 서비스
· 어플리케이션 서버 개발
· Node.js, GraphQL
· GraphQL JIT Executor 및 Persisted Queries를 통한 GraphQL 퍼포먼스 최적화
· 당근마켓의 웹뷰 배포 플랫폼
· 롤백 및 카나리 배포 기능
· 카나리 배포 기능을 통한 AB 테스트 사내 전파
· 당근마켓 내 중고거래 검색을 웹뷰로 전환
· 네이티브 수준의 애니메이션 작업
· GraphQL을 통한 gRPC 서비스 통합 프로젝트
· 각 마이크로서비스들을 쉽게 사용할 수 있도록 Aggregation
· 마이크로서비스 내 도메인간의 관계를 GraphQL로 표현, 이해하기 쉽도록 SDL과 GraphQL Voyager로 제공
· 당근마켓 내 독립적인 어드민 서비스들 간의 세션 공유를 위한 서버
· Node.js, GraphQL
· 전반적인 당근마켓 iOS/Android 클라이언트 내 WebView 기반을 개편
· iOS/Android 클라이언트와의 통신 규약을 정하고, 네이티브 통합에 대한 워크플로우를 정의
· JavaScript SDK 메인테이닝
· 당근마켓의 3번째 탭인 내 근처 탭을 웹뷰 형태로 개발.
· GraphQL Client Schema
· GraphQL Schema Stitching (@graphql-tools/stitch)
· Relay
· 기존의 1.0 MVP를 React.js로 전환
· Twilio Programmable Video 활용
· iframe을 활용한 플러그인 시스템 및 SDK 개발
· Vue.js 기반의 실시간 화상교육 웹사이트를 개발
· Twilio Programmable Video 활용
Work Experience
Leadership
· UX시스템 실 (프론트엔드코어 팀, 디자인시스템 팀) 리드
· 프론트엔드코어 팀 리드
· 프론트엔드 챕터 리드
Engineering
· 조합가능한 플러그인 인터페이스를 제공하는 전사 웹뷰 시스템 개발 (Stackflow)
· 스키마를 통한 인터페이스 문서 및 코드 생성 자동화 도구 개발 (Metabridge)
· SEO를 위한 콘텐츠 플랫폼 개발 (Jampot — Jamstack Data-layer as a Service)
· 랜딩페이지 CMS 및 SDK 개발 (Landkit)
· 웹사이트 기여 워크플로우 개발 및 운영
· 템플릿 코드를 통한 지속가능한 기술 온보딩 문서
Product
· 최근 방문한 서비스 실험
Engineering
· WebView 플랫폼 개발 (브릿지 인터페이스, 배포 시스템 등)
· 향상된 Transition을 통한 WebView UI/UX 개선 (Karrotframe)
· 웹사이트 플랫폼
Product
· 내 근처 탭 개발 및 운영
· 신규 서비스 풀스택 개발 (동네알바, 당근미니 등)
· 써드파티 연동 SDK, OpenAPI 개발
· 중고거래 검색 WebView 전환
Engineering
· 실시간 화상교육 웹 어플리케이션 개발
· 실시간 데이터 통신 규약 및 렌더링 엔진 개발
· 플러그인 시스템과 확장성 있는 설계
Product
· 라이브 방송 플랫폼 MVP 개발
· 코오롱인더스트리 내 글로벌 브랜딩 웹사이트를 React.js 기반으로 개편
· Headless CMS 활용
Side Projects
· `.env.example` 을 읽어 환경변수를 Validate 해주는 유틸 라이브러리
· 기존 영문 인터페이스를 한글로 바꾸고 색상으로 에러와 수정이 필요한 내용을 강조
· Event-sourcing library built on MongoDB
· Nact.js의 MongoDB 퍼시스턴트 통합