[Figma] 피그마 입문 A to Z 부트캠프 메타코드_ "18. PC 화면 세팅하기"

 

https://mcode.co.kr  

메타코드M

 

 

 

안녕하세요~ 하양입니다. 🤗

 

지난 시간에는 모바일 화면 기초 UI  세팅에 대해 알아보았다면 이번 시간에는 PC화면 기초 UI 세팅과 컬러시스템에 대해 이해하는 시간이 될 것 같습니다.

반응형

 

1.  PC화면 기초 UI 셋팅하기 - PC WEB

 

 

안드로이드나 IOS처럼 PC도 원하는 사이즈의 캔버스를 먼저 선택해야 합니다. 가장 많이 사용되는 MacBook Air 1280 사이즈를 골라서 작업을 시작해보도록 하겠습니다.

 

 

 

 

이전에 배워보았던 MacOS Browser UI Kit 리소스를 사용해서 PC 웹 UI 환경을 구현해보도록 하겠습니다. 

 

 

이렇게 크롬 환경이 상단바 작업을 통해서 금방 구현이 되는 것을 볼 수 있습니다. 리소스의 장점이 이렇게 간단하게 시간과 노력을 줄이고 완벽한 결과물을 만들어낼 수 있게 돕는 것이라 할 수 있겠습니다.

 

 

크롬 뿐만 아니라 사파리화면도 동일하게 구성해볼 수 있습니다. 

 

 

저렇게 Design 패널에서 Layout grid 속성에서 Grid 속성을 Columns로 변경하게 되면, 컬럼 개수만큼 세로로 layout 구역을 분할할 수 있습니다. 또한 좌우 Margin 수치를 조절하면 양쪽 마진이 조정되는 것을 확인할 수 있습니다.

 

 

이렇게 간단하게 웹 화면을 구성하는 방법에 대해 알아보았는데요. 아무래도 웹디자인 강의는 아니다보니 기본적인 부분만 배울 수 있었습니다.

 

2. 컬러 시스템 적용하기

 

컬러를 왜 시스템해서 사용해야하는지 짧게 이어서 진행해보겠습니다. 컬러를 시스템화할 경우 반복적으로 사용하는 컬러값을 자동화하고, 컬러 사용 목적별로 관리가 가능해져서 반복적인 업무 노동을 줄일 수 있게 됩니다. 또한 디자인을 협업하는 경우 조직 내 통일된 디자인을 위해 컬러 파편화 현상을 방지하고, 개발자와 커뮤니케이션을 원활하게 할 수 있게 됩니다. 

 

 

 

먼저 저렇게 Libraries에 들어가서 + 로 추가를 하게 되면 색깔을 라이브러리에 등록할 수 있게 됩니다. 

 

이렇게 위와 같이 사진처럼 색에 대해 이름과 설명, 속성 등을 정하여 Create style로 색상을 시스템화하여 빠르게 꺼내쓸 수 있게 됩니다. 

 

 

또한 Libiraries에 등록된 컬러를 선택하여 다시 속성을 수정할 수도 있기 때문에 관리에 용이합니다.

 

 

피그마 입문 강의 :

 

https://mcode.co.kr/video/list2?viewMode=view&idx=78 

메타코드M

 

 

#피그마사용법 #피그마유료 #피그마다운로드 #피그마자격증 #피그마무료 #피그마 #피그마강의 #피그마사이트 #피그마다운 #메타코드엠 #메타코드