내일배움캠프_디지털마케터_3기 (사전캠프 12일차)

 

오늘 배운 피그마 강의

---

폰트 스타일의 구성

• 패밀리(Family) : 폰트의 종류
• 굵기(=무게감, Weight) : 단순히 굵기를 뜻하는게 아닌, 얼마나 더 중요한가의 의미로 ‘무게감’이라 표현.
• 크기(Size) : 폰트의 크기, 일반적으로 16px부터 시작하고, 2px씩 줄이거나 늘린다. 
  > 10px 미만으로 사용하지 않는걸 권장
  > 20px 이상일때는 4px씩 차이나게 하는 게 일반적이다. (폰트 크기가 커지면 2px 정도는 티가 안남)
  > 20px 미만인 폰트들은 본문에 사용하고, 20px 이상부터는 제목에 사용한다.
• 행간(Line-height) : 폰트의 높이를 조절할 때는 행간, 글자 줄 사이의 간격을 이용한다.
  > 폰트마다 기본적인 여백이 다르기 때문에 꼭 확인해야 한다.
• 자간(Latter-Spacing) :  글자와 글자 사이의 간격. 

 

마스터 컴포넌트와 인스턴스

컴포넌트란? 파운데이션을 조합해 만들어지는 구성품

 

마스터 컴포넌트(Master Component)

마스터 컴포넌트는 피그마에서 쓸 수 있는 컴포넌트 기능의 핵심이다.

반복적인 디자인을 빠르게 하기 위해 디자인을 복사해거 사용할 수 있도록 해준다.

복사된 디자인들을 한 번에 수정하거나 편집할 수 있도록 해주는 중요한 기능이다.

 

- 마스터 컴포넌트의 특징

• 원본이기 때문에 변하지 않는다
• 원본 그대로이기 때문에 수정이 필요하면 그냥 수정하면 되고, 지우고 싶다면 그냥 지우면 된다.
• 마스터 컴포넌트를 복제하면 마스터 컴포넌트의 복제본, 인스턴스가 생긴다.

인스턴스(Instance)

마스터 컴포넌트의 복제본. 마스터 컴포넌트를 복제하면 인스턴스가 생기는데 속성 그대로를 이어 받는다.

 

- 마스터 컴포넌트와 인스턴스의 관계

• 컴포넌트를 수정하면 인스턴스에도 반영된다.
• 인스턴스를 먼저 수정하면 컴포넌트를 수정해도 반영되지 않는다.
  > 인스턴스를 수정하는 것이 컴포넌트 변경사항을 이어 받는 것보다 더 우선 적용된다.
• 컴포넌트를 지우더라도 인스턴스는 남아 있다.
  > 인스턴스를 편집하고 싶다면 컴포넌트를 복구해야 한다.
• 연결을 해제하면 인스턴스는 컴포넌트와 분리되고, 일반 프레임으로 변경된다.
  > 연결 해제는 Detach(디태치: 분리하다)라고 부른다.

 

디자인 시스템의 개념

우리는 웹사이트나 앱을 디자인 하는데 이 웹과 앱을 제품(프로덕트)라고 부른다.

프로덕트를 만드는 디자이너들은 사용자들이 겪는 문제를 찾아 디자인으로 개선한다.

UI는 다른 디자이너도 똑같은 방법으로 만들고 쓸 수 있어야하고, 개발자도 같은 생각을 해야 한다.

 

디자인 시스템의 목적

반복적인 UI를 효율적으로 관리 / 팀 전체가 같은 정도로 이해

 

- 디자인 시스템의 장단점

• 장점
  디자인을 반복해서 사용할 수 있어서 시간과 비용이 줄어든다. > 반복되는 디자인에 개발 코드까지 연결해서 저장해두면, 필요할 때 꺼내쓸 수 있다.
  누가 만들어도 동일한 품질의 제품을 설계할 수 있다.
• 단점
  다양한 형태의 UI를 모아 하나로 통일하는 관정이 오래 걸린다.
  필요한 건 몇개 없는데, 그에 비해 UI가 과하게 많아질 수 있다.
  새로운 디자인이 필요할 때, 디자인 시스템을 활용하려다 보니 혁신이 줄어든다.

 

UI의 분류

• 액션(Action): 사용자가 중요한 행동을 수행할 때 사용 (ex.버튼)
• 인풋(Input): 사용자의 입력을 받을 때 사용(ex.텍스트필드)
• 인포메이션(Information): 사용자에게 서비스의 상태나 안내 사항을 전달할 때 사용(ex.토스트 메시지, 라벨)
• 컨테이너(Container): 컴포넌트 여러 개가 결합되어 하나의 덩어리를 이루는 컴포넌트(ex.카드, 바텀시트)
• 내비게이션(Navigation): 사용자가 페이지를 이동할 때 사용(ex.앱바, 화면 하단의 탭 바, 사이드바)
• 컨트롤(Control): 사용자가 설정이나 값을 수정할 때 사용(ex.라디오, 체크박스, 스위치)

 

---

 

 

오늘은 광고 카피 A/B테스트 과제랑 라이브 실무자 세션을 했다.

노션에 에러가 발생하는 헤프닝이 있었지만 광고카피문구 만드는건 재밌었다. 광고 상품을 하나 정하고

• 가격중심 vs 경험중심
• 긴급성 강조 vs 안정성 강조
• 혜택중심 vs 감성 중심

이런식으로 A안 B안을 만들어서 어떤게 더 후킹되는지 분석하는 과제인데 아마 내일 설문조사를 돌릴 것 같다ㅎㅎ

어떤 결과가 나올지 궁금하군..! 

 

오늘도 실무자 라이브 세션 강의가 있었는데 이론적인건 아직도 헷갈린다. 그래도 실무자의 경험담이나 현실적인 조언 같은게 꽤 도움이 많이 되는 것 같다! 가장 강조하셨던 AI활용이나 데이터 분석은 부트캠프동안 놓치지 말고 잘 배워가야지...!

 

남는 시간에 빡세게 용어집 만들어서 드디어 스텝6까지 끝냈다....진짜 힘든 싸움이여따....

그래도 발표내로 끝낼 수 있어서 다행이다ㅜㅜㅜㅜㅜ

얼마 안남은 사전캠프 화이팅~