Alvin Gyumin Choi

레몬베이스 (Lemonbase)

소속: 레몬베이스 팀 Lemonbase

레몬베이스는 개인과 조직의 성과와 몰입 관리를 지원하는 B2B HR SaaS입니다. 목표 관리, 리뷰, 원온원 미팅, 서베이, 피드백 등의 다양한 기능을 통해 구성원들이 성장하고 몰입할 수 있는 환경을 제공합니다.

주로 방치된 기술적 문제 해결과 모범 사례 제시를 통해 사용자 경험, 서비스 안정성, 엔지니어링 생산성 향상에 집중했습니다.

Tech Stack:
TypeScript, React, ts-belt, SWR, Tailwind CSS, Ant Design, Jest, MSW, pnpm, Vite, ESLint, Prettier, husky, GitHub Actions

서비스 링크

기여

목표 도메인의 기능 구현·개선

목표 테이블 렌더링 시간 단축

  • 목표 테이블을 렌더링하기 위한 데이터의 연산 알고리즘 최적화 (시간 복잡도 개선)
  • 30,000행의 목표 테이블 렌더링 시간을 약 25초에서 1초로 단축 (API 응답 시간 포함 시 약 30초 → 5초)

제품 레이아웃의 반응형 UI 전환

  • 좁은 너비의 화면에서 깨지던 UI를 전수 조사, breakpoint 정의
  • 반응형 디자인으로 전체 레이아웃 재구현

디자인 시스템 기여 및 커스터마이징 기반 마련

  • 디자인 토큰 정의, 19개의 범용 컴포넌트 제작
  • 사용 중인 컴포넌트 라이브러리(Ant Design)의 커스터마이징을 위한 환경 설정 및 스타일시트 설계
  • 매번 덮어쓰느라 페이지·UI마다 달랐던 디자인을 커스터마이징 CSS와 디자인 토큰으로 재정의해 불일치 해소

개발 환경 개선

  • 페이지별 Lazy Loading 적용, 페이지 유형별 Skeleton Layout 구현
    • 프로덕션 서버: 경미한 데이터 사용량 감소
    • 개발 서버: 새로고침·HMR 시간 단축 (약 7초 → 2초)
  • Frontend 통합·인수 테스트 기반 구축
    • 단위 테스트 환경을 기반으로 한 통합·인수 테스트 환경 구성
    • 여러 페이지 간의 동작을 테스트할 수 없었던 코드베이스를 전반적으로 리팩터링
    • 목표 권한·알림 설정 기능의 인수 기준과 테스트 작성
  • Dependency cruiser를 활용한 의존성 그래프 생성 스크립트 작성, 리팩터링 과정에 활용

목표 도메인의 Frontend에 Layered Architecture 도입

  • 목표 도메인의 Frontend 아키텍처 재설계 방향 시각화, 제안 및 적용
  • FSD(Feature-Sliced Design)와 같은 외부 규칙을 그대로 가져오지 않고, 팀이 자주 반복하는 Anti-Pattern을 방지하는 최소한의 구조로 설계
  • eslint-plugin-boundaries 규칙을 도입하여 경계를 넘나드는 잘못된 의존 코드를 금지
  • 스프린트의 변경 대상 기능과 작업 범위, 일정을 고려해 API, 범용 UI, 페이지 단위로 레거시 코드를 점진적 리팩터링
아키텍처 구조와 해설
src/
  목표_도메인_레거시_코드베이스/
    pages/
    components/
    hooks/
    utils/
    api/
  목표_도메인_모던_코드베이스/
    pages/
    features/
    ui/
    domain/
    api/
    react-toolkit/
    js-toolkit/
문제 현상과 설계 의도

팀은 다음 문제들로 코드 변경에 의한 동작을 예측할 수 없고 이를 가속하는 악순환에 빠짐

  • pages, features, ui
    • 우발적 중복 여부를 판단하지 않고 DRY 원칙만 적용해, 무리한 구현체 확장을 시도
    • 이러한 코드 변경이 기존 사용처에 의도치 않은 동작을 유발, 예를 들어 반환값을 사용하지 않는 API 호출 등
    • 결국 재사용하던 컴포넌트를 어느 시점부터 재사용할 수 없게 됨, 실제로 재사용 가능한 컴포넌트가 희소해 동일한 UI를 매번 새로 작성하고, 이를 다시 무리하게 확장하면서 악순환 고리 형성
    • → 컴포넌트를 성격에 따라 분류해 나쁜 의존성의 추가를 방지
  • domain
    • 비즈니스 규칙이 UI에 인라인 되어 동일한 기능이 페이지마다 동작이 다름
    • 이러한 동작 차이를 사용자·실무자가 인지·이해하지 못해 혼란 가중
    • 기한을 맞추기 위해 임시방편이 반복되면서 악순환 고리 형성
    • → UI로부터 비즈니스 규칙을 추출하여 관리
  • react-toolkit, js-toolkit
    • 로직을 추상화할 때 근거 없이 커스텀 Hook으로 만드는 습관이 형성되어 있음
    • 그리고 커스텀 Hook에 아무 의존성이나 넣는 습관이 형성되어 있음
    • 이는 다시 컴포넌트에 나쁜 의존성을 추가함으로써 악순환 고리 형성
    • → React 의존성을 계층으로 격리해 React가 필요한 추상화인지 스스로 사전 검토
  • 자세한 설계 의도는 이 아키텍처와 유사한 choegyumin/agent-skills:frontend-layered-architecture 스킬에서 일부 확인할 수 있음

엔지니어링 지식 체계화

  • 엔지니어링 온보딩 프로그램 개선
  • 저장소 README를 포함한 기술 문서 작성
관련 문서
돌아가기