UX ⁄ UI 썸네일형 리스트형 웹 접근성(Web Accessibility) 4대 원칙 웹 접근성(Web Accessibility)은 '장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 동등하게 접근하고 이용할 수 있도록 보장한다'는 개념이다. 누구나 정보를 공유할 수 있는 정보 공간, '월드 와이드 웹'에서 웹 접근성이란, 내가 창조하는 인터넷 공간이 차별적인 공간이 되지 않기 위해서는 신경 써야 하는 부분일 것이다. 웹 접근성은 법적 의무사항으로 보장되어 있기도 하다. 한국형 웹 콘텐츠 접근성 지침(KWCAG: Korean Web Content Accessibility Guidelines) 중 가장 최근에 개정된 2.1 버전에 소개된 4가지 대원칙이 제시되어있다. 이 내용들을 눈여겨봄으로써 앞으로 어떤 것을 신경 써야 하는지 간단하게나마 살펴보자. 원칙 1 인식성 (perceivab.. 더보기 피그마(figma) 입문 - 생산성 끌어올리기 피그마를 제대로 활용하고 생산성을 끌어올릴 수 있는 3가지 방법을 알아보자. 1. 템플릿 활용 피그마 커뮤니티 탭에서 들어가보면 위와 같이 완성도 높은 템플릿들을 만나볼 수 있다. 이곳에 올라와있는 템플릿들은 프레임, 레이어 정리가 잘 되어있어 재활용성이 높고 레이어 관리를 어떻게 할지에 대한 감도 잡을 수 있다. 원하는 템플릿을 클릭하면 미리보기도 가능하고, 우측 상단의 Duplicate 버튼을 누르면 페이지 캔버스로 복제되어 바로 사용할 수 있다. 이 곳에서 원하는 템플릿을 찾지 못했다면 구글 검색 (검색어 예시: iOS figma template)을 통해서도 더욱 다양한 템플릿을 찾아볼 수 있다. 어마어마한 오픈소스 덕분에 무에서 유를 창조해내지 않아도 스타일의 UI디자인에 도전할 수 있다. 2. .. 더보기 UI디자인의 원리 - 아이콘(icon) 1. 간결성 간결하고 직관적인 형태로 명료하게 의미를 전달할 수 있어야 한다. 가독성을 최대화할 수 있도록 추상화한다. 복잡한 형태는 피한다. 2. 일관성 일관성 있는 디자인으로 통일감과 안정감을 줄 수 있어야 한다. 크기, 비례감, 스타일(fill or hollow) 등에 있어서 동일한 스타일을 유지한다. 선으로 된 아이콘일 경우, 선의 굵기, 선 끝처리 처리에 유의한다. 가독성을 위해서는 선의 두께를 2dp로 하는 것이 좋다. 선의 두께가 2dp 이하일 경우, 끝처리 반경은 1dp로 한다. System Icons - Icons and Images - iOS - Human Interface Guidelines - Apple Developer System Icons (iOS 12 and Earlier) .. 더보기 피그마(figma) 입문 - 기본 환경 이해하기 피그마(figma)는 전세계 UX, UI 디자이너가 가장 많이 사용하는 UI 디자인 프로토타이핑 툴이다. 가파른 성장곡선을 그리며 2017년에는 5위, 2019년에는 2위, 그리고 2020년에는 1위를 차지하며 스스로 '대세' 툴임을 보여주고 있다. (통계 출처: uxtools.co/) 이렇게 사랑받는 비결로는 다음과 같은 특장점을 들 수 있다. 1. 실시간 협업에 최적화 2. 높은 재사용성 - 스타일, 컴포넌트 활용 - 벡터 이미지 기반으로 디바이스별로 쉽게 리사이즈 가능 3. 무료버전에서도 충분히 기능사용 가능 4. 오프라인 상태에서는 사용이 제한적임 5. 서드파티의 오픈소스 플러그인, 템플릿이 풍부함 인터페이스 피그마의 인터페이스는 입문자도 빠르게 적응할 수 있도록 직관적으로 구성되어 사용자의 효율.. 더보기 색상 팔레트 만들기 (Color Scheme) 1. 어도비 컬러 (Adobe Color) (탐색메뉴) 다양한 컬러팔레트 제공 (색상 휠) 선택한 규칙에 따라 색상조합 생성 (테마 휠) 이미지를 업로드해서 대표색상 추출 가능 공식 홈페이지 2. 쿨러스 (Coolors) 하트 순으로 보여주어 색상조합 트렌드 파악 가능 공식 홈페이지 3. 클라우드플레어 (Cloud Flare) 색상조합에 컴포넌트를 얹어서 확인할 수 있음 공식 홈페이지 더보기 머티리얼 디자인(Material Design) 머티리얼 디자인이란? 머티리얼 디자인(Material Design)은 모바일, 데스크톱 등 다양한 디바이스들을 아우르는 하나의 일관된 구글의 디자인 가이드라인이다. 2014년, 구글이 스마트폰에 적용하면서 널리 퍼지기 시작했다. 빛에 따른 종이의 그림자 효과를 이용하여 입체감을 살리는 디자인 방식 채택했는데, 현대적인 출판물 디자인 원칙이 반영되어 다른 부가요소보다 컨텐츠 자체가 강조된다. 디자인 특징 머티리얼 디자인은 다음과 같은 슬로건을 내세운다. "Build beautiful products, faster." "Material is a design system – backed by open-source code – that helps teams build high-quality digital exp.. 더보기 이전 1 2 3 4 다음
