피그마 오토레이아웃 #Button

두 버튼의 서로 다른점이 보이는가?

피그마로 직접 그린 이미지

두 버튼의 서로 다른점이 보이는가?

일단 눈으로 보면 두 버튼 모두 동일하다.

그런데 그 안에 있는 설정값을 보면 다른점이 보인다.

피그마로 직접 그린 이미지

왼쪽은 오토레이아웃 값을 설정하지 않았고

오른쪽은 오토 레이아웃 값을 설정했다.

설정값은 틀리지만 보여지는것은 현재로선 같다.

피그마로 직접 그린 이미지

여기서 두 버튼의 텍스트를 바꾸어 보자.

그러면 틀린점이 나타날것이다.

위에서 보듯 오른쪽은 우리가 의도한 대로 알아서 바뀌었는데 비해 왼쪽은 텍스트를 둘러싼 박스가 그대로다.

디자인된 버튼을 개발자가 실제로 코드로 입히면 어떤 다른점이 달라질까?

직접 만든 css 비주얼 에디터

왼쪽 버튼은 별도의 추가된 코드 없이 디자인대로 박스와 텍스트를 코드로 넣은거다.

오른쪽 버튼의 경우 오토레이아웃에 해당하는 값들을 코드로 넣은거다.

오토레이아웃에서는 설정값이 몇가지 없는거 같은데 코드에서는 설정값이 늘어났다.

이부분을 자세히 살펴보자

직접 만든 css 비주얼 에디터

1번항목의 오토 레이아웃에 해당하는 display: flex로 우선하여 코드로 설정한다.

( display로 flex가 설정되지 않으면 아래 3가지 설정값은 브라우저상에서 적용되지 않는다. )

그런후 Horizontal에 해당하는 row값을 flexDirection에 넣어준다.

( Vertical의 경우는 column값을 넣어준다. )

수평정렬을 위해 alignItems에 값을 center로 넣어준다.

마지막으로 justifyContents 수직정렬을 위해 값을 center로 넣어준다.

피그마에서는 Horizontal 이 하나의 설정만으로 되지만 코드상에서는 4가지에 해당하는 설정값을 넣어주어야 하는거다.

2번 항목을 보면 좌우는 padding값 24px, 위아래는 paddin값 8px을 넣어주면 피그마에서 디자인한 버튼과 동일한 버튼이 코드를 통해 만들어진다.

이를 통해 디자인과 개발은 금성언어와 화성언어처럼 서로 다른 언어를 사용하는걸 알게되었다.

필자는 피그마로 버튼 디자인을 할때 오토레이아웃을 이용하여 버튼 만드는것을 권장한다.

이게 개발자 입장에서는 자신들의 언어처럼 보이기 때문이다.

---

오늘의 글쓰기 끄읕~ ( 글로서 위의 내용을 설명하려니 화면을 보며 설명하는거에 비해 10배이상의 시간이 걸린것 같다. ㅜㅜ )