Design system

하요·2024년 7월 9일

짬통

목록 보기

3/3

Flutter에서 UI 일관성 유지하기: Design system

디자인 시스템은 일관된 사용자 경험을 제공하고, UI 요소들의 반복 작업을 줄이며, 유지보수성을 높이는 데 사용되는 방법론입니다. 이를 통해 시각적 일관성을 유지하고, 다양한 디바이스와 해상도에서 일관된 인터페이스를 제공할 수 있습니다.

UI & UX

UI(User Interface): 사용자가 시스템과 상호작용하는 인터페이스를 의미합니다. UI는 버튼, 아이콘, 텍스트 필드 등 사용자가 직접적으로 조작할 수 있는 모든 시각적 요소를 포함합니다. UI 디자인은 사용자의 직관적인 사용을 목표로 하며, 심미성과 기능성을 고려합니다.
UX(User Experience): 사용자가 UI와 상호작용하면서 느끼는 전체적인 경험을 의미합니다. UX는 사용자가 제품을 사용할 때 느끼는 만족도, 편의성, 접근성 등을 포함합니다. UX 디자인은 사용자의 문제 해결을 목표로 하며, 사용자가 제품을 통해 얼마나 효율적이고 만족스러운 경험을 하는지에 중점을 둡니다.

주요 개념

Foundation: 텍스트, 아이콘, 색상, 여백, 이미지 등 UI의 기본 구성 요소를 정의합니다.
Component: 버튼, 입력 폼, 카드 등 여러 기초 요소들이 모여 하나의 구성 요소를 이룹니다.
Page: 구성 요소들이 모여 하나의 페이지를 구성합니다.
Design System: 반복되는 기초 요소와 구성 요소를 시각적으로 일관되게 만들어 반복 작업을 줄이는 디자인 관리 방법입니다.

주요 요소

Foundation

Foundation은 텍스트, 아이콘, 색상, 여백 등 UI의 기본 구성 요소를 포함합니다.

텍스트 (Text)

타이포그래피(Typography): 텍스트의 크기, 굵기, 폰트 종류 등을 정의합니다.

아이콘 (Icon)

아이콘 사이즈 통일: 아이콘의 크기를 일관되게 유지하여 UI 요소 배치의 일관성을 유지합니다.

색상 (Color)

색상 팔레트(Color Palette): 앱에서 사용하는 전체 색상 목록을 정의합니다.
시맨틱 컬러(Semantic Color): 색상의 역할에 따라 이름을 부여하여 용도를 명확히 합니다.

Component

Component는 여러 기초 요소들이 모여 하나의 구성 요소를 이루는 것입니다.

버튼 (Button)

기본 버튼: Primary, Secondary 버튼 등 다양한 상태와 크기의 버튼을 정의합니다.

카드 (Card)

정보 카드: 텍스트와 이미지를 포함한 카드 구성 요소를 정의합니다.

Page

Page는 구성 요소들이 모여 하나의 화면 단위를 이루는 것입니다.

쇼핑 페이지 (Shopping Page)

상품 리스트: 여러 상품 카드를 포함한 리스트를 구성합니다.
필터: 다양한 필터 옵션을 포함한 섹션을 정의합니다.

상품 상세 페이지 (Product Page)

상품 정보: 상품 이미지, 설명, 가격 등을 포함한 상세 정보 페이지를 정의합니다.

코드 예제

색상 정의

class AppColors {
  static const Color primary = Color(0xFF6200EE);
  static const Color secondary = Color(0xFF03DAC6);
  static const Color background = Color(0xFFF6F6F6);
  static const Color surface = Color(0xFFFFFFFF);
}

버튼 구성 요소

class PrimaryButton extends StatelessWidget {
  final String text;
  final VoidCallback onPressed;

  PrimaryButton({required this.text, required this.onPressed});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      child: Text(text),
      style: ElevatedButton.styleFrom(
        primary: AppColors.primary,
        onPrimary: Colors.white,
        padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
        textStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
      ),
    );
  }
}

페이지 구성

class ShoppingPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Shopping')),
      body: ListView(
        children: [
          ProductCard(product: Product(name: 'Product 1', price: 29.99)),
          ProductCard(product: Product(name: 'Product 2', price: 59.99)),
          ProductCard(product: Product(name: 'Product 3', price: 19.99)),
        ],
      ),
    );
  }
}

디자인 시스템의 특징과 단점

디자인 시스템은 다음과 같은 특징과 단점을 가지고 있습니다.

특징

일관성 유지: 다양한 디바이스와 해상도에서 일관된 사용자 경험을 제공합니다.
생산성 향상: 반복 작업을 줄여 개발 생산성을 높입니다.
유지보수성 향상: 기초 요소와 구성 요소의 재사용을 통해 유지보수성을 높입니다.
효율적인 협업: 디자이너와 개발자 간의 효율적인 협업을 가능하게 합니다.

단점

초기 구축의 어려움: 초기 구축 시 많은 시간과 노력이 필요합니다.
지속적인 업데이트 필요: 디자인 트렌드와 사용자 요구에 맞춰 지속적인 업데이트가 필요합니다.