Contact & Channels

• Email | [email protected]
• Github | https://github.com/L2HYUNN
• Blog | **https://l2hyunn.github.io/**

🧑🏻‍💻  Introduction

안녕하세요! 사용자 가치를 우선으로 생각하는 개발자 이동현입니다.

프로그램은 “사용자를 가짐으로써 가치를 가진다” 는 생각 아래 사용자의

가치를 최우선으로 생각하며 개발하기 위해 노력하고 있습니다.

💻  Career

Tax Canvas

24.05.30 ~ ing

Tax Canvas는 생성형 AI를 기반으로 세무 전문가를 위한 사건 분석 서비스를 제공하는 기업입니다.

초기 스타트업 팀에 프론트엔드 개발자로 합류하여 클로즈 베타 서비스를 개발 및 운영하였으며, 사용자 피드백에 따른 변경 사항에 대응했습니다.

이후 본격적인 서비스 제공을 위해 새로운 버전을 개발하였고 현재 운영 및 유지 보수 작업을 진행하고 있습니다.

Experiences

• 정식 서비스 개발 및 운영 | 2024.08.19 - ing

  기존 서비스의 문제를 분석하고 이를 바탕으로 UX 및 DX를 개선하고자 노력했습니다.

  사용자들이 더욱 빠르게 분석 결과를 확인하고 싶어한다는 니즈를 파악하고 이를 기술적으로 해결하고자 노력했습니다.

  SSR, SSG등 서버 사이드 랜더링 전략을 통해 최대한 TTV를 줄여 사용자에게 보다 빠르게 정보를 전달하기 위해 기존 React 프로젝트를 Next로 마이그레이션 했습니다.

  Server-Sent-Event 통신을 통해 AI 분석 결과를 실시간으로 반영하여 사용자가 빠르게 분석 결과를 확인할 수 있게 만들었습니다.

  이전 서비스를 통해 모달 프로세스에 많은 변경 사항이 발생한다는 것을 분석하여 변경에 유연한 구조를 적용하고자 노력했습니다.

  토스의 useFunnel을 참고하여 간소화된 형태의 Funnel을 구현하여 변경에 쉽게 대응할 수 있게 만들었습니다.

  • 기존 React 프로젝트를 Next로 마이그레이션 (FCP 약 40% 이상 개선)
  • Server Sent Event 통신을 통해 받은 실시간 정보의 상태를 반영하기 위해 로딩, 에러 등의 상태를 가지는 커스텀 훅 구현
  • react-hook-form, **zod를 이용한 Controlled 기반의 **Smart Form Component 구현
  • 모달 프로세스의 변경 사항을 빠르게 반영하기 위한 Funnel 구조 구현 및 적용
  • Action Cache를 이용한 **CI**시간 단축 (약 30초 단축)
  • Webpack DefinePlugin을 이용하여 Sentry에 Tree Shaking 적용 (First Load JS 크기를 약 17.8% 감소)
  • React Dev Tools Profiler를 통해 컴포넌트 랜더링을 분석하고 이를 바탕으로 랜더링 최적화 진행

Next14, TypeScript, TailwindCSS, Tanstack Query, React Hook Form, Framer-Motion

• 클로즈 베타 서비스 개발 및 운영 | 24.07.08 - 24.10.09

  • API 개발이 완료되지 않은 상태에서 빠른 개발을 위한 **MSW**를 도입 및 Mocking Server 운용
  • 에러 추적을 위한 Sentry 도입 및 유효한 에러 로그(메시지, 유저 정보 등)를 수집할 수 있게 설정
  • Sentry 에서 발생하는 에러를 공유하여 Crash Free Session 86.85% → 97.33% 로 개선
  • 클로즈 베타 서비스의 목적 (유저의 서비스 이용에 대한 경험 수집)에 주목하여 Hotjar 도입 제안 및 도입

  React, TypeScript, Emotion, MSW