< 코멘토 실무PT 후기 챌린지_ 피그마 강의 2 주차 후기 >

2주차 피그마 복습 정리

오토레이아웃 : 반응형. 늘려도 그 안에 내용물의 크기가 같이 늘어나지 않음.
그룹형 : 크기가 늘어나면 자기도 같이 늘어남
spacingbetween 방법

1. 리사이징 되어도 줄어들지 않는다.
2. 좌우는 픽스되어있고, 상하만 줄어든다.
3. 상하는 픽스 되어있고, 옆에만 줄어든다
4. 리사이징 될 때마다 모두 줄어든다.

마스터 컴포넌트
마스터 컴포넌트에서 복제를 한 인스턴스는 아래와 같이 빈 마름모가 뜬다!

마스터 컴포넌트들은 assets에서 찾을 수 있고, 여기 있는 애들을 끌어다 쓰면 자동으로 나온다.(인스턴스로 복제됨)

마스터 컴포넌트를 바꾸면 인스턴스 모두가 바뀌지만,
인스턴스의 내용을 바꿀경우 마스터나 다른 인스턴스에는 영향이 없다.


Properties
컴포넌트를 만들면 properties 라는 항목이 생긴다.

여기서 불린이라는 기능을 쓰게 되면 true faluse 를 설정가능한데. 그렇게 되면 참이면 on, off 등을 구현 가능해서 라디오 버튼 구현이 가능하다.


variant : 컴포넌트에 속성을 부여한다.

Tip: 피그잼에서 component 검색을 하게 되면 다양한 자료들이 나오는데, 이렇게 만들어 놓으면 나중에 갖다가 써도 된다!

비즈니스 모델 캔버스

워터폴 방식

*WFPS작성 : 일하는 기간에 대한 산출, 일을 누가 담당하고, 언제까지 데드라인임을 작성하는 것.


애자일 방식

사용자 스토리, 백로그를 바탕으로 유저 져니를 작성하게 되는 것이다.
애자일에서는 사업개발자가 정책서 까지만 작성한다.
서비스 기획자는 서비스 전략기획안 작성~ 백로그 까지 작성한다.
페이퍼목업: 인터랙션이 빠진 그냥 종이에 인쇄된 것 같은 프로토타입.
디자인과 프로토타이핑을 동시에 진행하기에 figma가 유용하다.


User Journey ( 유저 저니)

유져저니의 경우에는 우선 기능별로 고객이 어떠한 방식으로 이 기능의 플로우를 타고 가는지 적는 것이다.

이걸 바탕으로 화면을 그리면 된다.
Tip : 서비스의 시작부터끝까지 다 그리기가 시간이 오래걸린다. 그렇기에 우리가 와이어프레임을 그릴때 단계단계별로 하는 것이 좋다.
WWIT라는 사이트가 있다. 여기서 많이 참고하기!
처음부터 온보딩을 그리면 지치는 경우가 있기 때문에 온보딩을 나중에 그린다.
그래서 홈 화면을 가장 먼저 그리고, 거기서 가지를 뻗어나가면 된다. (메인기능 → 그 다음단계 이런식으로)


*요즘 화면 UI를 카드 형태로 만든다. 그 이유가 모바일 앱으로 전환하기도 쉽고, 나이 많으신 분들이 쓰기에 글자도 크고 보기 좋다.
카드 예시 :

카드 예시 2 :

Wireframer과 story board

요즘은 와이어프레임을 하면서 디자인 요소를 최대한 넣으려한다. 그 형태 자체가 목업의 형태가 되기 때문에 작업 시간을 줄이기 위해서이다.
와이어프레임 : 선으로 이루어진 구조, 기능의 표시, 콘텐츠 (카드로 구성된 콘텐츠다, ~~등)
목업 : 와이어프레임에 스타일과 컬러가 추가
프로토타입 : 목업에 인터랙션 추가

스토리 보드 예시(각 구간을 고객이 사용할 때의 기능, 목적, 정책, 고려할 부분 등을 모두 적어놓는 것이다.)

*피그마 모바일의 경우에는 미러링 기능이 있어서 실제 앱이 구동하는 것 처럼 보여줄 수도 있다!


관련 강의에 관심 있을 경우 아래 링크 참조
https://bit.ly/3D9XCOz

LIVE로 배우는 실무 PT ㅣ 코멘토

상기 복습은, 코멘토 실무 pt의 학습일지 챌린지 참여 및 개인적인 복습을 위해 작성한 글입니다.