MUI를 사용하여 디자인시스템을 설계해보자

예전에 협업을 위해 반드시 활용해야 할 피그마 기능에 대한 글을 작성한 적이 있습니다. UX/UI 전문가에게는 매우 익숙한 내용이겠지만, 입문자들에게는 그 내용이 쉽지 않았을 것이라 생각됩니다. 이번에는 UX/UI 프로젝트를 시작할 때, 어떤 순서로 진행하면 좋을지 한 단계씩 설명해 보도록 하겠습니다.

지난 글 보러 가기: 협업을 위해 반드시
활용해야 할 피그마 기능

‍

준비물: 디자인 라이브러리

저는 디자인시스템을 만들기 위해 사용할 라이브러리로 MUI를 선택했습니다. MUI는 한국에 있는 프론트엔드 개발자들이 가장 선호하는 컴포넌트 라이브러리 중 하나입니다. MUI의 피그마 파일은 아래의 링크에서 사용하실 수 있습니다. 아래의 링크로 방문하신 후 복제(Duplicate)해 주세요!

• MUI 피그마 파일 확인하기: https://www.figma.com/community/file/912837788133317724
• MUI 공식 홈페이지: https://mui.com/

💡 왜 MUI를 써야하나요?반드시 MUI를 쓸 필요는 없습니다. 하지만 한국 개발자들에게 MUI는 가장 익숙한 라이브러리이기 때문에 이를 맞춰주면 초기 세팅 과정을 맞춰주면 개발자들에게 사랑 받을 확률이 높아집니다.

‍

💡 복제한 MUI 파일에 너무 많은 컴포넌트가 있어 혼란스러울 수 있어요. 새로운 파일을 하나 만드신 후, 사용하실 컴포넌트를 MUI 피그마 파일에서 옮기시는 것도 방법이에요! 우리가 사용한 컴포넌트들만 따로 모아놓는 파일을 만드는 거죠, 하지만 이 문서에서는 MUI 파일을 그대로 이용해서 작업하도록 할게요.

‍

‍

설정하기

타이포 설정하기

• MUI 피그마 파일 안에 있는 페이지 중에서 ↓ Full Access에서 Typography라는 페이지를 찾습니다.
• 이곳에서 이 디자인 라이브러리에서 사용하는 타이포들을 확인할 수 있습니다. 안타깝게도 이 폰트들은 실제 컴포넌트와 연결되지 않았고, 우리는 컴포넌트에 하나씩 연결해줘야합니다. ㅠㅠ
• 이곳에서 우리가 사용할 폰트와 사이즈로 변경하고, 이를 “create style”을 통해 생성합니다.
  • 팁: 슬래쉬(”/)를 통해 폴더를 만들어서 관리할 수 있어요~

‍

‍

‍

컬러 설정하기

• 타이포 설정을 마치셨다면, 컬러도 마찬가지로 설정해줍니다. 컬러를 설정하는 방법은 두 가지가 있습니다.
  • Fill 우측의 점 4개 아이콘을 클릭한 후, “create style”로 생성하기
  • 로컬 변수를 사용하여 생성하기
• 로컬 변수는 비교적 최근에 추가된 기능으로 저는 이것을 통해 생성하는 것을 좀 더 추천하는 바입니다. 여기에서는 로컬 변수로 설정하는 방법에 대해서만 소개해드리도록 할게요.

‍

로컬 변수(Local Variables)로 컬러 설정하기

‍

• 로컬 변수란, 자주 사용하는 숫자들을 변수로 설정하여, 한번에 바꿀 수 있도록 돕는 기능입니다. 컬러를 이렇게 설정할 경우, 라이트모드, 다크모드를 정말 쉽게 구현할 수 있어요. 종종 웹사이트와 앱의 색상을 조금 다르게 설정하는 경우가 있는데, 이때 활용하기에도 좋답니다.
• MUI에는 설정해야하는 색이 정말 많은데요, 이 중에서 일단 자주 쓰일 것 같은 색상들만 먼저 설정하도록 해볼게요. 저는 아래와 같은 색상들을 설정할 예정입니다.
  • White
  • Gray 100 ~ 1000
  • Primary Color: Main / Dark / 4p / 30p / 50p
  • Error: Main / Dark / 4p / 30p / 50p
  • Warning: Main / Dark / 4p / 30p / 50p
  • Success: Main / Dark / 4p / 30p / 50p
• 우측 메뉴에서 Local variables 우측의 필터 아이콘을 누르시고, “+ Create variable”을 누릅니다.
  • 우측의 + 버튼을 누르면 Dark 모드 컬러도 설정할 수 있습니다. 다만, 유료 계정만 할 수 있어요…

‍

💡 Main / Dark / 4p / 50p는 각각 왜 설정했나요?Main: 버튼 등에 사용할 기본색입니다.
Dark: 버튼이 호버 상태일 때 사용할 색이에요. 마우스가 올라갔을 때 버튼 색이 변한다면, 사용자가 클릭이 가능하다고 인지하는 데에 도움을 줍니다.
4p: 외곽선이 있는 흰 버튼의 호버 상태 때 사용할 색이에요.
50p: Disabled 된 버튼을 표시하기 위해 사용할 색상이에요.

‍

💡 Tip: 다크모드 쉽게 바꾸기화면 디자인을 마친 후, 화면을 선택한 후 우측 메뉴에서 Layer 섹션에서 우측 아이콘을 눌러주세요. 미리 설정해둔 Dark를 누르시면, Light 컬러였던 모든 요소들이 Dark로 변경됩니다. 잘 만들어진 디자인시스템은 다크모드를 클릭 한 번으로 해결할 수 있어요.

‍

‍

컴포넌트 디자인 개선하기

• 이제 우리는 디자인시스템의 컴포넌트들을 우리가 사용할 수 있는 형태로 개선할 차례입니다.
• 버튼: 저는 사용하지 않을 것 같은 Secondary, Info, Inherit 컬러를 지웠습니다. 또, 다크모드는 로컬 변수로 사용할 예정이기 때문에 지웠습니다.
• 텍스트필드: 저는 마우스오버된 상태에서 검은색보다는 앞서 설정한 Primary Color의 Dark가 더 잘 어울릴 것이라고 생각해서 변경했습니다.
• 잊지 않으셔야할 것은 사용된 타이포와 색상을 우리가 앞서 설정한 것들로 바꾸는 일입니다.

💡 제가 개선한 디자인은 아래에서 확인하실 수 있어요.. 보러가기>

‍

‍

디자인 시작하기

디자인 라이브러리의 커스터마이징을 모두 마치셨다면, 이제 이 컴포넌트들을 활용해서 디자인을 시작하면 됩니다! 이 컴포넌트들을 다른 피그마 파일에서 사용하기 위해서는 반드시 Publish 해주셔야합니다.

• 상단의 파일 제목 옆의 화살표를 누르시고 “Publish Library”를 클릭해주세요.

‍

• 그럼 이제 화면을 디자인하기 위해 새로운 파일을 생성해볼까요?

💡 왜 디자인 파일을 새롭게 만드나요?디자인시스템 파일에는 많은 컴포넌트들이 있기 때문에, 그 자체로 이미 많은 용량이 나갑니다. 화면을 디자인하는 파일을 별도로 둔다면, 작업을 더 쾌적한 환경에서 할 수 있어요.

‍

• 디자인시스템이 퍼블리시되었다면 좌측 메뉴에서 Asset > Libraries 아이콘을 통해 추가하고 사용할 수 있습니다.

‍

• 만든 컴포넌트를 사용하기 위한 방법은 두 가지가 있습니다. 편한 방법으로 사용하시면 됩니다.
  • 좌측 메뉴에서 검색하여 사용하기
  • 디자인시스템에서 컴포넌트를 복사한 후 붙여넣기

‍

💡 만약 디자인컴포넌트를 수정해야할 때는 어떻게 해야하나요?디자인 라이브러리 파일에서 업데이트한 후, 앞서 진행한 방법으로 다시 “publish” 해주시면 됩니다. 그러면 그 컴포넌트가 사용된 부분에서 모두 자동으로 업데이트 됩니다.

‍

마치며…

디자인시스템은 디자이너가 효율적으로 디자인하기 위해서도 필요하지만, 프론트 개발자가 개발을 효율적으로 하기 위해서도 반드시 필요합니다. 실제로 프론트 개발자가 디자이너를 채용할 때 가장 관심 있게 생각하는 역량이기도 합니다.

저는 전직장에서 만든 디자인시스템을 외주 프로젝트에서 활용하고 있습니다. 여러 환경에서 두루 사용할 수 있도록 디자인 시스템을 개선하고 있으며, 이는 외주 프로젝트의 기간과 노력을 단축시키고 최종 결과물의 만족도를 높이는 데에 도움이 되고 있습니다.

실제로 작업하시면 느낄 수 있겠지만, 초반에 디자인시스템을 구성하기 위해서는 많은 시간이 필요합니다. 이러한 이유 때문에 어느 정도 디자인 작업을 마친 후에 디자인 시스템을 설계하는 경우도 많습니다. 좋은 디자인 시스템을 갖추면 디자인 작업 속도와 개발자의 작업 능률과 만족도를 모두 만들 수 있으니, 디자인시스템을 만들고 끊임 없이 개선시켜 나가기를 추천합니다.

‍