안녕하세요!
덕업일치 개발자, 이혁재입니다.

Contact.

email

Channel.

blog
github
linkedin

중학생 때 우연히 Android 앱 개발을 시작했고, 현재는 프론트엔드 개발자로 활동하고 있습니다.

비즈니스 목표를 사용자에게 전달하기 위한 개발과정과 적절한 도구를 선택해 문제를 해결하는것에서 행복을 느낍니다.

물론 도구의 그립감, DX를 개선하는것도 좋아합니다.

Work experience.

주식회사 웰로

Frontend engineer

2023.11 - 재직중개인과 기업에게 맞춤 정책을 추천하는 GovTech 스타트업
TypeScriptJavaScriptNext.jsVue.jsSwaggerZustandTanstackQuerySCSSCSS ModulesTailwindCSSVercelpnpmJenkinsAWS LambdaAWS EC2DockerChakraUIMotionFigma
    • 프론트엔드 개발자가 없는 상태에서 합류하여 B2C, B2B, 백오피스 등 다양한 프로젝트 설계 및 개발
    • 프론트엔드 조직 확장 및 채용 기여
    • 빠른 제품 개발을 통해 시리즈 A 투자 유치에 기여

  • Project

    1. Wello Web & App 개발 (Flutter → Next.js 전환)
    • iOS/Android WebView, 웹 브라우저 환경 차이를 고려한 크로스 플랫폼 호환성 최적화
    • WebView 기반 앱 제품 설계 및 Tanstack Query를 모방한 네이티브와 웹 간의 브릿지 구현
    • Next 14 app directory 기반의 프론트엔드 아키텍쳐 설계
    • 앱과 웹 환경을 고려한 사용자 인증 플로우 개발
      OAuth 2.0 (Google, Apple, Naver, Kakao), 본인 인증 API 연동
    • route groups을 활용한 접근 제어 로직 개발
    • browser history를 앱과 웹 환경에서 일괄되게 관리하기 위한 history stack 및 router, link 컴포넌트 개발
    • 개인화 맞춤 정책 추천 및 기존 앱 기능 개발
    2. KB Pay 앱내에 Wello 웹 임베디드
    • 서로 다른 환경과 서브도메인(자사 앱, 웹, KB Pay) 간 클라이언트 데이터 공유 방식 설계
    • 동작 환경에 따라 기존 앱의 동작을 변경하는 모듈식 컨트롤러 설계
      여러 환경에서 동작하는 제품을 하나의 코드베이스로 관리함으로써 개발 효율성 유지
    • KB Pay 앱을 통한 인증 로직 개발
      타사 앱 스펙에 맞춰 최소 백엔드 리소스로 인증 로직 개발
      kp-pay
    • 폐쇄망 환경에서의 문제 해결
    3. DX 개선
    • 백엔드 응답 에러, 프론트엔드 에러 통합 커스텀 코드 체계 설계
    • 커스텀 코드와 제출한 Source Map을 활용해 Sentry 라벨링 및 사용자 리포트 기반 이슈 추적 환경 구축
    • 디자인팀 figma assets → react components 변환 도구 개발
      중복 assets 생성 방지
    • Error boundary 세분화
    • Docker 컨테이너 환경 구축
      일반 기업용 제품(EC2), 공공 기관용 제품(Naver Cloud) 배포 환경 통일
    • Prettier, ESLint rule 협의 및 추가, ESLint 9 버전 적용
    • Secret Manager 기반 환경변수 관리 도입
    • API 명세를 기반 endpoint로 접근 가능한 react query options 및 요청 메소드 생성 스크립트 개발
    • 모든 제품의 스타일링 방식을 tailwind로 통일
    • Lambda 기반 동적 Image 최적화 컴포넌트 개발
      이미지 로드 시간 30% 이상 단축
    4. Wello Voucher, 응급실 찾기 서비스 개발
    • 지도 Pin Grouping 로직 개발grouping
    • Naver Map API 연동
    • 디바이스 Viewport 사이즈와 지도의 축척을 통해 조회 리소스 최적화
      API 응답 시간 개선, 평균 11초 → 2초 (80% 이상)
    • 범용 옵티미스틱 업데이트 로직 개발
    • 터치 가속도를 이용한 User 스크롤 인터렉션 및 Windowing 로직 개발
      브라우저 스크롤 활용이 불가능한 환경에서 스크롤 인터렉션 제공
      scroll
    5. Wello Biz 개발 (Nuxt → Next.js 전환)
    • PNPM, Turborepo 기반 모노레포 환경 구성
    • 공유 리소스(assets, components, hooks) 패키지 정의 및 개발
    • 사용자 인증, 결제 플로우 개발
      Email, OAuth 2.0 인증 방식 (Kakao, Google), PG사 연동
    • 사용자 권한에 따른 pathname, middleware 기반의 접근 제어 및 문서 암호화/복호화 로직 개발
    6. Wello, Wello Biz SEO 및 번들 사이즈 최적화
    • fake sitemap과 주기적으로 경로가 변경되는 난독화된 sitemap 생성 로직 개발
      경쟁사 크롤링 봇 차단
    • 색인된 작동하지 않는 페이지 redirect 처리
    • Streaming Rendering 방식과 Server Component를 적극 활용하도록 리펙토링
      웹사이트 방문 유입 1,000% 이상 증가
      wello
    • 코드 스플리팅 및 레이지 로딩 적용
    • Webpack Bundle Analyzer, Next Unused를 활용해 번들 사이즈 최적화
      미사용 코드 및 비정상적 번들사이즈 원인 식별 & 제거
    • Next.js Tree shaking 버그 수정
      번들링 사이즈 40% 이상 감소
    7. 보안 인증 (ISMS-P, ISO27701, ISO27001) 대응
    • Github, Vercel 배포환경에서 On-Premise GitLab, Jenkins 환경으로 전환 & CI/CD 배포 파이프 라인 구축
      Backend, Frontend 인프라 통일 & 자산 관리 편의성 증가
    • B2B 서비스 2차 인증 로직 개발
    • 인스턴스 환경을 고려한 Turborepo 배포 최적화
      Vercel 환경과 유사한 배포 시간 확보
    • 장애 대응 롤백 환경 구축
    • AWS Load Balancer와 PM2를 결합한 하이브리드 부하 분산 & 무중단 배포 시스템 구축
      Vercel 환경에서 겪은 트래픽으로 인한 장애 재발 방지
    8. Wello, Wello Biz AI 도입
    • Wello 정책 요약 서비스 개발
    • Wello biz 문서, 사업 요약 서비스 개발
    • Next API Route 기반 Streaming API 정크 단위 캐싱 로직 개발
      평균 응답 속도 개선 및 비용 절감
    9. 백오피스 기술 스택 제품과 통일
    • Vue기반 백오피스를 Next.js 기반 환경에 임베디드
      최소 리소스로 백오피스 개발 환경 개선
    • 다중 node version 배포 파이프라인 구축
    • 서로 다른 프론트엔드 프레임워크 간 데이터 공유 로직 개발
    • 백오피스 인증 로직 Next.js로 이관
    10. Wello Biz 실시간 나라장터 정보 제공 기능 개발
    • AWS Lambda를 활용한 유저 요청에 따른 실시간 headless browser 핸들링 로직 구현
      최소 비용으로 공식 API, URL을 제공하지 않는 정보 제공
    • 데이터 가공 및 인터페이스 개발
    11. Wello 커뮤니티 개발
    • Wello Editor 개발 (tiptap 기반)
    • 포인트 적립 및 출금 기능 개발
    • 커뮤니티 기능 개발 및 SEO

코드스테이츠

Frontend engineer

2022.02 - 2023.08 (1년 7개월)9,000명 이상이 수강한 국내 최초 코딩 부트캠프 스타트업
TypeScriptStorybookNext.jsSwaggerZustandReactQuerySCSSCSS ModulesReactGraphQLApolloMobXStyledComponentsRollup.jsViteChakraUIYarn BerrypnpmNetlifyDockerFigma
    • 개발 프로세스를 개선하기 위해 동료들과 함께 여러 가지 에자일 프레임워크 시도 (칸반 → 스크럼반 → 스크럼)
    • 신규 개발 스택 제안, 기술스택 다양성을 유지하며 팀의 기술 발전 유도

  • Project

    1. WeWin 후불 결제 클라이언트 개발
    • 후불결제 백오피스, B2B 제품 개발
    • 스토리북을 활용한 컴포넌트 기반 개발 도입
    • 전자 서명 API 연동
    • 랜더링 최적화를 위한 사용자 입력, 유효성 검사 로직 및 컴포넌트 개발 (state localize)
      설문 관련 기능 페이지 단위 렌더링 5회 미만으로 감소
    • 성공적인 스프린트 목표 달성을 위한 개발 시간 추정 방식 개선
    • 스토리포인트 기반 업무 추정, 프로세스 경험
    • PR AI 코드 리뷰 도입 (GPT 3.5)
    2. Codeship 채용 플랫폼 개발
    • 3개의 제품(B2C, B2B, 백오피스) 클라이언트를 효율적으로 관리하기 위해 PNPM 기반 모노레포 개발환경 구축 & 기능 개발
    • 다양한 Form을 다루기 위한 react-hook-form 기반 커스텀 라이브러리 개발
    • 기존 MVP 유저 이탈을 방지하기 위한 마이그레이션 프로세스 개발
    • Lighthouse를 활용한 제품 최적화
      FCP 개선, 3.3초 → 2.6초 (약 20%)
    • vite + polyfill 기반 번들링 설정
      IE 11 환경 지원
    • OpenAPI-generator 도입
      API 스펙 변경으로 인한 버그 발생 감소
    • 스토리북을 활용한 디자인 시스템 구축
      디자이너와의 협업 비용 대폭 개선
    • 전사 라이브러리 private npm package 배포 파이프라인 구축

Side Projects.

개인 성장과 불편함을 해소하기 위해 개발한 1인 사이드 프로젝트입니다.

  • Briend

    • Bun
    • Next.js
    • ShadcnUI
    • tRPC
    • Tailwind
    • Firebase
    • TypeScript
    • Zustand
    • PWA
    Description
    QR 스캔을 통해 양방향 번역을 지원하는 인스턴트 채팅앱입니다. 처음엔 개인 컴포넌트 라이브러리와 Next 13 app directory 활용해 개발했고 현재는 Next 15와 shadcn 기반으로 전환했습니다. 비용을 줄이기 위해 Indexed DB와 React-Query session cache를 적극 활용해 정보를 저장하고 서버 및 외부 API 호출을 최소화할 수 있도록 설계했습니다.
    briend
    • Next.15, Tailwind v4, Bun 트러블 슈팅
    • i18n (영어, 태국어, 일본어, 중국어, 한국어, 베트남어)
    • API 호출 비용 최적화
    • firebase 기반 실시간 채팅 로직 개발
    • 나라별 시간 formatting 로직 개발
    • Anonymous 인증 및 SNS 로그인 & 계정 통합 로직 개발
    Link

  • Pastime UI

    • TypeScript
    • React
    • Storybook
    • SCSS
    • CSS Modules
    • Vite
    Description
    개인 프로젝트에서 사용하기 위해 개발한 React 컴포넌트 라이브러리입니다. Storybook을 이용해 문서화하고 Github action을 통해 자동으로 배포할 수 있게 구성했습니다. 사용자의 입력을 받는 컴포넌트들이 외부 상태를 업데이트시키지 않고 유효성 검사 기능을 자체적으로 제공합니다. 최근에 해당 라이브러리 목적을 shadcn이 충족시켜줘 더이상 업데이트 하지 않고 있습니다.
    • Storybook을 이용해 문서화
    • Github action을 통해 자동으로 배포
    • 사용자의 입력을 받는 컴포넌트들이 외부 상태를 업데이트시키지 않고 유효성 검사 기능을 자체적으로 제공
    Link

  • Korea webtoon API

    • TypeScript
    • NestJS
    • MongoDB
    Description
    여러 가지 웹툰 플랫폼을 크롤링한 데이터를 정형화하고 제공하는 API입니다. 지속적으로 트래픽이 발생하고 있어 유지보수 하고 있습니다.
    • Nest + MongoDB → Express + SQLite 마이그레이션
    • OpenAPI 스펙 swagger 문서 제공
    • Naver, Kakao Page, 다음 웹툰 페이지 및 API 응답 분석 및 크롤링 로직 개발
    • 각 웹툰 공급자 데이터 정형화
    Link

  • 블로그

    • TypeScript
    • Gatsby
    • GraphQL
    • Tailwind
    Description
    Gatsby와 개인 컴포넌트 라이브러리를 활용해 개발한 블로그입니다. Markdown을 활용해 글을 작성하고 Github action을 통해 자동으로 배포할 수 있게 구성했습니다.
    Link

  • Gititle

    • Javascript
    • Vue.js
    • SCSS
    • PWA
    Description
    커밋 메시지에 이모지를 활용하고 정해진 규칙에 맞춰 작성할 수 있게 도와주는 앱입니다. vue.js CDN 환경에서 개발했습니다.
    gititle
    Link

  • KNU LMS scheduler

    • Javascript
    • React
    • Electron
    Description
    실시간으로 개인 강의 페이지들을 크롤링하고 출석, 과제, 시험 등의 마감 기한을 알려주는 프로그램입니다. Electron 데스크탑 앱으로 만들어 대학생 커뮤니티에 공유하고 좋은 호응을 얻었습니다.
    knu-lms-scheduler
    Link

  • Code convetion packages

    • Prettier
    • ESLint
    • Stylelint
    Description
    프론트엔드 코드 컨벤션을 설정하는 패키지들입니다. PNPM 모노레포 형식으로 ESLint, Prettier, Stylelint 설정이 독립적으로 배포되고 설치할 수 있게 했습니다.
    Link

  • Korea COVID-19 API

    • TypeScript
    • Express
    • GraphQL
    Description
    여러 API 또는 웹상에 존재하는 COVID-19 관련 데이터를 정형화해 제공하는 API입니다. GraphQL을 이용해 사용자가 원하는 데이터만을 요청할 수 있게 했습니다.
    Link

Other Experience.

  • 2024년 웰로 우수사원 선정 (2024.12)
  • Primitive 개발 동아리 활동 / 취업 멘토링 (2022~ )
  • 정보처리기사 자격증 취득 (2021.06)
  • Primitive 개발 동아리 활동 / 안드로이드 개발 강의 (2016.04 - 2022.03)
  • Webtoon Hub 프로그램 저작권 등록 (C-2021-020527)
  • 공주대학교 컴퓨터 공학 전공 (2016.04 - 2022.08)

Skill.

Overall
  • 포지션에 관계없이 제품의 발전을 위해 고민하고 의견을 제시합니다.
  • 이슈 해결을 위해 개발 외적인 방법을 포함한 다양한 방식을 적극적으로 탐색하고 최선의 결과를 얻을 수 있게 노력합니다.
  • 익숙하지 않은 개발 환경에서도 빠르게 적응하여 업무를 수행할 수 있습니다.
  • Jira, Notion, Figma와 같은 협업 도구를 활용해 효율적으로 업무를 수행할 수 있습니다.
Frontend
  • Next.js, React, Vue 기반의 프로젝트를 구축하고 유지보수할 수 있습니다.
  • CSS, Framer Motion을 활용해 유저와 상호작용하는 애니메이션을 구현할 수 있습니다.
  • Next.js의 Api route나 Node Server를 활용해 서버 환경에서 동작해야할 로직을 분리 개발할 수 있습니다.
  • 웹뷰 기반의 하이브리드 앱과 브라우저 환경에서 작동하는 프론트엔드 프로젝트를 설계할 수 있습니다.
  • 제품 요구사항에 맞게 Vite, Webpack, Rollup 등의 번들링 도구를 설정해 사용할 수 있습니다.
  • SEO와 접근성이 준수한 웹 페이지를 구축할 수 있습니다.
Backend
  • BFF와 같은 Node 기반의 간단한 API 서버나 소켓 서버를 구축할 수 있습니다.
  • 프론트엔드 입장에서 효율적인 스키마 설계에 대해 고민하고 의견을 제시할 수 있습니다.
DevOps
  • Vercel, Netlify와 같은 서버리스 플랫폼과 EC2, Naver Cloud Platform과 같은 클라우드 서비스 위에서 배포 환경을 구축 할 수 있습니다.
  • Github Actions이나 Jenkins와 같은 CI/CD 툴을 이용해 배포 자동화 파이프라인을 구축할 수 있습니다.
  • Yarn berry, PNPM과 같은 패키지 매니저와 Turborepo를 이용해 모노레포 구조의 프로젝트를 구축하고 최적화할 수 있습니다.
  • Docker를 이용해 컨테이너 기반의 배포 환경을 구축할 수 있습니다.
  • Lambda, S3, CloudFront, Secret Manager와 같은 AWS 서비스를 상황에 맞게 활용할 수 있습니다.