[피그마] Layout Grid 레이아웃 그리드로 디자인 기본 구조 만들기
Вставка
- Опубліковано 10 лис 2024
- [피그마] Layout Grid 레이아웃 그리드로 디자인 기본 구조 만들기
Layout Grid 레이아웃 그리드는 다양한 디바이스에 논리적이고 일관된 디자인을 만들도록 도와줍니다. 머티리얼 디자인의 가이드라인을 따라 피그마로 레이아웃 그리드를 만들어 보겠습니다.
material.io/de...
00:17 용어(컬럼,거터,마진,컨테이너) 설명
01:00 Material Design - Breakpoint System
02:06 레이아웃 그리드 설정 - 데스크탑, 모바일
03:53 그리드를 사용해서 패딩을 시각화하는 방법
05:44 컨스트레인트에 따라 레이아웃 그리드 리사이징하는 방법
10:05 Baseline Grid 베이스라인 그리드 설정
#피그마 #레이아웃그리드 #그리드시스템 #figma #layoutgrid #gridsystem #UXUIdesign
--------------------------------------------------------------------------------------------
루씨의 UXUI 디자인 채널입니다.
디자이너를 꿈꾸는 대학생, 취업 준비 중인 디자이너 등을 위한 기초적인 툴 강의를 하고 있습니다. 다양한 제휴(디자인 툴 리뷰, 디자인 책 리뷰), 강의 요청, 궁금한 부분 있으면 댓글 또는 메일(lucymygirl@naver.com)로 해주세요. 영상이 도움 되셨다면 구독,좋아요 부탁 드립니다!
Hello ~
Welcome to The UXUI Design Channel.
This channel offers UXUI design, Figma, Photoshop, Illustrator, HTML, CSS, data driven , GA.
I'm interested in design tool review, design book review ... and more fun reviews.
Contact me: lucymygirl@naver.com
Thanks for Watching! Happy Designingggggggggg ; )
--------------------------------------------------------------------------------------------
© 루씨의 UXUI 디자인. ALL RIGHTS RESERVED.
본 영상으로 강의, 영상 추출, 참고 영상으로 링크 제공 등 금지합니다.
![Reactive Design Concept [Figma]](http://i.ytimg.com/vi/jaI2E50wu2k/mqdefault.jpg)
![Reactive Design Concept [Figma]](/img/tr.png)
![[피그마] Figma Auto Layout Playground 새로워진 피그마의 오토 레이아웃 알아보기](http://i.ytimg.com/vi/qHMHgyqGPHs/mqdefault.jpg)
정말 좋은 채널이에요. 감사합니다. 설명을 너무 알기쉽게 잘해주세요. 어려운것을 쉽게. 진정한 선생님이십니다
😍댓글 감사합니다. 댓글에 힘내서 더 열심히 영상 제작하겠습니다!!!
정말 감사하게 수업듣고 있습니다. 감사합니다.
어어어엉ㅇ 감사해요 T.T 와우~~ 정말 큰 힘을 주시네요~~~ 혹시 영상으로 만들었으면 하는 부분이 있을까요?
레이아웃 그리드 선으로 양 끝 가이드선을 만들수 있는 기능이 있는지 몰랐어요! 감사합니다~
피그마는 사용할 수록 매력적인 툴입니다. 응원합니다!!! 화이팅~~~~
차근차근 너무 좋아요 감사합니다
시청해주셔서 감사합니다^^
강의 너무 감사합니다.
도움이 되셨다니 기뻐요~~ 영상 시청해주셔서 감사드립니다!!
오우 레이아웃 가이드를 여러가지로 쓸수 있군요 단순하게만 사용했는데
피그마의 레이아웃 그리드는 반응형 레이아웃으로 만들 때 유용합니다. 다양하게 연습해보세요. 영상 시청해 주셔서 감사합니다^^
영상 잘 봤습니다~,
브레이크 포인트에서 데스크탑은 column 12개 설정인데요, Desktop 1024에서 column을 11개로 지정하신 이유와, 1024에서 자동 설정된 좌우 margin 여백을 이렇게 많이 남겨놓은 상태에서 디자인을 제작해야되는것이 필수인지 이유가 궁금합니다.
그리고 반응형 웹페이지로 제작하려고 하는데 추가로 테블릿 768 사이즈 디자인 그리드랑 데스크탑 1920 사이즈는 각각 그리드를 정확히 어떻게 지정하면 되는지 알 수 있을까요?
안녕하세요 YJ 님 영상 시청해주셔서 감사합니다. 위 영상이 반응형으로 그리드 만든 것이 아닙니다.
반응형으로 만들때 1920 데스크탑 사이즈이면 컬럼 12개, 거터 20~30 정도 해보세요. type- strech로 해야 반응형 레이아웃 그리드입니다. 컨테이너는 사이트의 목적에 맞게 디자이너가 정해야해요. 어떤 사이트인지 모르니 제가 정해드릴수는 없어요^^;; 컨테이너가 정해지면 그에 따라 마진을 정하세요.
그리고 태블릿 768 일 경우 컬럼의 갯수는 8로 보통 해요. 머티리얼 가이드에 따라서 먼저 연습해보세요. 이것도 다 가이드라인이지 사이트의 성격과 목적에 따라 정하세요^^ 감사합니다!!!
@@UXUI 네 그렇군요, 기존에 웹 퍼블리셔 포폴 제작할 때 포토샵으로만 그리드와 레이아웃을 잡아왔었는데요,
이번에 처음 피그마 디자인툴로 제작해보면서 관련 책을 사서 봐도 딱히 사용 방법을 찾을 수 없어서 막막했는데 자세하게 설명 답변 해주셔서 도움이 많이 되었습니다, 감사합니다 :)
@@user-YJ90 응원합니다!! 멋진 포폴 만드세요
@@UXUI 감사합니다 :)
안녕하세요 프론트엔드개발자가 목표인 꿈을가지고있는 초보개발자입니다! 최근 개발공부를하면서 제가 HTML CSS가 틀만대충알고 기본이 부족하다는걸 깨닫고 다시 공부중인데 우연히 그리스 시스템분석이라는걸보았습니다 그걸파악하고 HTML CSS를 만들던데.. 웹페이지마다 기본적으로 그리드개수나 마진이나 gutter가 정해져있을까요?? 제가 이걸 왜궁금해하냐면 예를들어 네이버를 따라만든다고 가정하면 사이즈마다 화면이 다다르자나요? 근데 그걸보고 이게 coulum이 몇개인지 파악이 안되더라구요.. 기본적으로 모바일버전은 coulumn이 4개이고 데스크버전은 12개라던데 이게 정확히 맞는건지 궁금해서 여쭤봐요!
안녕하세요 윤재님
우선 질문이 간단하지 않아서 댓글보다는 메일 주시면 공부할 때 도움이 되는 것을 알려 드리겠습니다. lucymygirl@naver.com 으로 메일 주세요.
간략한 답변을 드리자면 그리드 시스템은 대부분 디자이너가 설정합니다. 개발자이시면 그리드 시스템이 왜 생겼으며 어떻게 적용하는지 공부하시면 좋습니다. 960.gs/ 이 사이트를 참고해서 보세요. 12 컬럼을 가장 많이 사용합니다. 이유는 반응형 레이아웃을 대응하기 좋기 때문입니다.
3:53