강의 요약

1. 디자인 토큰, 디자인 시스템, 베리어블

1-1) 디자인 토큰

디자인 토큰은 UI 요소의 기본 구성 요소로, 작고 반복 가능한 디자인 결정을 의미하며 Brad Frost's Atomic Design 개념 중 '전자(Electrons)'에 속함

Brad Frost's Atomic Design

• 'Electrons' > Atom > Molecules > Organisms > Templates > Pages

Electrons - 색상, 타이포그래피, 테두리, 그림자 효과를 포함

위 디자인이 결정되면 json 포맷으로 내보내어 여러 플랫폼에 적용할 수 있다.

→ json 포맷으로 '어떻게' 내보내지고 개발자들이 플랫폼에 '어떻게' 적용하는지 이해가 부족해서 개발팀에게 도움을 요청해야겠다.

1-2) 디자인 시스템

디자인 시스템은 일관성과 확장성을 가진 컴포넌트, 패턴, 가이드의 모음

디자인 시스템의 장점: 디자인 일관성, 브랜드 강화, 개발 효율성, 시간 단축, 팀 간 협업 강화, 빠른 온보딩, 유지보수 용이, 높은 품질의 경험

디자인 시스템의 구성 요소

• 디자인 원칙/철학

• 스타일 가이드

• 컴포넌트 라이브러리

• 패턴 라이브러리

• 문서화

• 시스템 관리 운영

   

디자인 시스템을 성공하기 위해서

• 비즈니스, 디자인, 개발의 이해와 꾸준한 커뮤니케이션이 필요

   

• 꾸준히 발전해나가는 하나의 프로덕트의 개념

1-3) 베리어블 이름과 구조

베리어블 구조: 이름(Name), 값(Value), 유형(Type)

베리어블 계층 (피라미드 구조)

• Raw Value: 본래의 값 #D6840B

• Global/primitive/core/base/foundation/root: 사용 맥락에 상관없이 디자인 언어의 기본 값 Orange-Medium

• Alias/semantic/applied/purpose: 특정 사용 맥락과 의도를 전달할 때 쓰이는 값 Band-primary

• Component/overwrites/scoped: 컴포넌트와 관련된 모든 디자인 속성을 가진 값 Button-primary-background-color

베리어블 이름

Namespace(System) + Object(Component) + Base(Category/Property) + Modifier(Variant/State/Scale)

• Namespace

  • 다른 디자인 시스템과 구분하기 위해 주로 모든 베리어블/토큰 앞에 접두어로 시작한다.

     

• Ojbect

  • 디자인 시스템 내에서 특정 컴포넌트의 스타일 및 레이아웃을 적용하고 싶을 때 사용된다.

    • Button, card, input 등

• Base

  • Cateogry - UI 기본 구성 요소를 공통된 유형으로 그룹화

    • color, font, sizing, spacing 등

  • Property - 각 카테고리 내에서 특성에 따라 세분화한 것

    • color-background, color-border, font-style, font-sizing, radius 등

• Modifier

  • 하나의 디자인 요소를 여러 상황, 상태에 따라 변형할 수 있도록 한다.

    • Variant - Hierarchy(primary, secondary, tertiary), Feedback(success, error, information, warning)

    • State - Interactive States

    • Scale - 숫자 (1,2,3,4...), 티셔츠 사이즈(xs, sm, md...) 등

   

이름 지을 때 실무팁

• 개발자와 디자이너 사이에 공통된 이름 짓기

   

  → 회사 프로젝트가 이미 진행이 많이 됬기 때문에, 실무에 적용하기 전에 개발팀에서 사용하고 있는 용어를 먼저 파악해야할 것 같다.

   

• 중복, 혼동되는 단어 통일하기

• 스케일 척도 통일하기

• 미리 80% 정도 계획할 것 (엑셀/피그잼 활용)

• 레퍼런스, 레퍼런스, 레퍼런스!

   

   

2. 베리어블과 파운데이션 세팅하기

강사님이 공유해주신 베리어블 구글 시트는 구조를 이해하는데 정말정말 많은 도움이 되었고, 실무에서도 잘 활용할 수 있을 것 같다.

2-1) 컬러

색상 베리어블(collection) 구조

• Primitive - raw value

• Theme - 브랜드 모드를 적용하기 위한 목적

   

  → 실습을 하다 질문하고 받은 답변인데, 브랜드가 한 개일 경우 필수는 아니며 강의 내용과 같이 feedback 베리언츠는 바로 semantic에 추가해도 됨

• Semantic - property, role, variant, state, scale등의 내용이 포함됨 (라이트/다크 모드 적용하기 위한 목적)

   

  → 모드는 시멘틱에서만 추가할 수 있고, 다크 모드의 raw value를 다르게 가고싶은경우 primitive에 따로 추가해야됨. 이건 강의 후반 '모드'에서 다룰 예정.

특정 베리어블을 퍼블리싱하고 싶지 않을 때

• 컬렉션/그룹 앞에 _ 를 붙이거나,

• 개별 베리어블은 설정에서 'hide from publishing'을 선택

Color Syntax

• 웹, aos, ios 플랫폼별로 대응하는 코드 이름을 만들어줄 수 있는데, 왜 필요하고 어떤식으로 다르게 표기되는지 이해하기 위해서 개발팀의 도움이 필요할 것 같다.

2-2) 간격

1.5배수 랜더링 이슈로 8Pt 그리드를 사용하고, 더 섬세한 단위로 정렬하고 싶을 때 4pt를 사용한다.

간격의 사용 (Spacing in UI)

• 0~8pt 작은 UI 구성 요소

• 12~24pt 카드 UI padding, 간격

• > 32pt 큰 규모의 UI, 레이아웃

간격 베리어블 계층

• Base grid point - 4pt

• Primitive - Unit

• Semantic - padding, gap, border radius, width/height, border width

   

컬러와 마찬가지로 number scoping을 설정할 수 있음

2-3) 아이콘

Feather icon은 실무에서 자주 사용하는데 이렇게 손이 많이 가는 놈(?)인지 몰랐다. 생각해보면 컬러가 이상하게 설정될 때마다 문제점을 생각할 조차 하지 않았는데, 이를 고치고 컴포넌트화해서 앞으로 시간이 정말 많이 단축될 것 같다.

해결방법

• 구조가 똑같게 하기

  • union, flatten selection을 사용해 모두 stroke를 면으로 만들기

• 이름 똑같이 하기

• Union을 했을 때 아이콘이 깨지는 경우, scale을 키우고 anchor point랑 bezier를 움직여가며 수동으로 수정 (=앤트맨 전략)

   

2-4) Elevation

실무에서 shadow를 스타일화하지 않고 필요할 때마다 따로 만들어서 일관성이 떨어졌는데, 강의에서 배운대로 높낮이에 따라 컴포넌트를 지정하고 description을 잘 활용해서 관리해야겠다고 느꼈다.

강의를 보면서 수치를 따라 입력하는데 집중하느라 강의 내용이 잘 기억이 나지 않아, 복습이 특히 필요할 것 같다. 섹션 3 - 다양한 효과 그리고 높낮이를 나타내는 그림자효과 파트 1, 2

📝 단축키

• 베리어블 복사: cmd+shift+enter

• 여러 베리어블 속성 변경: 베리어블 선택 후, shift+오른쪽 마우스 버튼

• 베리어블 바로 적용: shift+왼쪽 마우스 버튼

회고

• 잘한 점

  • 1주차 미션 모두 완수한 나 칭찬해 🙂

  • 미션 후 나만의 디자인으로 베리어블을 만들어보았다.

  • 다음주 강의와 미션 미리 시작했다.

• 아쉬운 점

  • 데드라인에 집중하다보니 기계처럼 미션을 수행한 것 같다.

  • 미션 2가 끝날때까지 강의 노트를 미리 작성하지 않아 한번에 많은 양을 복습 하려다보니 블로그를 쓰는데 시간이 너무 소요되었다.

  • 베리어블 등록하고 scoping 설정하는걸 자꾸 잊어버렸는데, 이건 무조건 외워야겠다.

• 다음주 계획

  • 강의들으면서 노트 꾸준히 작성하기

     

  • 이번 주 만큼 휴일이 많이 없어서 스케줄 관리에 특히 더 신경쓸 것