25.11.28 TIL 15: 본캠프 5일차👊

📌 오늘의 진도:

강의: 체계적으로 배우는 피그마 기초 완전 정복

➡️ 챕터 4: 피그마 심화 학습

 

영상:

➡️ <고등학교 2학년 때 토스 최연소 PO로 입사한 05년생 with 최형빈> -> 팀원들과 함께 공유

https://www.youtube.com/watch?v=JEAGmrkgmYU

 

오늘의 인사이트  👀

➡️ 진짜 피그마가 너무 싫어지는거 같다.... 이게 되면 이게 안되고 하는게 진짜 연습을 많이 해봐야하는거 같다.. 오늘만 피그마에 너무 시간을 쏟아부어서 다른걸 못 하는거 같아.. 좀 속상하다 ㅜ... 하지만 다 살이 되는 과정이겠지..! 그래도 포기 안 한 내가 대단하다! 

그리고 오늘 팀원들과 함께 한 인터뷰 스터디를 보면서 정말 인터뷰이가 너무 대단하다는 생각을 계속 들었습니다. 자세한 것은 아래에..!

 

오늘 강의에서..

 ➡️ 컴포넌트 프로퍼티

의사 상태에서, 컴포넌트는 가상의 상태를 가질 수 있다는 걸 배웠어요.

컴포넌트가 가상의 상태를 가질 때, 형태가 조금씩 변화할 수 있어요.

 

컴포넌트 프로퍼티는 왜 쓰나요?

피그마로 UI를 디자인한다는 건 컴포넌트를 만들고 인스턴스를 다루는 것과 밀접한 관련이 있어요.

오토레이아웃 등 피그마를 최대한 활용해 컴포넌트를 만들고, 인스턴스를 디자인에 적용하는 과정을 반복하기 때문이에요.

 

컴포넌트 프로퍼트 알아보기:

배리언츠를 제외하면 피그마 컴포넌트를 만들 때 설정할 수 있는 프로퍼티는 3가지에요.

마스터 컴포넌트 를 선택하면 프로퍼티 패널이 생겨요.

👁️ Boolean

📌 Boolean(불리언)은 Y or N을 선택하는 형식이라는 뜻이에요. 참 또는 거짓, 예 또는 아니오, 켜기 또는 끄기 모두 가능해요.

• 컴포넌트 안에 있는 특정 요소를 보이게 하거나 안 보이게 할 수 있는 속성이에요. 즉 레이어를 켰다가 껐다가 가능해요!

◇ Instance swap

📌 인스턴스 스왑 기능은 인스턴스를 다른 인스턴스로 교체하는 기능이에요. 따라서 인스턴스를 인스턴스가 아닌 것으로 바꿀 수는 없어요!

• 컴포넌트 안에 다른 컴포넌트의 인스턴스가 있는 경우 또 다른 인스턴스로 교체할 수 있어요.
• 주로 버튼 안의 아이콘, 팝업 안의 버튼 등을 교체할 때 사용해요.

instance swap

인스턴스 스왑은 말 그대로 ‘인스턴스’를 스왑하는 기능이에요. 따라서 인스턴스가 아닌 것과는 바꿀 수 없어요. 반드시! 인스턴스를 인스턴스로만 변경할 수 있답니다.

 

𝐓 Text

📌 컴포넌트 안에 있는 텍스트를 수정하기 쉽도록 컴포넌트 속성으로 만들어줘요.

텍스트에 텍스트 프로퍼티를 적용하면, 텍스트 편집을 좀 더 쉽게 할 수 있어요.

 

➡️ 배리언츠(Variants)

배리언츠도 넓은 관점에선 프로퍼티의 한 종류지만 별개의 속성이라고 생각해주세요!

컴포넌트가 가질 수 있는 또 다른 모습을 만들 수 있게 하는 컴포넌트 기능이에요.

즉, 배리언츠는 컴포넌트의 가상의 상태를 만들 때 사용해요.

마우스를 올렸을 때, 누를 수 없을 때는 기본 상태의 변종, 즉 기본 상태의 배리언츠에요!

➡️프로퍼티(Property)

프로퍼티는 디자인 구조가 바뀌지 않는 선에서 변경할 수 있는 요소들을 다룰 때 사용해요.

기본 상태 + 아이콘 이라는 디자인 구조는 그대로 두고 버튼의 글자나 아이콘의 스타일을 바꿀 때 프로퍼티로 조정해요.

 

➡️ 위계(hierarchy, priority)

두 표현 모두 ‘얼마나 중요한 행동을 하기 위한 버튼인가’ 를 담고 있어요. 즉, 우리 제품에서 사용자가 반드시 해야하는 중요한 행동이라면 가장 돋보이는 1순위의 버튼을 쓰고, 중요하지 않을 수록 3순위의 버튼을 사용해요.

일반적인 버튼은 프라이머리(Primary, 1순위), 세컨더리(Secondary, 2순위), 터시어리(Tertiary, 3순위)의 3단계를 가져요.

 

 

✅ 오늘의 인터뷰 스터디:

[기억에 남았던 구간]

솔직히 보는 내내 닭살 돋아서.. 20분이 훌쩍 가는 기분이였는데 ㅜ

05:27- 05:41: 코로나 나우를 점점 안 좋아지는 상황에 맞게 계속해서 개발하고 고민을 하는 자세, 이게 바로 PM이 가져야하는 마음가짐 중 하나

 

저는 스피커처럼 웹사이트를 만들기 위한 도구, 언어, 기술를 모르는데도 무작정 만들기로 다짐을 한게 너무 멋있었어요! 그것을 공부하고 솔루션을 찾아서 서비스를 만듬.

 

 

[인사이트]

이 영상을 보며 저는 틀 안에 갇혀있지 말자라는 생각이 들었습니다. 이 영상 속 초반에 스피커가 과학기술의 대한 관심을 보이면서 와이파이 기술로 뭐를 할 수 있지? 라고 할때 좀 놀랬습니다. 뭐 지금은 제가 알고 있는걸로는 전자기기를 (냉장고, 스타일러, 에어컨 등) 와이파이로 연결해 조작을 할 수 있는걸로 알고 있습니다. 제가 기술자가 되는건 아니지만 PM으로서 뭔가를 기획할때 여기에서 멈추는게 아니라 계속 나아가 생각하고 고민하는 자세를 본받아야겠다고 생각했습니다.

저도 스피커와 마찬가지로 창업이라는걸 나중에 꼭 해야지라는 생각을 갖고 있었지만 어떤걸 할지만 생각하고 '나는 아직 어리니깐, 나는 아직 경험 부족이니깐' 이런 말들로만 미루고 이때까지 변명만 생각했던거같아 반성을 하였습니다. 근데 이 영상을 보며 생각이 달라졌습니다. 원래는 롤모델을 정하는게 따분한 생각이라고 생각을 했었는데요. 이제는 진지하게 생각을 해봐야 할거 같다고 생각했습니다. 그 사람이 어떻게 성장을 하였고 그 발자취를 따라가는 모습이 그 어느 것 보다 동기부여를 만들어 줄 수 있고 그 롤모델이 나의 멘토가 될 수도 있다는 생각에 저는 주말에 고민을 꼭 해봐야 할거 같습니다! 물론 그 롤모델이 기업인이라면 그 회사에 대해서 관심을 갖고 더 진심으로 공부하면서 그 회사에 취직을 해 일하면 더 창업을 뼛속까지 느껴볼 수 있지 않을까요?

그리고 저는 한편으로는 토스도 대단한거 같습니다. 다른 회사 공고들을 보면 대학교 졸업자가 항상 써있었는데요. 나이, 학력 제한 없이 무차별적인 시선을 본 것도 정말 대단하다고 생각했습니다. 그래서 나도 나중에는 저도 창업을 한다면 저런 마음가짐으로 해야겠다고 생각했습니다.. 그리고 형빈님이 자기가 토스에 들어간게 운이라고 말씀 하셨지만.. (솔직히 실력인것..) 여기에서 또 운은 준비 되어있는 사람에게만 찾아온다는 생각을 하게 되었던거 같습니다. 이거는 솔직히 영상을 보면서 든 제 생각인데요.. 역시 어른보다는 어린이, 청소년의 아이디어, 생각들이 더 대단한거 같아요.. 형빈님 말고도 다른 초등학생이 낸 아이디어로 고속도로에 빠지는 구간을 색으로 바닥에 칠해서 교통사고 비율을 훨씬 줄인게 생각났습니다.