[인프런 워밍업 스터디 클럽 1기 디자인] 1주차 발자국
4L 회고
Like (좋았던 점): 피그마를 독학할 때 유튜브에 짧게 널려 있는 영상을 보고 하나하나 적용하느라 힘든 부분이 꽤 많았는데 정말 작은 부분(컬러)부터 차근차근 배우니까 많이 도움이 된 것 같았다.
Learned (배운 점): 배리어블 자체를 처음 써보았고 컬러 차트를 내가 만들 수 있는지도 처음 알았다. 그리고 이름 짓는 규칙(?)이나 간격 척도의 종류와, 아이콘 유니온도 처음... 😿 2챕터 후반부나 3챕터 초반은 나름 알던 것이라 괜찮았지만 앞 개념들을 따라가면서는 정말 많이 배웠다 (하나도 몰라서 ㅜ.ㅜ)
Lacked (부족한 점): 일단 4학년이라 수업을 많이 듣는 것은 아니지만 졸작을 병행하느라 강의가 많이 밀렸다. 어느 정도 진행된 졸작에서 큰 이슈가 터져서 주제를 갈아 엎어야 했다. 그래서 강의 공부할 시간이 갑자기 증발했었고.. 또한 강의 내용을 나의 개인 노션에 적으면서 진행되었는데 이렇게 들으니까 시간이 다섯 배는 더 걸린 것 같았다. 볼드 강사님께서 따로 정리해 주신 노션을 적극 활용해서 실습과 발자국 작성에 시간을 쓰는 것이 맞는 것 같다.
Longed for (바란 점): 첫 주차라 시간 분배를 1도 못하고 정말 엉망진창에 내가 이거 다 끝낼 수 있을까? 싶었지만 꼭 완주할 수 있도록 틈이 날 때마다 부담없이 공부해야겠다는 생각이 들었다 파이팅😂 앞으로는 꼭 주어진 일정대로 강의를 듣자...
🙉 강의 필기한 것 중에 중요한 / 여태 몰랐던 것들만 발췌했다!
배리어블
디자인 토큰이나 프로토타이핑 툴의 기능을 함
디자인 토큰이란?
“모든 UI 요소의 기본 구성요소”로써 근원의 역할을 하는 작고 반복 가능한 디자인 결정
전자 - 원자 (버튼, 라벨, 필드 등) - 분자 (앞의 것들을 결합한 것) - 유기체 - 템플릿 - 페이지 - UI
디자인 토큰 : 전자에 해당
색상, 폰트, 테두리, 그림자 효과 등 ⇒ 디자인 세팅 !!
배리어블 이름 구조← 의미, 논리, 모듈화, 일관성 (헷갈린닥,,ㅜㅜ)
Namespace : 시스템 구분
System 접두어, 모든 토큰 앞에 붙음
Object
(특정) Component : 컴포넌트 적용하고 싶을 때 중간
Base : 디자인의 구성 요소 나타냄
Category - Property(각 카테고리 내 세분화) : 기본적인 디자인 구성 요소
Modifier : 그것의 변형 값을 보여줌
Vraint(시각적 위계질서 primary-secondory-tertiary), State(인터랙션 상태), Scale(숫자나 사이즈, 강도 등) : 하나의 디자인 요소를 여러 상태에 따라 변형
예시) 근데 카테고리 옆에 무조건 프로퍼티가 나오는 건 아닌..
styles to variable 플러그인
styles to variable 플러그인
styles에서 가져오는 방법
primitive에는 배리어블에 무조건 기본 값이 들어가야 함 = row한 헥사 코드
theme 컬러 : 브랜드
semantic 컬러 안에 text / bg / icon / border별로 만들어 주기.. 그 안에 또..
핵심 .. semantic 컬러 내부 분류 잘 하기 여러 상황 - 역할에 따라,,
variable에서 scope 조절 설정 하면 해당 스코프에서만 색깔 보임
컬러 스타일을 킵 하고 싶으면 상위 폴더를 만들고 앞에 .(점) 붙이기 ⇒ 나중에 퍼블리싱 할 때 안 빠져나감 (안 쓸 거면 그냥 지우기!!)
나중에 아이콘 Union에 관해 더 자세히 배울 것
⇒ 이렇게 컬러를 짜게 되면 수치와 컬러 이름 같은 raw 컬러를 보여주는 것이 아니라 시맨틱한, 의미있는 이름을 보여주기 때문에 컬러 속성을 넣을 때 쉽고 일관적임
다시 automatic style guides 플러그인을 써서 새로운 페이지 만들기
답변 0