WebSquare5 DesignSystem
DesignSystem의 주요 기능
1. 템플릿 관리
기능: 화면 설계 시 반복적으로 사용되는 구조나 레이아웃을 미리 정의해 두고 재사용할 수 있습니다.
사용 예시: 로그인 화면, 대시보드 레이아웃, 테이블 구조 등을 템플릿으로 저장하여 재활용.
2. 스타일 및 테마 관리
기능: 프로젝트 전체에서 공통으로 사용되는 색상, 글꼴, 버튼 스타일 등을 정의합니다. 변경 사항이 발생하면 스타일만 수정하여 모든 화면에 자동 반영됩니다.
예시:
- Primary Color: #007BFF (기본 버튼 색상)
- Secondary Color: #6C757D (보조 버튼 색상)
3. 컴포넌트의 재사용성
기능: 기본 컴포넌트(InputBox, GridView 등)에 DesignSystem에서 정의된 스타일을 일괄 적용하고 프로젝트 요구사항에 맞게 확장 가능합니다.
DesignSystem 사용 방법
1. 템플릿 생성 및 사용
- 템플릿 생성: WebSquare Studio에서 새 화면을 설계한 뒤 이를 템플릿으로 저장.
- 템플릿 사용: 새 화면을 생성할 때 저장된 템플릿을 불러와 빠르게 화면 설계.
2. 스타일 속성 정의
- 기본 스타일 정의: 프로젝트에서 사용할 기본 스타일 속성을 설정. (예: 폰트 크기, 색상, 여백, 테두리 등)
- 스타일 적용: Design 탭에서 원하는 컴포넌트에 스타일 속성을 드래그 앤 드롭으로 적용.
- CSS 연동: DesignSystem에서 정의한 스타일을 CSS 파일과 연동하여 확장 가능.
3. 테마 관리
- 테마 설정: DesignSystem에서 프로젝트 전체의 테마를 설정. (예: 다크 모드, 라이트 모드)
- 테마 전환: 테마 변경 시 화면에 적용된 모든 스타일이 자동으로 변경.
DesignSystem의 장점
- 디자인 일관성 유지: 모든 화면에 동일한 스타일과 레이아웃을 적용하여 프로젝트 전반의 일관성을 유지.
- 생산성 향상: 미리 정의된 템플릿과 스타일을 활용하여 설계 시간을 단축.
- 유지보수 용이: 디자인 변경 시, 개별 화면이 아닌 DesignSystem에서 일괄 수정 가능.
- 확장성: CSS와의 연동을 통해 더욱 정교한 스타일링 가능.
DesignSystem 활용 사례
1. 대시보드 설계
템플릿 사용: 대시보드 레이아웃(좌측 메뉴, 상단 바, 메인 콘텐츠)을 템플릿으로 정의.
컴포넌트 스타일 적용: 차트, 그리드, 버튼 등에 DesignSystem 스타일 적용.
2. 폼(Form) 화면 설계
입력 필드: InputBox, RadioButton, CheckBox 등 공통 스타일을 적용하여 일관성 유지.
레이아웃: TableLayout 또는 GridLayout을 사용하여 화면 배치.
DesignSystem을 활용한 프로젝트 관리 팁
- 초기 설계 단계에서 템플릿과 스타일 정의: 프로젝트 초기 설계 시 반복적으로 사용할 템플릿과 스타일을 미리 정의하면 개발 시간을 크게 절약 가능.
- 테스트 환경에서 스타일 테스트: DesignSystem에서 설정한 스타일이 모든 화면에 올바르게 적용되는지 테스트.
- CSS 파일과 연동하여 세부 스타일링 추가: WebSquare5의 DesignSystem과 CSS 파일을 조합하여 프로젝트 요구사항을 충족.
결론
WebSquare5의 DesignSystem은 디자인과 개발 간의 생산성을 높이고 일관된 UI/UX를 제공하는 강력한 도구입니다. 프로젝트 초기에 이를 잘 설계하고 활용하면 유지보수 및 확장성 측면에서 큰 이점을 얻을 수 있습니다.
