하양의 일기장

https://mcode.co.kr 메타코드M 빅데이터 , AI 강의 플랫폼 & IT 현직자 모임 플랫폼ㅣ메타코드 커뮤니티 일원이 되시기 바랍니다. mcode.co.kr 안녕하세요~ 하양입니다. 🤗 지난 시간에는 폰트 스타일과 아이콘의 변수 설정에 대해 알아보았다면, 로컬 디자인 라이브러리를 구축하여 실습해보는 시간을 갖겠습니다. 1. 네비게이션 바 디자인하기 (실습) 먼저 리소스인 Material 파일을 한번 훑어보도록 하겠습니다. 다양한 UI들이 완벽하게 구성되어있는 구성요소들을 확인할 수 있습니다. 이 귀한 리소스들을.. 새 프로젝트 파일에 추가하는 방법을 도전해보도록 하겠습니다. 먼저 좌측 패널의 Assets에서 Libraries(책모양)을 누르면 팀 파일에 저장해둔 Material 파일을 확인할..

https://mcode.co.kr 메타코드M 빅데이터 , AI 강의 플랫폼 & IT 현직자 모임 플랫폼ㅣ메타코드 커뮤니티 일원이 되시기 바랍니다. mcode.co.kr 안녕하세요~ 하양입니다. 🤗 지난 시간에는 PC화면 기초 UI 세팅과 컬러시스템에 대해 이해하는 시간이었다면 이번 시간에는 폰트 스타일과 아이콘을 등록하는 법에 대해 배워보겠습니다. 1. 폰트 스타일 규정하기 폰트 스타일도 마찬가지로 우측 Design 패널을 이용해서 속성값을 조절할 수 있습니다. 글씨의 높이, 자간, 글씨 두께, 크기, 등등 다양한 속성을 변경할 수 있습니다. 이렇게 마음에 드는 스타일을 만들었다면 앞서 배웠었던 컬러 라이브러리처럼 text style도 라이브러리에 저장할 수 있습니다. 컬러 시스템처럼 폰트도 마찬가지로..

https://mcode.co.kr 메타코드M 빅데이터 , AI 강의 플랫폼 & IT 현직자 모임 플랫폼ㅣ메타코드 커뮤니티 일원이 되시기 바랍니다. mcode.co.kr 안녕하세요~ 하양입니다. 🤗 지난 시간에는 모바일 화면 기초 UI 세팅에 대해 알아보았다면 이번 시간에는 PC화면 기초 UI 세팅과 컬러시스템에 대해 이해하는 시간이 될 것 같습니다. 1. PC화면 기초 UI 셋팅하기 - PC WEB 안드로이드나 IOS처럼 PC도 원하는 사이즈의 캔버스를 먼저 선택해야 합니다. 가장 많이 사용되는 MacBook Air 1280 사이즈를 골라서 작업을 시작해보도록 하겠습니다. 이전에 배워보았던 MacOS Browser UI Kit 리소스를 사용해서 PC 웹 UI 환경을 구현해보도록 하겠습니다. 이렇게 크롬..

https://mcode.co.kr 메타코드M 빅데이터 , AI 강의 플랫폼 & IT 현직자 모임 플랫폼ㅣ메타코드 커뮤니티 일원이 되시기 바랍니다. mcode.co.kr 안녕하세요~ 하양입니다. 🤗 지난 시간에는 생산성이 높은 플러그인과 무료 공유 리소스에 대해 알아보았다면 이번 시간에는 작업 환경에 따른 모바일 환경 기초 설정에 대해 배울 것 같습니다. 1. Android 모바일 화면 기초 UI 세팅하기 Design 에서 Android small이나 Large를 선택합니다. 하얀 바탕의 안드로이드 크기에 맞춘 캔버스가 설정되게 됩니다. 피그마 커뮤니티에서 안드로이드 키보드 UI kit 리소스를 활용해보도록 하겠습니다. 이렇게 원하는 리소스를 선택해서 ctrl + c, ctrl + v 로 프로젝트에 가져..

https://mcode.co.kr 메타코드M 빅데이터 , AI 강의 플랫폼 & IT 현직자 모임 플랫폼ㅣ메타코드 커뮤니티 일원이 되시기 바랍니다. mcode.co.kr 안녕하세요~ 하양입니다. 🤗 지난 시간에는 단축키, 컬러 프로파일, 넛지 피그마에 대해 알아보았다면 이번 시간에는 꼭 소장해야하는 리소스와 생산성 높은 플러그인에 대해 배우는 시간이 될 것 같습니다. 1. 피그마 커뮤니티에서 꼭 소장해야 하는 리소스 필요 이상의 노력을 들이지 않고도 쉽게 작업을 할 수 있도록 돕는 리소스에 대해 알아보겠습니다. 칼퇴를 위한 길이기도 하죠. 1) Google, Material 3 Design Kit 은 이 안의 리소스만 잘 활용해도 그대로 사용해도 될만큼 고퀄리티의 자료들이 포함돼있다고 합니다. 2) Ap..

https://mcode.co.kr 메타코드M 빅데이터 , AI 강의 플랫폼 & IT 현직자 모임 플랫폼ㅣ메타코드 커뮤니티 일원이 되시기 바랍니다. mcode.co.kr 안녕하세요~ 하양입니다. 🤗 지난 시간에는 오토 레이아웃을 활용하여 컴포넌트를 구성하는 법을 알아보았다면, 이번 시간은 단축키, 컬러 프로파일, 넛지 피그마에 대해 배우는 시간입니다. 1. 단축키, 컬러 프로파일, 넛지 피그마 기본 설정 * 단축키 작업 효율에 굉장히 많은 영향을 끼치는 3가지 요소는 단축키, 컬러 프로파일, 넛지입니다. 별거 아닌 것 같이 보이는 요소들일지라도 실제로 실무에서 많은 영향을 끼친다고 하니 잘 학습해야할 것 같습니다. 상단의 메뉴에서 Preferences - Keyoard layout 을 본다면 단축키를 확..

https://mcode.co.kr 메타코드M 빅데이터 , AI 강의 플랫폼 & IT 현직자 모임 플랫폼ㅣ메타코드 커뮤니티 일원이 되시기 바랍니다. mcode.co.kr 안녕하세요~ 하양입니다. 🤗 지난 시간에는 오토 레이아웃을 활용해 아이콘과 썸네일을 만들어보았다면 이번엔 이를 활용해 컴포넌트를 관리하는 법을 학습하는 시간입니다. 1. 오토 레이아웃을 활용하여 컴포넌트 관리하기 일정한 레이아웃 내에서 개체 변경이 빈번하여 앱바, 네비게이션바, 홈화면 메뉴 등을 구성해야할 때 컴포넌트를 관리하는 방법에 대해 알아보겠습니다. Subtract selection 으로 사각형을 빼서 귀여운 집을 하나 만들어보았습니다. 그리고 만든 홈 버튼을 화면 하단에 배치한뒤, 세로는 Fixed로 고정, 가로는 Hug로 설정..

https://mcode.co.kr 메타코드M 빅데이터 , AI 강의 플랫폼 & IT 현직자 모임 플랫폼ㅣ메타코드 커뮤니티 일원이 되시기 바랍니다. mcode.co.kr 안녕하세요~ 하양입니다. 🤗 지난 시간에는 오토 레이아웃은 무엇인지 개념에 대해 알아보았다면, 이번 시간은 이를 사용하기 위한 실습시간입니다. 1. 오토 레이아웃 버튼 만들기 일단 앞에서 배웠던대로 무난하게 하나의 버튼을 만들어 보았습니다. 이제 이 버튼을 여러개 생성되게 만들어보겠습니다. 오토 레이아웃을 설정해주어서 간격이 일정하게 오른쪽으로 추가되게 만들어보았습니다. 간격을 정해줄 때는 홀수보다는 짝수로 맞춰주는 것이 개발에 용이합니다. 텍스트가 길어져도 취소완료 버튼처럼 저렇게 도형이 알아서 설정값을 유지하며 길어지는 것을 확인할 ..

https://mcode.co.kr 메타코드M 빅데이터 , AI 강의 플랫폼 & IT 현직자 모임 플랫폼ㅣ메타코드 커뮤니티 일원이 되시기 바랍니다. mcode.co.kr 안녕하세요~ 하양입니다. 🤗 지난 시간에는 레이어를 활용해 아이콘을 만들어보는 실습을 해보았다면 다시 개념정리 시간이 돌아왔습니다. 오토 레이아웃 및 컴포넌트 관리에 대해 배워보는 시간이 될 것 같습니다. 1. 오토 레이아웃의 개념 오토 레이아웃도 굉장히 생소한 개념이었습니다. 피그마에서 제작한 UI가 화면 크기가 바뀔 때마다 레이아웃을 조정할 필요가 없도록 자동 조정 옵션을 설정하는 방법입니다. 각종 모바일 기기마다 화면 크기가 모두 다르기 때문에 이 기능은 UI 제작 시에 가장 중요한 기능이라는 생각이 들었습니다. 오토 레이아웃으로 ..

https://mcode.co.kr 메타코드M 빅데이터 , AI 강의 플랫폼 & IT 현직자 모임 플랫폼ㅣ메타코드 커뮤니티 일원이 되시기 바랍니다. mcode.co.kr 안녕하세요~ 하양입니다. 🤗 지난 시간에는 레이어 속성을 이용한 Flatten, 마스크에 대해 배우는 시간이었다면, 이번엔 이를 활용해 실습해보는 시간이 될 것 같습니다. 1. 심볼 아이콘 만들어보기 아이콘을 만드는 것은 자유이지만, 어플에 적용하기 위해 개발단계를 고려한다면 여러가지 규칙을 따라서 제작하는 것이 좋습니다. 구글의 아이콘 디자인 가이드를 확인하여서 아이콘을 제작하는 것을 추천합니다. 라운드값이나 여러 수치들은 되도록 소수점보단 정수단위로 만드는 것을 추천합니다. 우측 패널에서 Clip content가 체크되어있으면 저렇게..