본문 바로가기

UI

메뉴 (Menu) 메뉴란? 디자인 시스템과 디자인 컴포넌트의 정의는 사용자 경험 설계에 관계한 환경과 디자인 철학에 따라 시스템별로 상이한 규칙성을 지니게 됩니다. '메뉴'라는 일반적인 용어조차 시스템별로 다른 용도로 사용이 됩니다. GUI의 대부분의 요소들이 그렇듯, 메뉴 또한 현실의 메타포에 기반합니다. 식당에서 고르는 그 메뉴에서 기반한 것이며, 문화적으로 송나라에서 미리 음식을 만들어 골라서 먹을 수 있게 제공하던 서비스에서 기원하며 어원 상으로는 라틴어 'minutus(작게 만들어진 물건)'에서 파생된 불어 'menu'에서 기원한다고 합니다. '선택할 수 있는 작은 단위' 정도의 의미로 파악하는 것이 적절한 메뉴의 의미가 아닐까 싶습니다. 다소 넓은 범위의 이와 같은 정의는 사용자가 컨트롤할 수 있는 대부분의 항..
피그마(Figma) 기능 - 픽셀 그리드와 픽셀 스냅, 그리고 서브 픽셀 피그마는 기본적으로 디지털에서 픽셀 단위로 표현되는 디스플레이에 초점을 두고 제작된 디자인 프로그램입니다. 하지만 동시에 벡터 프로그램이라는 특성을 지니고 있습니다. 벡터 그래픽이 픽셀 단위로 표현될 때 이해가 필요한 부분이 바로 픽셀 그리드와 픽셀 스냅, 그리고 서브 픽셀입니다. 간략하게 이 개념들에 대해 알아 보고 피그마에서 이들을 활용할 수 있는 방법에 대해 알아 보겠습니다. 피그마의 뷰 설정 픽셀 그리드, 픽셀 스냅, 서브 픽셀 등의 개념과 관련된 항목들은 피그마의 '뷰' 메뉴에서 확인할 수 있습니다. 메인 인터페이스의 우측 상단에 있는 뷰의 퍼센테이지를 나타내는 드롭다운 버튼이 '뷰' 메뉴의 주요 메뉴들을 모아 놓은 버튼이기도 합니다. 픽셀 그리드 줌 레벨을 일정 레벨 이상으로 확대하면 나타나는..
피그마(Figma) 기능 - 마우스(마우스휠스크롤)로 수치 쉽게 변경하기 마우스로 디자인 요소의 값을 쉽게 변경할 수 있는 방법을 소개드리고자 합니다. 크게 드래그하는 방법과 스크롤로 변경하는 방법이 있습니다. 본 인터랙션은 대부분의 수치로 표시되는 항목들에 대해서 적용이 가능합니다. 수치를 일일이 기입하는 것에 비해서 작업 효율을 크게 높여줄 수 있는 부분이기에 피그마를 쓰시는 분들은 참고하시기 바랍니다. 1. 마우스 클릭 후 드래그로 수치 변경하기 변경하고자 하는 수치를 나타내는 항목의 아이콘 쪽에 마우스 커서를 올리면 마우스 커서가 '좌우 화살표'로 변경되는 것을 확인할 수 있습니다. 이 때 마우스를 오른쪽으로 드래그하면 값이 감소하고, 오른쪽으로 드래그하면 값이 증가합니다. 값을 더 높이거나 낮추기 위해서 화면 밖으로 마우스를 드래그하더라도 계속해서 값이 유지된 채로 ..
아토믹디자인(Atomic Design) 방법론, 간단하게 이해하고 응용하기 체계화와 유지관리와 구현 상의 효율성 등의 이유로 컴포넌트 단위의 UX디자인이 각광받기 시작했고, 이는 디자인시스템이라는 형태로 이전까지 화면 단위로 보여지던 디자인의 산출물이 변화하고 있습니다. 이러한 변화는 디자인 분야에서만 나타나는 변화의 현상이 아닌 프론트엔드 개발 분야에서의 기술 변화도 비슷한 형태의 변화 흐름을 보여주고 있습니다. 리액트나 뷰, 앵귤러 등 모던 프레임워크들이 컴포넌트 별로 분리된 개발을 지원하는 것이 그러한 양상 중 하나라고 볼 수 있습니다. 이러한 배경 하에 주목받는 디자인 방법론 또는 개념으로서 '아토믹디자인(Atomic Design)'을 들 수 있습니다. 본 포스트에서는 아토믹디자인이라는 방법론의 간략한 범위 내에서 기본 개념을 파악하고 이를 응용할 수 있는 방법에 대해서..
피그마(Figma) 기능 - 선, 폰트크기, 둥글기 유지한 채로 크기 조절하기 일반적으로 개체의 선, 폰트크기, 둥글기를 유지한 채로 사이즈를 조정하는 옵션은 Scaling stroke, radius, and font size와 같은 용어로 옵션에서 선택이 가능합니다. 이는 스케치와 일러스트레이터, 포토샵에서 모두 확인할 수 있는 옵션입니다. 다만 피그마의 경우와 이러한 옵션을 현재로서는 별도로 제공해 주지 않습니다(2019-10). 피그마에서 개체의 선, 폰트크기, 둥글기 등 개체의 현재 보여지는 속성 그대로 사이즈를 조절하기 위해서는 일반 트랜스포밍이 아닌 'Scale'이라는 별도 메뉴를 통해서 이를 진행해야 합니다. 이 메뉴는 'k'를 통해 접근 가능하며, 또는 무브 툴 하위에 서브메뉴로서 선택할 수도 있습니다. 위 그림에서 보시는 것과 같이 '스케일' 메뉴를 통해서 리사이징..
2016년 가을 공개된 구글 애널리틱스의 새로운 UI디자인 구글 애널리틱스를 이용하시는 분들은 얼마 전부터 UI 최상단에 곧 공개될 새로운 UI를 확인할 수 있는 페이지를 연결시켜 놓았습니다. 해당 페이지로 이동하면 주요 변경 화면에 대한 스크린샷을 제공하고 있습니다. 더불어서 곧 공개될 기업용 유료 서비스인 'Google Analytics 360'에 대한 소개도 함께 기재되어 있습니다. 이번 포스트에서는 세계에서 가장 널리 사용되는 관리자사이트(Admin Website) 중 하나인 구글애널리틱스의 곧 공개될 새로운 UI디자인에 대해 간략히 알아 보겠습니다. 리뉴얼 이전 구글 애널리틱스의 UI디자인 1. 단순화된 네비게이션새로운 구글 메테리얼 디자인 표준을 따릅니다.관리자 관련 서브헤더가 사라지고, 해당 내용은 네비게이션 최하단에 고정했습니다.좌측 네비게이션은 ..
팬톤의 새로운 디자인 어플리케이션 출시 '팬톤 스튜디오' 최근 세계적인 색상 연구 및 관련 상품을 제공하는 팬톤에서 디지털 환경에서 일하는 디자이너들을 위한 색상 관리 및 영감 어플리케이션을 출시했습니다. 팬톤스튜디오라는 이름의 이 어플리케이션의 주요 특징에 대해 간략히 알아 보겠습니다. 이 앱의 주요 기능을 말하자면 색상에 관련한 영감을 받을 수 있게 하고, 업무에 도움이 되는 색상 관련 정보를 제공함과 동시에 모바일, 데스크톱 등 플랫폼에 상관 없이 색상 관리를 가능하게 하며 더불어 소셜에서의 공유도 가능하게 해주는 앱이라고 할 수 있습니다. 약 53년 간의 기간 동안 글로벌 색상 관련 스탠다드라는 제공하는 업체로서의 역할을 해온 팬톤은 이번 새로운 앱을 발표하면서 디지털 시대에서의 색상 관리에 대한 새로운 패러다임을 제공하려 한다는 태도를 보이고 있습니다..
2016년의 웹디자인 & UI디자인 트렌드 7가지 다른 저작물들에 의해 영감을 받고 이를 팀에 공유하는 것은 팀 전체의 작업물을 보다 신선하게 하고, 디자인 수준을 더 높은 단계로 높이는 데에 긍정적인 역할을 한다고 합니다. SQUARE 205라는 디자인 에이전시는 그러한 작업의 일환으로 꾸준히 디자인 트렌드가 무엇인지 찾아보고 이를 정리하는 작업을 진행하고 있습니다. SQUARE 205가 바라보는 2016년의 웹디자인 & UI디자인 트렌드는, 전반적으로 2013~5년에 걸쳐 꾸준히 진행되온 디자인 트렌드가 보다 확장되는 개념이라고 합니다. 예를 들면 반응형 디자인이나, 모바일 기반 디자인은 이제는 표준으로 까지 자리를 잡았다고 할 수 있습니다. 헤더 이미지는 계속해서 크게 자리 잡게 될 것이고, 비디오와 애니메이션 또한 지속적으로 쉽게 이용될 수 있는..
외주/과외 문의

티스토리툴바