[인프런 워밍업 스터디 클럽 1기 디자인] 2주차 발자국 (신영우)

학습 내용

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

프로퍼티의 종류들

Text 프로퍼티 → 디폴트 텍스트 설정
instance swap → 변경할 수 있는 에셋 설정
- 이때 Value 에서 디폴트 에셋 설정 가능
- Preferred values에서 변경할 수 있는 에셋들 설정 가능

프로퍼티의 위치를 바꿔주는 것도 중요

Leading icon 의 Boolean 프로퍼티 아래 →
Leading icon 의 instance swap 프로퍼티를 위치시켜 디자인 시스템 사용성을 증진시키는 구성을 만들어 줌

에셋의 높이를 통일시켜주는 것도 중요

모 컴포넌트에 min, max 하이트 값을 넣어주면 자 컴포넌트에도 적용

볼드님 질의 응답 답변

Storke가 살이있는 아이콘은 Union을 먼저 한 다음 Outline Stroke로 깨야함 → Storke 값이 살아있으면 리사이징 시 값이 유지 됌 (리사이징 되지 않음)

발견한 설계 꿀팁

인스턴스가 조합된 최종 상태의 컴포넌트는 한번 더 묶어주기
- 디자인 시스템 사용성 챙기기
- 이 때 기준이 되는 모 컴포넌트는 ‘part/’ 라벨링을 붙여 검색 시 노출 안되게 해주기
- ex)

컴포넌트 베리언트에서 절대 위치(앱솔루트 포지션) 적용할 수 있음 그리고 절대 위치 적용한 디자인 에셋에 컨스트레인 적용해서 반응형으로 설정 가능함
- ex)

컴포넌트 베리언트 정의한 영역 안에서 일괄 적용되지 않게 하려면 각 개별 컴포넌트 안에서 에셋을 정의하면 됌
- Boolean으로 적용하면 안되는 부분, 적용하지 않으려는 목적으로 작용
- ex)

작업 이후 디자인 에셋들 Contrast 체크해서 접근성 갖추기

몰랐던 점들

이미지 삽입 관련
- 이미지도 스타일 등록이 가능하니 자주 쓰는 이미지는 등록해놓으면 좋을 것 같다
- 이미지 삽입할 때 ‘프레임 배경 컬러 선택 → 이미지 선택’해서 넣어주는게 좋을 것 같다
  - ( 1. 이미지 자유롭게 리사이징 가능 / 2. 이미지 다른 에셋으로 곧바로 변경 가능 )

오토 레이아웃 설정 관련
- 오토 레이아웃 설정에서 스트로크 같이 면으로 처리 안되는 친구들의 ‘Included / Excluded’를 설정할 수 있다
- 오토 레이아웃 설정에서 에셋들의 스택 순서를 ‘Last on top / First on top’으로 변경할 수 있다

미션 내용

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

미션 #5 - 피그마 컴포넌트 기초 배우고 입력 컴포넌트 만들어보기
미션 #6 - 입력 컴포넌트 나머지 만들고 마지막 점검하기
미션 #7 - 디스플레이 컴포넌트 만들어보기
미션 #8 - 디스플레이 컴포넌트 나머지 만들고 마지막 점검하기

이번 주 미션도 저번 주와 마찬가지로 총 4개의 미션이었다.

미션 #5, #6, #7, #8 과정 모두 컴포넌트를 만드는 미션으로 UX 경험적으로 꼭 필요한 공통 에셋들을 만들어보는 과정이었다.
실무에서 공통 에셋들을 만들어본 적은 있지만, 수업처럼 모든 에셋들을 만들어본 적은 없어서 본격적인 과정들이 쉽진 않았다. (생각보다 시간이 오래걸리는 점도 꽤나 힘들었다)

그래도 미션 #5, #6, #7, #8 과정을 거치며 베리어블 사용하는 것에 어느정도 익숙해진 것 같다. (조금 속도가 붙었다)
중간중간 적용을 까먹고 빼먹는 친구들이 종종 있는데 좀 더 꼼꼼히 살피면서 설계할 필요가 있는 것 같다.

다음 주도 공통 컴포넌트 에셋을 만드는 작업을 이어서 진행한다.
빨리 페이지에 만들어놓은 컴포넌트 에셋들을 적용시켜보고 싶다...!

완주까지 기대가 되는 요즘이다. 굿!

스스로 칭찬하고 싶은 점 : 월요일, 화요일 매우 몰입해서 미션 #5, #6, #7, #8을 모두 완주한 점
아쉬웠던 점 : 아이콘 시스템, 타이포 그래피 시스템을 다듬어야 하는데 다듬지 못한 점
보완하고 싶은 점 : 타이포 그래피 시스템도 베리어블을 적용해보고 싶은 점
다음주 목표 : 3주차 들어가기 전 아이콘 시스템, 타이포 그래피 시스템 다듬어야할 친구들 무조건 손보고 들어가기!