레몬베이스 (Lemonbase)
Gyumin Choi's Portfolio/레몬베이스 팀 (Lemonbase Team)/레몬베이스 (Lemonbase)

레몬베이스 (Lemonbase)

 
레몬베이스는 개인과 조직의 성과와 몰입 관리를 지원하는 B2B HR SaaS입니다.
목표 관리, 리뷰, 1:1 미팅, 서베이, 피드백 등의 다양한 기능을 통해 구성원들이 성장하고 몰입할 수 있는 환경을 제공합니다.
주로 방치된 기술적 문제 해결과 모범 사례 제시를 통해 사용자 경험, 서비스 안정성, 엔지니어링 생산성 향상에 집중했습니다.
 
레몬베이스: 건강한 성장의 시작
별도 비용, 설치 없이 바로 시작! 다면평가, 성과평가, 목표관리, OKR, 1:1 미팅을 체계적이고 쉽게 운영하세요.
레몬베이스: 건강한 성장의 시작
https://lemonbase.com/
레몬베이스: 건강한 성장의 시작
 
 

Roles & Responsibilities

  • ‘목표’ 관련 기능 사용성 개선
  • 목표 가중치 승인(Wizard Form UI) 기능 구현
  • 반응형 UI 구현을 위한 breakpoint 정의 및 레이아웃 UI 개편
  • 목표 테이블 조회 성능 최적화 (데이터 연산 시간 복잡도 개선)
  • 페이지별 Lazy Loading 적용
  • 목표 도메인의 Frontend 아키텍처 재설계 및 시각화, 코드베이스 재구성
  • 레거시 코드 리팩토링 전략 수립 및 실행
  • Frontend 의존성 그래프 생성 스크립트 작성, 리팩토링 과정에 활용 (Dependency cruiser)
  • Frontend 통합 테스트 환경 구성, 테스트 작성
  • 디자인 시스템 제작 기여
 

Achievements

  • 약 30,000개의 목표 조회 및 테이블 렌더링 소요 시간을 약 30초에서 5초로 단축 (API 응답 시간 포함)
  • 새 코드베이스를 통해 지식 전파, 엔지니어링 생산성 향상, 엔지니어의 업무 스트레스 감소
    • 현 조직 구조에 적합한 코드베이스 레퍼런스 제시 (eslint-plugin-boundaries를 활용한 MonoRepo 흉내), 지원 조직 없이 각 스쿼드가 서로 협업하고 자산을 공유할 수 있는 환경 구성
    • 레이어의 격리와 엄격한 Lint 규칙 적용으로 레거시 코드로부터 부패 방지 (Anti-Corruption Layer), 일관된 코드 패턴을 형성해 엔지니어가 예측 가능한 코드를 작성하는 상태에 도달
  • 스프린트 목표(기능 변경 범위)와 일정을 고려해, 페이지, 공통 UI, API 단위로 레거시 코드를 점진적 개선 (Strangler Pattern)
  • 통합 테스트 작성으로 기능 변경이나 리팩토링으로부터 서비스 안정성 확보
  • 사용 중인 컴포넌트 라이브러리의 커스터마이징 환경 구성, 디자인과 실제 제품의 불일치 해소
  • Foundation 디자인 토큰 정의 및 19개의 공통 컴포넌트 제작
 

Learned

  • 더 이상 제어할 수 없는 수준의 레거시 코드와 새로운 가치 전달 사이에서 기술적인 문제를 해결하기 위한 현실적인 전략 수립 및 실행
 

Tech Stack

  • TypeScript, React, ts-belt
  • SWR
  • Tailwind CSS
  • Jest, MSW
  • pnpm, Vite, ESLint, Prettier, husky, GitHub Actions