이 글은 초보 개자이너의 공부 과정이 담겼으니 매우 주절주절할 예정입니다 ..
인턴을 하던 중 디자이너님께서 이렇게 말씀하셨다.
8px 그리드도 한번 배경에 깔아놓고 작업해보는 연습도 해보시길 추천합니당:)
왜 맞춰야 한다는 걸까?! 라는 호기심에 일단 기존에 해뒀던 피그마 작업들을 8의 배수로 조금씩 찌끄려보기 시작했다.
그러나 사람이 모름지기 '왜?'라는 궁금증이 해소가 안 되면 답답하지 않은가?! (말투 왜이런가?!) 그래서 구글링 해보았다. 아래부터는 내가 공부한 내용 요약본.
px이 아니라 pt(dp)인 이유? : 화소밀도에 따라 달라지는 px에 비해, pt(dp)는 같은 비율로 보여지는 독립적인 수치기 때문이다.
화면 해상도에 따라 달라지는 공간을 측정하는 값이다.
1x resolution(@1x) 이라면 1pt = 1px이고,
@2x라면 1pt=4px이 된다.
8의 배수를 사용해 블록 및 인라인 요소의 치수, 패딩 및 여백을 정의한다.
그리드가 없으면 앱 전체의 디자인 퀄리티가 전반적으로 저하되어 보인다. 또한 서비스 일관성 부여와 유지보수가 어렵고, 디자인과 개발팀이 같은 시각을 공유할 수 없다.
크기나 여백의 요소에 8과 같은 짝수를 사용하면 다양한 디바이스를 쉽고 일관되게 조정할 수 있다. 1.5배 해상도의 디바이스들은 홀수를 깨끗이 렌더링하는 데 어려움을 겪는다.
참고: 8px 그리드의 시대가 끝나고, 4px 그리드의 시대가 열릴까?
출처, 참고 (감사합니다 꾸벅)
8-point 그리드로 디자인하기
The good line-height
The 8-Point Grid
8-Point 그리드 시스템
8 Point Grid, 더 적은 결정 = 더 적은 시간
figma에서 8의 배수로 간격 조정하는 기능
안녕하세요! 사이드 프로젝트 개발 포지션 제안드리고 싶어서 댓글 남겼어요. shyun.bae@gmail.com으로 연락주시면 감사하겠습니다:)