Design System

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

사용자의 디바이스 크기에 따 유동적으로 변경되는 웹페이지를 만든는 접근 방식

CSS 미디어 쿼리를 사용하여, 디바이스 크기에 따라 화면의 레이아웃과 스타일을 조정하여 반응형 웹을 구현한다.

Media Query

미디어 타입, 디바이스 화면 너비, 디바이스 방향(가로 모드) 등 다양한 조건에 따라 스타일을 다르게 적용할 수 있다.

@media screen and (min-width: 767px) {
/* screen: 화면이 있는 기기를 의미 (모바일, 태블릿, 데스크탑), default가 screen 이므로 생략 가능 */
/* min-width: 최소 너비 지정, 767px보다 넓은 기기를 대상으로 스타일 적용 */
}

@media screen and (orientation: landscape) {
/* orientation: 가로모드를 식별할 수 있다. landscape(가로모드), portrait(세로모드) */
}

@media print {
/* print: 프린트 출력물의 스타일을 수정할 수 있다. */
}

Mobile First

작은 화면의 모바일 기기를 우선적으로 고려하여 웹 애플리케이션을 디자인하고 개발하는 방식

모바일 기기의 작은 화면을 먼저 작업하고, 점진적으로 더 큰 화면 크기에 맞게 디자인과 기능을 확장해 나간다.

왜 모바일을 우선적으로 고려해야할까?

• 모바일은 상대적으로 작은 화면 크기의 제약사항을 가지고 있기 때문에, 불필요한 정보를 거르고 컨텐츠의 핵심이 되는 부분을 강조하여 깔끔하고 간결한 컨텐츠를 만들어 나가게 된다.

• 모바일 이용자 수가 훨씬 많기 때문에 모바일 친화적인 애플리케이션을 만드는것이 중요하다.

• 기능을 단계적으로 확장하는 것이 상대적으로 더 쉽다.

Layout Grid

일관되고 확장 가능한 간격은 개발 및 디자인에서 추측을 없애는데 도움이 된다.

8pt Grid

• 가장 일반적으로 사용되는 레이아웃 그리드 시스템

• 디자인 내부 요소에 8의 배수를 사용하여 간격, 패딩 값을 지정하는 것

• 8과 같은 짝수를 사용해서 디자인에 공백을 두고 요소의 크기를 지정하면 깔끔하고 일관성있게 확장 가능

포인트(pt)란 화면 해상도에 따라 달라지는 공간 측정 단위

@1x 해상도는 1pt → 1px, retina(@2x) 1pt→ 2px, @3x 1pt → 3px

Retina Display란 애플에서 사용하는 디스플레이 기술로, 고밀도 화소(px)을 사용하여 보다 더 선명하고 부드러운 화면을 표시한다.

디자인 시스템(Design System)

제품을 만들면서 사용하는 여러가지 디자인 요소들을 모아둔 시스템 또는 원칙으로 제품을 효율적이고 일관되게 디자인 및 개발할 수 있도록 돕는다.

• SSOT(Single Source Of Truth, 단일 진실 원천)를 핵심 개념으로 삼는다.

• 디자인 시스템은 개발자와 디자이너간 커뮤니케이션의 이해도를 높히는 협업 도구로, 업무 생산성을 향상시킨다.

• 개발자와 디자이너, 서로 이해할 수 있는 공통된 용어를 사용하는 것이 좋다.

• 재사용이 쉬워야 하며, 개발자와 디자이너의 업무 효율성에 큰 도움이 되어야 한다.

SSOT란 데이터의 유일한 출처를 가지고 있으며, 모든 사용자가 동일한 정보에 접근할 수 있다는 것을 의미

개발자에게 유용한 휴리스틱

• 하나의 UI 패턴이 3회 이상 사용되는 경우, 재사용 가능한 UI 컴포넌트로 간주합니다.

• 하나의 UI 컴포넌트가 3개 이상의 프로젝트/팀에서 사용되는 경우, 디자인 시스템에 포함시킵니다.

디자인 시스템 요소

• Brand Identity → 조직의 브랜드를 대표하는 시각적 요소의 집합 색상, 폰트, 로고 등의 시각적 요소와 브랜드의 목표와 가치 등을 반영하는 요소들을 포함한다.

• Component & Pattern → UI에서 사용되는 버튼, 폼 등의 요소(컴포넌트)는 일관성 있게 디자인되어야 하며 그것들의 조합도 마찬가지로 일관성이 있어야 한다.

CTA(Call To Action) → 사용자의 특정 행동을 유도하는 디자인 요소

사용자의 관심을 끌고 기업의 목표를 달성하기 위해 필요한 동작을 유도하는 역할을 한다.

디자인 시스템에서 CTA의 색상, 위치, 크기 등의 스타일을 조절하여 사용자가 쉽게 인식할 수 있도록 만들어야 한다.

Atomic Design

UI 디자인을 작은 요소로 분해하여 관리하는 디자인 시스템을 만드는 방법론

• Atoms(원자) → 색상 팔레트, 글꼴, 사이즈, 컴포넌트(버튼, 폼) 및 다른 원자와 조합해서 분자를 만드는 모든 요소가 포함됨

• Molecules(분자) → 원자를 조합해서 만든 단순한 조각, 레이블이 포함된 입력폼, 제목행이 있는 테이블 등

• Organisms(유기체) → 분자들을 결합해 디자인 요소들 간의 상호 작용이 일어나기 시작하는 지점, 검색 필드, 네비게이션 메뉴바 등의 좀 더 복잡해지지만 반복 가능한 제품을 만들 수 있다.

• Template(템플릿) → 레이아웃, 그리드 시스템 등과 같이 화면의 구조를 정의하는데 사용됨

• Page(페이지) → 템플릿에서 정의된 구조와 디자인 요소들을 결합해 사용자가 실제로 볼 수 있는 최종 결과물

아토믹 디자인 시스템을 이용한 컴포넌트 활용