디자인 시스템에서 '스타일'이란?
등장인물 소개
� UX 디자이너: 김종귝님
� UI 디자이너: 송지호님
� 풀 스텍 개발자: 양둘찬님
스타일 종류
이제 스타일 만드는 방법, 사용하는 방법을 설명드릴게요. 스타일의 종류는 유아이 키트(UI KIT) 만든 회사마다 조금씩 다르게 정의하던데 그래도 대략적으로 정의하자면 이런 종류들이 있어요.
● Font (Typography)
● Color
● Elevation:
● Layout
폰트. 컬러. 레이아웃은 이미 알고 계실 것 같아서 Elevation에 대해서만 설명드릴게요. Elevation은 쉽게 말하면 그림자라고 이해하시면 돼요. 예를 들어, 버튼이 지면으로부터 공중부양해서 둥둥 떠있으면 그 밑에 그림자가 생기잖아요? 그 거리를 뜻해요. 그림자를 통해, 해당 대상이 지면으로부터 얼마나 떠있는지를 알려줘요. 그럴 때 그림자를 사용하기 때문에 그냥 그림자 값이라고 알고 계셔도 될 것 같아요.
유아이 키트(UI KIT)에 보면 스타일이 보기 좋게 잘 정리되어 있어요. 그런데 스타일 내용들은 피그마의 오른쪽에 있는 패널에서도 확인할 수 있는 내용들이에요. 그런데 디자이너의 시간을 투입해서 굳이 이렇게까지 정리해 놓은 이유가 있어요. 디자인 시스템은 어느 디자이너 한 명만 쓰는 것이 아니라 다른 팀원들도 같이 쓰는 것이기 때문이에요. 이렇게 해두면 스타일을 하나하나 클릭해볼 필요 없이 상세 내용을 좀 더 빠르고, 쉽게 이해할 수 있기 때문이에요. 이렇게 다 같이 쓰는 디자인 시스템을 만들 때는, 모두를 배려해서 만들어야 돼요.
스타일 만들기
이제 스타일 중 하나를 직접 만들어 볼게요. 기종귝님은 지금 유아이 키트(UI KIT) 파일에서 레이아웃 부분을 살펴보는 중이에요. 주요 레이아웃들을 가시적으로 만들어 놓기는 했는데 그걸 스타일로 저장할 생각은 하지 못했어요. 그래서 그냥 도형으로만 만들어 놨어요. 그런데 유아이 키트(UI KIT) 파일에서 레이아웃을 정리해 놓은 것들을 보니까 그 방법도 꽤 괜찮아 보여요. 그래서 이 화면 레이아웃을 스타일로 저장하려고 해요.
김종귝님은 예전에 도형으로만 만들어 뒀던 레이아웃 프레임을 유아이 키트(UI KIT) 파일에 복사 붙여넣기 해서 가지고 왔어요. 그리고 그 페이지가 선택된 상태에서 우측 패널의 디자인 탭을 볼게요. 그리고 layout Grid 영역에서 플러스 버튼을 클릭해줄게요. 그리고 점이 아홉개 있는 모양의 아이콘을 클릭할 거예요. 맨 위의 드롭다운에서 Grid 레이아웃을 만들 건지 Column (열) 레이아웃을 만들 건지, Row (행) 레이아웃을 만들 건지 선택할 수 있어요.
● Grid는 ‘격자’를 뜻해요. Column은 ‘열’을 뜻하고, Row는 ‘행’을 뜻해요.
우선 GNB 영역 레이아웃부터 만들어 줄게요. GNB는 화면 상단에, 가로로 길게 위치해 있으니까 Row를 선택해 줄게요. GNB 영역은, 화면에서 한개니까 count에 1을 적어주면 돼요.
● 색상은 빨간색으로 할게요.
● Type은 v-aline을 뜻한다고 보시면 돼요. Top을 선택하면, Row가 화면 위쪽을 기준으로 정렬돼요. Bottom 은 화면 아래쪽에. Center는 화면 중앙에 정렬돼요. 그런데 여기서 Stretch만 개념이 좀 달라요. 이걸 선택하면 행이 위아래로 늘어나면서 화면을 꽉 채워주게 돼요.
● Height에 60이라고 적으면 행의 높이가 60 픽셀(px)이 돼요.
● Offset은 Margin이에요. Offset에 10을 적으면 마진 10픽셀이 적용돼요.
● Gutter는 Row와 Row 사이의 간격이에요. 여기에 20을 적으면 row 사이의 간격이 20 픽셀이 돼요. 또는 알트키를 누른 상태에서, 입력필드 위에서 좌우로 드래그하면 간격이 조정돼요.
Footer와 Column 레이아웃도 추가해줄게요. 마지막으로 라이브러리에 올리기만 하면 돼요.
그런데 라이브러리에 올리려면 스타일에 이름을 붙여줘야 돼요.
● 우측에서 점이 네개 있는 모양의 버튼을 클릭할게요.
● 그러면 팝업이 하나 뜨는데 거기에서 우측 상단에 있는 플러스 버튼을 클릭해 주면 이름을 적어줄 수 있어요. Description 영역에는 이 스타일에 대한 설명도 쓸 수 있어요. 이름 정하고 Create style 버튼을 클릭해 줄게요.
● 그리고 좌측 패널로 가서 에셋(Assets) 라이브러리 창을 열어서 Publish 까지 해줄게요.
폰트랑 색상들도 이 과정이 동일해요. 어떤 폰트를 스타일로 저장하고 싶으면 해당 폰트를 클릭하고 우측 패널 텍스트에서 더 보기 버튼 클릭. 플러스 버튼 클릭. 그리고 이름 적어주고. Create style 버튼을 클릭해 주시면 돼요. 색상은 Fill 영역에서 설정해 주시면 돼요.
라이브러리에 있는 스타일 꺼내 쓰기
이번에는 송지호님이 라이브러리에 있는 스타일을, 꺼내 쓰는 상황을 살펴볼게요. 송지호님은 홈 페이지랑 제품상세페이지 디자인 작업을 끝냈어요. 이제 장바구니페이지 디자인 작업을 하려고 해요. 장바구니 페이지에는 이미지가 크게 들어갈 필요도 없고 텍스트도 좌우로 길게 꽉차게 들어가지는 않을 것 같아요. 그래서 메인 영역의 좌우 폭을 다른 페이지보다는 좀 더 좁게 잡아줄게요. 그런데 필요할 때마다 자꾸 새로운 레이아웃을 만들면 웹사이트 디자인이 전반적으로 일관성이 떨어져 보일 것 같아요. 그래서 이참에 이 웹사이트에 사용할 레이아웃들을 몇개 만들어서 스타일로 저장해두려고 해요. 그리고 앞으로, 새로운 페이지 디자인을 할 때, 왠만하면 그 스타일 중에 골라 쓸거에요. 꼭 필요한 경우에만 새 레이아웃 스타일을, 추가로 만들어 쓸거에요.
레이아웃을 스타일로 저장하는 방법은 방금 전에 설명 드렸으니까 이번에는 만들어 놓은 것을 가져다 쓰는 방법을 보여드릴게요. 이 장바구니에 쓸 레이아웃은 미리 만들어놨어요. 이름은 Cart 라고 지어줬어요. 그럼 이제 장바구니 페이지 디자인 작업하던 파일로 가서 이 레이아웃을 적용시켜줄게요.
● 제품 해당 페이지를 클릭하고,
● 우측 패널에 있는 레이어 그리드 더 보기 버튼을 클릭해줄게요.
● 그럼 스타일로 저장된 레이어들 목록이 나오는데 아까 미리 만들어 놨던 레이아웃 스타일을 클릭해줄게요.
● 그러면 이렇게 레이어 스타일이 페이지에 바로 입혀져요. 디자인 작업할 때 이 선에 맞춰서 작업해주시면 돼요.
레이아웃 스타일 만드는 방법을 설명한 김에 한가지만 더 설명드릴게요. UI 디자이너님이 피그마에서 레이아웃을 스타일로 저장하는 이유는 여러 페이지에 공통적으로 쓰는 특정 레이아웃이 있기 때문이에요. 마찬가지로 양둘찬님도 디자인을 코드화 할 때 여러 페이지에 공통적으로 사용하는 페이지 레이아웃은 컴포넌트화 작업을 미리 해두고 있어요. 그런데 피그마의 그리드 스타일 기능은 디자인 작업할 때는 유용하지만 양둘찬님이 보기에는 불편할 수 있어요. 상세 내용을 보기까지 거쳐야 하는 클릭이 너무 많거든요.
그래서 제가 UI 디자이너님에게 추천하는 방법은 페이지 공통 레이아웃을 스타일로 저장할 때 스타일로만 저장하지 말고 Rectangular나 Frame같은 요소를 사용해서 공통 레이아웃 페이지 틀을 잡아주시는 것을 추천드려요. 김종귝님이 처음에 도형으로 화면 레이아웃을 잡아놨던 것처럼요.
상단 네비게이션바 영역에 원하는 사이즈 도형을 위치시키고 필요한 경우 상단에 fix도 해주시고요. 좌측 LNB가 있을 경우에도 마찬가지로 좌측 해당 영역에 도형을 위치시키고 필요한 경우 버티컬(Vertical) 스크롤 설정도 해주세요. BP(Break Point)별로 화면도 만들어 주세요.
그러면 양둘찬님은 공통 컴포넌트 코드화 작업을 하실 때 이 내용들도 같이 확인해서 작업해주시면 돼요.
그리드를 스타일로 저장하는 방법을 알려드리는 김에, 공통 화면 레이아웃 내용을 전달하는 방법까지 설명드렸어요. 하지만 송지호님, 양둘찬님이 앞서 제가 제안드린 방법대로 해주신다고 하더라도 사람이 하는 작업이다 보니 디자인 시안을 코드화 하는 과정에서 뭔가 놓치는 부분이 생길 수 있어요.
예를들어 송지호님은 사용자가 LNB 영역 내에서 스크롤 하면 해당 영역만 스크롤 되는 것으로 디자인을 잡았어요. 이 때 우측의 메인 영역은 움직이지 않아요. 하지만 송지호님이 실수로 이 내용을 Description 영역에 적는 것을 깜빡할 수도 있어요. 아니면 송지호님이 어딘가에 적어두었다고 하더라도 이번에는 반대로 양둘찬님이 미처 해당 내용을 확인하지 못하는 경우가 생길 수도 있어요. 그래서 가장 좋은 방법은 송지호님이 어떤 의도를 가지고 화면 디자인을 하면 그 내용이 어느정도는 코드화까지 자동으로 되는 것이 가장 좋은 방법이에요. 프레이머나 로코파이 플러그인처럼요. 하지만 이 툴들은 송지호님에게 학습 장벽이 좀 높게 느껴질 수 있어요. 토큰에 대해 학습하는 것보다 더 크게요. (토큰에 대한 내용은 하단에 첨부한 링크 - 강의 영상내용을 참고해주세요. 피그마의 토큰스 스튜디오 Tokens studio라는 플러그인을 사용할거에요.) 그리고 학습 난이도와는 무관하게 어찌됐건간에 툴을 하나 더 쓴다는 것은 신경쓰고 관리해야할 일이 하나 더 늘어나는 것을 의미하기 때문에 거부감부터 들기는 해요. 이러한 심리적 장벽과 실질적 불편함을 감수하고서라도 프레이머 또는 로코파이 같은 툴들이 사용할 가치가 충분한지는 조금 더 살펴볼 필요가 있어서 저 역시 장단점을 따져보는 중이에요. 득이 더 많은 것으로 확신이 들게되면 해당툴들에 대한 사용방법도 강의 내용에 업데이트할게요.
연구하고 공부하고 정리하는 것을 좋아해요. 그래서 UXUI 분야가 잘 맞다고 생각하면서 일하고 있어요.
공통 관심사를 갖고 있는 사람들과 이야기를 나누는 것은 재미있으면서 역량을 키우는데에도 큰 도움이 되고 있어서 제가 좋아라하는 공부 방식이에요. 그러니 UXUI와 관련된 것이라면 무엇이든 편하게 물어봐주세요! =)
https://open.kakao.com/o/sKYOZ7Dc
�️ 온라인 강의
