확실히 부트캠프라는 체제에서 배우다보니 적재적소에 필요한걸 압축적으로 배운다. 나중에 보면 당연한 것 들이겠지만, 지금은 솔직히 배우기가 좀 귀찮은 마음도 든다. 습관으로 9to9이 익숙해지고, 할당량 계획을 짜고, 성취했을 때 스스로에게 보상을 주자.
오늘 배운 것: 피그마 활용 강의 4주차 수업으로, 디자인 스타일의 개념과 내가 직접 팀원, 조직내에 결정한 디자인 체계를 전달하는 방법을 배웠고, 컴포넌트와 베리언츠의 개념을 배우고 버튼을 제작하며 실습을 했다.
공부 내용
컴포넌트, 버튼 컴포넌트, 텍스트필드 컴포넌트
컴포넌트는 재료, 구성푼이라는 뜻이 있다. 요소요소 할때 그런 느낌이다. 피그마에서는 자식을 수없이 낳는 표준같은 느낌이다.
컴포넌트를 버튼으로 설명해보자. 나는 생김새를 기준으로 버튼이라고 생각한거같은데... 강사님 말로는 버튼이 하는 역할로 판단했다고 한다. "모양이 달라도" 기능에서 버튼이라는 느낌이 확 왔다는 점이다.
여러 버튼을 봐도 모양새는 기능에서 비롯된다는 관점으로 바라보고, 컴포넌트를 만들때도 기능, 행동을 중요하게 바라보자.
Pseudo stste(css에서는 가상 클래스 선택자)
Box:hover { button-color: "red" }
이걸 코딩이 아니라 내가 설계를 한다. 후후후. 구현할 수 없는 것들도 있으니 설계시 개발자와 잘 논의할 것.
마스터 컴포넌트와 인스턴스를 다루는 테크닉!
Uiux 디자인이란 반복적인 작업을 효율적으로. 컴포넌트와 인스턴스를 만들고 만들어진 디자인 시스템을 배포할 것.
베리언츠는 컴포넌트의 가상상태를 만들때 사용한다.
프로퍼티는 디자인 구조를 변경하지 않는 선에서 변경할 수 있는 요소
인데, 베리언츠랑 프로퍼티 중에 뭐를 써야할까?
파운데이션 요소인 크기, 색상, 간격, 폰트, 아이콘의 크기가 변한다면 베리언츠, 전부다 변하지 않았다면 프로퍼티로 조정하는게 느낌적인 느낌이다.
버튼
중요한 대목이 나왔다. 사람들의 행동을 유도하기에, 제품의 매출에 큰 영향을 미친다. 버튼을 설계할 때는 누를 수 있다라는 '시각적 힌트'를 주어야한다.
행동유도성을 지닌 버튼을 디자인하는데 주목하라는 의미로, 버튼의 곡률을 깎는 장인이 되지 말자.
버튼의 구조
버튼, 모든 ui는 존재하는 이유와 목적을 인지하고 디자인해야한다.
- 컨테이너 : 프레임 격의 요소
- 라벨 : ui가 사용자애게 안내하는 가이드라인
- 리딩 앨리먼트 : 왼쪽에서 뭔가 유도를 함
- 트레일링 엘리먼트 : 오른쪽에서 따라나오는 요소들.
이게 왼쪽에서 오른쪽으로 읽는 문화권에서 버튼을 만들면서 이런 개념을 만들었다. 어디에 마우스 올리면 목록이 띄워지는 상황에서 띄워지는 쪽이 오른쪽인 경우를 마주해봤을 것이다.
버튼은 하나당 프라이머리, 라지, 디폴트 버튼을 작성한다.
