하양의 일기장

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가 체크되어있으면 저렇게..

https://mcode.co.kr 메타코드M 빅데이터 , AI 강의 플랫폼 & IT 현직자 모임 플랫폼ㅣ메타코드 커뮤니티 일원이 되시기 바랍니다. mcode.co.kr 안녕하세요~ 하양입니다. 🤗 지난 시간에는 면/선/도형 및 불리언 그룹의 속성에 대해 이해하는 시간이었다면 이번 시간은 불리언 그룹의 속성을 활용해 Flatten, 마스크에 대해 배우는 시간이 될 것 같습니다. 1. Flatten으로 병합하기 레이어가 그룹형태일 때 리사이징하거나, 여러가지 제약이 있는 것처럼 한꺼번에 다루기 어려워집니다. 그래서 레이어를 Flatten으로 병합하는 기능을 활용하면 좋습니다. 기본 상태인 Union 상태와 Flatten 상태를 비교해보겠습니다. 사각형 4개를 병합하여 Union 상태로 만든 뒤에 이렇게 처..

네... 저는 제우스인가 봅니다... 모든 자격증을 다 벼락치기로 호로록 따는중이죠. 거의 두달 사이에 벌써 3번째 벼락치기 합격소식을 가져오고 있네요. 근데 진짜 미리 공부할 시간이 없었어요. 다들 이해하시죠? 책을 필 시간이 없어서 4일정도 새벽에 공부하고 시험전날 밤샌뒤 보고왔습니다🫠 네 핑계 치우고 바로 어떻게 공부했는지 말씀드리겠습니다! https://www.q-net.or.kr/man004.do?id=manSubMain Q-Net www.q-net.or.kr Q-Net 기능사 3회 원서접수 바로가기 기능장 74회 원서접수 바로가기 Q-net 홈페이지 바로가기 정보처리기사는 큐넷에서 접수하면 되는데요. 필기, 실기 두번 다 합격해야 자격이 취득됩니다. 필기는 현재 CBT 형식으로 바뀌어서 원하는..

https://mcode.co.kr 메타코드M 빅데이터 , AI 강의 플랫폼 & IT 현직자 모임 플랫폼ㅣ메타코드 커뮤니티 일원이 되시기 바랍니다. mcode.co.kr 안녕하세요~ 하양입니다. 🤗 지난 시간에는 설정 메뉴 및 도구 메뉴에 대해 알아보았다면 이번 시간에는 면/선/도형의 속성에 대해 이해하는 시간이 될 것 같습니다. 1. 면과 선의 속성 이해하기 피그마는 벡터 기반의 프로그램입니다. 확대하면 도트형태로 깨지는 비트맵과 달리 벡터는 사이즈에 영향을 받지 않고 매끄러운 형태를 유지합니다. 그 이유는 비트맵은 픽셀로 이루어져있지만, 벡터는 방정식 형태로 이루어져있기 때문입니다. 이런 벡터 기반의 피그마에서 '면'의 특징은 다음과 같습니다. 하나의 도형 개체로 인식이 되기 때문에 모서리 라운드값을..

https://mcode.co.kr 메타코드M 빅데이터 , AI 강의 플랫폼 & IT 현직자 모임 플랫폼ㅣ메타코드 커뮤니티 일원이 되시기 바랍니다. mcode.co.kr 안녕하세요~ 하양입니다. 🤗 지난 시간에는 페이지 및 레이어에 대해서 알아보고 실습을 진행해봤다면 이제 기본 기능에 대해 좀 더 자세히 알아보기 시작할 것 같습니다. 1. 섹션, 프레임, 그룹의 구조 섹션은 프레임 안으로 들어갈 수 없는 구조입니다. 프레임보다 상위개념이기 때문입니다. 또한 그룹은 종속된 레이어의 영향을 받지만, 프레임은 하위 레이어의 영향을 받지 않습니다. 따라서 아래 그림과 같이 그룹 내의 레이어의 크기를 조절하게 되면 그룹 내 레이어가 다 같이 조절이 되지만, 프레임 내의 레이어를 아무리 변형해도 프레임 내의 다른 ..

https://mcode.co.kr 메타코드M 빅데이터 , AI 강의 플랫폼 & IT 현직자 모임 플랫폼ㅣ메타코드 커뮤니티 일원이 되시기 바랍니다. mcode.co.kr 안녕하세요~ 하양입니다. 🤗 지난 시간에는 다양한 좌측, 우측, 상단 도구 메뉴들에 대해 알아보았다면 배운 부분을 활용하여 실습을 진행해보는 시간이 될 것 같습니다. 1. (실습) 기본적인 도구 사용해보기 그동안 단편적으로 도구엔 무엇이 있고, 화면엔 어떤 기능들이 보여지며, 어떤 액티비티에 사용하는 기능들인지 조각조각 배워보았습니다. 낱개로 보면 굉장히 단순해보이고 너무 쉬운거 아니야? 라는 생각도 들었지만 이걸 하나의 화면으로 구성하는데 유기적으로 사용해야한다고 생각하니.. 하루빨리 이 기능들에 익숙해질 수 있게 직접 사용해봐야겠다는..

https://mcode.co.kr 메타코드M 빅데이터 , AI 강의 플랫폼 & IT 현직자 모임 플랫폼ㅣ메타코드 커뮤니티 일원이 되시기 바랍니다. mcode.co.kr 안녕하세요~ 하양입니다. 🤗 설정 메뉴 및 도구 메뉴에 대해 알아보는 지난 시간에 이어서 상단도구 메뉴 및 프로토티이핑 메뉴에 대해 알아보는 시간이 될 것 같습니다. 1. 상단 도구 메뉴 먼저, Frame 이나 Section 에 대한 차이점과 사용법에 대해 알아보았습니다. 또한 다양한 모양의 도형들을 Frame 안에 삽입하여 원하는 위치에 배치해 사용하는 법을 알아보았습니다. Place image/video 기능을 통해서 이렇게 배치된 도형 안에 로컬에 저장돼있는 이미지나 비디오를 적절하게 넣을 수도 있습니다. 원하는 모양을 적절하게 활..

https://mcode.co.kr 메타코드M 빅데이터 , AI 강의 플랫폼 & IT 현직자 모임 플랫폼ㅣ메타코드 커뮤니티 일원이 되시기 바랍니다. mcode.co.kr 안녕하세요~ 하양입니다. 🤗 지난 시간에는 파일, 페이지, 레이어 기본 개념 및 피그마 작업환경 중 권한 / 기능별 모드에 따른 화면, 신규 파일 생성 등에 대해 알아봤다면 이어서, 설정 메뉴 및 도구 메뉴에 대해 알아보는 시간이 될 것 같습니다. 1. 상단 파일 설정 메뉴 하나의 파일에 대해서 계속해서 버전을 업데이트하며 누적해서 저장할 수 있는 것이 장점입니다. 현재 일하고 있는 곳에서 사용하는 개발 솔루션에서도 배포 버전마다 descriptiong에 변경 내용을 넣고, 나중에 다시 꺼내와서 사용할 수 있어서 해당 기능이 마음에 들었..