제품 팀을 중단하지 않고 디자인 시스템 구성 요소 사용 중단
대규모 앱에서 획기적인 디자인 시스템 변경 사항을 출시하는 방법: 의미 체계 버전 관리 및 사용 추적을 사용하여 발표, 지원 중단, codemod를 사용한 마이그레이션 및 제거.
핵심 포인트
4단계로 구성 요소를 폐기합니다. 이유 및 교체와 함께 변경 사항을 알리고, 명확한 경고와 함께 부 릴리스에서 더 이상 사용되지 않는 이전 구성 요소를 표시하고, 가이드 및 자동화된 코드 모드를 사용하여 팀이 마이그레이션하도록 지원하고, 다음 주요 릴리스에서만 제거합니다. 모든 단계에서 얼마나 많은 화면을 사용하고 있는지 추적하고 사용량이 0에 가까워질 때까지 제거하지 마십시오.
지원 중단이 잘못된 이유
제품 팀을 놀라게 하면 디자인 시스템 변경이 실패합니다. 업데이트 시 구성 요소가 사라지고, 빌드가 중단되고, 팀이 이전 버전을 고정하고 업그레이드를 중지합니다. 그런 일이 발생하면 제품의 여러 부분이 서로 다른 버전으로 이동하기 때문에 시스템의 주요 이점인 일관성이 상실됩니다.
4단계 프로세스
의미론적 버전 관리는 간단한 계약을 제공합니다. 호환되지 않는 변경 사항은 주요 버전에 포함되며, API의 일부를 더 이상 사용하지 않을 경우 나중에 제거하기 전에 문서를 업데이트하고 더 이상 사용되지 않는 부분이 포함된 부 릴리스를 출시해야 합니다.
- 발표: 이유를 설명하고, 교체품을 보여주고, 타임라인을 제공합니다.
- 사용 중단: 가이드로 연결되는 콘솔이나 린트 경고를 사용하여 문서와 코드에 표시합니다.
- 마이그레이션: 서면 가이드를 제공하고 코드의 경우 사용법을 자동으로 업데이트하는 codemod를 제공합니다.
- 제거: 다음 주요 릴리스에서는 사용량이 거의 0에 가까워집니다.
마이그레이션 자동화
Codemod는 코드베이스 전체에서 코드를 다시 작성하는 스크립트입니다. jscodeshift와 같은 도구는 여러 JavaScript 또는 TypeScript 파일에 대해 한 번에 codemod를 실행하므로 몇 주가 아닌 몇 분 만에 prop 이름 변경이나 구성 요소 교체를 적용할 수 있습니다. 남은 사용량을 표시하는 린트 규칙과 쌍을 이룹니다.
채택 측정
누가 아직 구성 요소를 사용하고 있는지 알지 못하면 제거를 계획할 수 없습니다. 코드(가져오기, Lint 경고) 및 디자인 파일(디자인 도구의 라이브러리 분석)에서 사용을 추적합니다. 팀이 진행 상황을 볼 수 있도록 숫자를 게시하고 마감일을 강요하는 대신 마지막 몇 팀을 직접 돕습니다.
디자인적인 측면도 잊지 마세요
디자인 라이브러리에서도 해당 구성 요소를 사용 중단합니다. 이름을 "사용 중단됨" 접두사로 바꾸고 교체 항목에 연결하고 검색에 표시되지 않도록 합니다. 그렇지 않으면 디자이너가 새 작업에 계속 사용하고 마이그레이션이 끝나지 않습니다. 동작 및 상호 작용 동작은 변경 사항에 포함되어야 합니다. 다르게 움직이는 교체품은 동일해 보이더라도 깨진 것처럼 느껴질 수 있기 때문입니다.
기억할 핵심 원칙
- 발표, 지원 중단, 마이그레이션, 제거: 바로 제거로 넘어가지 마세요.
- 마이너 릴리스에서는 더 이상 사용되지 않습니다. 주요 릴리스에서 제거
- codemods 및 lint 규칙을 사용하여 마이그레이션 자동화
- 코드와 디자인 파일 모두에서 사용 추적
- 릴리스 노트에 모션 및 상호 작용 변경 사항 포함
자주 묻는 질문
출처
- Semantic Versioning 2.0.0 — semver.org
- jscodeshift: a JavaScript codemod toolkit — GitHub(메타)