UI/UX 디자이너가 알려주는 디자인 시스템 구축 방법
"디자인 시스템, 처음에 이렇게만 하면 돼요." 실전 가이드!
안녕하세요! 비니입니다~
지난 번에는 디자인 시스템이 없으면 왜 안되는지 소개해드렸는데요,
오늘은 디자인 시스템 만드는 방법에 대해서 이야기하려고 해요!
"디자인 시스템이 왜 필요한지!" 이 글을 먼저 읽고 오시면, 오늘 내용이 훨씬 더 잘 이해되실 거예요.
디자인 시스템, 어디서부터 시작할까?
디자인 시스템이라고 하면 뭔가 대단히 거창하고 복잡해 보이지만,
사실 작은 것부터 차근차근 쌓아가면 충분히 시작할 수 있어요.
저도 회사에서 처음 도입할 때는 거대한 라이브러리를 만든 게 아니라,
컬러랑 버튼부터 정리했거든요.
그런데 신기하게도 그 작은 정리만으로도 팀 전체가 훨씬 편해졌어요~
1. 브랜드의 기초 자산 정리하기
디자인 시스템의 뼈대는 결국 브랜드 아이덴티티입니다.
그래서 제일 먼저 해야 할 건 기초 자산 정리예요!
컬러 팔레트: Primary / Secondary / Alert / Background
타이포그래피: Heading, Subheading, Body, Caption
이 두 가지만 정리해도 화면이 한결 깔끔해지고, 작은 수정에도 일관성이 유지돼요.
2. 반복되는 UI 컴포넌트 만들기
디자인하다 보면 계속 나오는 게 있죠.
버튼, 카드, 입력창 같은 것들요.
이런 요소들은 꼭 컴포넌트화해서 라이브러리에 넣어두는 게 좋아요.
예를 들어 버튼만 해도 기본, 호버, 클릭, 비활성화 상태가 다 다르잖아요.
이걸 매번 새로 만들면 너무 비효율적이에요.
미리 컴포넌트로 묶어두면 필요할 때 쏙 꺼내 쓸 수 있어서 훨씬 빨라진답니다!
3. 이름 규칙(Naming Rule) 세우기
의외로 무시하기 쉬운 부분이 이름 규칙이에요.
btn_primary로 할지, button/main으로 할지
정해두지 않으면 나중에 팀원이 헷갈려서 같은 버튼을 세 개씩 만들기도 합니다.
저도 예전에 이런 혼란을 겪고 나서부터는
꼭 네이밍 룰을 먼저 정해놓고 팀에 공유하고 있어요~
사소해 보이지만 협업에서는 정말 중요한 포인트예요.
4. 공유 가능한 문서화
디자인 시스템은 혼자만의 메모장이 아니라, 모두가 함께 쓰는 자산이에요.
그래서 Notion이나 Figma Docs, Confluence 같은 툴에 정리해두고, 팀 전체가 바로 확인할 수 있도록 공유하는 게 필수예요!!
"이건 어디에 있지?"라는 질문이 사라지면 협업 속도가 눈에 띄게 빨라진다구요!!
디자인 시스템을 구축하면 생기는 효과
제가 직접 경험하면서 느낀 장점은 크게 네 가지였어요.
작업 속도가 빨라진다: 있는 걸 재사용하니 매번 새로 만들 필요가 없어요.
협업이 매끄러워진다: 디자이너랑 개발자가 같은 기준으로 보니까 헷갈릴 일이 확 줄었어요.
일관성이 유지된다: 화면이 아무리 늘어나도 톤이 흐트러지지 않아요.
유지보수가 쉬워진다: 새로운 기능을 붙일 때도 기존 자산을 그대로 활용하면 돼요.
얼마 전 IT 개발 파트너인 똑똑한개발자랑 협업할 기회가 있었는데, 디자인 시스템을 정말 체계적으로 만들어 활용하고 계시더라고요.
그래서 그런지 협업 시에 결과물이 나오는 속도도 정말 빨랐고
소통이 정말 잘 된다는 느낌을 받았어요!
그래서 찾아보니 실제로 디자인 시스템 개선기를 다룬 블로그 글도 있더라고요!
저도 이 글을 참고해서 이번 글을 작성했는데요,
디자인 시스템에 관해 더 궁금하신 분들은 똑똑한개발자의 블로그 글도 확인해보세요!
디자인 시스템은 결국 팀 전체가 편해지기 위한 장치라는 걸 실감했어요.
디자인 시스템은 꼭 처음부터 거창하게 만들 필요는 없다고 생각해요!
하지만 그렇다고 무작정 새로 만들기만 할 필요도 없습니다.
오늘 소개드렸던 똑똑한개발자 홈페이지에도
무료로 공유되어 있는 노션 디자인 시스템이 있더라고요!
홈페이지 들어가셔서 좌측 하단의 햄버거 메뉴를 누르시면
Design System으로 공유되어있습니다!
"우리 팀도 당장 디자인 시스템이 필요할까?" 고민된다면,
일단 공개된 디자인 시스템부터 한두 가지 써보세요.
어느새 팀의 효율이 달라진 걸 체감하실 수 있을 거예요.
사용하다보면 어느새 우리팀만의 시스템이 만들어질 거랍니다!
다음에도 도움되는 디자이너 소식으로 돌아올게용!ㅎㅎ
