서비스에서 사용되는 균일한 요소와 간격을 사용하여 UI의 체계적인 배열을 도와줍니다. 페이지, 템플릿, 컴포넌트의 사이즈와 간격 및 수치를 해당 단위로 맞춰 사용하는 것을 권장합니다.
페이싱의 기본 기본은 4와 8의 배수에 기반한 8가지로 규정을 사용합니다. 8의 배수는 가장 큰 기본 배수이며 8이 포함되고 있는 2와 4의 배수도 사용할 수 있습니다.
그림자를 통해 가장 도드라져 보여야 하는 요소의 위계를 명확하게 파악할 수 있도록 돕습니다.
컨테이너의 외각 모서리에서 공통의 규칙을 사용합니다.
모든 화면에서는 왼쪽과 오른쪽으로 16포인트의 공통 여백을 사용합니다.
일반적으로 원티드를 쓸 수 있는 웹 환경 및 앱 환경에 맞는 화면을 모두 대응하고 있습니다. 대응이 필요한 환경에 맞춰 아트보드 크기를 참고하세요.
일반적인 브라우저 해상도인 1440x960px을 기준으로 합니다.
iPhone X Safari에서 표시되는 영역 크기인 375x635px을 기준으로 합니다.
iPhone X 환경 해상도인 375x812pt를 기준으로 합니다. 가능하다면 최소 해상도인 375x667pt를 고려하세요.
Pixel 8 환경 해상도인 360x800dp를 기준으로 합니다. 가능하다면 최소 해상도인 360x640dp를 고려하세요.
웹에서 반응형으로 디자인할 때 너비 범위별 규칙을 안내합니다.
768px 미만 너비까지는 브레이크포인트 명칭으로 'xs'를 사용합니다. 모바일 환경을 고려합니다.
768px부터 991px 미만 너비까지는 브레이크포인트 명칭으로 'sm'를 사용합니다. 태블릿 세로 환경 대응이 필요한 경우에 고려합니다.
992px부터 1200px 미만 너비까지는 브레이크포인트 명칭으로 'md'를 사용합니다. 태블릿 가로 환경 대응이 필요한 경우에 고려합니다.
1200px 이상 너비부터는 브레이크포인트 명칭으로 'lg'를 사용합니다. 데스크톱 환경을 고려합니다.
