개발자를 위한 Figma 사용법 - 무슨 생각으로 디자인 하셨어요?
피그마의 장점 중 하나는 개발자가 디자이너의 의도를 파악하여 디자인 레벨과 개발 레벨의 UI 구성을 동일하게 가져갈 수 있다는 점입니다. 이 부분에 대해서는 뱅크샐러드 기술 블로그의 BPL 소개글에 잘 나와있으니 이 분들의 글을 참고해주세요.
저의 이전 글에서 Edit 권한일 때와 View 권한일 때 길이가 다르게 보이는 이유를 설명했고, 이를 해결하는 방법까지 함께 소개드렸습니다. 이번 글에서는 이를 넘어 디자이너가 무슨 생각으로 레이아웃을 짰는지 레이어 창을 보며 확인하는 방법을 알려드리겠습니다.
레이어 창을 보는 방법
우선 앞선 단계에서 했듯 작업할 레이어를 복사하여 새 파일에 붙여 넣었습니다. 그리고 그 파일에서 하단 영역만을 따로 복사하여 오른쪽에 붙여 넣었습니다. 여기서 눈여겨볼 곳은 좌측의 레이어 창입니다.
화면 좌측의 레이어 창을 보면 처음 붙여넣은 Article과, 그 안에서 아랫부분만 따로 복사하여 붙여 넣은 Article/Bottom 영역이 있음을 확인할 수 있습니다. 여기서 Article 옆에는 # 모양의 아이콘이 있고, Article/Bottom 옆에는 ◆ 아이콘이 있음을 확인할 수 있습니다.
# 모양의 아이콘은 '프레임'을 의미합니다. 화면을 그려내기 위한 기본적인 공간 역할을 합니다.
◆ 아이콘은 해당 레이어가 컴포넌트임을 뜻합니다. 여러 곳에서 재사용되며 해당 컴포넌트끼리는 구조가 동일하게 관리됩니다.
레이어를 조금 더 펼쳐보았습니다. 안드로이드의 XML 파일에서도 들여쓰기가 많이 될수록 내부에 있는 레이어이듯, 피그마 상에서도 동일한 구조를 가집니다. 효율적으로 UI를 관리하기 위해서는 레이어 창을 보며 가능한 디자이너가 피그마 상에서 작성한 화면과 동일한 위계를 가지도록 코드를 작성하는 것이 좋습니다.
앞서 언급했듯 45도 돌아간 네모 아이콘이 있는 Article/Bottom 은 컴포넌트입니다. 그런데 위쪽에 있는 Article/Bottom 옆의 사각형은 ◇ 속이 비어있지만, 아랫쪽의 컴포넌트는 ◆ 속이 차있습니다.
◆ 컴포넌트는 부모 컴포넌트이고, ◇ 컴포넌트는 부모 컴포넌트를 그대로 따라가는 자식 컴포넌트이기 때문입니다. 부모 컴포넌트가 변경되면 자식 컴포넌트가 함께 변경되지만, 자식 컴포넌트가 변경되어도 부모 컴포넌트는 변경되지 않습니다.
크게 중요한 부분은 아니기 때문에 '보라색 = 컴포넌트로 관리되는 중'이라는 점만 알아두시고 넘어가셔도 됩니다.
Stackview ( LinearLayout ) vs AutoLayout ( ConstraintLayout )
이 화면을 구현하려면 두 가지 방법을 떠올릴 수 있습니다.
1. 동일한 간격으로 여러 개의 뷰가 나열되어 있으니 Stackview( LinearLayout )을 사용한다.
2. Stackview( LinearLayout )는 오브젝트를 하나 더 만드는 것이니 성능을 위해 AutoLayout( ConstraintLayout )을 사용한다.
저의 추천은 3. 디자이너가 설계한 대로 따라간다 입니다.
피그마에서도 Stackview( LinearLayout )과 AutoLayout( ConstraintLayout ) 중 하나를 선택하여 구현할 수 있습니다. 여기서부터 용어의 혼란이 올 수 있는데, iOS에서 Stackview, 안드로이드에서 LinearLayout이라고 부르는 것이 피그마에선 AutoLayout으로 불립니다. 피그마의 AutoLayout은 iOS의 AutoLayout과 다르니 용어 사용에 주의할 필요가 있습니다.
용어 정리
- iOS : Stackview / AutoLayout
- AOS : LinearLayout / ConstraintLayout
- Figma : AutoLayout / 이름 없음
우선 디자이너가 어떻게 설계했는지를 확인하기 위해 레이어 창을 확인해봅니다. 해당 영역은 Article/Contents이고 그 안에 Article/Time부터 Article/Buttons 까지 5개의 그룹이 관리되고 있음을 알 수 있습니다.
Article/Contents 옆을 보면 수평으로 긴 네모가 2개 쌓여있는 아이콘을 볼 수 있습니다. 이 아이콘은 피그마 상에서 AutoLayout ( iOS : Stackview, 안드로이드 : LinearLayout ) 이 적용되어 있다는 뜻입니다. 즉, 해당 부분은 iOS의 경우 Stackview, 안드로이드의 경우 LinearLayout으로 작성하는 것이 맞습니다.
해당 레이어를 선택한 후 우측을 보면 AutoLayout ( iOS : Stackview, 안드로이드 : LinearLayout ) 이 어떻게 설정되어 있는지 확인할 수 있습니다. 이 레이아웃의 경우엔 spacing이 8로 설정되어 있으며 padding이 상하 12, 좌우 14로 설정되어 있음을 알 수 있습니다.
한 가지 더 살펴보도록 하겠습니다. 아이콘이 있는 영역을 보면 3개 아이콘이 동일한 간격으로 줄지어 배치되어 있는 것을 확인할 수 있습니다.
저라면 아이콘 4개를 하나의 Stackview( LinearLayout )으로 묶고 3번째 아이콘과 4번째 아이콘 사이에 HuggingPriority가 낮은 투명 뷰를 넣어( weight가 1인 투명 뷰를 넣어 ) Spacer 역할을 하도록 할 것 같습니다.
그리고 PageControl은 해당 StackView( LinearLayout ) 바깥에 생성하고 center를 Stackview( LinearLayout )과 일치하게 만들 것 같습니다.
그러나 디자이너의 의도는 달랐습니다. Article/Buttons 옆의 아이콘이 앞서 Article/Contents 에서 본 네모 2개가 아니라 # 임을 확인할 수 있었습니다.
따라서 4개의 아이콘과 PageControl은 Stackview( LinearLayout )으로 관리하지 않고 AutoLayout( ConstraintLayout )으로 관리하는 것이 맞습니다.
디자이너가 의도한 UI 구조를 개발자가 동일하게 가져가는 것은 매우 중요합니다. 당장 화면을 작성하는 일에는 큰 어려움이 없더라도 향후 화면을 수정하고자 할 때 구조가 다르다면 어느 한쪽은 쉽게 수정할 수 있지만 어느 한쪽은 손을 댈 수 조차 없는 막막한 상황이 발생할 수 있습니다.
따라서 가능한 좌측의 레이어 창을 계속해서 확인하며 디자이너의 의도에 따라 UI를 작성하는 것이 좋습니다. 만약 디자이너가 작성한 구조가 잘못되었거나 구현에 어려움이 있다면 독단적으로 구조를 바꾸기 전에 디자이너에게 상황을 설명하고 수정을 요청하는 것을 추천드립니다.