DAY 14 사전 교육도 내일이면 끝_유데미x스나이퍼팩토리 콘텐츠디자인 인턴형 프로그램 1기

내일이면 사전 교육 마지막 날.

아직 준비가 안됐는데 벌써 끝나기 이틀 전이라니

믿기질 않습니다..

피그마 수업도 내일이면 마지막..

정말 기초적인 부분만 알고 있었는데

이렇게 하나하나 다 배우고 나니 어떻게 UI 디자인을 해야할지 알겠더군요

그 전까진 단면적인 부분만 디자인 했다면

이제는 입체적으로 기능을 활용해서 디자인 할 수 있을듯합니다.

팀원 분들이랑 만든 앱에 적용할 기능들을 많이 배워서

다시 만들어볼 예정입니다 :)

---

단축키

• 컴포넌트 만들기 : ctrl + alt + K

GIF

• 사진 두장을 각각 프레임으로 변경
• animated GIF maker plugin 사용
• 100 = 0.1s

컴포넌트

• 아이콘, 버튼, 레이아웃, GNB, Tab bar 등 반복해서 사용해야하는 오브젝트를 저장해 사용하는 요소
• 한번 저장 후 변경이 필요하면 처음 저장했던 컴포넌트만 변경해주면 나머지도 다 변경
• ctrl + alt + K
• 메인 컴포넌트는 디자인에 사용 X
  • 따로 컴포넌트 페이지 구분하기 or 프레임으로 구분하기
• Instance 인스턴스 : 메인 컴포넌트 복사본
  • Go to main component : 메인 컴포넌트 찾기
  • Detach component : 컴포넌트와 분리/해제
  • 오버라이드 : 메인 컴포넌트와 분리하지않고 인스턴스 자체를 수정하기
    • 가능: 오토레이아웃, 투명도, 텍스트, 색상, 선, 그림자 효과
    • 불가능: 컨스트레인트, 크기, 위치, 레이어 정렬

• • 컴포넌트 해제 기능 X
  • Asset : 컴포넌트 저장 공간
  • *Libraries에서 iOS, Android 컴포넌트 참고 가능
  • 컴포넌트 세트 : 컴포넌트 그룹핑
    • 동일한 오브젝트이지만 상태, 컬러, 사이즈가 있을 땐 그 기준으로 그룹핑하기
  • 컴포넌트 프로퍼티 ⇒ 코딩 이름 사용
    • 속성 property & 값 value 부여해 사용자 정의를 할 수 있는 기능
      • design panel - property에서 이름 변경
      • 이름 변경 시 layer에서 변경할때 조심하기
        
        • • text property
          • boolean property : 레이어 보이기/숨기기 기능
          • instance swap property : 인스턴스 교체 기능컴포넌트
            •  

베리언트 : 변형

• 동일한 컴포넌트지만 디자인이 다른 컴포넌트를 논리적으로 그룹핑해서 에셋 패널을 간결하게 만들어줌
• property : 속성 & value 값
• 이미 만든 컴포넌트를 베리언트 결합하기
  • combine as variants
  • component name / property name / original name
  • EX) button/primary/small/default
• 메인 컴포넌트에 베리언트 추가하기
  • < + >

인터렉티브 컴포넌트

• 컴포넌트 세트 안의 베리언트 사이에 인터렉션을 걸어주는 기능
• action은 항상 change to

1. 2개 이상의 컴포넌트 만들기
2. 컴포넌트 세트 만들기
3. 포로토타입 패널에서 인터렉션 설정
4. 프레임을 만들어 아이콘 복사
5. 프리젠테이션 모드에서 미리 보기

01

컴포넌트 속성 설정해두니 훨씬 빠르고 편하게 만들 수 있어서 좋네요 / 규카츠로 점심 먹었는데.. 고기 냄새 풀풀..

---

 

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

 

#콘텐츠디자인인턴형프로그램 #콘텐츠디자인인턴형프로그램1기 #유데미 #udemy #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃 #콘텐츠디자인 #콘텐츠디자이너 #디자이너교육 #디자이너인턴