[유데미x스나이퍼팩토리] UI/UX 포트폴리오 2기 - 4일차 : UX 기획 / 피그마 (1주차)

 

 

 

 

 

 

4일차 입니다 !

어제 수업 끝나고 요가학원 갔다가 허리 다쳐와서 슬펐으나 (하루종일 공부하고 운동까지 간건데 다쳐서 돌아오니카 괜히 더 슬픔..) ...어쨌든 운동을 해서인지

오늘은 수업 내내 체력이 짱짱했답니당 그래서 더 열시미 함 그리고 무려 내일이 금요일이에효 오예

 

 

 

 

---

 

 

 

 

수업 내용 복습 1 피그마

 

 

 

레이아웃

 

: 레이아웃은 배치라는 뜻으로, 다양한 분야에서 사용됨. UI 디자인에서는 사용자로 하여금 정보를 빠르게 읽고 내용을 전달하고자 사진, 동영상, 글 등을  적절히 배치한다.

 

페이지나 화면에서 요소들의 배치와 구성 방식을 의미함. 즉, 어떤 요소가 어디에 배치될지, 그 요소들이 어떻게 상호작용하고 정렬되는지에 대한 구조적인 디자인.

 

grid system

 

: 그리드는 주로 **수평적, 수직적 행(row)과 열(column)**로 구성된 격자 시스템을 말함.

 

 

grid 관련 용어

 

1. 컨테이너 - 사진, 이미지, 텍스트 등 디자인 요소가 들어가는 부분

2. 컬럼 - 열 또는 단

3. 거터 - 컬럼과 컬럼 사이의 간격

4. 마진 - 좌우 여백

 

 

 

 

# 특정 요소들을 프레임으로 묶어주거나 혹은 애초에 프레임에서 시작해야 함

* SHIFT + G *

 

 

레이아웃 그리드 끄고 키는 거 다 SHIFT + G

 

 

 

 

 

---

- 레이아웃 그리드 실습

 

1. MOBILE

COLUMN 4, MARGIN 20, GUTTER 16, WIDTH 375

 

2. TABLET

COLUMN 8, MARGIN 40, GUTTER 20, WIDTH 768

 

3. DESKTOP

COLUMN 12, CONTAINER 1280, GUTTER 30, WIDTH 1920

 

 

count, margin, gutter 설정

 

 

 

컨테이너 = 최소 디바이스 사이즈를 알아야 함 = 그래서 보통 1280을 함 (완전 작은 모니터라고 가정하고)

 

 

 

---

 

 

ASSET 패널 (ALT + 2)

: 자주 사용하는 컴포넌트나 엘리먼트 (버튼, 로고, 아이콘, 네비게이션 바 등)을 저장하는 패널

 

ASSET 패널에서 퍼블리싱 후 이를 팀원과 공유한다.

 

 

퍼블리싱

: 스타일, 컴포넌트 등을 팀원과 공유하기 위해 퍼블리싱(배포)을 함. 공동작업이 있을 경우 파일을 따로 만들어서 관리하며, 다른 파일이나 프로젝트에서 사용한다.

 

 

컴포넌트 만드는 단축키 : CTRL + ALT + K

 

 

 

---

# AUTO LAYOUT : SHIFT + A

( AUTO LAYOUT 풀어줄 때에는 SHIFT + A + ALT

 

: 자동으로 변하는 레이아웃을 의미

 

- 컨텐츠를 감싸는 프레임이 변경된 컨텐츠 크기에 맞춰 자동으로 확대, 축소되어 반응형 레이아웃 만들 때 활용.

 

 

 

 

- 리사이징

: 리사이징은 반응형 레이아웃을 만드는 크기 조정 옵션으로 가로 세로 모두 설정 가능하다.

( 서로 반대개념 )

HUG CONTENTS : 자식 요소의 크기에 따라 부모 오토 레이아웃이 커지거나 줄어듦. ( default )

FILL CONTAINER : 자식 요소를 부모 크기에 가득 차게 함. ( RESIZE TO FIT 누르면 됨 )

 

 

 

FILL CONTAINER 적용법 (헷갈리니까 녹화해 두었다...)

 

 

 

 

 

 

 

AUTO LAYOUT을 사용하는 이유

: 여러 요소들을 묶어서 가로 or 세로 정렬 / 간격 크기 변경 / 배열 방향 변경 등을 하기 위해

 

AUTO LAYOUT 에서 ... 

SHIFT + ENTER = 부모요소 선택

ENTER = 자식요소 선택

---

 

 

 

 

가로 스크롤 적용법

 

 

 

 

 

 

 

---

 

 

수업 복습 2 

 

UX 기획

 

 

오늘은 각자 자신의 UX 리서치에 의거한 페르소나를 제작 후 저니 맵까지 제작하는 과정을 진행하였다.

 

페르소나란 ?

 

 

저번 시간부터 티스토리를 주제로 잡고 UX 기획 진행 중인 나는, 아래의 자료에 의거하여 30대 남성을 페르소나로 정했다.

 

 

 

 

 

 

이것은 오늘 하루동안 진행한 페르소나, 유저 저니 맵 만들기 ... ! ! 

 

 

 

---

 

 

분명 어제까지는 리서치 힘들다고만 생각했는데

오늘은 좀 재밌다는 생각이 들기 시작해서 더 열시미 함

 

 

근데 지금까지 리서치 한 내용들을 바탕으로 주말에 싹 정리를 해야 한다..

설문조사도 진행해야 한다

계속해서 바쁜 매일이 흘러가고 있지만 2주니까 금방 지나갈겨 끝까지 아자아자

 

 

---

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