UI(User Interface, 사용자 인터페이스)는 사람들이 컴퓨터와 상호 작용하는 시스템을 의미한다. 보통 UI라고 하면 떠오르는 화면상의 그래픽 요소 외에도, 키보드, 마우스 등의 물리적 요소도 컴퓨터와 상호 작용하기 위한 시스템이므로 UI라고 볼 수 있다.GU
그리드(grid)는 수직, 수평으로 분할된 격자무늬를 뜻하며, 말 그대로 화면을 격자로 나눈 다음 그 격자에 맞춰 콘텐츠를 배치하는 방법이다. 그리드 시스템은 1970년대부터 사용되었으며, 책, 신문과 같은 인쇄물은 물론 건축, 미술과 같은 다양한 분야에서 사용되었고,
UI 디자인 패턴은 프로그래밍 시 자주 반복되어 나타나는 문제점을 해결하고자, 과거의 다른 사-람이 해결한 결과물을 재사용하기 좋은 형태로 만든 패턴을 의미한다.쉽게 말하면 자주 사용되는 UI 컴포넌트라고 할 수 있으며 재귀로 구현해보았던 Tree UI도 자주 쓰이는
좋은 UX를 만들기 위해서는 피터 모빌(Peter Morville)의 벌집 모형에서 제시한 UX의 7가지 요소를 알아보자 .. 유용성은 제품이나 서비스가 목적에 맞는, 사용 가능한 기능을 제공하고 있는가에 관한 요소이다. 계산기라면 계산을 틀리지 않고 맞는 결괏값이 나
사용자 흐름(user flow)은 사용자가 제품에 진입한 시점을 시작으로 취할 수 있는 모든 행동을 뜻하며, 보통 아래 이미지처럼 다이어그램을 그려서 정리한다. 사용자 흐름을 다이어그램으로 작성할 때, 기본적으로 세 가지 요소를 사용한다.직사각형 : 사용자가 보게 될
여기서, Heuristic(휴리스틱)이란?'체험적인'이라는 뜻으로, 완벽한 지식 대신 직관과 경험을 활용하는 방법론을 말한다.합리적인 시간 내에 적절한 피드백을 통해 사용자에게 진행 상황에 대한 정보를 항상 제공해야 한다.피드백이 존재하는가?피드백이 즉시 제공되는가?피
와이어프레임은 선(wire)으로 틀(frame)을 잡는다는 뜻으로, 제품 기획 단계에서 페이지를 어떻게 구성할 것인지 구조를 잡기위한 목적으로 만든다.와이어프레임을 표현할때의 품질 수준을 전문용어로 피델리티(fidelity)로 표현하며 3가지 레벨이 나눠진다.손으로 빠
Figma는 2016년 9월에 출시된 UI 디자인&프로토타이밍 툴로, 출시 이후로 꾸준히 점유율을 높여가다가 지금은 UI/UX 업계에서 가장 인기 있는 툴이 되었다. 가장 인기있고 강력한 UI 디자인 & 프로토타이핑 툴인 Figma는 와이어프레임, 프로토타입 제작 뿐
웹 표준이 무엇인지 본격적으로 알아보기 전에 웹은 정확히 무엇을 의미하는 지 알아야 한다. 웹은 두 글자로 정의하면 '공간'이라고 말할 수 있으며 문서, 이미지, 영상 등 다양한 정보를 여러 사람들과 공유할 수 있는 공간을 의미한다. 2000년대 초에는 인터넷 익스플로
웹 표준에서는 HTML을 시맨틱(semantic)하게 작성하는 것의 중요성을 강조한다. 시맨틱 HTML은 영단어인 semantic과 HTML의 합성어이고, 각 단어의 의미는 다음과 같다.semantic : 의미의, 의미가 있는 이라는 뜻의 영단어HTML : 화면의 구조
HTML 요소는 표시 방법에 따라 인라인 요소, 블록 요소로 나뉜다. 인라인 요소는 콘텐츠가 차지하는 만큼만, 블록 요소는 가로로 넓게 화면 영역을 차지하며, 대표적인 인라인 요소로는 <span>, 블록 요소로는 <div> 가 있다. 인라인 요소는 항상 블록
검색하여 원하는 결과가 상위에 있다면 1 페이지조차 전부 확인 안하고 넘어가는 경우가 대부분이다. 즉, 검색했을 때 검색 결과 상위에 없거나 뒤 페이지로 밀려난다면 아무도 찾지 않는 웹 페이지가 되어버린다.이런 사태를 방지하기 위해서는 검색 엔진의 작동 방식에 맞게
일반적으로 웹 접근성(Web Accessibility)은 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것을 뜻한다. 하지만 위에서 살펴봤듯 비장애인도 정보 접근에 제한을 받는 불편함을 겪을 수 있다.웹 접근
WAI-ARIA는 WAI와 ARIA를 합친 단어이다. WAI (Web Accessibility Initiative) : 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관ARIA (Accessible Rich Internet Applications) : 장애가 있는