T ― Y

소개 및 역할

• 사내 분리된 5개의 서비스를 하나의 플랫폼으로 통합하여 통일된 UI/UX를 기반으로 신규 플랫폼을 구축하였습니다.
• Ant Design 디자인 시스템을 토큰을 기반으로 커스텀하는 작업을 진행했습니다.
• 컴포넌트 UI 개발과 레이아웃, 테마 커스텀 전반을 담당했습니다.

기여한 부분

• 전반적인 레이아웃 및 키프레임 기반 인터랙션 구현

• 프로젝트 디자인 시스템에 맞춰 Ant Design v5의 토큰 기반 테마 시스템 커스터마이징

  • Ant Design의 토큰 구조(Seed → Map → Alias Token)를 이해하고 역할을 분석하여 디자이너와 커뮤니케이션 주도
  • Ant Design의 Figma 디자인 가이드를 기반으로 주요 스타일 토큰을 변수로 관리하고 매핑
  • ConfigProvider를 활용해 전역부터 컴포넌트 단위까지 일관된 테마 적용

• CSS 속성의 성능을 비교하여 최적의 애니메이션 방식을 선택하여 긍정적인 사용자 경험 제공

  • Chrome DevTools의 Layer 패널을 활용해 어떠한 요소가 GPU로 그려지는지 확인하고, 비용이 큰 속성과 성능 비교
  • 화면에 표시되는 레이어 수, Paint Count 등을 확인하며 더욱 부드럽고 가벼운 애니메이션 방식을 적용

• 트러블슈팅 Sass + Antd ConfigProvider 테마 연동

  Ant Design 테마 커스터마이징(ConfigProvider)

  Ant Design 테마를 Sass 기반으로 관리면서, Sass 변수들을 ts 파일에서 직접 임포트하여 사용할 수 없는 문제가 발생했습니다. sass-loader 이슈에서 언급된 것처럼 변수 :export 기능은 .scss가 아닌 .module.scss 파일을 통해서만 export가 가능하다는 제약이 있었습니다.

  이를 해결하기 위해, 기존 variables.scss에서 정의된 값을 variables.module.scss로 import하고, 필요한 변수만 선택적으로 export 하여 theme.ts에서 ConfigProvider에 토큰을 적용하는 방식으로 구조화했습니다.

  // variables.module.scss
  @import '../base/variables';
  
  :export {
    colorPrimary: $color-primary;
    inputPaddingBlock: $input-padding-block;
  }
  

  // theme.ts
  import variables from './variables.module.scss';
  
  const theme = {
    token: {
      colorPrimary: variables.colorPrimary,
    },
    components: {
      Input: {
        paddingBlock: variables.inputPaddingBlock,
      },
    },
  };
  

  결과적으로 테마 값 하나를 적용하기 위해 scss → module.scss → theme.ts의 세 단계를 거치는 구조가 되었지만,

  디자인 토큰을 JS(TS)와 스타일에서 일관되게 사용할 수 있어 유지보수성과 확장성 측면에서 유리한 구조라고 판단해 도입했습니다.

사용 기술

• Sass

  mixin, function, variables 등을 사용하여 중복 스타일을 방지하고, 개발 효율성과 유지보수성을 높이기 위해 사용했습니다.