디자인 시스템이란?
Design system
Youtube 영상도 있어요!
많이들 잘못 알고 계시는데 디자인 시스템은 UI KIT에 국한된 개념이 아니에요. 인터랙션에 대한 내용까지도 포함돼야 해요. (인터랙션이라는 말은 이해를 돕기 위해 그냥 '모션'이라고 부를게요). 그리고 스타일, 컴포넌트, 모션 등 이과 관련된 모든 가이드들을 통틀어 디자인 시스템이라고 해요.
디자인 시스템을 하나의 그림으로 정리하면 이런 모습이에요. 아주 간략하게 설명하면 레고 블록이랑, 그거를 어떻게 조립하는지에 대한 가이드북이라고 할 수 있어요. 이제 좀 더 자세하게 차근차근 설명해 드릴게요.
디자인 시스템 = 레고 블럭 + 조립 가이드
‘레고’를 예로 들어서 설명할게요. 레고로 자동차 모형을 만들어 팔려고 한다고 가정할게요. 그런데 내가 만들고 싶은 자동차 모형 패키지는 시중에 판매되고 있지 않아요. 그래서 내가 직접 블록부터 만들어야 되는 상황이에요. 그러면 당연히 어떻게 만들 건지 처음에 계획을 다 세워야 되잖아요? 그래서 맨 처음에 어떤 것들이 필요한지 계획 짜고 스케치하는 것부터 시작을 하게 될 거고요. 색상은 어떤 게 필요한지, 그리고 레고는 어떤 모양이랑 어떤 크기의 블록이 또 몇 개가 필요한지에 대한 결정도 다 해야 돼요. 그리고 그렇게 결정한 블록부터 하나씩 만들기 시작할 거고 그 블록을 가지고 조립을 하기 시작할 거에요. 조립할 때도 앞부분부터 뒷부분까지 차례로 쭉 조립하지 않을 수도 있어요. 예를 들어 바퀴 먼저 조립하고, 앞 범퍼 조립하고, 그 부품들을 이어 붙여서 조립하는 방법도 있어요. 그리고 어떻게 조립하면 되는지, 조립 가이드도 필요할 거예요. 이렇게 레고 블록들이랑 그것들을 조립하는 방법에 대해서 설명한 가이드. 크게는 이 두 가지를 합쳐서 디자인 시스템이라고 불러요. 다른 말로는 디자인 랭귀지라고도 해요.
아까는 레고를 예로 들어서 디자인 시스템에 대해 설명드렸었는데 이번에는 아토믹 시스템에 대해서 설명드릴게요. 이 개념은 ‘브레드 프로스트’라는 사람이 디자인 시스템을, 원자에다가 비유해서 만든 이론인데요. 개념은 아까 레고를 예로 들어서 설명한 거랑 비슷해요. 아토믹 시스템 원본 이론만 가지고는 설명이 충분히 되지 않는 부분이 있어서 제가 중간에 내용을 조금 추가했어요. 이번에는 원자를 사용해서 책을 만드는 경우라고 생각하시면 돼요.
모든 물질은 원자로 이루어져 있다고 하잖아요? 책을 만들 때도 어떤 원자들을 사용해서 어떤식으로 조립할건지에 대한 계획을 먼저 짜야 돼요. 우선 핵부터 만들고, 그걸 가지고 원자를 만들고 그리고 원자들을 조립하면 책이 만들어지게 돼요. 그런데 조립 물질들 중 어떤것은 원자가 3개짜리인 것도 있을 거고, 어떤 거는 12개짜리. 등등 조립의 갯수와 종류는 다양할 거예요. 아무튼 그렇게 해서 한 페이지를 만들고 또 그런 페이지들을 이어 붙여서 나중에 드디어 책이 완성되는 거예요.
‘디자인 시스템’을, ‘아토믹 시스템’을 예로 들어서 설명 드렸어요. 어떤 추상적인 개념을 이해하려면 이미 잘 알고 있는 익숙한 무언가에다가 연관 지어서 개념을 이해하는 것이 가장 빠른 방법이라고 하더라고요. 그래서 저는 ‘레고’로 예를 들었어요. ‘아토믹 시스템’은 워낙 유명한 이론이라서 같이 설명드렸어요.
마지막으로 웹사이트를 만드는 경우를 예로 들면, 어떤 색상을 메인으로 쓸 것인지, 그리고 폰트는 어떤 종류를 쓸 것인지를 먼저 결정하게 돼요. 피그마 용어로는 이런 것들을 ‘스타일’이라고 해요. 그리고 이제 어느 정도 시각적으로 형태를 갖춘 것들을 만들기 시작할 거고요. 예를 들면 버튼이라든가 텍스트 입력 필드. 이런 것들을 피그마 용어로 ‘컴포넌트’라고 해요. 그리고 이 스타일과 컴포넌트들에 대한 사용 가이드도 있어야 돼요. 이러한 스타일. 컴포넌트. 그리고 가이드를 통틀어서 ‘디자인 시스템’이라고 해요.
� TIP. 디자이너가 생각하는 컴포넌트, 개발자가 생각하는 컴포넌트의 개념이 조금 다름
컴포넌트를 얘기할 때 디자이너는 피그마에 있는 컴포넌트가 머리속에 떠오르고, 개발자는 VScode에 적혀있는 컴포넌트 코드가 떠오를거에요. 피그마에 있는 컴포넌트에는 이미 색상, 사이즈 등 속성값들이 적용되어 있어요. 그런데 VScode에 적혀있는 컴포넌트에는 그런 속성값들이 적혀있지 않아요. 이러한 차이는 컴포넌트 개념 말고도 꽤 많을 거에요. 이러한 차이들을 알고 계셔야 소통의 오류가 줄어들 수 있어요.
디자인 시스템 만드는 사람
디자인 시스템은 다 같이 만들어야 돼요. 디자이너가 개발하고 개발자가 디자인해야 한다는 뜻은 아니에요. 디자인 시스템에 들어가는 요소들을 만들 때라든가 사용 가이드를 만들 때 직접적인 관련자 모두의 의견을 반영해야 한다는 뜻이에요. 디자인 시스템은 기획팀. 디자인팀. 개발팀 이렇게 세 팀이 주로 보게 될테니 세팀의 의견을 반영해야 해요.
디자인 시스템 만드는 시기
그리고 이 디자인 시스템은 되도록 프로젝트 초기 단계부터 제작을 시작하는 것이 좋아요. 그런데 디자인 시스템을 처음부터 완벽하게 딱 완성시켜놓고 프로젝트를 시작하는 건 현실적으로 어려워요. 대신, 되도록이면 초반에 만들기 시작하되, 제품과 더불어 조금씩 계속 업그레이드 시켜주는 것이 좋아요. 왜냐하면 디자인 시스템 정리를 나중에 하면 할수록 손대야 할 곳들이 어마어마하게 많아지거든요. 그래서 아무리 제품 출시를 빨리 하고 싶다고 하더라도, 제품 제작에 들이는 시간만큼, 디자인 시스템 제작에도 시간을 써주시는 게 좋아요.
디자인 시스템 만들고 유지보수할 때 사용하는 툴
이 강의에서는 피그마만 사용했는데 실제로는, 다른 툴들도 같이 사용하시게 될 수도 있어요. 저는 디자이너라서 피그마와 노션을 주로 사용하고 있어요. 어떤 회사에서는 ‘프레이머’도 같이 쓴다고 하더라고요. 그런데, 되도록이면 사용하는 툴의 갯수가 적은 게 좋아요. 너무 많으면 어떤 내용이 어디 있는지 헷갈리더라고요.
디자인 시스템 유아이 키트(UI KIT) 파일 준비
디자인 시스템 하면 이런 유아이 키트(UI KIT)가 떠오르실거에요. 이런 유아이 키트(UI KIT) 는 이미 잘 만들어져 있는 파일이 아주 많아요. 우리는 이 중에 하나를 선택해서 각자의 제품에 맞게, 조금씩 커스터마이징을 해나갈 거예요. 그러려면 우선 디자인 시스템 유아이 키트(UI KIT) 파일을 하나 선택해 주세요. 이 강의에서는 피그마를 쓸거라서, 웬만하면 피그마 파일을 사용해 주세요. 유아이 키트(UI KIT) 파일은 해당 파일 제작사 웹사이트에 가서 다운받으셔도 되고, 피그마 커뮤니티에서 검색해서 다운받으셔도 돼요. 웹사이트에서 찾아보는 방법은 어려운 게 없으니까 저는 피그마 커뮤니티에서 어떻게 검색하고 열 수 있는지에 대한 방법을 설명드릴게요.
● 피그마 계정이 없으신 분은 먼저 피그마 계정을 하나 만들어주세요. 계정을 만드셨으면 로그인 하시고 피그마 화면, 좌측 상단의 홈 아이콘을 클릭해주세요.
● 본인 이메일 주소 부분을 클릭하면 드롭다운이 하나 열리는데 거기서 커뮤니티를 클릭해 주세요.
● 커뮤니티 화면이 열리면 화면 중앙에 있는 검색창에서 아까 골랐던 디자인 시스템 이름을 입력하고 검색해 주세요.
● 저는 머티리얼 디자인 시스템을 사용하려고 해요. 검색창에 그대로 입력해볼게요.
● 사용할 파일을 클릭하고, 우측 상단에 있는 파란 버튼을 클릭해주세요. 그럼 해당 파일이 열리게 돼요.
이번에는 이 파일을 복제해줄거에요. 이 파일을 그대로 써도 되긴 하지만, 파일을 복제하는 방법을 아시긴 해야 하니까 지금 복제를 한 번 해볼게요.
● 피그마 화면 상단 부분을 봐주세요. 거기 중앙에 보면 파일 제목이 보일거에요. 만약 제목이 안보인다면 키보드의 Esc키를 눌러주세요. 파일 제목이 안 보이는건 피그마 화면에서 뭔가 클릭한 상태여서 그럴 수 있어요. 그럴 땐 Esc키를 눌러서 선택 해제를 해주시면 돼요.
● 제목이 보이게 되면, 제목의 우측에 있는 조그만 화살표를 클릭해주세요. 그러면 드롭다운이 열릴거에요. 드롭다운 메뉴들 중 Duplicate을 클릭해주세요. 그럼 해당 파일이 복제돼요.
● 그리고 복제본 제목을 수정하고 싶으시면 제목 부분을 클릭해서 수정해주시면 돼요.
라이브러리에 올리기
라이브러리라는 것이 어떤 것인지, 간단하게 설명부터 하고 넘어갈게요. 개발자분이라면 라이브러리라는 개념이 이미 익숙하시겠지만, 디자이너에게는 이 개념이 낯설 수 있어요. 그래서 그분들을 위해서 쉽게 설명드릴게요.
라이브러리라는 기능이 있는 이유는 다른 파일에 있는 스타일과 컴포넌트들을 쉽고 빠르게 갖다 쓸 수 있게 하기 위해서에요. 디자이너가 들여다봐야 하는 파일이 2개 이상인 경우도 있거든요. 아직 프로젝트 아주 초기 단계라면, 그냥 유아이 키트(UI KIT) 파일에서 페이지를 하나 만들고 그곳에서 제품 디자인 작업을 해도 되긴 해요. 그런데 나중을 생각한다면 제품 디자인 작업은 유아이 키트(UI KIT) 파일에서 하지 말고 별도의 다른 파일에서 제작하시는 것이 좋아요. 작업을 하다보면 나중에는 파일 용량이 꽤 커지게 되거든요. 유아이 키트(UI KIT) 파일만 해도 내용이 많은데, 제품 디자인 파일과 두 개가 합쳐져 있으면 나중에는 파일 열 때도 오래 결리고 뭔가를 수정할 때도 좀 시간이 걸리게 되더라고요.
혹시 헷갈려 하는 분들이 계실까봐 여기서 잠깐 부연 설명을 하고 넘어갈게요. 유아이키트 파일은 디자인 스타일, 컴포넌트들만 모아둔 파일이에요. 제품 디자인 작업 파일은 그 컴포넌트를 가지고 실제 출시할 웹사이트나 모바일 앱 화면 디자인 작업을 하는 파일이에요.
그럼 다시 돌어와서 예기를 이어갈게요.
하지만 아쉽게도 이 라이브러리 기능은 피그마의 유료 회원들만 쓸 수 있어요. 유료 회원으로 가입해서 사용하고 계신 기업들도 있을 테니까 일단 설명드리기는 할게요.
라이브러리라는 말은, 말 그대로 도서관이라는 개념이에요. 도서관에는 책꽂이가 많이 있잖아요? 그런데 피그마에 있는 라이브러리는 마법의 도서관이라서 책꽂이에 꽂은 것은 무엇이든 무한대로 복제해 줄 수 있어요. 책꽂이에 스타일과 컴포넌트를 꽂을 수도 있어요. 그리고 팀원들은 그것들을 횟수의 제한 없이 마음껏 복제해서 쓸 수 있어요.
그리고 이 컴포넌트의 복제본은 ‘인스턴스’라고 불러요. 그리고 피그마의 라이브러리는 마법의 도서관이라서, 책꽂이에 꽂혀 있는 원본의 색상이나 크기 등 무엇이라도 하나 수정되면 그 복제본인 인스턴스들도 모두 자동으로 수정돼요. 원본 컴포넌트 하나의 색상을 보라색에서 빨간색으로 수정을 해줄게요. 그러면 이 컴포넌트의 인스턴스의 색상이 자동으로 빨간색으로 업데이트 돼요.
그러면, 이제 라이브러리 책꽂이에 컴포넌트들을 꽂는 방법을 설명드릴게요.
● 피그마 화면의 좌측 패널에서 에셋(Assets)을 클릭해주세요. 그럼 책 모양 버튼이 보일텐데 이게 라이브러리 버튼이에요. 이 버튼을 클릭해주세요. 그럼 팝업창이 열릴거에요.
● 팝업창에서 중앙 부분 Current file에 있는 Publish 버튼을 클릭해주세요. Publish는 직역하면 ‘출판하다’라는 뜻인데요, 출판하면 도서관 책꽂이에 꽂히게 되잖아요? 그래서 피그마에서의 퍼블리시 버튼은 피그마 라이브러리 책꽂이에 스타일이나 컴포넌트를 꽂는 것을 뜻해요.
● Move to team 버튼을 클릭해주세요. team이라는 건 그냥 폴더 같은 개념이라고 보시면 돼요.
● 이 파일을 옮겨갈 대상 팀을 선택하고 Move 버튼을 클릭해주세요.
● 그러면 Publish library 팝업창이 열리게 돼요. 여기서 Publish 버튼을 클릭하면 끝이에요. 그런데 Publish하려는 파일 용량이 크다면, 조금 오래 걸릴 수도 있어요.
유아이 키트(UI KIT) 파일에서 무엇인가를 변경하거나 새로 추가한 것이 있으면 그 새로운 내용들도 라이브러리에 업데이트 해줘야 돼요. 그런데 이때는 변경한 것들만 업데이트 되기 때문에 처음처럼 오래 걸리지는 않을 거에요.
라이브러리에서 꺼내 쓰기
그럼 이번에는 반대로, 라이브러리에 있는 요소를 꺼내 쓰는 방법을 설명드릴게요. 현재 이 파일은 유아이 키트(UI KIT) 파일이 아닌, 제품 디자인 파일이에요. 송지호님은 이 시안처럼, ‘구매하기’ 버튼을 하나 만드려고 해요.
좌측 패널에서 에셋(Assets) 탭을 클릭할게요. 그리고 라이브러리 버튼을 클릭할게요. 아까 라이브러리에 올린 유아이 키트(UI KIT) 파일의 토글을, ‘ON’으로 변경할게요. 그럼 좌측 패널에, 아까는 안 보이던, 책꽂이에 꽂혀 있는 요소들이 쭉 나타나게 돼요. 지금은 버튼이 필요한 거니까 검색창에서 버튼이라고 검색해볼게요. 적당한 버튼을 드래그앤드롭해서 꺼내 쓸게요.
꺼내 쓰는 방법에는 다른 두 가지 방법이 더 있어요. 하나는 리스트에서 이렇게 직접 찾아서 꺼내 쓰는 방법이에요. 다른 방법은, 유아이 키트(UI KIT) 파일을 열어서, 그곳에서 직접 복사하고 디자인 파일로 돌아와서 붙여넣기 하는 방법도 있어요.
제품 디자인 파일 준비
이제 유아이 키트(UI KIT) 파일을 사용할 준비가 됐어요.
탭 우측에 있는 플러스 버튼을 클릭해주세요. 파란색 버튼은 디자인 파일을(피그마 파일) 만드는 버튼이에요. 이게 디자이너들이 주로 사용하는 파일이에요. 보라색 버튼은 ‘피그잼’(Figjam) 이라는 파일을 만드는 버튼이에요. 피그잼은 도형을 서로 연결해주는 화살표를 그리는 것이 더 쉬워요. 기획자가 IA 그릴 때. 유즈케이스를(Usecase) 그릴 때 사용하는 툴이에요.
아무튼 파란색 버튼을 클릭하면 비어있는 새 디자인 파일이 생성돼요. 이제 디자인 작업은 여기서 해주시면 돼요.
다음 편에 계속 ...
연구하고 공부하고 정리하는 것을 좋아해요. 그래서 UXUI 분야가 잘 맞다고 생각하면서 일하고 있어요.
공통 관심사를 갖고 있는 사람들과 이야기를 나누는 것은 재미있으면서 역량을 키우는데에도 큰 도움이 되고 있어서 제가 좋아라하는 공부 방식이에요. 그러니 UXUI와 관련된 것이라면 무엇이든 편하게 물어봐주세요! =)
https://open.kakao.com/o/sKYOZ7Dc
