안녕하세요!
오늘도 열심히 CSS를 깎는 개발자, 김피노입니다!
이번 시간에는 제가 직접 디자이너와 협업하면서 겪었던, 디자인 가이드를 만들 때 하면 좋은 것들 을 적어보고자 합니다.
물론 좋은 것들 이라는 단어는 지극히 주관적이기 때문에, "반드시 이걸 따라야 해!" 보다는, "이렇게 하면 어떨까?"라는 마음으로 봐주시면 감사하겠습니다 ☺️
직관적인 요소의 크기
반응형이라는 작업의 목적은 모든 디바이스에서 동일한 비율의 요소를 보여주기 위함입니다.
디자인 가이드를 받은 대부분의 개발자는, (요소의 너비) % (해당 디바이스의 너비) X 100 의 식을 사용하여 주로 계산합니다. 저만... 그런가요...?
만약 요소의 크기가 직관적이지 않다면, 개발자는 혼란에 빠지며 디자이너에게 "이거의 너비는 얼마인가요?"라는 질문을 하게 되고, 이것이 반복되게 된다면 개발자는 답장을 일일히 기다리느라 애가 타고, 디자이너는 답장을 일일히 해주느라 번거로운 상황이 연출되게 됩니다.
이 상황을 피하기 위해서는 요소의 크기가 직관적일 필요가 있다고 저는 생각했습니다.
내부 여백 기술하기
css 요소와 일반 디자인적 요소의 가장 큰 차이점이라면, 디자인 요소에는 내부 여백을 설정할 수 없지만, CSS 요소에는 내부 여백을 설정할 수 있다 라는 내용의 글을 작성한 적이 있었습니다.
이 말은 곧, 디자인 가이드를 작성할 때 내부 여백도 기술해야 한다 라는 뜻이기도 합니다.
직관적인 요소의 크기 챕터와 동일하게, 불필요한 커뮤니케이션을 방지하기 위해 하면 좋은 것 중 하나인것 같습니다.
일단 제가 기억하는 것은 이렇게 두가지네요!
댓글로 또 추가적인 의견을 달아주시면 다음 편에 반영해보도록 하겠습니다 :)
