[PM부트캠프6기] 0313 Today I learned

오늘은 먼가 아침에 집중을 잘하지 못했어서...강의라도 마저 수강하자 하는 마음으로 오전에 피그마를 완강! 하였다.

5주차에서는 직접 화면들도 만들어보고 프로토타입 적용을 해서 좀 신기하고 재밌게? 마무리 할 수 있었다.

---

피그마

[Chapter5]

• 홈 화면 만들기
  • 새 페이지에서 프레임 도구를 선택하고 오른쪽 패널에서 프리셋(미리 만들어져 있는 선택지)를 선택하기
  • 히어로 섹션(메인 화면의 가장 상단 영역) 추가하기 → 제약조건: left and right
• 앱 바 컴포넌트: 네비게이션에 해당, 앱 화면 상단에 고정되어 현재 화면의 이름을 알려주면서, 이전 화면으로 돌아갈 수 있도록 해줌.
• 리스트 컴포넌트: 컨테이너에 해당, 동일한 형태의 정보 덩어리를 반복적인 패턴으로 보여줄 때 사용.

어떤 컴포넌트든 다양한 컨퍼러스를 보고 참고하면서 만들어 보는 것이 좋음.

• 프로토타입: 시제품, 실제 제품을 만들지 않고 아이디어를 테스트해볼 수 있는 것.
  • Lo-fi: 낮은 단계의 프로토타입, 전체적인 흐름을 빠르게 맞춰볼 수 있는 수준
  • Hi-fi: 높은 단계의 프로토타임, 실제 제품과 거의 같거나 유사한 수준
  • 프로토타이핑: 프로토타입을 만들거나 프로토타입을 사용해 테스트하는 것.
  • 구성: 핫스팟(시작하는 지점), 커넥션(서로 이어주는 연결선), 종착점(도착하는 지점)
  • 프로토타입 패널로 설정한 기기,색깔로 재생할 수 있다.

프리뷰모드: shift + space // 프레젠테이션 모드: 오른쪽 패널 ▷ 표시 

• 오버플로우: 프레임 밖으로 컨텐츠가 넘어가는 것
  • 프레임에 오버플로우가 발생하면, 프레임 밖으로 넘어간 콘텐츠를 스크롤로 보여줄 수 있음.
  • 즉, 스크롤이 되게 하려면 프레임보다 콘텐츠가 더 길어서 넘쳐야함!
  • 스크롤을 만드려면 실제로 스크롤되어야 하는 콘텐츠와 스크롤 속성을 적용할 컨테이너가 있어야함.
  • 스크롤 방식은 프로토타입 패널에서 선택 가능.
• 플로우: 프로토타입의 흐름 하나하나
  • 핫스팟을 드래그해 종착점과 이으면 커넥션이 만들어지고 자동으로 플로우 패널이 열림.
  • 트리거: 액션을 시작하는 조건이나 이유, 계기  → 클릭, 드래그, 마우스 영역 위에 올라가있기, 누르고 있기 등
  • 액션: 트리거로 인해 만들어지는 결과  → 페이지 이동, 다른 배리언츠로 변경, 직전 화면 이동, 특정 값으로 설정 등
  • 애니메이션: 액션을 실행할 때 어떻게 실행할 건지  → 없이 실행, 천천히 흐릿해지면서 전환, 이름이 같은 프레임들끼리 자연스럽게 움직임, 다음 화면을 덮듯이 전환, 지정한 방향으로 밀면서 전환 등
  • 스마트 애니메이트에서 움직일 요소의 이름이 같은지, 레이어 구조가 동일한지 반드시 확인해야함. 다르면 정상적 작동 안됨. → 스마트 애니메이트로 크기, 위치, 투명도, 회전, 배경색 조작 가능

왼쪽 패널에서 순서 조정 시, 앞으로 한칸 가져오기: ctrl + ]

• 핸드오프(Hand-off): 개발자에게 전달하기 위해 디자인 사양을 정리한 문서
  • 통일된 구성, 최대한 자세하게, 쉬운 언어로 작성해야함
  • 결국은 커뮤니케이션을 위한 문서.
  • 필요한 디자인 프레임 선택 후 플러그인(DesignDoc)을 통해 만들어주면 완성됨.
• 피그마는 링크로 다른사람들한테 공유 가능하다. → 프로토타입도 공유 가능.

이렇게 피그마 강의도 완강을 했습니다아ㅏ아아 🎶🤗

뭔가 복습도 하면서 나 혼자서 화면 하나를 더 만들어봤는데 흠...아직은 꽤나 서툰 것 같다.

• 메인 화면에서 검색바를 직접 만들어봤고 앱바랑 리스트 항목의 디자인을 수정해보았다. (굉장히 힘들었음.)
• 상세화면에서는 공유하기 버튼을 추가해보았다. (조금 더 이쁘게 꾸며보려고 했으나...지쳤다..)
• 두번째 상품 리스트를 누르면 상세화면으로 넘어가도록, 상세화면에서도 뒤로가기 누르면 메인화면으로 넘어가게끔 플로우 설정했다.

< 복습이자 다음에 보완할 점 > 

• 상품 목록 오토레이아웃 할 때 글자들부터 오토레이아웃 적용하고, 도형을 합쳐서 다시 오토레이아웃을 적용해야 저런 형식으로 프레임을 생성할 수 있다.
• 플로우 넣을 때도 아이콘에 넣지말고 전체 프레임에서 화면으로 넣을 것.
• 대부분 오토레이아웃의 좌우 패딩은 20, 상하 패딩은 16, 간격 16으로 적용했다.
• 슬라이드도 넣어보려고 했는데...전체 화면 크기에 모든 프레임들을 넣어야 슬라이드가 적용이 됨...어떻게 해결하냐 물어봤더니 뭐 레이어를 고쳐보라는데 안돼서 일단은 다시 없앤 상태 ㅜㅜ 다음에 다시 만들어볼 기회가 있다면 보완 해보자..!!