DesignSystem

반응형 웹 디자인(Responsive web design)

---

웹사이트가 다양한 디바이스와 화면크기에 맞게 구성 내용에 대한 일관적인 느낌을 유지하기 위해 조절하여 보여주는 디자인 접근 방식이다.

미디어 쿼리

CSS3의 중요한 기능중 하나로, 다양한 디스플레이 크기에 맞는 특정 스타일 규칙을 적용할 수 있다.

/* 기본 스타일 */
body {
  background-color: lightblue;
}

/* 화면의 너비가 600픽셀 이하일 때 적용되는 스타일 */
@media screen and (max-width: 600px) {
  body {
    background-color: lightpink;
  }
}

상대적 단위

고정된 픽셀 단위 대신에, 퍼센테이지(%)나 뷰포트 폭(VW,VH)같은 상대적 단위를 사용하여 레이아웃을 구성할 수 있다.

상대적 단위(em, rem)을 사용하면 텍스트 크기가 디바이스에 따라 적절하게 조정할 수 있다.

디자인 시스템(Design System)

---

디자인 시스템이란 재사용 가능한 구성요소와 패턴을 사용하여 대규모로 디자인을 관리하기 위한 가이드라인

특징

• 미리 만들어진 UI구성 요소와 요소를 활용하여 디자인을 빠르게 복제할 수 있다. -> 팀은 동일한 요소를 계속 사용하여 반복된 작업을 줄이고 의도치 않은 불일치의 위험을 줄일 수 있다.

• 디자인 리소스에 대한 부담을 줄여 다른 작업에 더 집중할 수 있다.

• 제품 및 부서 간에 시각적 일관성을 생성한다. -> 디자인 시스템은 구성 요소, 패턴 및 스타일을 통합하여 시각적으로 일관되고 동일한 생태계의 일부 인 것처럼 보이게 한다.

• 신입 직원에게 교육 도구 및 참고 자료롤 사용될 수 있다.

단점

• 디자인 시스템을 만들고 유지하는 것은 전문적인 팀이 필요한 시간 소모적인 활동이다.

• 디자인 시스템은 일회성 해결책이 아니다.

• 다른 사람들에게 디자인 시스템을 사용하는 방법을 가르치는 데 시간이 걸린다.

사용방법

기업은 예산과 필요에 따라 기존 시스템을 통쨰로 도입하거나, 기존 시스템을 회사의 필요에 맞게 조정하거나, 완전히 새로운 시스템을 구축하는 세 가지 접근 방식 중 하나를 선택하여 시스템을 설계할 수 있다.

디자인 시스템의 커스터마이징과 조정이 늘어날수록 기존 디자인 시스템을 사용함으로써 얻을 수 있는 비용 절감 효과는 줄어들고, 장기적으로는 자체 디자인 시스템을 만드는 것이 더 나을 수도 있다. 그러므로 회사의 상황에 맞게 잘 고려해야한다.