반응형

메타코드-Figma 입문 20

[Figma] 피그마 입문 A to Z 부트캠프 메타코드_ "10. Flatten 과 Mask 활용하기"

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

[Figma] 피그마 입문 A to Z 부트캠프 메타코드_ "9. 면과 선, 도형 불리언 그룹 이해하기"

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

[Figma] 피그마 입문 A to Z 부트캠프 메타코드_ "8. 프레임과 그룹의 차이점_1"

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

[Figma] 피그마 입문 A to Z 부트캠프 메타코드_ "7. 피그마 작업환경_실습"

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

[Figma] 피그마 입문 A to Z 부트캠프 메타코드_ "6. 피그마 작업환경 알아보기_3"

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

[Figma] 피그마 입문 A to Z 부트캠프 메타코드_ "5. 피그마 작업환경 알아보기_2"

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

[Figma] 피그마 입문 A to Z 부트캠프 메타코드_ "4. 피그마 작업환경 알아보기_1 "

https://mcode.co.kr 메타코드M 빅데이터 , AI 강의 플랫폼 & IT 현직자 모임 플랫폼ㅣ메타코드 커뮤니티 일원이 되시기 바랍니다. mcode.co.kr 안녕하세요~ 하양입니다. 🤗 지난 시간에는 피그마를 본격적으로 다루기 앞서 피그마 페이지에 대한 권한 및 기능 등을 숙지하고 다루기 위한 준비운동을 시작했습니다. 4강은 피그마 작업환경에 대해 살펴보기 시작하였습니다. 1. 파일, 페이지, 레이어 기본 개념 피그마는 기본적으로 1팀 내에 프로젝트가 여러개 속해있을 수 있고, 각 프로젝트 안에 여러 개의 파일로 구성될 수 있는 구조를 갖고 있습니다. 해당 프로젝트 및 파일들은 다른 팀으로 이관, 복제가 가능하게 됩니다. 파일 구성 요소에는 페이지와 레이어로 구성돼있다는 것을 알 수 있습니다..

[Figma] 피그마 입문 A to Z 부트캠프 메타코드_ "3. 피그마 페이지 돌아보기"

https://mcode.co.kr 메타코드M 빅데이터 , AI 강의 플랫폼 & IT 현직자 모임 플랫폼ㅣ메타코드 커뮤니티 일원이 되시기 바랍니다. mcode.co.kr 안녕하세요~ 하양입니다. 🤗 지난 시간에는 피그마 사이트에 가입해서 기본적인 기능들을 다루기 위해 어떤 사전작업 과정이 필요한지에 대해 학습했다면 3강은 피그마를 본격적으로 다루기 앞서 피그마 페이지에 대한 권한 및 기능 등을 숙지하고 다루기 위한 준비운동을 시작했습니다. 1. Figma 권한 피그마는 기본적으로 1명 = 1팀으로 시작이 됩니다. 하지만 팀원을 초대하면서 팀을 확장할 수 있게 되고, 각 팀원에게 별도의 권한을 부여할 수 있게 됩니다. Figma 페이지에 대한 권한에는 크기 오너/어드민, 에디터, 뷰어 이렇게 3가지로 나뉘..

[Figma] 피그마 입문 A to Z 부트캠프 메타코드_ "2. 피그마 다운로드 및 미러링 앱 설정하기"

https://mcode.co.kr 메타코드M 빅데이터 , AI 강의 플랫폼 & IT 현직자 모임 플랫폼ㅣ메타코드 커뮤니티 일원이 되시기 바랍니다. mcode.co.kr 안녕하세요~ 하양입니다. 🤗 지난 시간에는 기본적으로 피그마가 무엇인지, 왜 배워야하는지, 어떤 사람들이 Figma 입문강의를 들어야하는지 등등.. 정말 기본적인 내용에 대해 학습했다면 2강은 피그마를 본격적으로 다루기 앞서 기본적인 설정 방식 등을 숙지하고 다루기 위한 준비운동을 시작했습니다. 1. Figma Desktop 다운로드 강사님을 따라서 피그마 window 버전을 다운로드하고 실행해보니 저절로 전에 생성해둔 계정으로 브라우저 로그인이 연동되는 것을 확인할 수 있었습니다. 피그마에서는 자체 클라우드가 있기 때문에 따로 저장을 ..

[Figma] 피그마 입문 A to Z 부트캠프 메타코드_ "1. 피그마를 배워야 하는 이유"

안녕하세요. 하양입니다! 작년에 본격적으로 비전공자로서 IT 관련 공부에 뛰어들었고 관련 교육과 관련 자격증을 여러가지 취득하였습니다. 현재는 RPA 관련 개발 및 운영을 하며 IT 회사에 들어와 직장인이 되었는데요. 그럼에도 마음 한켠에 서비스기획에 관심이 있었던 게 미련이 남아서.. 이렇게 Figma 입문 강의를 듣게 되었습니다.ㅎㅎ 운이 좋게도 메타코드에서 제가 필요했던 UX/UI 입문 강의를 최근에 런칭하여 들을 수 있게 되었습니다. 저는 독학을 하며 메타코드 유튜브에서 작년에 무료로 오픈해두신 빅데이터분석기사 영상 하나로 실기, 필기 모두 단기간에 한번에 합격할 수 있었습니다. 특히 출제 범위가 막연한 필기에서 굉장히 많은 도움을 받았었습니다. 🥰 8시간짜리 필기 이론 영상이었는데.. 벼락치기로..

반응형