[유데미x스나이퍼팩토리] UI/UX 포트폴리오 과정 2기 - 사전직무교육 5일차 UX - 피그마(오토레이아웃 ,프로토타입) / UX 기획 - Deliver (2단계는 설문뒤에)

본 후기는 본 후기는 [유데미x스나이퍼팩토리] UI/UX 포트폴리오 과정 2기(B-log) 리뷰로 작성 되었습니다.

 

오토 레이아웃 2탄!

 

"자동으로 변하는 레이아웃"

버튼과 카드등에 많이 사용한다

 

shift + a를 사용한다 ,해제는 shift+ opt + a를 이용

 

이제 다음 내용 개발에서 쓰는 position : absolute처럼 오토레이아웃에도 Absolute position이 있다

로고 사용은 - BrandFetch 플러그인이 있다 

 

내가 만든 헤더들

 

컨스트레인트 (통제)

요소에는 부모요소와 자식요소가 있다

큰틀이 부모 - 그안에 있는 사진 타이틀등이 자식/하위요소라고 한다

 

컨스트레인트는 "프레임" 안에서만 설정이 가능하다, 그룹은 절대!!안된다

감싸는 부모가 있어야 자식요소에 통제(Constraints)가 가능하다 

 

컨스트레인트 (Constraints)- Horizontal

 

수평적으로 x축에 따라 부모 프레임 크기를 조정할 때 자식 오브젝트의 위치와 사이즈를 왔다갔다~ 설정할 수 있다

 

1. Left - 부모 프레임의 왼쪽에 오브젝트를 고정
2. Right - 부모 프레임의 오른쪽에 오브젝트를 고정
3. Left & Right - 양쪽 기준으로 크기와 위치를 왔다리갔다리 한다
4. Center - Let&Right와 다른점은 저건 늘어나지만 center는 가운데에 고정되어 크기가 바뀌지 않는다
5. Scale - 개체의 크기와 위치를 프레임 치수의 백분율로 정의한다. 그런 다음 크기를 조정할 때 해당비율을 유지

 

이게 Left & Right

 

center

 

컨스트레인트 (Constraints)- Vertical

수직 컨스트레인트는 Y축을 따라 부모 프레임 크기를 조정할 떄 자식 오브젝트의 위치와 사이즈를 설정

1. Top - 부모프레임 상단을 기준으로 위치를 유지 
2. Bottom -부모프레임 하단을 기준으로 위치를 유지
3. Top & Bottom -부모프레임의 위족 및 아래쪽을 기준으로 오브젝트의 크기와 위치를 상대적으로 유지<크기가 조정될 때 객체가 y축을 따라 커지거나 줄어들 수 있다>
4. Center -부모프레임의 수직 중심을 기준으로 한 객체의 위치를 유지한다.
5. Scale - 뱍분율로 정의

Left & Right과 Scale

좌우 마진을 유지, 오브젝트의 원래 크기에 프레임이 늘어난만큼 더해진다

Scale - 원래크기에 프레임이 늘어난만큼 곱해진다

 

cmd 누르고 프레임 드래그시 마음대로 변경

 

반응형 레이아웃 - 오토 레이아웃 활용

 

1. 가운데 메뉴와 로고 아이콘을 만든다 

2. 메뉴와 아이콘을 오토레이아웃(GNB)으로 만든다

3. 모두 선택해서 오토레이아웃 만든다

4.로고와 메뉴 아이콘사이를 auto로 만든다

5. Horizontal constraints-left and right로 설정한다 

 

반응형 레이아웃 - 컨스트레인트 활용

1. 프레임을 만든다

2. 좌우 어느정도 떨어뜨리고 로고와 GNB배치

왼쪽에 로고는 horizontal. -left 오른쪽에 GNB는 horizontal -right 로 설정한다 

3. 최상위 프레임의 크기를 늘려서 로고는 왼쪽에,메뉴는 오른쪽에 고정된 것을 확인한다 

프로토타입

앱과 사이트를 개발할 때 실제 원하는 방식으로 서비스가 작동하는지 테스트하는 과정을 말한다

 

프로토타입패널

 

Device - 데스크탑이나 핸드폰 모델을 선택한다

Background- 프리젠트의 배경색

Flow - 프로토타입의 시작프레임을 설정한다 .

 

 

 

Starting point 만들기

프로토타입 패널 <Opt(Alt)+9> 에서 Flow starting point 의 + 아이콘을 클릭

시작할 프레임을 선택하고 마우스 오른쪽 클릭 – [Add starting point] 를 선택

 

Starting point 삭제
프로토타입 패널 <Opt(Alt)+9> 에서 Flow starting point 의 - 아이콘을 클릭
프레임을 선택하고 마우스 오른쪽 클릭 – [Delete starting point] 를 선택

 

 

 

 

 

 

트리거

트리거는 특정한 동작을 실행하는 것을 의미한다.

트리거 종류 
onClick(Tap) - 데스크탑에서 클릭,모바일 탭 할 때
onDrag – 드래그 할 때
While hovering – 마우스를 올렸을 때
While pressing – 누르고 있는 동안
Key/gamepad – 키보드 단축키 ,닌텐도 등 컨트롤러 입력 할 때
Mouse Enter – 영역 안에 마우스를 올렸을 때
Mouse Leave – 영역 안에서 마우스가 벗어 났을 때
Mouse down (Touch Down) - 마우스나 터치 패드를 처음 누를 때 
Mouse up (Touch Up) –마우스나 터치 패드에서 손을 떼는 순간

After Delay – 시간차를 두로 액션을 걸어줄 때

 

 

 

 

 

 

액션 

 

 

 

 

 

 

 

 

 

 

 

 

애니메이션

 

 

 

 

 

 

 

 

 

 

스마트 애니메이션

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

Double Diamond 4단계 

 

Deliver(산출)

4번째 단계인 Deliver 단계 - IA, 플로우, 인터랙션, UI 등 상세히 설계하는 단계

IA : 디자인을 위한 정보 구조도 설계
User Flow : 특정 작업을 위해 움직이는 경로 설계
와이어프레임 : 화면 단위의 레이아웃 설계
UI / GUI 디자인 상세 설계

 

 

IA : 디자인을 위한 정보 구조도 설계

infotmation 정보를Architecture(구조화)하여 설계한다

UXUI에서 정보구조를 정의하자면 웹사이트나 앱, 기타 개발 프로젝트를 위한 구조를 만드는 것이다.

 

 

잘 설계하면  사용자가 원하는 정보를 빠르게 얻고 만족도가 높아진다. 즉 IA는 UX와 깊은 관련이 있다.

VS

못 설계하면 사용자는 혼란스럽고 길을 잃게 되어 최악의 경우 서비스를 떠나게 된다.

 

정보구조 3가지 구성요소 

 

콘텐츠 / 상황 / 사용자 

 

콘텐츠 - 서비스를 구성하는 핵심 내용 이나 기능
사용자 -서비스를 이용하는 사람

상황인식 - 사업모델, 사업가치, 문화, 자원의 제약

웹과 앱의 정보구조 설계 방법
웹사이트나 앱에서 정보구조를 설계할 때 각 플랫폼의 특성을 살려서 한다
엑셀, 스프레드시트로 작성한다.

 

 

IA 구성 요소

코드 - 해당 페이지에 대한 고유 코드
계층 구조- 메뉴 구조를 표현하는 방법(Depth 1,Depth 2,Depth 3...)
형태정의 - 해당 페이지의 형태(Type) 정의 (HTML/Link/Program)
구조 - 페이지의 표현 구조 정의(팝업/레이어/iFrame/모달/얼랏)
요소 - 해당 페이지에 삽입될 객체 정의(요소, 이미지, 동영상, 문서,첨부파일)
권한- 페이지 접근에 대한 권한 정의(회원/비회원/멤버쉽 회원)
설명 - 메뉴나 페이지별 상세한 설명, 주의사항 등 명시

 

 

웹 정보구조 설계
PC 플랫폼은 많은 양의 정보를 다룰 수 있어서 계층구조나 페이지 수를 많게 설계해도 된다
동영상, 3D 컨텐츠 등 표현이 가능하다
내비게이션 설계는 언제든지 뒤로가기, 다른 메뉴로 이동이 가능하게 설계한다.

 

모바일 정보구조 설계
모바일은 물리적 화면 크기가 제한적이므로 최대한 단순하게 구성한다.
사용자가 서비스 이용 동선을 최소화하여 설계한다
자주 사용하는 메뉴는 홈화면에 배치하여 바로 갈수 있도록 한다
드릴 다운 방식을 사용한다.
모바일에 특화된 탭 메뉴를 사용한다.(홈,추천, 마이페이지,설정)

 

ui 설계하기