DAY 13 오늘도 피그마 강의_유데미x스나이퍼팩토리 콘텐츠디자인 인턴형 프로그램 1기

오늘 강의는 컨스트레인트에서 시작해서 프로토타입로 끝났습니다.

컨스트레인트를 실습하면서 오토 레이아웃도 몇번 더 연습했는데

어제보다 좀 알겠더라구요

몇번 더 연습해보면 확실히 알듯합니다.

모르고 있던 기능들을 알게 되니 

이전에는 하나씩 다 해야해서 힘들었는데

이제는 디자인하기가 더 편해졌습니다

이래서 배워야하나봐요 :)

---

단축키

• Deep Select (오토 레이아웃에 있을때 안쪽에 있는 요소 선택할때) : ctrl 클릭
• Inline Preview : shift + spacebar
• Present : ctrl + alt + enter
• Inline Preview Renew (인라인 프리뷰에서 새로고침) : r
• 고정 시키고 프레임 키우기 : ctrl 누르고 올리기/줄이기

HTML 구조

• 부모/상위 요소 Parent Element
• 자식/하위 요소 Child Element
• EX) 카드를 예시로 들때, 이미지/타이틀/본문 - child element, 카드 프레임 - parent element

컨스트레인트

• 프레임 안의 오브젝트(child element)를 통제하는 기능
• 반응형 디자인에 사용
• 그룹에서는 사용 X, 프레임에서만 사용 O
• parent element 가 있어야지만 설정 가능

• Constraints Horizontal —> X축을 따라
  • left : parent element의 왼쪽에 child element 고정
  • right : parent element의 오른쪽에 child element 고정
  • left & right : parent element의 양쪽을 기준으로 child element 상대적으로 유지
    • 반응형 할때 반드시 사용
  • center : parent element의 수평 가운데에 child element 고정
  • scale : 백분율 (같은 비율로 조정)
• Constraints Vertical —> Y축을 따라
  • top : parent element의 상단에 child element 고정
  • bottom : parent element의 하단에 child element 고정
  • top & bottom : parent element의 상단과 하단을 기준으로 child element 상대적으로 유지
    • 반응형 할때 반드시 사용
  • center : parent element의 수직 중심에 child element 고정
  • scale : 백분율 (같은 비율로 조정)
• 오토 레이아웃일 경우, 한번만 설정
  • 요소들 간격이 변경 안될때 —> 오토 레이아웃의 간격을 auto로 변경
  • 가로 세로 - left & right , 간격 - auto (대부분 이렇게 설정하면 됨)
• 프레임일 경우, 각 요소들마다 설정
• Left & Right vs Scale
  • left & right 은 프레임이 늘어난 만큼 더하기 , 프레임이 줄어든 만큼 빼기
  • scale 은 프레임이 늘어난 만큼 배로

프로토타입

• 웹 또는 앱을 개발할때 원하는 방식으로 작동하는지 테스트하는 과정
• Device : 디바이스, 모델, 방향 선택
• Background : 프리젠트 배경색 선택
• Flow : 프로토타입의 시작 프레임
  • 사용자의 흐름에 따라서 섹션별로 나눠 만들기
  • EX) 로그인 성공, 실패, 회원가입 등 각 플로우를 만들어 유저 플로우 설계
• 트리거 : 특정 동작 실행
• 액션 : 트리거를 진행
• 애니메이션 : 인터렉션의 움직임 설정
  • instant : 즉시 이동
  • dissolve : 이전 프레임의 투명도 0%
  • 기본 설정 0.3
• Scroll Behavior
  • 프레임이 안의 컨텐츠보다 작을때 사용
  • 프레임 O, 오토 레이아웃 O, 그룹 X
  • Clip Content 표시해서 프레임 바깥으로 나간 요소 숨기기
  • Overflow가 나오지 않을때, 우클릭 해서 Frame Selection 선택
  • Horizontal
  • Vertical
    • 가끔 사용
  • Both directions
    • 지도나 큰 이미지 볼때
• 인터렉션 참고 사이트 : https://www.etude.com/product/new/
• Scroll Position
  • scroll with parent : 오브젝트와 부모 프레임 함께 스크롤
    • 페이지가 긴 스크롤에서 사용
  • fixed : 오브젝트를 특정 위치에 고정
    • 상태바, 네비게이션 바, 탭 바 , FAB에 사용
  • sticky : 오브젝트가 프레임의 상단에 도달하면 고정되는 인터렉션에서 사용
    • 수직에만 사용 가능
• Scroll to (html의 anchor)
  • 같은 프레임 내에서 이동
  • 하단의 특정 버튼을 눌렀을때 상단으로 한번에 올라가는 기능
• 스마트 애니메이트
  • 같은 레이어를 찾아 차이를 인식한 후 프레임 간의 레이어를 애니메이션으로 만들기
  • 패럴렉스 스크롤, 터치 스크롤, 롱 프레스, 슬라이더, 확대 등 사용
  • 레이어, 그룹, 프레임, 컴포넌트 모두 사용 가능
  • 이름과 계층 구조가 같아야함
  • EX) 첫번째 프레임에서 “button” 이라면 두번째 프레임에서도 “button”단축키
    •  
    • • •  

01

오늘도 인턴 기업 계획서 봐주시는 강사님 / 점심은 가지솥밥. 근데 너무 뜨거워서 먹기 힘들었습니다 ㅜ

---

 

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

 

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