반응형
1. 컴포넌트 기반 디자인 시스템:
컴포넌트 기반 디자인 시스템에서는 구조와 스타일링이 포함된 재사용 가능한 UI 컴포넌트를 만듭니다.
장점
- 캡슐화: 컴포넌트는 기능과 스타일을 캡슐화하여 자체적으로 동작하며, 프로젝트 전체에서 재사용할 수 있습니다.
- 모듈성: 컴포넌트를 조합하고 결합하여 복잡한 UI를 구축할 수 있습니다.
- 재사용성: 컴포넌트는 프로젝트 전반에서 쉽게 재사용할 수 있어 일관성을 유지하고 중복을 줄일 수 있습니다.
- 유지 보수성: 컴포넌트의 변경 사항은 격리되어 유지 관리가 용이합니다.
고려 사항
- 학습 곡선: 팀 구성원은 컴포넌트 API와 사용 패턴을 익혀야 합니다.
- 개발 오버헤드: 컴포넌트 라이브러리 생성 및 유지 관리에는 추가 개발 작업이 필요합니다.
- 유연성: 모든 사용 사례를 커버하지 못할 수 있으므로 맞춤 설정이나 오버라이드가 필요할 수 있습니다.
2. 클래스명 기반 디자인 시스템
클래스명 기반 디자인 시스템에서는 HTML 요소에 직접 적용할 수 있는 유틸리티 클래스 세트를 정의합니다.
장점
- 유연성: 유틸리티 클래스를 사용하면 개발자는 UI 요소를 자유롭게 조합하고 사용자 정의할 수 있습니다.
- 익숙함: 이 방법은 Tailwind CSS와 같은 기존 CSS 프레임워크와 잘 어울립니다. 여기서 유틸리티 클래스가 널리 사용됩니다.
- 빠른 프로토타이핑: 클래스명 기반 시스템을 사용하면 빠른 프로토타이핑과 실험을 할 수 있습니다.
고려 사항
- 네이밍 규칙: 명확성을 유지하고 충돌을 피하기 위해 명확하고 일관된 네이밍 규칙이 중요합니다.
- 스타일 캐스캐이딩: 여러 유틸리티 클래스 간의 스타일 관리는 복잡해지며 충돌과 의도하지 않은 결과를 초래할 수 있습니다.
- 종속성: 개발자는 클래스의 종속성을 인식하고 올바른 클래스 순서를 유지해야 원하는 스타일을 얻을 수 있습니다.
본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
반응형