16년 동안 책, 논문, 리포트를 읽고
현업에서 유용하게 쓴 지식을 압축했습니다.
핵심 노트를 바탕으로 구성된 문제를 풀어
온전히 내 지식이 되었는지 확인합니다.
배운 지식을 적용하는 과제를 만듭니다.
성실한 과제에는 전문가의 자세한 피드백을 드립니다.
스마트폰, 컴퓨터, TV를 사용할 때는 우리는 ‘어떻게’ 쓸까요? 이 ‘사용자’가 ‘어떻게’ 도구를 쓰는지를 정의한 것이 바로 사용자 인터페이스입니다.
인류는 다른 생물보다 약점이 많았습니다. 시간이 흐를수록 신체만으로는 해결할 수 없는 다양한 문제가 생겼습니다. 문제를 더 잘 해결하는 도구를 끊임없이 개발했고 자연스럽게 도구를 쓰는 방법도 끊임없이 변했습니다.
사람은 목적을 달성하기 위해 기계를 사용합니다. 주로 눈으로 보고 손으로 조작하죠. 목적을 달성하는 데 사람이 들이는 노력을 인터랙션 비용이라 부릅니다. 이 비용은 크게 인지 부하와 신체 부하로 나뉩니다.
인터페이스는 하드웨어와 소프트웨어로 나뉩니다. 하드웨어는 손으로 만질 수 있는 물리적인 도구를 뜻하고 소프트웨어는 하드웨어를 움직이는 가상의 도구입니다. 사람으로 치면 하드웨어는 팔, 다리, 손 ,발 같은 것이며, 소프트웨어는 생각, 마음이라고 볼 수 있죠.
지식을 실제로 써보는 과제를 만듭니다. 충분한 수준이 될 때까지 피드백을 주고 받습니다.
색은 마치 불 같습니다. 적절하게 사용하면 원하는 결과를 얻을 수 있지만 과도하게 사용하면 내 디자인을 망쳐버릴 수 있습니다. 사용자가 우선순위에 따라 빠르게 행동할 수 있도록 도와야 하는 프로덕트 디자인에서 색을 정말 신중하게 사용해야 합니다.
과장하자면 앱 디자인의 80%는 타이포그래피라 해도 과언이 아니죠. 가장 많이 쓰이는 요소이기에 전체 분위기에 많은 영향을 끼치며, 사용자가 내용을 이해하고 빠르게 행동하는데도 많은 영향을 끼칩니다.
아이콘은 대상의 특징을 강조해 만드는 기호로 다른 언어보다 보편적으로 이해할 수 있는 시각 언어입니다. UI 아이콘, 픽토그램, 사인 등으로 대표되며 좁은 영역을 차지하면서도 의미를 전달할 수 있어 다양한 영역에서 쓰이고 있습니다.
UX 글쓰기(UX Writing)는 제품과 고객의 대화를 디자인합니다. 웹사이트, 앱과 같은 다양한 디지털 환경에서 쓰이는 기능적 텍스트를 작성하죠 사용자가 목표를 달성하는데 도움을 줄 수 있는 글을 작성하고, 나아가 통일된 목소리를 전달하는 역할을 하죠.
지식을 실제로 써보는 과제를 만듭니다. 충분한 수준이 될 때까지 피드백을 주고 받습니다.
레이어는 컴퓨터 그래픽 툴이 가진 특징 중 하나입니다. 자유롭게 여러 요소를 합성하고 되돌릴 수 있습니다. 수작업으로는 절대 할 수 없었던 다양한 시도와 표현을 할 수 있는 것이죠.
디자이너는 전달하려는 정보의 량과 성격에 맞게 사용자가 매끄럽게 탐색할 수 있게 도와야합니다. 최소한의 인지 부하로 불필요한 낭비가 없으면서 자연스럽게 시선이 흐르게 레이어를 배치합니다.
레이아웃은 특정 영역 안에 요소를 배치하는 것입니다. 스크린 레이아웃은 정적인 화면 균형 뿐만 아니라 서비스의 추상적인 공간의 구조를 적절하게 표현해야합니다.
청각 언어, 시각 언어와 마찬가지로 움직임 역시 언어의 한 종류입니다. 한정된 공간에 다양한 정보를 전할 수 있어 정적인 요소로 전하기 어려운 내용을 쉽게 전하고 자연스러움 한 스푼을 더해줄 수 있습니다.
지식을 실제로 써보는 과제를 만듭니다. 충분한 수준이 될 때까지 피드백을 주고 받습니다.
정보를 구성하는 구조에 대한 개념입니다. 도서관에서 책장을 어떻게 나눌지 책은 어떤 기준으로 배치할지에 대해 정하는 것이 곧 정보 구조입니다. 책을 찾는 것처럼 사용자가 원하는 정보에 쉽고 편하게 접근할 수 있는 것이 목표입니다.
디자이너는 현재 사용자 상태, 사용자가 시스템에 주는 정보, 시스템이 사용자에게 주는 정보 등을 꼼꼼하게 살펴 사용자의 경로를 설계합니다.
우리는 처음부터 모든 것을 다 만들지 않습니다. 언제나 이전에 만들어진 더 좋은 틀이나 도구가 있습니다. 이런식으로 항상 새로 만들지 않고 반복해서 사용할 수 있는 레고 조각이나 퍼즐처럼 쓸 수 있는 도구를 컴포넌트라고 부릅니다.
컴포넌트와 다양한 시각 요소를 이용해 페이지를 설계하고, 각 페이지에서 사용자와 상호작용하며 최종 결과에 도달하기까지의 과정을 설계합니다.
지식을 실제로 써보는 과제를 만듭니다. 충분한 수준이 될 때까지 피드백을 주고 받습니다.
버튼은 UI의 가장 기본적인 인터랙션입니다. 모든 UI는 버튼에서 출발한다해도 과언이 아닙니다. 사용자가 기계에게 의사를 전달하는 가장 단순한 요소입니다.
텍스트 필드는 사용자가 버튼으로는 알려줄 수 없는 정보를 전달하는 기초 요소입니다. 주로 키보드나 음성을 이용해 정보를 입력하는 컴포넌트입니다.
셀렉트는 기본적인 UI 요소 중 하나입니다. 정보를 골라 기계에 전달하는 기초적인 인터페이스입니다. 토글 형태로 On/Off 상태를 지입력하거나 여러 버튼을 눌러 정보를 입력할 수도 있습니다.
슬라이더는 주어진 범위 안에서 특정 값을 선택할 때 쓰는 입력 컴포넌트입니다. 슬라이더(Slider) 혹은 레인지 인풋(Range Input)이라고도 부릅니다.
탭은 많은 양의 정보를 큼지막하게 나눠 사용자가 이해하기 쉽게 돕습니다. 과거 오프라인에서 많은 량의 문서나 주소록을 공통 특성으로 묶어 구분하는 장치의 모습을 따왔습니다.
필터는 많은 양의 정보를 여과하기 위한 컴포넌트입니다. 주로 디지털 프로덕트에서 기준에 맞는 상품이나 콘텐츠를 원하는 기준으로 정렬할 때 사용합니다. 특히 스마트폰의 작은 화면에서 사용자에게 보여줄 수 있는 정보량에 한계가 있기 때문에 필터는 IT 서비스에서 필수적인 요소입니다.
페이지네이션(Pagination)은 페이지를 제어하는 컴포넌트입니다. 한정된 공간에서 여러 개의 페이지를 보여줄 때 사용합니다. 조회하는 정보의 맥락이 바뀌는 탭이나 필터와 달리 페이지네이션은 동일한 맥락의 여러 정보를 보여줄 때 사용합니다.
과정 표시(Progress Indicator)는 시스템의 진행 상황을 알려주는 컴포넌트입니다. 사용자가 기다리는 시간을 더 짧게 느끼게 하거나 과제를 수행할 의지를 북돋아 줍니다.
뱃지는 최소한의 요소로 정보를 알리는 컴포넌트입니다. 마치 옷에 작은 뱃지를 다는 것과 비슷합니다. 버튼처럼 쓸 수 있는 칩이나 태그와 달리 지금 현재 상태와 정보를 알리는 데 집중합니다.
태그는 대상이 되는 요소에 관한 상세한 정보를 단어로 표시하는 컴포넌트입니다. 뱃지는 주로 1개의 정보를 알릴 때 많이 사용하는 편이며 태그는 여러 정보를 알릴 때 사용하는 편입니다.
아바타는 사용자를 표현하는 컴포넌트입니다. 주로 메신저, 이메일, 게임, 화상 회의 등 사용자끼리 빈번하게 상호작용하는 서비스에서 쓰입니다.
다이얼로그는 중요한 정보를 전달하거나 사용자의 행동이 필요할 때 사용합니다. 마치 가게에 들어와 자리에 앉으려는 고객을 불러 세우는 것과 같은 행동입니다. 그래서 꼭 필요한 상황이 아니라면 사용하지 않는 것이 좋습니다.
바텀 시트는 진행하던 과업 중간에 별도 작업을 처리해야할 때 쓰는 컴포넌트입니다. 다이얼로그보다 복잡한 처리가 필요할 때 바텀 시트를 사용합니다.
챕터가 공개될 때마다 가격이 인상됩니다.
매주 화요일 아침, 16년 차 디자이너가 큐레이션한 디자인 트렌드를 모아보세요.
Want to receive push notifications for all major on-site activities?
