오늘은 UI/UX 디자인과 포트폴리오 구성을 위해 메타코드M 강의에서 피그마 프로그램의 히스토리 관리와 커뮤니케이션에 대해서 알아보겠습니다. 피그마 - 히스토리 관리 피그마 작업하다가 보면 히스토리를 보고싶은 경우가 생기는데 퀵 액션에 Show version history를 선택하면 우측에 히스토리가 나오게 됩니다. 상단의 정렬방법을 택해 보고자하는 히스토리를 찾을 수도 있고, 히스토리 날짜에 들어가면 화면에 보이게 되고 버전 이름을 바꾸거나 새롭게 저장하는 것도 가능합니다. 만약에 동료가 복사한 링크를 공유받아 피그마로 들어온다면 동일한 장면이 보이고 버전마다 작업물이 다르기 때문에 지난 작업물을 확인할 때 유용합니다. 저장하는 것도 퀵 액션에서 Save to version history를 통해 가능합..

오늘은 UI/UX 디자인과 포트폴리오 구성을 위해 메타코드M 강의에서 피그마 프로그램의 스크롤/장바구닝 담기 구현에 대해서 알아보겠습니다. 피그마 - 스크롤 구현 디자인할 때 화면이 길어져서 스크롤 애니메이션이 필요한 경우가 있는데 파일에서 고정되어 움직이지 않아야 하는 개체들만 빼고 중간의 컨텐츠들만 스크롤로 움직이도록 구현해보겠습니다. (제공되는 fig파일이 있는데 혹시 없으신 분은 기존의 파일을 길게 만들면 될 것 같습니다) Fixed 된 부분을 확인해보면 스테이터스바, 앱 바,하단의 버튼 입니다. 프레젠트를 해보면 Fixed 된 부분은 움직이지 않고 중간의 컨텐츠만 움지이는 것을 알 수 있습니다. 유사한 상품 내역의 썸네일들이 무작위로 움직이는 것을 알 수 있습니다. 너비 값에 딱 맞춰서 스크롤하..

오늘은 UI/UX 디자인과 포트폴리오 구성을 위해 메타코드M 강의에서 피그마 프로그램의 에니메이션 프로토타이핑 툴/수행에 대해서 알아보겠습니다. 피그마 - 에니메이션 프로토타이핑 툴 피그마 1️⃣ 디자인과 애니메이션을 동시에 작업 가능합니다. 2️⃣ 하나의 툴만 결제해도 화면 설계와 애니메이션 프로토타이핑이 가능합니다. 3️⃣ 단점으로는 애니메이션 구현이 제한된다는 것 입니다. 프로토타이핑 1️⃣가장 많이 사용하는 애니메이션 프로토타이핑 툴이고 섬세하게 에니메이션 구현이 가능합니다. 2️⃣ 애니메이션 코드도 제공하기 때문에 개발자들에게 핸드 오프할 때 장점으로 작용합니다. 3️⃣ 단점으로는 프로토파이를 별도 구매해야한다는 것 입니다. 섬세한 에니메이션 작업을 하는 조직이나 애니메이션 프로토타이핑을 구현해..

오늘은 UI/UX 디자인과 포트폴리오 구성을 위해 메타코드M 강의에서 피그마 프로그램의 검색 화면,장바구니 화면 구성에 대해서 알아보겠습니다. 피그마 - 검색 화면 안드로이드 라지 프레임을 생성하고 스테이터스 바를 에셋에서 추가하여 넣습니다. 검색 페이지의 화면 구성을 텍스트로 작성해 넣습니다. 전 시간에 사용한 앱바를 복사하여 라이브러리 페이지에서 컴포넌트화하여 최신화합니다. 붙여넣은 앱바의 텍스트를 '검색'으로 변경하고 프로토타입에서 fixed로 변경합니다. 검색어 입력으로 텍스트 생성하고 body3로 글꼴과 라이트 그레이 색으로 바꾸고 오토 레이아웃 설정합니다. 높이 값을 고정하기 위해 디자인 패널에서 Frame에 Vertical rasizing을 fixed로 바꿉니다. 여백을 24정도 두고 지정한..

오늘은 UI/UX 디자인과 포트폴리오 구성을 위해 메타코드M 강의에서 피그마 프로그램의 약관 동의 화면,메뉴 화면 구성에 대해서 알아보겠습니다. 피그마 - 약관 동의 화면 리소스 파일에서 안드로이드 스테이터스 바를 복붙하여 라이브러리에 준비합니다. 컴포넌트화 하고 다중 선택 후 컴바인 애즈 베리언츠를 이용하고 publish하면 라이브러리를 최신화하고 디자인하는 파일에서 연결되어 있는지 확인합니다. 에셋에서 스테이터스바를 드래그하여 붙여넣어서 사용합니다. 라이트에서 다크로 변경하고 백그라운드 레이어를 찾아서 배경색을 안보이게 처리합니다. 로그인 프레임을 찾아서 동일하게 하고 배경색도 안보이게 처리합니다. 텍스트를 적고 스타일을 저장하여 라이브러리에서 사용할 수 있도록 합니다. create a new tex..

오늘은 UI/UX 디자인과 포트폴리오 구성을 위해 메타코드M 강의에서 피그마 프로그램의 라이브러리와 작업파일 구분,스플래쉬,로그인 화면에 대해서 알아보겠습니다. 피그마 - 라이브러리와 작업파일 분리 라이브러리 구축과 활용에서 라이브러리 파일을 별도 파일로 분리해두지 않으면 서비스 디자인이나 프로젝트 디자인 할 때 여러가지 피그마 파일을 만들면 파일들을 유기적으로 연결시키기 힘들어지게 됩니다. 화살표 아이콘을 만들고 에셋을 선택하여 책 모양 로고를 선택하고 상위 폴더에 Publish하면 정상적으로 Publish 된다면 팀 안에 있는 모든 협업자들이 모든 디자인 파일에 이 라이브러리를 참고할 수 있습니다. 전 파일 썸네일을 확인하고 Add to file해주면 라이브러리에 있는 것들을 사용할 수 있습니다. 다..

오늘은 UI/UX 디자인과 포트폴리오 구성을 위해 메타코드M 강의에서 피그마 프로그램의 네비게이션 바와 모달 템플릿구현에 대해서 알아보겠습니다. 피그마 - 네비게이션 바 머터리얼3 디자인 킷과 새로운 파일을 같은 프로젝트 그룹 안으로 넣어서 머터리얼 안에는 다양한 UI가 구축되어 있고 새로운 파일에서 페이지 생성하고 Layers 옆 Assets에서 책 로고를 선택하고 머터리얼3 디자인 킷을 Added합니다. 머터리얼3의 다양한 UI 컴포넌트들이 페이지에서 사용할 수 있음을 알 수 있습니다. 네비게이션 바를 선택하고 디스크립션을 확인하고 드래그 하여 놓습니다. 우측의 Navigation bar를 선택하면 스왑 인스턴스할 수 있는 것들을 확인할 수 있고 옵션 값을 변경하여 원하는 방식으로 사용할 수 있습니..

오늘은 UI/UX 디자인과 포트폴리오 구성을 위해 메타코드M 강의에서 피그마 프로그램의 아이콘 변수값에 대해서 알아보겠습니다. 피그마 - 아이콘 변수값 설정/등록 아이콘을 라이브러리에 등록하면서 변수를 고려해야하는 이유 1️⃣ 다양한 상황에 대응 디자인하는 디바이스는 하나로 고정되어 있지 않고 다양한 해상도를 고려하고 디자인 해야하기 때문에 화면에서 잘 보이게끔 고려해서 만들어야 합니다. 목적과 상태를 나타내는 아이콘도 존재하는데 예를 들어 태스크 수행 하지 않을 때의 아이콘과 태스크를 수행하고 나서의 아이콘은 다르게 보여야 하는 상황이나 고객들이 사용 시에 이런 것만큼은 아이콘으로 표현해야 한다고 하면 각각의 상황에 맞게 변수 값으로 등록할 수 있는 것 입니다. 아이콘의 컬러를 지정해서 라이트/다크 모..

오늘은 UI/UX 디자인과 포트폴리오 구성을 위해 메타코드M 강의에서 피그마 프로그램의 컬러 시스템, 폰트 스타일에 대해서 알아보겠습니다. 피그마 - 컬러 시스템 컬러 시스템화 1️⃣ 반복 업무 해소 가능 디자인에 반복적으로 들어가는 컬러 값 존재하는데 컬러별로 시스템화하면 자동화가 가능하기 때문에 효율이 올라갑니다. 컬러별 옵션도 적용 가능한데 투명도를 입힌 컬러를 시스템화하여 라이브러리에 등록해 사용 가능합니다. 컬러 사용 목적별로 디스크립션을 사용하여 언제 사용할지 노티를 줄 수 있습니다. 2️⃣ 조직 내 통일된 디자인 유지 이런 장점들을 통해 조직 내 통일된 디자인으로 유지하는데 도움을 주고 조직 내 디자이너들이 많아지면 개개인이 쓰는 컬러가 조금씩 달라지는 파편화 현상을 시스템화하면 줄일 수 있..

오늘은 UI/UX 디자인과 포트폴리오 구성을 위해 메타코드M 강의에서 피그마 프로그램의 플러그인, 모바일/PC 환경 설정에 대해서 알아보겠습니다. 피그마 - 플러그인 1️⃣ Autoflow 화면에 플로우를 연결해주는 플러그인으로 컴포넌트나 버튼을 누르는 경우 각각의 다른 화면으로 분기 처리되어 이동하거나 플로우를 그려보는 것과 같은 플러그인을 사용 가능합니다. 피그마 상단의 Plugins를 이용하여 사용합니다. 북마크를 하거나 협업자들에게 공유도 가능합니다(유료 기능도 존재) 연결해주고 싶은 컴포넌트나 요소를 선택하고 shift를 누른 상태로 다음 화면을 선택하면 자동으로 플로우를 잇는 화살표가 생성되고 화살표 위치가 마음에 들지 않으면 이동도 가능합니다. 디스크립션도 적을 수 있는데 간단한 가이드를 타..