[CH 1. 온보딩 주차 | TIL] 본캠프 04

[ TIL ]

 

1. 학습 키워드

• 프로토타입 & 프로토타이핑
• 스크롤 컨테이너 & 오버플로우
• 트리거 & 액션 & 애니메이션
• 핸드오프
  
  

2. 학습 내용

• 앱 바 컴포넌트 = 네비게이션 바
  타이틀 - 힌트 텍스트 - 리딩 엘리먼트 - 트레일링 엘리먼트
  
  
• 리스트 컴포넌트
  반복적인 정보를 패턴으로 보여줄 때 사용함
  
  
• 프로토타입 Proto-type
  시제품. 실제 제품을 만들지 않고도 아이디어를 테스트 해볼 수 있는 것
  
  
• 프로토타이핑 Prototyp-ing
  프로토타입을 만들거나, 사용하여 테스트 하는 것
  
  
• 플로우
  프로토타입의 흐름
  
  • 트리거 = 이벤트
  • 액션 : 트리거로 인해 만들어지는 결과
  • 애니메이션 : 액션을 실행할 방법 (인터랙션 형태 결정)
    
    
• 애니메이션
  화면 전환
  
  • Instant : 즉각 실행
  • Dissolve = 페이드인/아웃, 흐려지면서 전환됨
  • Smart animate : 동일 이름의 프레임들을 자연스럽게 움직이게 함
  • Move in/out : 레이어 형식으로 덮어지거나, 벗겨지듯 전환됨
  • Push : 화면을 지정한 방향으로 밀면서 전환됨
  • Slide in/out : 화면을 지정한 방향으로 밀어 사라지게 하며 전환됨
    
    

• 오버플로우 Overflow
  프레임 밖으로 컨텐츠가 넘어가는 것
  • 스크롤이 되려면, 프레임보다 콘텐츠가 길어야 함
  • 오버플로우가 되지 않으면, 스크롤이 생기지 않음
    
    
• 스크롤 컨테이너
  오버플로우가 생긴 프레임을 스크롤로 만들어주는 프로토타입 기능
  
  • No scriolling : 기본값
  • Horizontal : 가로 방향
  • Verticla : 세로 방향
  • Both directions : 가로 + 세로 방향
    
    
• 핸드오프 Hand-off
  개발자에게 전달하기 위해 디자인 사양을 정리한 가이드라인.
  
  • 일관적인 구성
  • 자세한 정보
  • 이해할 수 있는 표현
    
    

3. 학습 경험

1. 프로토타입에 대해 이해하고, 프로토타이핑을 이용하여 간단한 애니메이션과 화면 연결 등의 기능을 사용할 수 있게 되었다.
2. 과제 이외의 프로토타이핑 기능을 응용하여 사용해 보았다.
3. 피그마의 기능 중 어렵다고 생각하던 기능 중 하나인데, 쉬운 것부터 차근차근 해보니 더 많은 효과에 대한 욕심이 생겼다.
   
   

4. 과제

• 가로 이미지 슬라이드
  

  

  
  
• 바 고정
  

  

 

5. 내일 학습할 것

• UXUI 3주차 강의 수강
  프로덕트팀 구성
  UXUI 디자이너의 디자인 프로세스
  A/B 테스트
  디자인 QA 진행