[email protected]

🔗 깃허브: https://github.com/bepyan

🔗 블로그: https://bepyan.me

소개

저는 사용자와 부드럽게 상호작용하는 것, 복잡한 것을 단순하고 간편하게 만드는 것에 열광합니다.

• Java Spring, ES3 기반 레거시 시스템을 Astro, Svelte, ES6 기반 신규 코드 베이스로 단계를 거쳐 마이그레이션했습니다. 과정에서 의존성을 파악하기 어려운 코드를 청산하고 코드 일관성을 지켜주는 코어 유틸을 고도화하여 복잡한 시스템을 단순화했습니다.
• 주도적으로 디자인/기획과 협의하여 프로덕트 UX를 개선합니다. 초기 로딩 화면 개선, 인터랙션 표준화, 모달 동작 개선 등 작업을 진행했습니다.
• 복잡한 워크플로우를 단순화하여 동료가 더 편리하게 작업할 수 있도록 주력합니다. PR에서 자주 언급되는 내용에 대한 ESLint 룰 작성, Jira-Github 상태 연동 자동화, PR 테스트 리포트 자동화 등 작업을 진행하여 팀 생산성을 향상시켰습니다.

경력

**Kakao, Frontend Engineer.**

2021.11 - (3년 5개월)

서비스 / 백오피스 개발

• 창작자 정산센터, 브런치, 티스토리 작가가 응원 받은 금액을 정산해주는 플랫폼 (2024.07 - 현재)
  • React, TypeScript, Webpack, React-Query, SCSS
• 포커스, 사내 이미지뷰어 라이브러리 (2023.02 - 2025.03)
  • Svelte, TypeScript, Vite, Vitest
• 브런치, 월 7천만 PV를 기록하는 글쓰기 플랫폼 (2022.02 - 현재)
  • Java Spring, velocity, Svelte, ES6, CSS, WYSIWYG (레거시: jQuery, Handlebars, ES3)

브런치 SSR 프레임워크 전환 (2024.10 - 현재)

• Java Spring 기반 SSR 구조의 웹 성능 개선 한계와 FE/BE 간 높은 결합도 문제 제기
• Node.js 기반 SSR 프레임워크 Astro로의 마이그레이션 전략 수립 및 리드
• POC를 마무리하고 현재 Astro, TypeScript, Svelte 5 기반으로 신규 코드 베이스로 이전 중

이미지뷰어 라이브러리 v1 개발 (2023.02 - 2024.09)

• FE 파트 조직에서 4명으로 진행한 사이드 프로젝트로 브런치, 티스토리, 다음 카페, 카카오맵 등 서비스에 성공적 도입
• 터치/마우스 이벤트 기반 이미지 스와이프 등 핵심 인터랙션 구현
• WCAG 2.1 접근성 가이드라인 준수하여 키보드 네비게이션 및 스크린리더 지원
• pnpm workspace 기반 모노레포 및 자동 CI-CD 환경 구축
• Astro(Starlight) 기반 사내 공식문서 제작

브런치 레거시 시스템 개선 (2022.03 - 2023.03)

• grunt → webpack → vite 점진적 전환, 전체 번들 사이즈 64.2% 감소 (39.4MB → 14.1MB)
• ES3, Handlebars → ES6 → Svelte로 점진적 코드베이스 이전 전략 수립 및 시행
• Java Spring Velocity 모델 경로 매핑 및 번들 경로 매핑 자동화하여 개발 생산성 향상
• Jenkins 기반 자동 테스트 환경 구축 (Jest, Cypress, Vitest)
• Sentry 기반 브라우저 에러 모니터링 시스템 고도화
• ESLint, Prettier, Stylelint 린트 시스템 구축

성능 최적화

• 브런치의 모든 페이지 lighthouse 성능 지표가 80점 이상 유지되도록 최적화
• 브런치북프로젝트 페이지 CLS 최적화하여 lighthouse 성능 지표 38점 향상 (43 → 81)
• 프로필 페이지를 Svelte로 리팩토링하면서 작가소개 탭 표기 시간이 90% 감소 (376ms → 37ms)

팀 생산성 향상 도구 개발

• 브런치 팀 업무 보조 크롬 플러그인 기능 확장 및 유지보수
• Jira 티켓 바탕으로 주간 업무 요약해주는 사이트 개발 (2023.06)
• 브런치 릴리즈 슬랙봇 개발 (2024.03)
• Shell Script 기반으로 Github PR시 Jira 상태를 자동으로 연동시킴 (2024.07 - 2024.08)
• DOM 요소 클릭 시 해당 Svelte 소스 파일을 IDE에 열어주는 기능 개발 (2024.08)
• 이미지뷰어 라이브러리 버그 제보 아지트봇 개발 (2024.11)

사내 기술 공유

• 브런치 글뷰는 어떻게 랜더링 되는가? (25.02.13)
• 왜 Error 타입은 unknown 일까? (24.11.27)
• 브런치 웹 SSR 프레임워크 전환 POC (24.11.08)
• Animations on the web (24.06.03)
• 브런치의 hydration (24.05.10)
• 브런치의 운영툴, 모바일 웹 개편 후기 feat. Svelte, Storybook (23.04.20)
• 브런치북 완독률 측정법 (22.11.15)
• 차세대 번들러 비교 및 분석 (feat. webpack, rollup, esbuild, vite) (22.01.19)
• CSS-in-JS 라이브러리들에 대한 고찰 (21.12.22)