전체 글

오늘은 UI/UX 디자인과 포트폴리오 구성을 위해 메타코드M 강의에서피그마 프로그램의 불리언 그룹, Flatten, mask에 대해서 알아보겠습니다.  피그마 - 불리언 그룹 활용 불리언 그룹불리언(Boolean) : 2개 이상의 도형이 필요하고 만들어진 복수의 도형을 빠르게 편집할 수 있는 기능 위 강의자료에 있는 아이콘들은 불리언 아이콘으로 각 아이콘이 4가지의 기능을 표현하고 있습니다.어도비 그래픽 프로그램이나 다른 툴에서 패스파인더 기능은  피그마의 불리언 그룹 기능과 동일합니다.에디터의 권한이 있는 모든 사용자가 사용할 수 있고, 뷰어 권한을 가진 사람은 편집 권한이 없기 때문에 사용할 수 없습니다.  1️⃣ 결합 아이콘 : 2개 이상의 도형이 선택되어 있다면 합치는 역할2️⃣ 빼기 아이콘 : ..

오늘은 UI/UX 디자인과 포트폴리오 구성을 위해 메타코드M 강의에서피그마 프로그램의 섹션/프레임/그룹, 컴포넌트와 인스턴스, 면과 선에 대해서 알아보겠습니다.  피그마 - 작업 위계 순서   작업 환경에서의 위계 순서는 섹션 > 프레임 > 그룹(하위 레이어가 없으면 존재X) > 레이어프레임,섹션,슬라이스 중 섹션이 가장 놓은 위계에 존재합니다.  피그마 - 섹션 / 프레임 / 그룹 + 레이어   '섹션'은 섹션 안에서는 이동할 수 있지만 프레임 안에는 존재할 수 없습니다.(섹션은 프레임보다 더 높은 위계를 가지고 있다) '프레임'은 섹션과 그룹 안에 들어갈 수 있습니다.혼자 존재할 수 있기 때문에 그룹보다는 독립적인 권한을 가진 것이라고 해석합니다.또한 프레임은 레이어에 종속되지 않는다고 해석하는데 그..

오늘은 UI/UX 디자인과 포트폴리오 구성을 위해 메타코드M 강의에서피그마 프로그램의 페이지 메뉴, 실습과 전문가 모드에 대해서 알아보겠습니다.  피그마 - 페이지 상단 메뉴 도구 Move  : 요소를 이동시킬 수 있는 툴 (화살표)Frame : 영역을 만들 수 있는 툴  - 화면에 아트보드를 만드는 경우Section : 프레임이나 다른 요소들을 한 번에 묶는 툴Slice : 만들어 놓은 객체 중 일부를 보내고 싶을 때 영역을 선정해주는 툴  Rectangle : 프레임 안에서 네모난 사각형이 만들어지는 툴 / 꼭짓점을 잡고 회전 가능 / 레디오스값 조정 가능Ellipse : shift를 누르고 그린면 정방향의 원이 만들어지고 안누르면 타원이 생성Polygon : shift를 누르고 정방향의 삼각형이 만..

오늘은 UI/UX 디자인과 포트폴리오 구성을 위해 메타코드M 강의에서피그마 프로그램의 페이지 메뉴와 기능들에 대해서 알아보겠습니다.  페이지 메뉴 - 색상 변경 오른쪽 패널 도구 속성 메뉴에는 색상의설정값을 세밀하게 변경할 수 있는 메뉴가 있습니다. 피그마에서의 도형과 텍스트 모두 색상을 변경할 수 있고웹기반 프로그램이기 때문에 헥사코드(색상코드)를 통한 색 선택에 자유도가 높습니다. 만약 색에 대한 상세정보를 모르지만 같은 색상을 사용하고 싶다면스포이트 아이콘을 선택하고 원하는 색을 선택하여 사용하면 됩니다.채도는 유지하면서 투명도를 낮추고 싶다면 헥사코드 옆의 %를 낮추면 됩니다.(도형과 텍스트는 동일하게 투명도를 조절할 수 있습니다)  페이지 메뉴 - 텍스트 변경  텍스트 글씨체는 텍스트를 선택하고..

오늘은 UI/UX 디자인과 포트폴리오 구성을 위해 메타코드M 강의에서피그마 프로그램의 권한별 기능,모드와 페이지 메뉴에 대해서 알아보겠습니다.  피그마 권한별 기능 권한에 따른 기능의 차이가 발생합니다.오너/어드민 권한과 에디터 권한은 편집이 가능하고,뷰어 권한은 편집이 불가능합니다.(특정 권한을 주게 되면 특정 페이지의 편집이 가능한 경우도 있습니다) 포트폴리오의 test1의 테스트 파일을 열어서 영역에 도형을 그리거나텍스트를 입력하는 등의 편집은 오너나 에디터 권한일 경우 가능합니다.레이어들의 속성값도 변화가 가능한데 텍스트/도형의 크기나 색상을 변경하는 등의다양한 속성값의 변화도 조절할 수 있습니다. 자신이 오너나 에디터 권한을 가진 모든 파일들에서 가능하며만약 제한적 권한을 가지고 있다면 특정 페..

오늘은 UI/UX 디자인과 포트폴리오 구성을 위해 메타코드M 강의에서피그마 프로그램의 파일의 구성,생성과 불러오는 방법에 대해서 알아보겠습니다.  피그마 - 파일  피그마 : 팀 단위로 움직임 A팀 -> 프로젝트 A, B, C - 파일이 3개씩 9개가 존재 파일이 가장 작은 단위이며 파일을 감싸고 있는 프로젝트가 있고,프로젝트는 하나의 팀에 귀속되어 있습니다.(다른 팀으로 이관을 할 수 있고, 복제도 가능합니다.)  ex) 프로젝트 A의 파일1을 열었다고 가정하였습니다.파일은 페이지로 구성되어있는데 1개 이상으로 구성되어있으며페이지는 여러 개의 레이어들로 구성되어 있습니다. 파일1에 3개의 페이지에는 하나의 목적성이 있는 화면으로 구성하기 위해목적에 맞는 레이어들로 구성되어 있습니다.  레이어들이 디자인..

오늘은 UI/UX 디자인과 포트폴리오 구성을 위해 메타코드M 강의에서피그마 프로그램의 홈화면과 페이지 구성에 대해서 알아보겠습니다.  홈화면 - 좌측 메뉴 로그인을 하고 웹이나 프로그램에서의 홈 화면입니다.홈 화면 '좌측'에는 다음과 같은 기능이 있습니다.  프로필 변경 : 프로필 선택 -> 프로필의 연필 아이콘 선택 -> save(저장됨)컬러 테마 변경 : 프로필 선택 -> Theme -> 라이트/다크/시스템 테마 중 선택 Setting 메뉴 : 피그마 세팅을 변경할 수 있는 공간 (account/Community/Notification)Recents :최근 작업물을 확인할 수 있는 공간Your teams : 팀에 관한 확인이 가능한 공간Drafts : 내가 만든 파일 + 팀 플랜 협업 가능 공간 (임..

오늘은 UI/UX 디자인과 포트폴리오 구성을 위해 메타코드M 강의에서피그마 프로그램의 팀 구성/권한과 요금제에 대해서 알아보겠습니다.  피그마 프로그램 팀 구성  피그마 프로그램은 개인이더라도 '팀(Team)'으로 판단되어 팀이 만들어집니다.이를 기반으로 다른 사람들을 초대하여 팀을 구성하거나다른 사람의 팀에 들어가서 팀원으로 활동할 수 있습니다.한 사람이 여러 팀에 참여하여 다양한 권한도 가질 수 있습니다.(자신이 팀을 구성하는 경우 각 팀원들에게 각자의 권한을 부여할 수 있습니다.)  팀 권한 설명  팀의 권한은 크게 3가지로 나누어집니다.오너/어드민 권한에디터 권한 뷰어 권한 에디터 이상의 권한을 가진 사람들이 많아질수록일정 금액을 지불해야하기 때문에회사에서는 오너 권한 1명과 에디터 여러명을 두고..

오늘은 UI/UX 디자인과 포트폴리오 구성을 위해 메타코드M 강의에서피그마 프로그램과 모바일 미러링 앱을 설치하고 설정해보겠습니다  피그마 프로그램 설치 및 접속하기  구글에 피그마 다운로드(Figma download)를 검색하면 그림과 같은 홈페이지가 들어가게 됩니다.Desktop app을 이용하기 때문에 macOS와 Windows 중 맞는 운영체제에 따라 다운로드합니다.피그마 프로그램의 최소 사양과 관련된 사진이 있으니 확인하고 설치하면 됩니다.하지만 대부분의 경우 충족되기 때문에 '운영체제' 정도만 확인해도 됩니다.( 설치하고 로그인하면 웹 페이지에 나오는 것과 동일한 화면이 나오게 됩니다.) https://www.figma.com/downloads/ Figma Downloads | Web Desi..

오늘은 UI/UX 디자인과 포트폴리오 구성을 위해 메타코드M 강의에서피그마를 설치하고 설정하는 것까지 알아보겠습니다  계정 생성하기  피그마 프로그램부터 다운로드 받아보겠습니다구글에 피그마(figma)를 검색해서 피그마 홈페이지에 들어가게 되면다음과 같은 홈페이지가 나오게 됩니다. https://www.figma.com/ Figma: The Collaborative Interface Design ToolFigma is the leading collaborative design tool for building meaningful products. Seamlessly design, prototype, develop, and collect feedback in a single platform.www.figma..