본문 바로가기

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

(21)
피그마 활용법(2)_복습2 #복습1 오전부터 진행한, 피그마 활용법 복습시간. 그간에 배웠던 피그마 활용법(2) 3주차 숙제에 대해서 복습을 진행했다. 당시 숙제를 진행했을때는 '이제는 제법 알것 같네' 하고 생각했던 것 같다. 오늘 복습 전까지도. 다시 진행 해보려고하니, 어코디언 부분과 버튼 부분에서 막혔다. 복습하면서 추가로 머리속에 더 들어온 인풋이 있다. 정리하자면, 오토레이아웃 프레임을 잘 감싸야지 화면 안에서 자유롭게 반응한다는 것. 이건 원래 알고 있는 개념이지만 막상 화면에서 구현하다보면 되돌아 봐야지 깨닫는다. 프레임 안에 프레임(오토레이아웃) 안에 내용. 그래야 가로,세로 스크롤을 자유롭게 먹일 수 있다. #복습2 (디자인시스템 : 버튼컴포넌트) UI컴포넌트중 중요한 비중을 차지하고 있는 버튼 컴포넌트를 복습해..
피그마 활용법(1)_복습1 1월3일(수) - 피그마 활용법(1) 1,2주차 완강 1월4일(목) - 피그마 활용법(1) 3,4주차 완강 1월5일(금) - 피그마 활용법(2) 1주차 완강, 개인 과제 : 사용자 시나리오 완료 1월8일(월) - 개인 과제 진행 : 공통화면, 홈화면, 목록 화면, 상품 상세 화면 완료 1월9일(화) - 피그마 활용법(2) 2,3주차 수강 후, 개인 과제 마무리(장바구니 화면, 상품 상세 화면 스크롤, 프로토타이핑),심화(시간이 허락한다면..) 01월10일(수) - 심화(어제 못한 심화 단계를 마무리하고), 개인과제 9시 제출(완료) 계획대로 일정에 맞춰서 과제 제출을 완료했다. 강의와 함께 진행하면서 3일을 소요했다. 필수요소와 디테일 요소 그리고 심화과정까지. 해 놓고 살펴보니 계속 발견되는 오류로 인..
피그마 활용법(2)_3주차 숙제 💡 프로토타입 기능과 원리를 어느정도 배웠으니, 배운 걸 최대한 응용해보세요! 1. 이미지 슬라이드 만들기 - ① 프레임 준비(375*812), 슬라이드 프레임 준비(375*500) - ② 슬라이드 이미지 배열 후, 슬라이드 프레임에 넣기 - ③ 슬라이드 프레임에 프로토타입 패널에서 Scroll behavior, Horizontal 추가 2. 어코디언 만들기 (accordion=foldable,collapsible) - ① 프레임 준비(375*812), 어코디언 프레임 준비(375*000) - ② 어코디언 컴포넌트 제작(펼쳤을 때, 안펼쳤을때 배리언츠 컴포넌트) ‣ 참고영상 : (https://www.youtube.com/watch?v=SsTtjgvwXIA) - ③ 버튼컴포넌트(안펼쳤을때) 배열 후 오..
피그마 활용법(2)_2주차 숙제 ✅ 과제 1 : UI 차이점 찾아보기(최소 2개 이상의 앱/제품에서 2곳 이상) (1) OS 별로 차이가 있는 부분을 찾아보고, 왜인지 나름의 이유를 적어 보세요. - 동일한 앱의 UI가 안드로이드 기기와 아이폰에서 다르게 보이는 부분을 찾고 왜 다른지 다양한 이유를 논의해 보세요. ① Google map : • 캐러셀 상세 내용 Android : 캐러셀 안에 제공되는 정보가 더 상세하게 적혀 있음(km제공, 리뷰수 제공, 호텔급 제공) iOS : 반면에 좀 더 심플하게 제공되고, 주요 내용에 더 집중 • 날씨 제공 Android : 지도 화면 내에 날씨 아이콘이 없음 iOS : 지도 화면 내에 날씨 아이콘을 제공하고, 검색한 근처 주변의 온도를 제공 • 업데이트 탭 내에 추천 Android : 업데이트..
피그마 활용법(2)_중간점검 ✅ 중간 점검 저번주 화요일 부터 시작된 피그마 활용법을 열심히 수강하고 계획대로 진행했다. 일단 UX,UI에 관한 수업 내용은 수강한 것 같다. 그 후에, 개인 과제를 진행 했다. 기술적으로 컴포넌트 제작이나 베리언츠, 프로퍼티 등은 이제는 막히지 않고 자연스럽게 구사 할 수 있는 것 같다. 반면에, 오토레이아웃 리사이징에서 좀 더 숙련도를 올려야 할 것 같다. 리사이징 속성에 대해 더 연습해 보면 좋을 것 같다. 전체적인 화면 구성 작업은 처음이었다. 사용자 시나리오를 그려놨지만, 작업을 진행하면서 미로에서 헤매듯 한참을 만졌다. 3일(수) - 피그마 활용법(1) 1,2주차 완강 4일(목) - 피그마 활용법(1) 3,4주차 완강 5일(금) - 피그마 활용법(2) 1주차 완강, 개인 과제 : 사용자 시..
피그마 활용법(2)_3주차 정리 프로토타입의 개념과 용도를 이해합니다. 피그마 프로토타입 기능의 구성을 배웁니다. 피그마 프로토타입 기능을 활용해 기본적인 인터랙션과 프로토타입을 만들 수 있습니다. 1. 장단점 2. 구성과 기능 살펴보기 3. 기본적 인터렉션 실습 4. 실무에서 프로토타입 공유 과정 ✅ 진행 일정 3일(수) - 피그마 활용법(1) 1,2주차 완강 4일(목) - 피그마 활용법(1) 3,4주차 완강 5일(금) - 피그마 활용법(2) 1주차 완강, 개인 과제 : 사용자 시나리오 완료 6일(월) - 개인 과제 진행 : 공통화면, 홈화면, 목록 화면, 상품 상세 화면 완료 7일(화) - 피그마 활용법(2) 2,3주차 수강 후, 개인 과제 마무리(장바구니 화면, 상품 상세 화면 스크롤, 프로토타이핑), 심화(시간이 허락한다면..)..
피그마 활용법(2)_2주차 정리 [수업 목표] UI 설계 시 유의해야 할 점들을 살펴보고 이해합니다. 정보구조도(IA)와 화면흐름도(Flowchart)의 차이를 이해합니다. 와이어프레임의 개념을 이해하고 실제 와이어프레임을 그릴 수 있습니다. ⦿ 다양한 환경에서의 UI 차이 → 웹 - 모바일 웹, 운영체제에 대한 제한 없음, 웹브라우저는 주소 입력 접속, 업데이트하기 쉬움, 웹브라우저와 충돌하지 않는 선의 UI → 앱 - 안드로이드와 iOS 둘 다 준비, 앱은 다운로드, 심사를 통화해야 함, 다양한 인터렉션 사용 1. 목적이 다르면 UI의 차이가 있다. UI의 차이가 있다는 것은 목적이 다름 (1) 페이지 이동 : 웹은 주소창 인터페이스가 있다. 주소를 입력하면 접근이 가능하기 때문에, 사용자가 접근하면 안되는 곳에 접근했을 때에 대..
피그마 활용법(2)_1주차 정리 [수업 목표] 팝업과 모달을 이해합니다. 다이얼로그 컴포넌트를 만들면서 구조와 기능을 이해합니다. 컨트롤 요소들을 살펴보고, 체크박스와 라디오의 차이를 이해합니다. 지금까지 배운 컴포넌트 지식 및 기술을 활용해 디자인을 설계합니다. 01 컨테이너 컴포넌트와 모달 -컴포넌트 종류 중 컨테이너 컴포넌트 -굉장히 자주 사용할 ‘모달' UI개념에 대해 / 라이트박스 02 다이얼로그 컴포넌트 -다이얼로그 사용 시기(언제 써야 하는지) / 다이얼로그 직접 만들기 03 체크박스와 라디오 -언제 쓰는지, 무엇인지 / 두가지의 차이, 유의사항 04 UI키트 완성하기 -나만의 UI키트 와성함을 되돌아보기 1.모달 -합성 컴포넌트와 컨테이너 컴포넌트 : 컴포넌트+컴포넌트=컴포넌트(합성 컴포넌트) (바텀시트, 다이얼로그, 리..