DEV-BBAK 블로그

  • 전화번호 : +82 10-2474-2219
  • 이메일 : wnsguddl789@gmail.com

소개

4년차 프론트엔드 엔지니어로서 웹과 모바일 플랫폼 전반을 아우르는 실무 경험을 보유하고 있습니다.

레거시 시스템의 현대화, 디자인 시스템 구축, 모노레포 전환, 브릿지 통신 설계 등 다양한 기술 프로젝트를 리드하며 개발 생산성과 사용자 경험 개선이라는 두 축에서 꾸준한 성과를 만들어왔습니다.

기술적인 완성도뿐만 아니라, 매출 증대·사용자 유입·전환율 개선 등 비즈니스 임팩트 중심의 개발을 지향합니다.

업무 경력

데이원컴퍼니 - 포도

Frontend Developer

2024년 10월 - 현재

/icons/pull-request_gray.svg
포도는 전 세계 누구나 외국어를 쉽게 배울 수 있도록 하기 위해 시작된 글로벌 1:1 무제한 외국어 레슨 플랫폼입니다. 초기 멤버로서 프론트엔드 개발을 주도하며, 전 세계 튜터와 학생들을 연결하는 안정적인 실시간 화상 수업 시스템을 구축했습니다.
  1. 레거시 시스템 마이그레이션 및 멀티존 마이크로프론트엔드 아키텍처 도입
      • 도전 과제

          • 사내 웹 서비스는 PHP, Nuxt.js(Vue), Next.js 등 서로 다른 기술 스택으로 개발된 세 개의 독립 웹앱으로 구성되어 있었습니다.

          이로 인해 다음과 같은 문제가 있었습니다:

        • 기술 이질성으로 인한 개발 및 유지보수의 복잡성
        • 서로 다른 도메인을 사용하여 인증 상태 및 공통 리소스를 공유할 수 없어 일관된 사용자 경험 제공이 어려움
        • 페이지 단위로 점진적인 마이그레이션이 어려워, 신규 기능을 안정적으로 도입하기 어려움
      • 해결 방법
        • 웹과 앱을 통합 관리하기 위해 Next.js 및 React Native를 주요 기술로 채택하고, 신규 기능은 이 기술 스택으로 개발
        • 백엔드 API 요청을 단순화하기 위해 Hono 기반 BFF 서버를 도입
        • CDN 기반 멀티존 마이크로프론트엔드 아키텍처를 설계하고 도입
          • CloudFront를 이용해 하나의 도메인 아래 기존 앱(PHP/Vue/Next.js)을 경로 단위로 통합
          • 공통 Layout Shell과 Auth Provider 구조를 도입하여 서비스 간 공통 리소스 및 인증 상태를 공유할 수 있도록 구성
          • 각 앱은 독립적으로 배포되며, 변경 없이 통합 도메인 하에서 공존 가능하도록 설정
      • 성과
        • 세 개의 웹앱을 하나의 도메인으로 통합하여, 서비스 간 이동 시 더 자연스럽고 일관된 사용자 경험 제공
        • 레거시 앱은 유지하면서도, 신규 기능은 점진적으로 도입 가능한 마이그레이션 전략 기반 마련
        • 아키텍처 통합을 통해 운영 효율성과 확장성이 향상됨
        • 서비스 구조를 정리하면서 팀 내 기술 방향성이 명확해지고 협업 효율이 개선
        • React로 개발된 모듈(예: 모달 컴포넌트)을 Vue2 기반 앱 위에 iframe 방식으로 통합하여, Vue와 React가 공존할 수 있는 점진적 마이그레이션 구조 구현
        • WebView 환경에서 필수적인 도메인 단일화를 유지하면서 MFE 구조를 적용하여, 인증/세션/쿠키 유지 등 앱 연동 요구사항도 충족
  1. 인증 시스템 및 리다이렉트 게이트웨이 구현
      • 도전 과제: 다양한 소셜 로그인과 복잡한 인증 플로우를 처리해야 했으며, OAuth 인증 특성상 쿼리 파라미터를 많이 전달하기 어려운 문제가 있었습니다.
      • 해결 방법:
        • OAuth Provider와 연동된 인증 시스템을 구축하고, 목적지 파라미터를 활용한 리다이렉트 게이트웨이를 구현했습니다.
        • Redis를 활용한 상태 관리 방식을 설계하여 destination 파라미터만 URL로 전달하고 추가 매개변수(level 등)는 Redis를 통해 관리했습니다.
        • Redis 데이터는 일정 시간(1분) 후 자동 만료되도록 설정하여 보안을 강화하고 마케팅 플레이에 유연하게 대응했습니다.
        • 시스템 설계 문서화 및 정책 문서를 작성하여 개발자 간 명확한 이해와 지속적인 유지보수가 용이한 구조를 확립했습니다
      • 성과
        • 사용자 상태(미인증/인증됨)와 목적지에 따른 분기 처리로 원활한 사용자 경험을 제공했습니다.
        • 화면의 1:1 매칭이 아닌 화면의 특정 요소로 이동하는 1:N 매칭 요구사항을 효과적으로 해결했습니다.
        • 마케팅 팀과 오픈톡 캠페인을 위한 간결한 URL 구조를 제공하여 마케팅 활동 효율성을 높였습니다.
  1. 네이티브-웹 브릿지 시스템 구축
      • 도전 과제: 웹뷰와 네이티브 앱 간의 원활한 통신과 라이프사이클 관리가 필요했습니다.
      • 해결 방법: 타입 안전성이 보장된 양방향 브릿지 통신 인터페이스를 설계하고, 백그라운드-포그라운드 전환 시 사용자 경험을 최적화했습니다.
      • 성과: 1시간 이하/초과에 따른 차별화된 웹뷰 관리 정책을 도입하여 사용자 경험과 메모리 관리 효율성을 동시에 확보했습니다.
  1. 도메인 개발
      • 도전 과제: 글로벌 사용자를 위한 효율적인 예약 및 결제 시스템이 필요했습니다.
      • 해결 방법: SQS 기반 이벤트 큐 시스템을 활용한 선착순 쿠폰 발급 및 글로벌 타임존을 고려한 튜터 스케줄링 시스템을 개발했습니다.
      • 성과: 다양한 국가의 사용자들이 원활하게 서비스를 이용할 수 있게 되었습니다.
  1. 개발 프로세스 개선
      • 도전 과제: 개발부서와 비개발 부서 간 커뮤니케이션이 비효율적이었습니다.
      • 해결 방법: 정적 텍스트 관리 시스템과 국제화 언어팩 운영 자동화를 도입했습니다. 토큰기반의 디자인 시스템을 설계하여 디자인 SSOT를 지향했습니다.
  1. 디자인 시스템 구축
      • 도전 과제: 일관된 디자인 적용과 크로스 플랫폼 지원이 필요했습니다.
      • 해결 방법: shadcn + Tailwind CSS를 기반으로 디자인 시스템을 구축하고, Figma Design Token을 활용한 자동화 파이프라인을 구현했습니다.
      • 성과: 디자인 토큰 기반 설계로 디자인-개발 간 일관성을 확보하고, Style Dictionary를 활용해 크로스 플랫폼 토큰 관리를 실현했습니다.

휴톰

Software Engineer

2023년 6월 - 2024년 10월 (퇴사 회고)

/icons/pull-request_gray.svg
휴톰은 디지털 혁신을 통해 수술 환경을 혁신하는 AI 수술 플랫폼입니다. 수술 전(Pre-op), 수술 중(Intra-op), 수술 후(Post-op) 전 과정을 아우르는 종합적인 솔루션을 제공하여 의료진이 더 나은 환자 치료를 할 수 있도록 지원합니다.
  1. 모노레포 도입으로 개발 환경 개선
      • 도전 과제: 여러 프로젝트가 별도 코드베이스로 관리되어 일관성 유지와 패키지 공유가 어려웠습니다.
      • 해결 방법: Turborepo를 활용한 모노레포 환경을 구축하고, 공통 컴포넌트와 유틸리티를 패키지화했습니다. Trunk Based Development와 Feature Flag를 도입하여 안정적인 배포 환경을 만들었습니다.
  1. hVAT 영상 라벨링 솔루션 개편 및 리드
      • 도전 과제: 어노테이터들이 영상을 통해 데이터 라벨링을 제공하는 레거시 시스템의 문제점 해결이 필요했습니다.
      • 해결 방법: 서드파티 없이 자체 비디오 플레이어 개발 및 Zustand와 React-Query를 도입하여 상태 관리를 최적화했습니다. MongoDB에서 PostgreSQL로 전환하여 관계형 데이터베이스의 장점을 활용했습니다.
      • 성과: 코드 가독성과 유지보수성이 크게 향상되었고, 데이터의 무결성을 보장할 수 있게 되었습니다.
  1. SurgGram P.O.C
      • 도전 과제: 데이터를 활용해 수술 예후 상황을 예측할 수 있는 플랫폼 개발이 필요했으며, 온프레미스 환경에서 제공되는 제품의 효율적인 개발 프로세스 구축이 필요했습니다.
      • 해결 방법:
        • 플랫폼팀 주도로 개발 범위를 정의하고 키스크린 기반의 백로그를 작성하여 프로젝트 일정을 관리했습니다.
        • NextJS의 App Router를 사용하여 서버 컴포넌트와 클라이언트 컴포넌트를 적재적소에 배치했습니다.
        • OpenAPI Specification과 Design First 전략을 적용하고, msw-auto-mock으로 모킹된 핸들러를 통해 백엔드 개발과 병렬적으로 프론트엔드 개발을 진행했습니다.
        • 런타임에 환경변수를 주입받을 수 있도록 빌드 프로세스를 개선했습니다.
      • 성과:
        • 코드 제너레이팅을 통해 FE 개발자가 작성해야 하는 코드의 수를 줄여 개발 효율성을 높였습니다.
        • 피쳐 플래그를 통해 환경별 기능 제공 범위를 제어하고, 테스트 전용 워크스페이스를 구축하여 안정적인 배포 환경을 만들었습니다.
        • 백엔드와 프론트엔드 개발의 병목 현상을 줄여 전체 개발 기간을 단축했습니다.
  1. 인프라 최적화로 비용 절감
  • 도전 과제: 24시간 365일 가동되는 서버 인스턴스로 인해 불필요한 비용이 발생했습니다.
  • 해결 방법: Google Compute Engine에서 Google Cloud Run으로 전환하고 Cloud Scheduler를 활용하여 워크타임에 맞춰 서비스를 활성화했습니다.
  • 성과: 서버 운영 비용을 35% 절감하면서도 콜드스타트 문제를 해결하여 사용자 경험을 유지했습니다.

세진 마인드

Frontend Developer

2022년 3월 - 2023년 5월

/icons/pull-request_gray.svg
세진마인드는 특허 및 지식재산권 관리 솔루션을 제공하는 회사입니다. PIIP Intranet과 Markiny라는 두 가지 주요 프로젝트에 참여하여 프론트엔드 개발을 담당했습니다.
  1. 단위 테스트 도입으로 코드 안정성 확보
      • 도전 과제: 자주 변경되는 기획으로부터 코드 안정성을 유지하는 것이 어려웠습니다.
      • 해결 방법: Jest와 React Testing Library를 활용한 단위 테스트를 도입하고, 140개의 테스트 케이스를 작성했습니다.
  1. PIIP Intranet 프론트엔드 개발
      • 도전 과제: 특허관리 백 오피스 시스템의 사용자 경험 개선과 효율적인 데이터 관리가 필요했습니다.
      • 해결 방법:
        • Next.js를 활용하여 클라이언트 및 어드민 프로젝트 개발
        • Lerna를 사용한 Monorepo 환경에서 코드 공유와 관리 효율화
        • Apollo Client와 GraphQL을 통한 데이터 관리 최적화
        • Ant Design과 styled-components를 결합한 일관된 UI 구현
      • 성과: 필요한 데이터만을 효율적으로 요청하여 오버페칭과 언더페칭을 방지하고, 클래스 컴포넌트를 함수 컴포넌트로 리팩토링하여 코드 품질을 개선했습니다.
  1. Markiny 프론트엔드 개발
      • 도전 과제: 온라인 상표 컨설팅 및 출원 서비스의 사용자 경험과 렌더링 최적화가 필요했습니다.
      • 해결 방법:
        • Next.js를 활용한 효율적인 렌더링 구현
        • Lerna 기반 Monorepo 환경에서의 개발로 코드 일관성 유지
        • GraphQL을 통한 데이터 페칭 최적화
      • 성과: 사용자 경험이 개선되고, 코드 공유 및 관리 효율성이 높아졌습니다.

무른모

Web Developer Intern

2021년 8월 - 2021년 12월

/icons/pull-request_gray.svg
무른모에서 사내 구성원 전용 백 오피스 시스템인 LTS3 개발에 참여했습니다.
  1. 사내 백오피스 시스템 개발
      • 도전 과제: 연차(휴가) 관리 및 기타 사내 업무를 위한 효율적인 백오피스 시스템이 필요했습니다.
      • 해결 방법:
        • Linux Crontab을 이용한 자동화 알림 기능 개발
        • Laravel 프레임워크와 MySQL 데이터베이스를 활용한 서버 구축
        • MVC 패턴 기반 설계로 코드 모듈화
        • jQuery를 활용한 동적 사용자 인터페이스 구현
      • 성과: 연차 관리 업무 효율화 및 사용자 경험을 고려한 직관적인 인터페이스를 제공했습니다.

유한회사 노마드 코더 (계약직)

  1. 리액트 스터디 멘토링
      • 도전 과제: 다양한 배경과 수준을 가진 스터디원들에게 효과적인 리액트 학습 경험을 제공해야 했습니다.
      • 해결 방법:
        • 스터디원들의 프로젝트와 코드에 대한 상세한 코드 리뷰 제공
        • 개인 면담을 통한 취업과 이직 관련 상담
        • 실무 경험을 바탕으로 한 개발 방향성 제시
      • 성과: 스터디원들의 기술적 성장을 도왔으며, 멘토링을 통해 본인의 리액트 지식도 더욱 체계화할 수 있었습니다.