인프런 워밍업 프로덕트 디자인 1주차 발자국
강의 요약
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: 본래의 값
#D6840BGlobal/primitive/core/base/foundation/root: 사용 맥락에 상관없이 디자인 언어의 기본 값
Orange-MediumAlias/semantic/applied/purpose: 특정 사용 맥락과 의도를 전달할 때 쓰이는 값
Band-primaryComponent/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 설정하는걸 자꾸 잊어버렸는데, 이건 무조건 외워야겠다.
다음주 계획
강의들으면서 노트 꾸준히 작성하기
이번 주 만큼 휴일이 많이 없어서 스케줄 관리에 특히 더 신경쓸 것
답변 1