피그마로 레이아웃 그리드 설정하는 방법 - 피그마 강좌 1-4

안녕하세요! 이번 강의에서는 디자인 도구에서 사용되는 레이어, 그룹, 프레임, 섹션, 페이지 등의 핵심 개념들을 심층적으로 다룹니다. 초보자부터 숙련된 사용자까지, 누구나 쉽게 이해하고 실제 작업에 적용할 수 있도록 구성하였습니다.
레이어: 디자인의 기본 구성 요소로, 다양한 요소들이 층층이 쌓여서 최종 이미지를 형성합니다. 레이어의 순서를 조정하여 요소들의 앞뒤 관계를 쉽게 조절할 수 있습니다.
그룹: 여러 레이어를 하나의 단위로 묶어 빠르게 선택하고 조정하는 기능입니다. 그룹화 및 그룹 해제 방법도 소개합니다.
프레임: 화면의 틀을 설정하여 인터페이스 디자인을 구성하는 방법을 배웁니다. 다양한 해상도의 프레임을 쉽게 생성하고 수정할 수 있습니다.
섹션: 프레임을 포함할 수 있는 더 큰 단위로, 디자인을 체계적으로 관리할 수 있게 해 줍니다.
페이지: 하나의 파일 내에서 여러 디자인 요소를 체계적으로 관리할 수 있는 고급 기능으로, 큰 규모의 프로젝트에서 특히 유용합니다.
이 강의를 통해 기본적인 레이어 관리부터 고급 프레임 및 페이지 관리까지, 디자인 도구의 모든 기능을 마스터할 수 있습니다.
🚀 디자인베이스 멤버십 가입하면 다양한 고급 강좌와 예제 파일을 받아볼 수 있어요
┗ / @designbase
🌟예제 다운은 멤버십 회원 전용 커뮤니티에 올린 링크에서 받으실 수 있습니다.🌟
*디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커멘드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를 눌러주세요.
☞ 공식 웹사이트 : designbase.co.kr/

[@박이슬-j2j]

진짜 양질의 강의로 베풀어 주셔서 감사합니다~!!

[@designbase]

감사합니다~!ㅎㅎ

[@남스-n5b]

피그마 처음인사람한테 너무 도움됩니다. 응원할게요

[@designbase]

감사합니다ㅎㅎ

[@김규민-n8t]

감사합니다 생명의 은인이세용

[@designbase]

감사합니다 :)

[@soborogom]

열심히 배워볼게요 ! 감사합니다.

[@lefthandd]

너무 좋은 영상이네요! 감사합니다!!

[@designbase]

감사합니다~!ㅎㅎ

[@smily094]

강의 잘봤습니다만 질문이 있는데요. PC 그리드일때 화면이 1200이나 그 이상이면 마진에 값을 주는 필요가 있나요? 1200이하라면 마진이 사용된다고 생각하는데 1200이상이면 마진이 필요가 없어보여서요

[@designbase]

마진을 주는 이유는 말씀하신대로 반응형을 위해 사용하는 것입니다. 데스크탑에서는 중앙 정렬처리되기에 상관없지만 랩탑 중 해상도가 1200이하의 화면에서 좌우에 꽉차보이는 문제가 있어서 마진을 주는 것 있습니다. 그리드다 보니 당장 눈에는 안보여도 개발할때는 마진 처리를 해놓습니다.

[@happysocialclub]

반응형에서 칼럼 기능 stratch type 3:59 (거터값은 고정이나, 칼럼 영역이 디스플레이 사이즈에 따라 늘어나는 기능) 컨테이너 폭 고정 4:26 (width가 빨간색 컬럼 부분에 해당하는 값) 그리드도 스타일로 관리 가능 6:09 (자주쓰는 그리드는 스타일화 해두는게 편함) 그리드 스타일 수정하기 6:45

[@blk2728]

좋은 영상 감사합니다👍👍👍

[@chp438]

좋은 영상 고맙습니다 컬럼에 대한 질문이 있는데 디자인 하면서 6단 4단 어떤 차이가 있나요?

[@designbase]

그리드를 사용하냐 마냐의 차이만 있고, 모바일 기준으로 4, 6단의 큰 차이는 없습니다. 3단 그리드를 자주 사용하는 경우라면 디자인과 개발을 편하게 하기위해 추가하는 것이라서요.

[@Louisvuitton100]

포토샵에서도 그리드 동일하게 해도되죠? 모바일 6단은 잘 안쓰나요? 그리고 좌우 여백 24 이렇게 주면 너무 넓을까요?

[@designbase]

6단도 사용해요~! 애초에 좁아서 4단이나 6단이나 큰 차이는 없습니다..ㅎㅎ 여백 24 주는곳도 가끔 있어요. 여백을 많이주면 시원해보이긴한데 저는 16~20을 주로 사용하는 편입니다

[@Louisvuitton100]

@@designbase 와 ㅠㅠ 진짜 감사합니다 작업하는데 너무 도움이됐어요 ㅠㅠ 그리고 하나더 좌우 여백과 가운데 패딩 다르게 하먄 안되나요? 4단 좌우 16 안에 얇은(?) 간격 20 이렇게요

[@designbase]

@@Louisvuitton100 다르게 해도 상관없습니다~!ㅋㅋ

[@chp438]

그리고 디자인 하면서 컬럼 값이나, 아이콘 디자인 그리드 값 같은건 어떻게 아는걸까요?

[@designbase]

아이콘 그리드값은 머티리얼 디자인 가이드에 아이콘 확인하시면 됩니다. uxui 강의에서 짧게나마 다루고 있으니 관심있으시면 시청 부탁드릴게요~!

[@_sunflower27]

우와 피그마도 처음이고 웹 관련 공부 하려고 배웠는데 이해가 잘돼요! 정주행 갑니다😊 설명 잘하시네요 ㅎㅎ

[@designbase]

감사합니다 :)