[TIL] 0718

 

1. 오늘 학습 키워드

• 컴포넌트(앱 바, 리스트, ...)
• 프로토타입
• 오버플로우
• 스크롤 컨테이너
• 플로우
• 스마트 애니메이트

 

2. 오늘 학습한 내용을 나만의 언어로 정리하기

 

히어로 영역

• 서비스의 메인 페이지 상단에 위치하여 사용자 시선을 사로 잡는 주요 콘텐츠 영역

 

앱 바 컴포넌트

• 네비게이션에 해당하는 컴포넌트로, 앱 화면 상단에 고정되어 현재 화면의 이름을 알려주면서 이전 화면으로 돌아갈 수 있도록 해준다. 
• 머티리얼 디자인에선 앱 바, iOS에서는 네비게이션 바라고 부르며, 디자인 시스템마다 부르는 이름이 다르다. 

 

리스트 컴포넌트 

• 컴포넌트의 종류 중 컨테이너에 해당하는 컴포넌트로, 동일한 형태의 정보 덩어리를 반복적인 패턴으로 보여줄 때 사용한다. 
  리스트 컴포넌트의 구조에는 라벨/레이블, 디스크립션, 리딩 엘리먼트, 트레일링 엘리먼트 가 있다. 

 

프로토타입이란?

• 원래의 뜻은 시제품이며, 디지털 제품에선 실제 제품을 만들지 않고 아이디어를 테스트해볼 수 있는 것을 뜻한다. 
  • Lo-fi(Low-fidelity): 낮은 단계의 프로토타입으로, 전체적인 흐름을 빠르게 맞춰 볼 수 있는 수준
    와이어프레임도 이에 해당한다. 
  • Hi-fi(High-fidelity): 높은 단계의 프로토타입으로, 실제 제품과 거의 같거나 유사한 수준으로 만듦
    프로토타입을 만들거나 프로토타입을 사용해 테스트하는 것을 프로토타이핑(Prototyp-ing)이라고 한다. 

 

피그마 프로토타입 모드

• 피그마에서는 2가지 방식으로 프로토타입을 실행해볼 수 있다.
  • 프리뷰 모드 Preview Mode: 디자인하는 중간에 작업 중인 화면과 흐름을 빠르게 확인하고 논의할 때 사용. 프로토타입 모드가 아니라 디자인 중에도 바로 실행해 볼 수 있음
  • 프레젠테이션 모드 Presentation Mode: 프로토타입을 공유할 때 사용하거나 프레젠테이션 형태로 만들 수 있음

오버플로우

• 디자인하다 보면 프레임 밖으로 컨텐츠가 넘어가는 경우가 있다. 이때, 프레임 밖으로 컨텐츠가 넘어가는 것을 오버플로우라고 한다.
• 프레임에 오버플로우가 발생하면, 프레임 밖으로 넘어간 콘텐츠를 스크롤로 보여줄 수 있다. 즉, 스크롤이 되게 하려면 프레임보다 콘텐츠가 더 길어서 넘쳐야 한다.

스크롤 컨테이너

• 오버플로우가 생긴 프레임을 스크롤로 만들어주는 기본적인 프로토타입 기능이다. 
• 스크롤을 만드려면 실제로 스크롤되어야 하는 콘텐츠와 스크롤 속성을 적용할 컨테이가 있어야 한다. 
• 스크롤 방식
  • No scrolling: 스크롤 하지 않음. 기본 값
  • Horizontal: 내부의 콘텐츠들이 가로로 넘칠 때, 가로 방향으로 스크롤 가능 
  • Vertical: 내부의 콘텐츠들이 세로로 넘칠 때, 세로 방향으로
  • Both directions: 가로 및 세로 방향으로 모두 스크롤 가능

 

플로우

• 프로토타입의 흐름 하나하나는 플로우라고 한다. (핫스팟을 드래그-> 종착점과 잇기 = 커넥션이 만들어지고 자동으로 플로우 패널이 열린다.)
• 플로우는 트리거와 애니메이션, 액션으로 구성된다. 
  • 트리거: 액션을 시작하는 조건이나 이유, 계기. 사건이 발생했다는 뜻에서 이벤트라고 부를 수 있음
  • 액션: 트리거로 인해 만들어지는 결과
  • 애니메이션: 트리거를 통해 액션을 실행할 때, 어떻게 실행할 건지를 뜻함. 즉, 인터랙션 형태를 정하게 됨
• 프로토타입을 설계할 땐 ‘~하면, ~하게 ~한다’ 라는 문장으로 기억하면 조금 더 쉽다.
        예) 버튼을 누르면(트리거), 색상이 천천히(애니메이션) 바뀐다(액션)

스마트 애니메이트

• 피그마 프로토타입에서 가장 중요한 애니메이션 기능이다.
• 스마트 애니메이트로 조작할 수 있는 속성: 크기 , 위치, 투명도, 회전, 배경색
• 가장 중요한 것
  • 움직일 요소의 이름이 같은지
  • 레이어 구조가 동일한지

 

실습

• 강의 중 진행한 실습 내용 정리🔽

[피그마 강의 실습] 5주차: 홈 화면 만들기

 

 

3. 학습하며 겪었던 문제점 & 에러

 

- 새롭게 알게 된 점 & 느낀점

• 컨스트레인트 & 리사이징
  •  프레임은 기본적으로 크기가 fixed되어 있지만, 오토레이아웃으로 프레임을 감싸게 되면 fixed와는 다른 방식의 크기 값이 적용된다. 이때 리사이징 설정을 신경쓰지 않으면, 내가 의도하지 않은 레이아웃이 만들어질 수 있다. 특히 여러 개의 컨테이너가 겹쳐질 경우, 리사이징을 적절히 조정하지 않으면 전체 레이아웃이 내가 의도한 것과 다르게 설정 될 수 있으니 관련된 글들도 더 읽어보고 실습+ 온보딩도 더 해봐야 겠다.
  • 개인적으로 읽어볼 것▶️
    https://wdnote.tistory.com/235 
    https://www.youtube.com/watch?time_continue=3&v=1odqpkfkDL8&embeds_referring_euri=https%3A%2F%2Fwww.figma.com%2F&source_ve_path=MzY4NDIsMjg2NjY
    

 

4. 다음주 학습 할 것은 무엇인지

• 디자인 카타
• 아티클 스터디
• 온보딩 남은 거 하기..🫠🫠