본문 바로가기

UXUI 디자인 입문(23.12.18~24.01.29)/[01.02~01.22] ▸ Figma 활용법

피그마 활용법(2)_중간점검

✅ 중간 점검
저번주 화요일 부터 시작된 피그마 활용법을 열심히 수강하고 계획대로 진행했다. 
일단 UX,UI에 관한 수업 내용은 수강한 것 같다. 그 후에, 개인 과제를 진행 했다.
기술적으로 컴포넌트 제작이나 베리언츠, 프로퍼티 등은 이제는 막히지 않고 자연스럽게 구사 할 수 있는 것 같다.
반면에, 오토레이아웃 리사이징에서 좀 더 숙련도를 올려야 할 것 같다. 리사이징 속성에 대해 더 연습해 보면 좋을 것 같다.
전체적인 화면 구성 작업은 처음이었다. 사용자 시나리오를 그려놨지만, 작업을 진행하면서 미로에서 헤매듯 한참을 만졌다.

3일(수) - 피그마 활용법(1) 1,2주차 완강
4일(목) - 피그마 활용법(1) 3,4주차 완강
5일(금) - 피그마 활용법(2) 1주차 완강, 개인 과제 : 사용자 시나리오 완료
8일(월) - 개인 과제 진행 : 공통화면, 홈화면, 목록 화면, 상품 상세 화면 완료
9일(화) - 피그마 활용법(2) 2,3주차 수강 후, 개인 과제 마무리(장바구니 화면, 상품 상세 화면 스크롤, 프로토타이핑), 심화(시간이 허락한다면..)

시간 할애를 많이 한 곳은, 의외로 배치 작업을 할 때였다. 다 만들어 놓은 컴포넌트들을 조각 조각 맞추어서 넣으려고 보니, 빠진 곳과 수정해야 할 화면 구조 순서 등이 있어서 시간을 많이 썼다. 아직 익숙하지 않은 티가 여기서 나타난다.
기초적인 프로토타이핑을 살짝 얹어주니, 무언가 움직이는 화면이 되긴 했다. 하하. 시간을 아무리 써도 작업이 재미있어서 시간 가는 줄 모르고 작업 했던 것 같다.
오히려 시간이 참 부족하다는 느낌이 든다. 아직 채워야 할 지식과 개념이 많다. 이것저것 만져보면서 연습할 시간은 없는 듯 하다.(이건 좀 아쉽다.)

피그마 활용법(2) 3주차 강의에서 프로토타이핑 강의가 있다. 그걸 어서 수강해야겠다. 아직 프로토타이핑을 완전히 다 파악하지 못한것 같다.
드롭다운 부분을 좀 더 상세하게 알고 싶다. 자주 쓰이는 유용한 스킬을 반복적으로 학습하며 배우고 싶다.

좀 더 정리해야 할 부분 :
(1) 오토레이아웃 리사이징(속성 값;fixed, fill, hug)을 이제는 어렵풋이 이해했지만 복잡한 구조를 만드는데에는 시간을 좀 써야 한다.
(2) 사용자 시나리오를 조금 더 깊이 생각해보고, 정리해야 할 것 같다. 아직 조금 헷갈리는 순서가 있다.(만들어 놓은 화면이 없어서 있는 걸로 끼워 맞추려고 하다보니까 순서가 아주 복잡해 보이는 착시현상)
(3) 효과적인 복합 컴포넌트 작업을 정확하게 알고 있어야 할 것 같다. 예를 들어, 화면 하단 부분에 들어가는 버튼 컴포넌트와 함께 고정 되어야 할 다이얼로그 컴포넌트 등을 깔끔하게 얹어서 작업하는 것을 이해해야겠다. (지저분하게 이것저것 다 컴포넌트로 만들어서 보기 안좋음, 이미 있는 컴포넌트에 어지럽게 덧대어 붙여서 새로운 컴포넌트를 만듬, 효율적으로 작업하지 못함, 시간을 많이 잡아먹음.)

내일은 효율적으로 작업하는 것을 집중적으로 연습해봐야겠다. 물론 아직 그런 단계는 아니지만, 효율성을 높여 할 일을 다 끝내기 위해서라도.(나에게는 끝도 없는 계획이 있으니깐....) 내일도 화이팅!🥹

✅ 과제 :
조건 및 제공 자료 
(1) 조건 및 가이드라인
• 화면의 크기는 375 * 812 (iPhone 13 mini) 로 만들어 주세요.
• 프로토타입 기기는 iPhone 13 mini 로 설정해 주세요.
• 색상 스타일은 3종류 이상, 폰트 스타일은 제목과 본문 각 1종류 이상 만들어 주세요.
• UI 컴포넌트는 자유롭게 만들되, 버튼, 라디오, 다이얼로그는 반드시 디자인 시스템에 넣어 주세요.
• 상품 상세 화면에서 제품을 소개하는 상세 이미지 부분은 빈 칸으로 두셔도 괜찮아요.
화면별 필수 요소
✔︎ 공통 화면
- 목록 화면과 상세 화면에는 뒤로가기와 현재 화면 제목이 있어야 해요.
- 뒤로가기와 현재 화면 제목 부분은 화면의 상단에 고정해 주세요.

✔︎ 홈 화면
- 유제품, 육류, 과일류 등이 있는 카테고리 목록이 있어야 해요.
- 카테고리 목록의 내용, 형태나 위치는 자유롭게 하되, 유제품은 반드시 넣어 주세요.
- 콘텐츠를 더 추가하시는 경우, 프로토타입에서 스크롤이 생길 수 있도록 해주세요.
✔︎ 목록 화면
- 스파르타우유를 포함해서 최소 10개 상품이 2열로 배치되어 있어야 해요.
- 10개 상품이 모두 보이도록 화면의 세로 길이를 충분히 늘려 주세요.
- 프로토타입으로 확인했을 때, 세로 방향으로 스크롤할 수 있어야 해요.
- 상품별 대표 이미지, 상품 이름, 상품 가격을 임의로 정해서 넣어 주세요.

✔︎ 상품 상세 화면
- 가장 맨 위에 상품의 대표 이미지 1장을 넣어 주세요.
- 우유 1개 또는 2개를 선택할 수 있는 라디오를 만들어 주세요.
- 화면의 하단에 고정된 장바구니에 담기 버튼과 구매하기 버튼을 만들어 주세요.

2) 사용자 시나리오
- 시작 - 홈화면 - 유제품 카테고리 - 우유 목록 화면 - 우유 상세 화면 - 장바구니에 2개 담기(액션) - 장바구니에서 다이얼로그 화면 - 끗?