ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko nb ko ko ko en en ko ko ko ko ko ko ko ko ko ko ko ko ko ko ur ko nb ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko fr en ko ko el ko jbo ko ko jbo ko ko jbo ko ko en es ko ko ko ko ko ko en
그리드 시스템은 레이아웃을 잡기 위한 가이드로 콘텐츠 폭, 컬럼, 거터, 마진 4가지 요소로 구성됨.
다양한 해상도와 비율의 디바이스에 최적화된 레이아웃을 구현하기 위해서는 그리드 시스템은 필수다. Desktop, Laptop에서는 12단을 추천하며, Tablet은 6단, Mobile은 4단을 추천.
콘텐츠가 들어가는 최대 폭을 말하며 최대폭에 대한 기준을 잡을 때는 다양한 해상도를 고려해서 반응형에 최적화된 최대 너비 기준을 잡아야 함. 폭에 따라 디자인 느낌이 달라지는 데 많은 연령대의 사용자가 있다면 다양한 디바이스에 대한 대응이 필요함. 주로 Laptap처럼 작은 해상도에서도 짤리는 화면이 없도록 기준을 잡는다. (주로 사용하는 콘텐츠 폭 : 1200, 1440, 1600)
실제 콘텐츠를 포함하는 영역. 그리드를 몇 단으로 나눴을 때 한 단을 컬럼이라 하며 컬럼의 너비는 가변 영역이다.
컬럼과 컬럼 사이의 공간. 거터값은 넓을수록 시원한 느낌을 주지만, 너무 넓으면 그룹화가 안되어보이는 단점이 존재함.
콘텐츠 폭을 기준으로 좌우 여백을 말한다. 여백이 적당히 있어야 작은 해상도에서 덜 답답해 보인다. (추천 마진 – desktop : 40~120, Laptop : 40~80, Tablet : 24~40, Mobile : 16~20)
거터값은 넓을수록 시원한 느낌을 주지만 너무 넓으면 그룹화가 안 되어보이고, 너무 좁으면 답답해보이며 콘텐츠끼리 붙어보이면 오히려 가독성이 떨어질 수 있음.
종종 마진을 간과한 경우 작은 해상도의 스크린에서 볼 때 여백이 없어 답답해보일 수 있음.
해상도, 반응형 레이아웃, 브레이크 포인트
07. 지우고 자르는 툴바 Erase tool, Scissors tool – 일러스트레이터 기초 강좌
#24 SEO를 위한 메타태그 이해하기 – 웹 코딩 강좌
#10 제플린 올바르게 사용하는 방법 – 스케치 강좌
그라데이션 컬러 추천해주는 사이트
웹 주소 URL 짧게 만들어 주는 웹사이트
디자이너가 무조건 피해야 할 회사 유형
iPhone 13 Pro & iPhone Pro Hands 목업
차트는 데이터 시각화와 관련되며 라인, 바, 캔들, 타임라인 등 다양한 타입으로 활용됨. 보여주고자 하는 데이터의 성향과 가짓수에 따라 적합한 유형을…
데이터 형식은 다양한 유형의 숫자 및 언어 데이터를 나타냄. UI 내 시간, 요일, 날짜(Month, day, and year) 등 상황에 맞게…
햅틱, 사운드 디자인(Sound Design)
UI에서는 주로 시각적인 방식으로 전달되지만, 유저의 행동에 대해 *햅틱 기술을 활용한 진동(촉각)을 통한 피드백과 사운드 디자인(청각)을 통해 피드백을 주는 역할을…
Youtube Instagram Pinterest Naver Blog
포토샵 일러스트레이터 피그마 스케치 XD 프로토파이
웹디자인 웹코딩 인비전 프린서플 Lottie Three.js
소개 매거진 디자인 사전 북마크 무료 소스 문의하기 멤버십
© 2022 Designbase. All rights reserved.