본문 바로가기

디자인시스템

전 세계 정부 공공 UI/UX 디자인 시스템(가이드) 소개 디지털 정부 서비스에서 디자인 시스템은 공공 부문 웹사이트와 애플리케이션 전반에 걸쳐 일관된, 사용자 친화적이며 접근 가능한 경험을 만드는 데 중요한 역할을 합니다. 전 세계 여러 정부가 이러한 시스템을 도입하여 일관성을 보장하고, 사용성을 개선하며, 온라인 공공 서비스의 효율성을 향상시키고 있습니다. 다음은 다른 국가들의 정부 디자인 시스템에 대한 사례 연구로, 각 국가 정부가 디자인 시스템을 구축하고 실행하는 방식을 보여줍니다. 미국: 미국 웹 디자인 시스템(USWDS) 미국 웹 디자인 시스템은 연방 웹사이트용 오픈 소스 디자인 시스템입니다. 접근 가능하고 모바일 친화적인 정부 웹사이트를 구축할 수 있는 일관된 프레임워크를 제공합니다. 시스템에는 디자인 원칙, UI 컴포넌트 및 시각 스타일이 포함되어..
색 (Color) 색은 다루기가 매우 힘든 디자인 요소 중에 하나입니다. 무한에 가까운 색 조합 패턴 속에서 적절하지 못하거나 일관성 없는 색상 사용으로 이어지기도 매우 쉽습니다. 색에 대한 이론적 이해나 실용적 활용법 등은 이미 다른 수없이 많은 자료들이 있기에, 이 부분들은 제하고 디자인 시스템 제작 관점에서 색을 시스템화하는 일반적인 패턴과 관련 지식을 알아 보고자 합니다. 디자인 시스템의 색 체계화: 디자인에 최적화된 컬러 팔레트를 구축하는 과정디자인 시스템에서 색을 정의한다는 것은 디자인에 활용할 컬러 팔레트를 정의하는 과정이라고도 볼 수 있습니다. 이 과정에서 단순히 주관적인 판단이 아닌, 브랜드와 서비스 특성 및 사용자 등 복합적인 디자인 제반 요소들을 고려하여 최적의 효율/효과성을 지닐 수 있는 컬러 팔레트..
라디오 버튼 (Radio Button) 라디오 버튼? 라디오 버튼 역시 명칭과 기능이 현실에서의 메타포를 기반으로 합니다. 지금 세대는 모를 수 있지만, 과거 라디오 플레이어의 주요 버튼들의 의 동작은 하나의 버튼을 누르면 다른 버튼들은 모두 비활성 상태로 튀어 나오는 형태를 갖고 있었습니다. 아래 이미지를 참고하시면 이해가 편하실 수 있습니다. 이 버튼들은 라디오 주파수를 기억하는 Preset을 저장하는 데에 사용되거나, 아니면 카세트 테이프 이후 시대에는 카세트 테이프를 조작하는 용도로 사용되었는데, 공통적으로 하나의 선택값만을 활성화할 수 있다는 특징이 있었습니다. 하나의 선택값만을 활성화하는 속성을 그대로 유지하면서, 이와 같은 기능을 하는 GUI 상의 컨트롤 타입을 라디오 버튼이라는 이름으로 부르기 시작했습니다. 동그란 형태의 라디오..
메뉴 (Menu) 메뉴란? 디자인 시스템과 디자인 컴포넌트의 정의는 사용자 경험 설계에 관계한 환경과 디자인 철학에 따라 시스템별로 상이한 규칙성을 지니게 됩니다. '메뉴'라는 일반적인 용어조차 시스템별로 다른 용도로 사용이 됩니다. GUI의 대부분의 요소들이 그렇듯, 메뉴 또한 현실의 메타포에 기반합니다. 식당에서 고르는 그 메뉴에서 기반한 것이며, 문화적으로 송나라에서 미리 음식을 만들어 골라서 먹을 수 있게 제공하던 서비스에서 기원하며 어원 상으로는 라틴어 'minutus(작게 만들어진 물건)'에서 파생된 불어 'menu'에서 기원한다고 합니다. '선택할 수 있는 작은 단위' 정도의 의미로 파악하는 것이 적절한 메뉴의 의미가 아닐까 싶습니다. 다소 넓은 범위의 이와 같은 정의는 사용자가 컨트롤할 수 있는 대부분의 항..
아토믹디자인(Atomic Design) 방법론, 간단하게 이해하고 응용하기 체계화와 유지관리와 구현 상의 효율성 등의 이유로 컴포넌트 단위의 UX디자인이 각광받기 시작했고, 이는 디자인시스템이라는 형태로 이전까지 화면 단위로 보여지던 디자인의 산출물이 변화하고 있습니다. 이러한 변화는 디자인 분야에서만 나타나는 변화의 현상이 아닌 프론트엔드 개발 분야에서의 기술 변화도 비슷한 형태의 변화 흐름을 보여주고 있습니다. 리액트나 뷰, 앵귤러 등 모던 프레임워크들이 컴포넌트 별로 분리된 개발을 지원하는 것이 그러한 양상 중 하나라고 볼 수 있습니다. 이러한 배경 하에 주목받는 디자인 방법론 또는 개념으로서 '아토믹디자인(Atomic Design)'을 들 수 있습니다. 본 포스트에서는 아토믹디자인이라는 방법론의 간략한 범위 내에서 기본 개념을 파악하고 이를 응용할 수 있는 방법에 대해서..
외주/과외 문의

티스토리툴바