학습 내용

복습을 위해 이번 주에 필기한 강의 내용을 갈무리했습니다

아틀라시안 디자인 시스템 디자인 원칙/철학 : 우리는 왜 디자인 시스템이 필요한가?

: 높은 품질의 UI를 구축하는 핵심 역할로써 디자인, 개발, 배포를 쉽게 할 수 있도록 돕는 것

우리 회사에 디자인 시스템이 필요한가?

: 질문에 대한 핵심 답변은 디자인 부채가 발생한다는 점이다. 이는 결국 디자이너의 업무 비효율로 이어지고 이러한 업무 비효율은 개발단의 리소스 낭비로 이어진다. 전체적으로 봤을 때 팀의 손해이고 회사의 손해로 이어진다.

디자인 시스템이 있으면 좋은 점

1. 디자인 일관성 유지

2. 브랜드 강화

3. 효율적인 개발

4. 시간 단축

5. 팀 간 협업 강화

6. 빠른 온보딩

7. 유지 보수 용이

8. 높은 품질의 경험

→ 디자인 시스템은 지속해 발전한다.
→ 작은 성공을 이루어가며 구성원들간의 공감대를 형성해가는 것이 중요하다.

베리어블과 스타일의 차이

• 베리어블 : 하나의 변수만 저장, 참조가 가능 / 재사용 가능한 기본 디자인 요소

   

• 스타일 : 하나 또는 다수의 변수를 저장, 참조가 불가능 / 그라디언트 ,블랜드 모드 등 다수의 디자인 요소를 적용

베리어블의 구조

• 토큰 개념 : 이름(Name) / 값(Value) / 설명(Description) / 유형(Type)

베리어블의 이름 짓기

1. 베리어블 이름의 구조

2. 각 계층에서의 다양한 이름

3. 토큰 이름 붙이는 공식

4. 토큰 이름 예시

• Namespace : System

• Object : Component

• Base : Category / Property

• Modifier : Variant / State / Scale

토큰 개발 실무 팁

1. 단어 통일하기

2. 80%는 미리 계획하기

3. 2~3가지 레퍼런스에서 시작하기

“좋은 음식은 좋은 재료에서 시작한다”

단축키 - 베리어블 복사 : ctrl + shift + enter

우리 수업에서 가져갈 라벨링 방식

: ‘Theme’ 브랜드(Brand) 부분이 추가됌

→ 보통 브랜드는 1개이기 때문에 여러개일 필요 없음(나중에 실무에서 제거해도 이상 무)
→ 이해를 돕기 위해 새로운 계층 생성

정리

: 추가적으로 참고할 사항

→ 각 요소마다 color scoping을 할 수 있음
→ 특정 베리어블을 퍼블리싱하고 싶지 않을 경우 ‘_’를 붙여주면 됌 or 각 요소에서 hide 퍼블리싱을 선택해주면 됌
→ 웹, AOS, iOS 플랫폼별로 대응하는 코드 이름을 만들어줄 수 있음

간격 스케일 구성

: 플랫폼별 렌더링 때문에 4px, 8px unit을 사용함 홀수일 경우 렌더링 시 소수점 발생, 픽셀 퍼팩트하지 않은 상황이 벌어짐
4px이 베이스 유닛이냐, 8px이 베이스 유닛이냐는 회사마다 다름 → 조금 더 섬세한 구성으로 하고 싶다 4px
스페이싱에 대한 라벨링 또한 4px이 기준(ex. shopify-1)이냐 8px이 기준(atlassian-100)이냐 달라짐
마찬가지로 티셔츠 사이즈 척도를 사용하는지 숫자 척도를 사용하는지 입맛에 맛게 선택하면 됌

• 회사 사용 예시

1. 아틀라시안 - 100

2. 쇼피파이 - 1

3. 모질라 - s, m, l

4. 카본 - 01

• 간격의 사용

1. 0~8px : 작은 UI 구성 요소

    

2. 12~24px : 카드 UI 패딩, 간격

    

3. 32~128px : 큰 규모의 UI, 레이아웃

• 간격 유닛의 사용처

  : 패딩 / 갭 / 보더 레디우스 / 윗스*하이트 / 보더 윗스에 사용 가능

정리

1. Elevation 높낮이 단계

2. 단계마다 사용되는 컴포넌트 분리 → 디스크립션에 넣어서 사용 용도 노티

3. 다양한 표현법으로 Elevation 표현

4. 다양한 엘리베이션 라벨링 방법

5. 반응형 그리드 기본 용어 : 칼럼 / 거터 / 마진

6. 그리드는 ‘Fixed’와 ‘Fluid’, ‘Hybrid’가 있음

단축키 - 베리어블 바로 적용 : 영역 위에 커서 올려놓고 Shift + 왼쪽 마우스 버튼

미션 내용

회고를 위해 이번 주에 진행한 미션 내용을 톺아봤습니다

1. 미션 #1 - 컬러 베리어블을 로컬베리어블에 등록하고 다른 디자이너, 개발자 누구나 볼 수 있도록 문서화한다

2. 미션 #2 - 타이포 그래피 스타일, 간격 베리어블을 등록하고 Feather icon을 등록한 후 면으로 모두 바꾼다

3. 미션 #3 - 그림자 효과, 반응형 기준점, 기타 베리어블 등록하기

4. 미션 #4 - 스타일 파운데이션 최종적으로 다듬어서 일관되게 문서화해보기

이번 주 미션은 총 4개로 미션 #4의 스타일 가이드 문서를 제작하기 위해 #1~#3과정을 진행하는 미션이었다.

스타일 가이드는 만들어본 경험이 있기에 비교적 쉽게 만들 수 있었지만, 베리어블을 사용해서 디자인 시스템을 만들어본 적은 없었기에 미션 #1~#3과정이 꽤나 새로웠다.

베리어블로 디자인 시스템을 만들면서 primitive 값을 '참조'한다는 개념이 생소해 과정이 쉽지 않았는데 볼드님의 세세하고 친절한 강의를 들으면서 따라갔기에 어느 정도 개념이 자리 잡은 것 같다(혼자 만들었으면 엄청나게 헤맸을 것 같다)

미션 #4를 끝난 현재 아직도 참조 개념이 어렵지만, 다음 주 컴포넌트를 만들면서 조금 더 익숙해지면 좋겠다.

베리어블을 자유롭게 사용할 수 있게 되는 그날까지 계속 달려나가 보자!

• 스스로 칭찬하고 싶은 점 : 생각했던(예상했던) 퀄리티로 스타일 가이드를 만든 점

• 아쉬웠던 점 : 아이콘 백터 깨지는 친구들을 다듬는데 꽤나 많은 시간을 사용한 점

• 보완하고 싶은 점 : 스트로크 아이콘 뿐만 아니라 필 아이콘들도 갖춰놓고 싶다

• 다음주 목표 : 지금처럼 매일매일 빠지지 않고 미션 팔로업 잘 해서 우수 수강생이 되자!