피그마, 디자인 그리고 8px
디자이너, 개발자 그리고 그 중간에 있는것들
피그마로 직접 그린 이미지최근 피그마 코리아 페이스북 그룹에서 활동하기 시작했다.
필자가 개발한 피그마 플러그인 'util+'를 만든 이유에 대해 포스팅했다.
포스팅 댓글들을 보니 생각보다 8픽셀에 집착?하는 디자이너들이 많은것 같더라.
이 사실을 알게 되고 플러그인 개발하는게 즐거워졌다.
8픽셀 디자인이 필요한 이유는 무엇인가?
여기에 대해서는 나보다 훨씬 잘 설명한 포스팅이 있어 소개한다.
https://medium.com/swlh/the-comprehensive-8pt-grid-guide-aa16ff402179
소개한 포스팅의 그림들만 봐도 왜 필요한지에 대한 설명이 된다.
8픽셀 기준으로 하면 모든 디바이스에서 디자인과 개발 결과물이 최적화 되는구나~
필자는 이런 생각을 가지고 디자인과 개발을 해왔다.
먼저 디자이너와 개발자가 보는 관점을 보자
피그마로 직접 그린 이미지위의 이미지는 필자가 디자이너와 개발자의 차이점에 대해 그려본 것이다.
디자이너는 2차원 시점으로 보고 개발자는 3차원 시점으로 본다.
피그마로 직접 그린 이미지파란점선으로 표시된 디자인 영역을 코드로 만들면 이렇게 보인다.
즉 디자이너가 작업한 결과물을 개발자가 만들어야 하는 코드인 거다.
개발자 관점에서 디자인을 트리구조로 생각하여 코드를 만들는 거다.
쉽게 얘기해서 한 집안의 족보를 만드는 것이다.
최초의 씨족을 기준으로 그 혈연 관계를 디자인 보고 알아 맞춰야 한다.
그래서 디자인의 한 부분이 바뀌면 혈연 관계를 다시 만들어야 하는것이다.
이때문에 개발자는 디자이너가 무언가 바꾸는걸 싫어한다.
전체 디자인에 대한 족보만 보면 이렇게 된다.
족보를 잘 그리는것도 상당한 노하우가 필요한 것이다.
그러면 각각의 구성원에 대한 생김새는 어떻게 될까?
개발에서는 CSS로 이들의 생김새를 그리는 것이다.
피그마로 직접 그린 이미지이것을 손으로 한땀한땀 한다고 생각해 보자.
디자이너가 만든 이미지 한장은 개발자에게 이렇게 많은 코드를 작성하게 한다.
한가지 이야기를 더하면, 개발자끼리 만나 이야기 나눌때 우스캣 소리로 이름( id='홍길동' ) 만드는게 제일 힘들다고 한다.
8픽셀 기준으로 코드를 하는것은 많은 이점을 준다.
width, height, margin, padding등을 CSS로 만들때 수치상 잘 맞아떨어진다.
값을 나누거나 더할때 항상 짝수이기에 족보의 수정이 있으면 훨씬 용이하게 작업할 수 있다.
위에서 보듯이 작성해야 할 코드양이 많기에 숫자로 표현되는것이 짝수일때 작업하기 수월한 것이다.
오늘의 글쓰기 끄읕~ ( 이글을 완성하기까지 꼬박 하루가 걸렸다 ㅜㅜ )
https://www.figma.com/community/plugin/885142896349849231/util%2B
