[DesignSystem] ZESTY Design System - 색상(+다크모드) + 폰트 시스템 사용법 및 구축기

[Chaeho-Min]

• [DesignSystem] 색상 + 폰트 시스템 #93 PR과 관련한 설명입니다.

사용 방법

색상

1. Figma에서 색상 이름 확인하는 방법

색상을 확인하려는 요소를 cmd+클릭하면 오른쪽에 'Layer' 밑에 색상 이름이 나옵니다.
(selection colors 아닙니다! 주의!)
(그냥 클릭해도 나오는 경우도 있지만 보통 그룹이 되어있기 때문에 cmd+클릭으로 확인하세요)

색상 이름을 클릭하면 위 화면이 뜨면서 풀네임이 나오게 되는데, 개발자는 맨 마지막 / 뒤에 있는 글씨만 읽으면 됩니다.
예를 들어 위에서는 /앞에 있는 component를 무시하고 blackComponent가 해당 요소의 색상 이름이 됩니다.

2. 코드로 사용하는 방법

extension UIColor {
    static let blackComponent = appearanceColor(light: .black, dark: .white)
}

UIColor의 extension으로 선언이 되어있기 때문에, 피그마에서 확인한 색상 이름을 그냥 UIColor를 사용하듯이 쓰면 됩니다.

nickNameTextField.backgroundColor = .blackComponent

3. DesignSystem 모듈에 없는 색상 추가하는 방법

디자인을 확인하다가 cardFill이라는 색상이 적용되어있는 것을 확인했는데, DesignSystem에 없는 경우를 예시로 들어보겠습니다.

피그마 좌측에 있는 Design System 영역의 Semantic Color 프레임을 확인합니다.

Semantic Color 프레임에서 cardFill 색상을 찾습니다. 왼쪽이 라이트모드, 오른쪽이 다크모드 색상입니다.

// DesignSystem/Project/Sources/Color/UIColor+.swift
extension UIColor {
    static let cardFill = appearanceColor(light: .white, dark: .gray4A)
}

UIColor 익스텐션에 static let \(색상이름) = appearanceColor(light: \(라이트모드색상이름), dark: \(다크모드색상이름)) 이 규칙대로 색상을 추가하고 사용하면 됩니다.

예외사항

• 피그마 그림자에는 피그마에 저장해둔 색상을 쓸 수가 없어서 그냥 #000000으로 나올텐데, applyFigmaShadow에는 .shadow 색상을 사용해주세요.

폰트

1. Figma에서 확인하는 방법

폰트도 색상과 마찬가지로 라벨을 cmd+클릭하면 우측에 폰트 이름이 나오게 됩니다.
폰트는 Size/Weight 규칙으로 네이밍했습니다.

2. 코드로 사용하는 방법

nickNameTextField.font = .zestyFont(size: .body, weight: .medium)

.zestyFont(size:weight:) 메서드를 불러와서 사용하면 됩니다.

---

이 방식으로 구축한 이유

색상: Color Palette와 Semantic Colors

ZESTY의 컬러 시스템을 구축하는데에는 쏘카의 방식을 참고했습니다.

• [SOCAR FRAME 만들기 #2] 다크 모드 받고 디자인 시스템 더블로 가! (1탄)
• [SOCAR FRAME 만들기 #2] 다크 모드 받고 디자인 시스템 더블로 가! (2탄)

저희 ZESTY 앱에서는 기존에는 Xcode의 기능을 이용하여 Asset에 라이트모드와 다크모드 색상을 담아서 사용하기로 했는데, 이렇게 할 경우 두 가지 문제가 발생합니다.

1. 각 색상별 다크모드 색상을 주게 되면 다크모드에 최적화되지 않은 화면이 나올 수 있음.
   

출처: [SOCAR FRAME 만들기 #2] 다크 모드 받고 디자인 시스템 더블로 가! (1탄)
위에서 각 색상별로 다크모드 색상을 1대1 대응하였는데, 다크모드 화면을 보면 라벨 글씨가 너무 안 보이는 등 이상한 화면이 나왔습니다.
따라서 1대1 대응이 아니라 라이트모드에서 white를 쓰는 요소여도 어떤 요소는 다크모드에서 black이 되고, 어떤 요소는 gray가 되어야 다크모드에 최적화된 화면이 나올 수 있습니다.

2. 1번 문제를 해결하기 위해 모든 라이트모드/다크모드 조합을 Asset에 추가하면 너무 많은 조합을 추가해야 함.
   Asset에 Color Set을 추가해보신 분은 아시겠지만 이게 여간 귀찮은게 아닙니다.

현재 디자인에서만 봐도 총 20개의 Color Set을 만들어야 하고, 요소가 새로 추가될 때마다 매번 Color Set을 따로 추가해줘야 합니다.
생각만해도 귀찮기 때문에 다른 방식을 사용하기로 했습니다.

바로 쏘카에서 사용한 방식대로 basic color와 semantic color를 나누고, basic color만 Asset에 등록한 후 semantic color는 코드로 basic color를 적절히 조합하는 것입니다.

Basic Color	Semantic Color

Basic Color는 컬러 팔레트의 개념으로, 그냥 앱에 사용되는 모든 색상을 나열하고 색상과 명도에 따라 그 이름을 정한 것이라고 생각하면 됩니다(grayF6, grayF2, ...).
반면에 Semantic Color는 사용되는 목적에 따라 네이밍을 한 것입니다(background, label, codeInputEmpty, ...).

Basic Color in Xcode

// MARK: - Semantic Color in Xcode

public extension UIColor {

    static let background = appearanceColor(light: .white, dark: .black)
    static let mainListDescription = appearanceColor(light: .black, dark: .gray30)
    static let mainListEmptyBackground = appearanceColor(light: .grayF2, dark: .gray42)
    static let categoryLabelFill = appearanceColor(light: .black, dark: .gray4A)
    static let friendsSelection = appearanceColor(light: .black, dark: .grayD0)

    /*
        ...
    */
}

Basic Color는 Xcode의 Asset 기능을 이용하여 추가해줬고, Semantic Color는 UIColor extension에서 basic color를 조합하여 추가했습니다.

이렇게 컬러 시스템을 구축하게 되면 좋은 점이 semantic color가 라이트 모드와 다크 모드에서 각각 다른 basic color를 참조할 수 있게 됩니다.

static let categoryLabelFill = appearanceColor(light: .black, dark: .gray4A)
static let friendsSelection = appearanceColor(light: .black, dark: .grayD0)

위 코드에서 보면 categoryLabelFill과 friendsSelection 모두 라이트모드에서는 black이지만, 다크 모드에서는 서로 다른 basic color를 참조하고 있는 것을 볼 수 있습니다.

이러면 컬러의 관리와 유지보수가 쉬워집니다.
예를 들어 cardFill 색상 조합을 추가해야 되면 cardFill은 라이트모드일 때 .white, 다크모드일 때 .gray4A 색상이므로
Asset에서 추가하려면 새로운 Color Set을 만들고, light 모드에 white hex 값인 #ffffff를 입력하고 dark 모드에는 gray4A의 hex값인 #4A4A4A를 입력해줘야 하지만,
이 방식대로라면

static let cardFill = appearanceColor(light: .white, dark: .gray4A)

이 코드 한 줄을 추가하면 끝입니다.

대충 요약하자면

• Asset에 최대한 색상을 추가하지 않아도 되도록 하기 위해 고안한 방법.
• 이 방식이 라이트모드/다크모드 조합의 CRUD가 훨씬 편함.

폰트

폰트의 경우는 나중에 폰트 수정이 필요할 때 일괄적으로 변경하기 쉽도록 만들었습니다.
현재는 기본폰트를 사용하기 때문에 기본으로 제공하는 시스템 폰트인 .body, .largeTitle을 사용해도 되지만 나중에 커스텀 폰트를 사용하거나 폰트 사이즈를 변경할 때 쉽게 변경할 수 있도록 지금부터 폰트 시스템을 구축해놨습니다.

public enum Size: CGFloat {
    case largeTitle = 26
    case title1 = 24
    case title2 = 22
    case title3 = 20
    case body = 17
    case callout = 16
    case footnote = 13
    case caption1 = 12
    case caption2 = 11
    case caption3 = 9
}
    
public enum Weight {
    case ultraLight
    case thin
    case light
    case regular
    case medium
    case semibold
    case bold
    case heavy
    case black
}

현재 enum으로 관리하고 있기 때문에 나중에 '본문 폰트를 모두 18로 바꾸고 싶어!'라고 생각한다면 기본으로 제공한 .preferredFont(.body)를 사용한 경우 body 폰트가 사용된 곳을 모두 일일히 찾아 .systemFont(ofSize: 18, ...) 이런식의 코드로 바꿔줘야 하지만, 이 방식대로라면 case body = 18로 바꾸기만 하면 끝입니다.

또한 나중에 시스템 폰트인 SF Pro가 아닌 모든 글씨를 다른 커스텀 폰트로 바꾸기로 결정했다면, 모든 뷰 코드에서 변경하는 것 대신에 .zestyFont 메서드만 수정해주면 일괄적으로 커스텀 폰트가 적용이 되기 때문에 이렇게 시스템을 구축해놨습니다.

요약하자면

• 같은 계층을 가진 폰트의 사이즈를 일괄적으로 수정하기 쉽도록 하기 위해,
• 또 커스텀 폰트로의 변환을 쉽게 할 수 있도록 이 방식 사용.

---

마크다운 어렵네요 이 글 가독성 최악...

[chaneeii]

고생하셨습니당~!~
다시 들어와서 봐야겠어요

우리에게도 드디어 번듯한 디자인 시스템이!

[chaneeii]

요글 카테고리 디자인시스템으로 변경해주세요

[Gobans]

개발하는 디자이너의 강점이 여기 있군요..!

잘 사용하겠습니다