피그마에게 혼쭐나기_유데미x스나이퍼팩토리 콘텐츠디자인 인턴형 프로그램 1기 14일

쉬는 시간에도 일어나지 못하고 앉아서 쭉 진행했던 하루

밥이 코로 넘어갔는지 입으로 넘어갔는지 기억이 나지 않는다.

마지막이 다가온다. 내가 잘 해낼 수 있을까

 

오늘은 프로토타입의 마지막인 gif 만들기 / 컨포넌트에 대해서 배웠다.

 

GIF 만들기

 

1. GIF로 만들고 싶은 사진을 선택한다.

2. Plugin에서 Animated GIF Maker를 작동시킨다.

3. Plugin이 하라는대로 만든다.

뚝딱 GIF 완성~

 

컨포넌트

 

컨포넌트란? - 아이콘, 버튼, 레이아웃 등 많이 사용하는 오브젝트를 저장해 두고 반복해서 사용하는 요소

• 프로젝트 전반에 걸쳐 일관된 디자인을 만들고 관리하는데 도움이 됨.
• 버튼, 아이콘, 레이아웃, GNB, Tab bar 등을 컴포넌트로 만듦.

컨포넌트 만들기

 

• Create component - Ctrl + Alt + K
• 메인 컴포넌트는 디자인에 사용하지 않으니 한 곳에 이쁘게 모아두기

인스턴스

• 컴포넌트를 복사한 요소로, 컴포넌트의 영향을 받음.
• Detatch instance - 인스턴스를 컴포넌트와 분리
• Go to main component - 메인 컴포넌트로 가기

오버라이드 

• 메인 컴포넌트를 복사해 색상,크기,효과 등을 수정 가능하며, 이것을 오버라이드라고 한다.
• Push changes to main component - 인스턴스에서 수정한 것을 메인에 덮어 씌우기
• Reset > Reset all changes - 인스턴스의 모든 변경사항을 기존 컴포넌트로 되돌리기
• 가능 범위 - 오토레이아웃, 투명도, 텍스트, 색상, 선, 그림자효과
• 불가능 범위 - 컨스트레인트, 크기, 위치, 레이어 정령

해제

• 컴포넌트 - 해제가 없어 플러그인 사용(Detatch component)
• 인스턴스 - More action > Detatch instance ( Ctrl + Alt + B )

컴포넌트 세트

• 동일한 오브젝트의 다양한 상태, 컬러, 사이즈 등이 다를 때 정리함.
• 구조나 계층 구조를 설정하면 파일의 레이어를 훨씬 쉽게 관리 가능.
• 디자인 패널의 ... 버튼 선택 > create component set
• property 와 value 잘 쓰기. 안 그러면 나중에 헷갈려 죽는다.

컴포넌트 프로퍼티

• Text - 디자인패널에서 텍스트를 재정의 ( Typography에 위치 )
• Boolean - 레이어의 보이기/숨기기 상태를 토클 ( Appearance에 위치 )
• Swap instance - 디자인 패널에서 인스턴스를 교체 ( 디자인 패널 ...에 위치 )

베리언트

 

• 동일한 컴포넌트이지만 디자인이 다른 컴포넌트들을 논리적으로 그룹핑.
• 컴포넌트 세트는 베리언트의 묶음.
• 컴포넌트 베리언트로 결합 : 2개 이상 컴포넌트 선택 > 디자인 패널에서 ( Combine as Variants ) 선택

메인 컴포넌트에 베리언트 추가

• 메인 선택 후 디자인 패널에서 <+> 눌러 베리언트 생성
•  <◈> 아이콘 선택 
• 우 클릭 > Main Component > Add variants

베리언트와 레이어 관계

• 컴포넌트 이름/value 1/value 2 /value 3
• 레이어 이름을 슬래시로 구분하여 만들기
• 이름 바꾸기 컨트롤 + R
  이름 / Current name
  이름바꾸지 잘해주기 그래야 property 따로 안해도 됨.( 잘 외우고 잘하기)

인터랙티브 컴포넌트

• 컴포넌트 세트 안의 베리언트 사이에 인터렉션을 만들어 줌
• Action은 항상 change to

인터렉티브 컴포넌트 만드는 법

1. 2개 이상 컴포넌트 만들기
2. Component Set으로 만들기
3. 프로토타입 패널에서 인터렉션 설정
4. 프레임을 만들어 아이콘을 복사하여 배치
5. 프레젠테이션 모드에서 미리보기 (모르겠으면 강사님이 보내주신 ppt 참고하기. 능숙하게 만들 수 있도록 연습)

 

오늘은 자리에서 한 시도 일어나지 못하는 날이였다.

너무 어렵기도 어렵지만 강사님의 속도를 내가 따라가지 못해 쉬는 시간에 복습도 하고

강사님이 다시 알려주신 내용을 다시보느라 시간이 이렇게 빨리 가는 줄 모르고 있었다.

내가 웹페이지를 제작하고 하는 것이 목적은 아니지만 미래에 내가 어디로 가게 될 지 모르기 때문에

툴들을 능숙하게 다룰 수 있을 때까지 꾸준히 해보는 것이 중요한 것 같다.

인턴에 들어가기 전에 어느정도 숙달이 필요해 보인다. 복습을 위해서 오늘 길게 적기도 적었다.

내일이 지나면 이제 인턴에 가게 될 텐데 자꾸 모자라다고 느껴지는 건 왜일까.

포토샵 / 일러스트 / 컴활을 취득할 때에도, 학교에 졸업할 때에도, 어학연수를 다녀왔을 때에도

자꾸만 남들과 비교하며 모자라다고 느껴진다.

그럴 수록 더더욱 해야겠다. 만져보고 익숙해질 때까지 하는 수 밖에는 없지.

 

——————————————————————————

본 후기는 유데미 x 스나이퍼팩토리 콘텐츠디자인 인턴형 프로그램 1기 과정(B-log) 리뷰로 작성 되었습니다.