🛫 [Enhancement] 컬러시스템에 등록되지 않은 색상에 대한 일관적인 관리

[0tak2]

개요

변경할 부분

• 하이파이 디자인 상 컬러시스템에 등록되지 않은 색상이 곳곳에 사용됨
• 작업자 재량으로 색상을 정의하고 사용해왔음
• 팀 전체에서 일관적으로 관리하는 방법이 필요

개선 이유와 기대 효과

• 정의되지 않은 색상을 어떻게 관리할지 고민하지 않아도 됨
• 색상과 관련된 변경 이슈에 쉽게 대응할 수 있음

영역

other

AS-IS

• 작업자 재량으로 컬러시스템에 없는 색상을 정의하고 사용

TO-BE

• 팀 전체에서 일관적으로 관리하는 방법을 고안하고 기존 프로젝트 수정

작업계획

• 작업 1
• 작업 2
• 작업 3

작업기한

No response

노션링크

없음

비고

없음

참조자

cc. @Jeongin-c (PM)
cc. @seungchan2022
cc. @b0tab0ra

[0tak2]

제안

용어

• 컬러 시스템에 없으나 UI에서 사용되고 있는 색상을 "별색"이라고 부른다

에셋

• AS-IS: 기존 에셋에는 Colors 폴더에 컬러 시스템에 존재하는 색상들이 등록되어 있음
• TO-BE
  • 컬러 시스템에 존재하는 색상은 Colors/ColorSystem/ 폴더에 둔다
  • 별색은 Colors/SpecialColors/ 폴더에 둔다
    • 별색은 의미를 가진 색상이 아니기 때문에 이름을 hex{16진수컬러코드} 형식으로 등록한다
    

코드

• DesignSystem 디렉토리에 SwiftUI.Color를 확장하는 파일을 둔다
  QueenCam/QueenCam/Presentation/DesignSystem/Color+SpecialColors.swift
• 해당 익스텐션에 별색이 사용되는 컴포넌트를 쉽게 알 수 있는 이름으로 static 변수를 정의하고 (ex> someViewLabelColor), 에셋에 정의한 별색을 할당한다.
  
• 사용할 뷰에서 해당 static 변수를 참조해 스타일링한다.
  

기대효과

• 별색을 여러 뷰에서 사용해야 하는 경우 중복 코드를 대폭 줄일 수 있다. (0x33 / 255 같은 구문이 이곳저곳에 반복되지 않아도 된다)
• 뷰에 어떤 별색들이 사용되고 있는지 한 눈에 볼 수 있다.

[b0tab0ra]

star색상