싸피에서 3번동안 프론트를 하면서
백엔드는 일찌감치 끝났는데 프론트는 왜 마감 마지막주까지 코딩을 하고 있을까?
라는 의문이 있었다.
프론트는 코딩을 못하나? 그건 아니다. 아무튼 아니다. ^^
프론트가 백엔드보다 어렵나? 그것도 아니다 백엔드도 어렵다.
최근에 디자인 시스템에 대해 공부하면서 이거다! 싶었다.
프론트가 마지막주까지 코딩하는 이유는
제대로 갖춰진 디자인 시스템 없이 개발을 하기 때문이라고 생각한다.
디자인 시스템이란?
디자인 시스템이란 디자인 원칙, 규격, UI 패턴, 컴포넌트를 포함하는 시스템이다.
시스템에 따라 디자인 원칙, UI 가이드 등 포함하는 범위가 다르다.
이렇게만 설명하면 감이 안 올수도 있는데
개발자라면 한번쯤 들어봤을법한 Material Design도 하나의 디자인 시스템이다.
디자인 시스템의 3가지 구성요소로는 다음과 같다.
- 스타일 가이드 : 색깔, 폰트, 아이콘 등
- 컴포넌트 : 버튼, 테이블 등
- 시스템 가이드 : 디자인 시스템을 관리할 가이드
문제점을 좀 더 뜯어보자
보통 2~3명이 일을 나눠서 가지는데 와이어프레임을 작성할 때부터 이미 머리가 아프다.
한사람이 하지 않는 이상 디자인의 통일성이 없기 때문이다.
디자인의 통일성을 겨우겨우 맞췄다 해도 개발을 하면 또 달라진다.
나와 다른 팀원의 구현한 화면의 글자 크기, 간격, 레이아웃 배치 등등 모두 다르기 때문이다.
그래서 개발을 다 했는데도 디자인의 통일성을 조금이라도 맞추기 위해서 마지막주까지 코딩을 하는것이다.
프론트 개발자라면 어쩔수없이 신경이 쓰이는 부분인거 같다.
그럼 프로젝트때마다 디자인 시스템을 구축해야될까?
장기적인 프로젝트거나 사용되는 플랫폼이 많은 경우, 디자인이 아주 중요한 경우 구축하는게 좋지만
싸피 특성상 그럴 시간까지는 절대 안될것이다.
그래서 나의 생각은 이미 만들어진 디자인 시스템을 참고하면
효율이 올라갈것이라고 생각한다.
디자인 시스템의 종류
이미 많은 회사에서 정립한 디자인 시스템이 있고 figma로 가이드를 제공하는 곳도 많으니까
마음에 드는 디자인 시스템을 가지고 와서 와이어프레임 제작에 참고해도 좋을거 같다.
- Google의 Material Design
- Apple의 Human Interface Guildeline
- Spotify의 Encore
- Socar의 SOCAR FRAME
- 라인의 LDS
등등 많은 디자인 시스템이 있다.
디자인 시스템의 장점
- 디자인의 일관성이 생긴다.
- 시간이 절약된다.
새로운 컴포넌트가 식별되어도 기존의 컴포넌트를 결합해 만들수 있으므로 - 의사소통에 도움이 된다.
컴포넌트 패턴의 명칭만 정리되어도 엄청 편할것
더 있겠지만 공부한 바로는 이정도가 체감된다.
이제 만들어보겠습니다.
원래는 있는 디자인 시스템의 컴포넌트들을 직접 구현해보려고 했는데
생각보다 웹 디자인 시스템은 마음에 드는게 없어서
컴포넌트 패턴만 디자인 시스템들을 보면서 정리하고
간단한 컴포넌트들은 직접 만들어두고 다른 프로젝트에도 사용할 수 있으면 좋고
컴포넌트 설계 공부에도 도움이 될거 같아서
만 들 어 보 자 !
