Seung Hun

프론트엔드 개발자 이승훈 이력서

프론트엔드 개발자

이승훈

기본 정보

안녕하세요, 프론트엔드 개발자 이승훈입니다. 현재 라프텔에서 애니메이션 OTT 서비스의 웹 및 앱 개발을 담당하고 있으며, DX와 UX 개선에 큰 관심을 가지고 있습니다. 문제점과 비효율성을 분석하고 개선하는 데 열정을 쏟고 있습니다.

자기 소개

오픈소스

경력

주식회사 라프텔 · 사원 · 프론트엔드팀 (정규직)

2025-01 - 현재 (재직 중)

웹 성능 최적화

  • 국내 웹 홈 화면의 콜렉션 렌더링 성능을 최적화하였습니다.
    • API 요청이 직렬로 처리되어 첫 콜렉션 표시까지 평균 2500ms가 소요되는 문제를 분석하였습니다.
    • 스켈레톤 UI를 컴포넌트 단위로 분리하고, API 요청을 병렬화하여 응답 순서대로 화면에 렌더링하도록 개선하였습니다.
    • 첫 콜렉션 표시 시간을 평균 2500ms에서 303ms로 약 88% 단축하였습니다.

번들 사이즈 최적화

  • 웹 서비스의 번들 사이즈를 최적화하였습니다.
    • SVG를 Sprite SVG로 전환하고, 사용하지 않는 패키지를 정리하며, 코드 스플리팅을 적용하였습니다.
    • Client JS 번들을 6.69MB에서 6.35MB로 약 5.08% 감소시켰습니다.
    • Server JS 번들을 5.88MB에서 5.59MB로 약 4.93% 감소시켰습니다.

인앱결제 리팩토링

  • iOS/Android 플랫폼별로 분리되어 4곳에 분산된 인앱결제(멤버십, 포인트) 로직을 단일 모듈(features/iap)로 통합하였습니다.
    • Redux/Epic 기반 아키텍처를 React Hooks 기반으로 전환하였습니다.
    • 38개 파일 삭제, 불필요한 스크린 2개를 제거하고 순 코드 257줄을 감소시켜 코드 구조를 단순화하였습니다.

DX 개선

  • React Native 기반 앱 개발 시 스크린 생성 과정이 번거로워, 필요한 코드들을 자동으로 설정해주는 스크린 생성 CLI를 개발하여 DX를 개선하였습니다.
  • Amplify를 활용하여 개발 테스트용 preview 배포 시간을 7분 중반에서 4분 초반으로 단축하였습니다.
    • next build 시 type 및 lint 체크를 생략하여 불필요한 빌드 시간을 단축했습니다.
    • type 및 lint 검사는 Git Action에서 별도로 실행하여 안정성을 유지하였습니다.
    • node_modules 캐싱 시간을 분석한 결과, 캐싱 처리 시간이 새로 설치하는 시간보다 오래 걸리는 것을 확인하여 불필요한 캐싱을 제거했습니다.
  • Claude Code를 활용한 AI 기반 개발 환경을 구축하여 팀의 생산성을 향상시켰습니다.
    • 프로젝트에 맞는 CLAUDE.md 및 docs를 구상하고 구축하였습니다.
    • Figma MCP를 연동하여 현재 코드베이스의 컨벤션을 따르는 디자인 구현 스킬을 개발하였습니다.
    • Jira MCP를 연동하여 이슈 기반 개발 요청을 한번에 처리할 수 있도록 자동화하였습니다.
    • GitHub CLI를 활용한 코드 리뷰 반영 스킬을 개발하여, PR에 올라온 리뷰를 우선순위별로 정리하고 반영하는 프로세스를 구축하였습니다.
    • Figma MCP와 Playwright MCP를 결합한 디자인 검수 스킬을 개발하여, 수치 비교뿐만 아니라 스크린샷 기반 정밀 비교 프로세스를 구축하였습니다.

사내 레거시 프로젝트 개선

  • 사내 이메일 템플릿 관리 프로젝트의 버전을 업데이트하고, 모노레포 구조로 전환하였습니다.

(주)펫프렌즈 · 사원 · 가치개발본부 (정규직)

2023-06 - 2024-12 (퇴사)

모노레포 전환

  • Turborepo와 pnpm을 활용해 펫프렌즈 앱, 펫프 인슈어런스 앱, 공용 패키지들을 하나의 모노레포로 통합하여 팀 전체의 생산성을 향상시켰습니다.
  • CI/CD 파이프라인을 재설계하고 Express 기반 리모트 캐시 서버를 직접 구축하여 배포 효율성을 극대화했습니다.
  • 리모트 캐싱 기능을 적극 활용해 배포 시간을 기존 11~12분에서 5분으로 단축했습니다.
  • 관련 내용은 회사 기술 블로그에 자세히 소개되어 있습니다.

SEO 최적화

  • SEO 프로젝트를 통해 회사에 처음으로 리치 스니펫(Rich Snippet) 개념을 도입하여, 상품 상세 화면에 가격, 리뷰 등의 정보를 사전에 노출함으로써 검색 결과의 클릭 유도를 강화했습니다.
  • 펫프렌즈 앱 전반의 SEO 개선을 위해 시맨틱 태그와 적절한 head, meta 태그를 점검하고, Google Search Console을 활용하여 SEO 성능을 지속적으로 모니터링했습니다.

펫프 인슈어런스 서비스 런칭

  • 신규 서비스인 펫프 인슈어런스 서비스를 런칭하였습니다.
  • 펫프렌즈 앱에서는 특정 버전부터 새로운 웹뷰를 제공하고, 구버전에서는 동일한 웹뷰 내에서 URL을 변경하는 방식으로 구현하였습니다.
  • 인슈어런스 가입 및 보험금 신청 프로세스에서 핵심적인 폼 처리를 효율적으로 개선하기 위해, React-Hook-Form과 Zod를 활용하여 렌더링 최적화 및 효과적인 유효성 검사를 구현하고 팀원들과 기술을 공유하였습니다.
  • Docker와 CI/CD 파이프라인을 구축하여 배포 프로세스를 자동화하였습니다.

DX 개선

  • Vue.js → Next.js 마이그레이션
    • 내 정보 페이지, 비밀번호 확인/변경, 휴대폰 인증 페이지를 Next.js로 마이그레이션하여 최신 기술 스택으로 전환했습니다.
  • 디자인 시스템 개선
    • 기존 디자인 시스템의 부족한 부분을 개선하고, 디자이너와 개발자 간 원활한 커뮤니케이션을 통해 체계적인 시스템 구축에 기여했습니다.
  • ESLint & Prettier 라이브러리 개발
    • 사내 코드 컨벤션 표준화를 위해 ESLint와 Prettier 설정을 라이브러리화했습니다.
    • 에어비앤비 룰을 기반으로 JavaScript, TypeScript, React, Next.js용 4가지 설정을 각각 구성하고, 하위 설정이 상위 설정을 확장하는 방식으로 개발했습니다.
    • 이 작업으로 펫프 인슈어런스 프로젝트의 Lint 및 Prettier 설정 시간을 크게 절감할 수 있었습니다.
  • 패키지 매니저 전환
    • 기존 사내에서 사용하던 Yarn PnP와 Zero Install 방식을 PNPM으로 전환하여, 모노레포 구조에서 발생하던 루트 의존성 문제와 Git 부하 문제를 효과적으로 해결했습니다.

(주)에바(EVAR) · 사원 · 플랫폼 팀 (정규직)

2022-09 - 2023-05 (퇴사)

Vue.js → Next.js 마이그레이션

  • 전기차 충전기 어드민 관리 사이트를 Vue.js에서 Next.js로 마이그레이션했습니다.

i18n을 사용하여 다국어 서비스 구현

  • 어드민 사이트에 다국어 기능을 추가하기 위해 i18next 라이브러리를 사용하여 영어와 일본어를 지원하는 다국어 서비스를 구현했습니다.

포트폴리오