#1 CSS 변수로 디자인 시스템 구축하기

사실 나는 아직까지 개발을 제대로 해본적이 없다. 그러던 중, 이번 여름방학에 운 좋게 기회가 주어져 처음으로 웹개발에 도전해보게 되었다!

나는 '오디'라는 여행 계획 서비스의 프론트엔드 개발자로 참여했는데, 프로젝트를 진행하면서 새롭게 알게된 것들이나 공유하고 싶었던 것들을 기록해보려고 한다.

 

1. 디자인 시스템

[디자인] #3 디자인 시스템

 

몇달 전 디자인 공부를 하며 디자인 시스템에 대해 정리해둔 글이다.

 

사실 첫 프로젝트 때는 디자인 시스템이 뭔지도 제대로 몰랐고, 필요성을 딱히 느끼지 못했다.

디자인을 공부할 때는 디자인 시스템이 있으면 편리하다는 것을 알았지만, 설정하는 과정이 번거롭다고 생각해서 '굳이 꼭 써야 할까?'라는 의문이 들기도 했다.

 

그런데 이번에 프로젝트를 진행하면서 디자인 시스템은 정말정말 중요하다는 것을 몸소 깨닫게 되었다!

 

개발자들로만 이루어진 동아리였기 때문에 팀에서 누군가는 디자이너를 맡아야 했고, 디자인을 해본 내가 하게 되었다. 아래는 내가 피그마에 만들어둔 디자인 시스템이다.

 

버튼이나 캐릭터와 같은 요소는 피그마에서 컴포넌트로 만들어 두면 나중에 크기나 색상을 수정할 때 편리하다. 하지만 텍스트나 색상 같은 경우는 프론트엔드, 특히 CSS 작업와 직접적으로 연관되어 있다!

 

디자인 시스템을 만들어서 화면에 연결하게 되면 피그마에 아래와 같이 Local styles로 정의되는 것을 확인할 수 있다.

 

그럼 이러한 Local style을 CSS에 어떻게 적용할 수 있을까?

 

2. CSS에서 디자인 시스템 구축하기

 

우선 base.html에 style.css 파일을 링크로 걸어준다. (파일 이름은 상관없다.)

 

그 다음에 style.css 파일에 아래와 같이 root를 선언한다.

 

자 이제 세팅은 끝났다!

이후에 작업할 css파일에서 색상이나 텍스트에 스타일을 줄때는 var()함수를 써서 선언하면 된다.

 

또한 CSS 변수도 상속 대상이기 때문에 특정 요소에 사용자 지정 속성 값을 설정하지 않은 경우, 그 부모의 값을 사용한다.

 

3. 중요한 이유

 

겉보기에는 굉장히 쉽고 간단해 보이지만, 유지보수의 관점에서 보면 아주 유용하다!

 

예를 들어, 디자이너가 피그마에서 특정 색상을 변경해달라고 요청했을 때, 색상을 변수로 선언해 두었다면 root에서 해당 변수만 수정하면 된다. 하지만 변수를 선언하지 않고 매번 색상 코드를 직접 입력했다면, 일일이 코드를 찾아가며 모두 수정해야 하는 번거로운 작업을 해야 한다.