Design System 정리 - Color & Font 모듈화

hyun·2025년 8월 21일
0

iOS

목록 보기
42/54

색상, 폰트 스타일을 디자인 시스템으로 분리해서 구조화함
기존에는 Asset에 Color만 등록해서 사용했는데 이번에는 Color와 Font 관련 파일들을 만들어 코드로 일관성 있게 관리할 수 있도록 개선해봄

기존 방식 (Asset에만 등록한 경우)

색상은 Assets에만 등록해 사용 :

view.backgroundColor = UIColor(named: "Violet500")
titleLabel.textColor = UIColor(named: "Gray200")

폰트도 별도 스타일 없이 직접 지정 :

label.font = UIFont(name: "Pretendard-SemiBold", size: 20)

이름 오타 시 컴파일 에러 없음

색상 이름이나 폰트 크기 일관성 관리 어려움

하나 바꾸려면 찾아서 하나하나 다 바꿔야 함 (폰트 진짜 헬)

다크 모드 대응 등 복잡한 처리가 어려움

개선된 방식 (DesignSystem 폴더 분리)

📁 DesignSystem
├── 📁 Color
│ ├── ColorBook.swift
│ ├── GrayColor.swift
│ ├── VioletColor.swift
│ └── PaletteApp.swift
└── 📁 Font
├── PodoItFont.swift
└── PodoItFontStyle.swift

Color 사용

view.backgroundColor = Palette.Violet.v500
titleLabel.textColor = Palette.Gray.g200

Font 사용

titleLabel.attributedText = Typography.attributed(
  "테스트 문장입니다.",
  style: .title1,
  color: Palette.Violet.v500
)

디자인 시스템 분리는 유지보수에 도움이 됨. 팀 프로젝트에서 일관성 있는 UI/UX 유지에도 좋음.

enum 기반 접근은 오타 방지 및 자동완성 덕분에 생산성이 향상됨.

Asset은 이미지 위주로 유지하고, 색상/폰트는 코드로 통일해서 관리하는 구조가 가장 이상적.

0개의 댓글