[TIL] #6 피그마 컴포넌트 프로퍼티, AI 투자 서비스 프로덕트 분석 아티클 등

10/14 일일 목표

✔️2시 출석체크

✔️아티클 스터디

✔️강의 4주 1~4강 듣기

✔️컴포넌트 만들기 Navigation 파트

 

---

 

오늘 배운 것📖

 

1.아티클 스터디

https://brunch.co.kr/@bestversionofh/3

AI 투자 일임 서비스 핀트(Fint), 프로덕트 분석

 

“충성도 높은 고객 8%가 전체 매출의 40%를 차지하고 매출을 견인한다”는 내용을 보고

새로운 고객을 유치하려고 하는 것 만큼 기존의 충성도 높은 고객을 유지하는 것 또한 중요한 것 임을 알게되었다.

 

또한 플로우가 UX에서 얼마나 중요한 것인지 실제 서비스 이용 사례를 통해 알았다.

중간에 이용하려는 기능이 없으면 흐름이 끊기고 최악의 경우, 그 서비스를 이용하지 않게 되는 장면을 생생하게 느낄 수 있었다.

 

명확한 정보 제공, 명확한 강조는 선택의 이해도를 높이고 혼동을 방지하며 서비스의 신뢰감을 증대시킨다.

 

 

2.피그마 강의

4주 1~4강을 들으며 컴포넌트 프로퍼티에 대해 공부했다.

 

컴포넌트 프로퍼티는 의사상태(pseudo)와 관련이 깊다.

컴포넌트가 의사상태일 때 형태나 요소 등이 조금씩 바뀔 수 있는데

이러한 컴포넌트의 변화나 변경을 위한 기능이 컴포넌트 프로퍼티 기능이다.

 

Property는 속성이라는 뜻으로 디자인 구조가 바뀌지 않는 선에서 변경할 수 있는 요소들을 다룰 때 사용한다.

프로퍼티의 종류는 Variant / Boolean / Instance swap / Text 네 가지가 있는데

배리언츠는 고유 특징으로 인해 프로퍼티와는 별개의 속성이라고 봐도 무방하다.

 

1.Boolean Yes or No, 껐다 켰다 할 수 있는 기능

2. Instance swap 인스턴스를 다른 인스턴스로 교체하는 기능

a. 컴포넌트 안에 다른 컴포넌트의 인스턴스가 있는 경우 또 다른 인스턴스로 교체할 수 있다.

b. 버튼 안에 있는 아이콘에 인스턴스 스왑을 적용하면 다른 아이콘으로 변경하기가 쉽다.

c. 인스턴스끼리만 변경이 가능하다.

3.Text 컴포넌트 안에 있는 텍스트를 수정하기 쉽도록 컴포넌트 속성으로 만들어준다.

+) 디자인 효용성을 생각하면 컴포넌트 프로퍼티를 이용하여 텍스트를 변경하는 것이 좋다.

 

Variant와 Property 중 어떤 것을 사용해야하는지 헷갈릴 때?

둘 다 디자인에 변화가 생기는 건 동일하다

컴포넌트에 적용된 파운데이션이 변경 되는지를 기준으로 한다.

 

버튼에 적용한 색상,간격,폰트 등의 파운데이션 값이

바뀔 경우 -> Variant / 안바뀔 경우 -> Property

 

프로퍼티를 쓸 수 있다면 쓰는 것이 좋다!

컴포넌트가 가질 수 있는 모든 조합을 배리언츠로 만드는 것은 비효율적이기 때문이다.

 

버튼 컴포넌트의 의사상태를 만드는 실습을 하며 배리언츠를 만들었다.

기본 배리언츠의 3요소는 위계/크기/상태가 있다.

 

---

오늘의 잘한 점🥰

오늘 스터디한 아티클 내용을 처음 봤을 때,

내가 별로 안좋아하는 경제 관련 프로덕트 내용에다가 내용도 길어서 지레 겁먹었는데

막상 읽으면서 정리해보니까 재밌었다. 대충 안한 것 아주 잘했어 ~!

 

피그마 강의 이론이 헷갈려서 노션으로 정리하면서 들었다.

TIL 쓰면서 다시 한 번 정리하니까 이해할 수 있었다.

 

노트북이 오래 되셔서 zep,피그마,강의 다 켜으면 느리고...

배터리 수명에도 먼가 문제가 있는 모양이다.

본캠프 중에 고장나면 큰일이라 미리 장비대여를 신청했다!

 

오늘의 문제점😵‍💫

강의 이론이 헷갈려서 계속 다시 듣느라 오래 걸렸다.

그래서 컴포넌트 만들기 과제를 공부시간 안에 못했다!!

 

해결방법👊

오늘 공부시간 끝나고 저녁 먹고나서 컴포넌트 만들기를 해야겠다!

딴짓 안하게 스탑워치 켜놓고 빡집중 해야지