Grid

원티드의 그리드 시스템은 8px 기반의 일관된 간격 체계를 사용하여 모든 화면에서 조화로운 비율과 정렬을 만들어냅니다. 반응형 그리드는 다양한 디바이스 환경에서 콘텐츠가 자연스럽게 재배치되도록 지원함으로써 가독성과 시각적 안정감을 보장합니다.

Artboard size

원티드랩에서는 일반적으로 사용할 수 있는 웹, 앱 환경에 맞는 화면을 모두 대응하고 있습니다. 디자이너는 일반적으로 해상도 별 모든 화면을 디자인 할 필요 없이 아래 표시 된 대표 규격만 설계합니다.

환경	너비	높이	최대 너비
Web desktop	1440px	960px	1100px
Web Mobile	375px	635px	-
iOS	375pt	812pt	-
Android	360pp	800dp	-

명칭	대응 환경	너비	최대 너비
xs	모바일	0-768px	-
sm	태블릿 세로	768-992px	-
md	태블릿 가로	992-1200px	-
lg	데스크탑	1200-1600px	1100px(Padding 포함)
xl	데스크탑 대형	1600px~	1440px(Padding 포함)

예측 가능한 디자인 규칙 및 개발자와의 원활한 소통을 위해, 4배수 간격으로 구성하는 것을 권장합니다. 단, 시각 보정이 필요할 시 기본적으로 2px 단위로 움직이지만 불가피할 시 1px씩 조정할 수 있습니다.

20px의 간격을 두며, 화면의 너비에 맞게 유연하게 대응할 수 있는 컬럼 그리드를 사용합니다. 그리드는 해상도에 따라 자유롭게 컬럼을 병합하여 사용할 수 있습니다.

2단 컬럼 그리드를 사용하며 20px의 간격을 둡니다.

3단 컬럼 그리드를 사용하며 컬럼을 묶어서 사용할 수 있습니다.

12단 컬럼 그리드를 사용하며 컬럼을 묶어서 사용할 수 있습니다.