피그마 포지션 자세히 살펴보기
피그마의 포지션과 개발의 포지션은 어떤점이 다를까?
피그마의 포지션과 개발의 포지션은 어떤점이 다를까?
우선 위 스크린샷과 같은 디자인은 누구나 어렵지 않게 만들수 있다.
피그마에서는 화면에 그려진 디자인 객체들을 inspect창에서 css정보로 표시해준다.
피그마에서 보여주는 정보를 바탕으로 개발에 적용하면서 차이점을 찾아보자.
우선 page 안에 디자인 요소가 들어갈 Frame을 만들고 inspect창에서 css 정보를 확인해 보자.
position: relative 라고 표시가 되어 있다.
다음으로 디자인 요소들에 대한 정보들도 확인해 보자.
1번부터 5번까지의 디자인 객체들을 담는 frame을 만들어 그안에 각 요소들을 배치하고 inspect창에서 css 정보를 확인해 보자.
position: absolute 라고 모두 동일한 설정값으로 되어 있는것을 확인할 수 있다.
두 스크린샷을 통해 피그마에서는 포지션이란 설정값을 relative와 absolute의 값으로 표현해 주는것을 확인했다.
피그마를 통해 디자인을 할때는 2차원적으로 작업을 한다.
그러나 실제 피그마 객체들은 브라우저를 통해 렌더링이 된다.
포지션을 건물에 비유하면 위 스크린샷과 같이 보여진다.
relative는 건물 전체에 해당하고 absolute는 각층에 해당한다.
그리고 각층은 z-index에 의해 층수가 결정된다.
디자인을 할때에는 이런 내용들에 대해 몰라도 상관없다.
각각의 디자인 객체들은 absolute에 의해 서로의 위치에 영향을 주지 않기 때문이다.
하지만, 디자인을 개발에 적용할때 이런 내용들에 대해 정확히 이해하고 있어야 한다.
포지션에 대해 좀더 알아보고 싶은 분들은 아래 링크를 통해 보실 수 있다.
https://developer.mozilla.org/ko/docs/Web/CSS/position
위의 이미지는 디자인을 실제 개발에 적용한 상태이다.
피그마에서는 모두 absolute였지만 개발에서는 frame에 position: relative를 적용하고 그안에 필요한 디자인요소들을 position: absolute로 위치를 시켰다.
각 디자인들의 위치는 top, bottom, left, right를 이용하여 이동시켰다.
개발에서는 각 객체들간 위치가 상호 작용한다.
그래서 디자인한 이미지를 실제 개발에 적용할때 각각의 설정값들을 객체마다 올바르게 적용해야 한다.
디자인이 복잡해지면 그에 따라 개발 설정값들도 복잡해지게 된다.
개발 설정값이 복잡해지면 개발자는 힘들어진다.
이런 내용들을 이해하고 디자인을 하면서 개발자와 의견을 나누면 디자인과 개발사이의 커뮤니케이션 시간이 훨씬 줄어들거다.
