
감 말고 원리로 UI 디자인하기
바로 간결하고 아름다운 디자인
좋은 디자인에는 이유가 있습니다.
아름답고 기능적인 UI 만들기
비전공 학생부터 시니어 디자이너까지
제가 성장한 방식을 체계적으로 정리했습니다.
1명~200명 규모 스타트업 디자인 경험
16년 동안 책, 논문, 리포트를 읽고
현업에서 유용하게 쓴 지식을 압축했습니다.
핵심 노트를 바탕으로 구성된 문제를 풀어
온전히 내 지식이 되었는지 확인합니다.
배운 지식을 적용하는 과제를 만듭니다.
성실한 과제에는 전문가의 자세한 피드백을 드립니다.
채팅, 댓글, 이메일로 편하게
UX 디자인의 모든 것을 담을 때까지
가장 저렴하게 수강할 수 있는 기회
스마트폰, 컴퓨터, TV를 사용할 때는 우리는 ‘어떻게’ 쓸까요? 이 ‘사용자’가 ‘어떻게’ 도구를 쓰는지를 정의한 것이 바로 사용자 인터페이스입니다.
인류는 다른 생물보다 약점이 많았습니다. 시간이 흐를수록 신체만으로는 해결할 수 없는 다양한 문제가 생겼습니다. 문제를 더 잘 해결하는 도구를 끊임없이 개발했고 자연스럽게 도구를 쓰는 방법도 끊임없이 변했습니다.
사람은 목적을 달성하기 위해 기계를 사용합니다. 주로 눈으로 보고 손으로 조작하죠. 목적을 달성하는 데 사람이 들이는 노력을 인터랙션 비용이라 부릅니다. 이 비용은 크게 인지 부하와 신체 부하로 나뉩니다.
인터페이스는 하드웨어와 소프트웨어로 나뉩니다. 하드웨어는 손으로 만질 수 있는 물리적인 도구를 뜻하고 소프트웨어는 하드웨어를 움직이는 가상의 도구입니다. 사람으로 치면 하드웨어는 팔, 다리, 손 ,발 같은 것이며, 소프트웨어는 생각, 마음이라고 볼 수 있죠.
인터페이스는 하드웨어와 소프트웨어로 나뉩니다. 하드웨어는 손으로 만질 수 있는 물리적인 도구를 뜻하고 소프트웨어는 하드웨어를 움직이는 가상의 도구입니다. 사람으로 치면 하드웨어는 팔, 다리, 손 ,발 같은 것이며, 소프트웨어는 생각, 마음이라고 볼 수 있죠.
지식을 사용하는 과제를 만듭니다.
색은 마치 불 같습니다. 적절하게 사용하면 원하는 결과를 얻을 수 있지만 과도하게 사용하면 내 디자인을 망쳐버릴 수 있습니다. 사용자가 우선순위에 따라 빠르게 행동할 수 있도록 도와야 하는 프로덕트 디자인에서 색을 정말 신중하게 사용해야 합니다.
과장하자면 앱 디자인의 80%는 타이포그래피라 해도 과언이 아니죠. 가장 많이 쓰이는 요소이기에 전체 분위기에 많은 영향을 끼치며, 사용자가 내용을 이해하고 빠르게 행동하는데도 많은 영향을 끼칩니다.
아이콘은 대상의 특징을 강조해 만드는 기호로 다른 언어보다 보편적으로 이해할 수 있는 시각 언어입니다. UI 아이콘, 픽토그램, 사인 등으로 대표되며 좁은 영역을 차지하면서도 의미를 전달할 수 있어 다양한 영역에서 쓰이고 있습니다.
UX 글쓰기(UX Writing)는 제품과 고객의 대화를 디자인합니다. 웹사이트, 앱과 같은 다양한 디지털 환경에서 쓰이는 기능적 텍스트를 작성하죠 사용자가 목표를 달성하는데 도움을 줄 수 있는 글을 작성하고, 나아가 통일된 목소리를 전달하는 역할을 하죠.
지식을 사용하는 과제를 만듭니다.
레이어는 컴퓨터 그래픽 툴이 가진 특징 중 하나입니다. 자유롭게 여러 요소를 합성하고 되돌릴 수 있습니다. 수작업으로는 절대 할 수 없었던 다양한 시도와 표현을 할 수 있는 것이죠.
디자이너는 전달하려는 정보의 량과 성격에 맞게 사용자가 매끄럽게 탐색할 수 있게 도와야합니다. 최소한의 인지 부하로 불필요한 낭비가 없으면서 자연스럽게 시선이 흐르게 레이어를 배치합니다.
레이아웃은 특정 영역 안에 요소를 배치하는 것입니다. 스크린 레이아웃은 정적인 화면 균형 뿐만 아니라 서비스의 추상적인 공간의 구조를 적절하게 표현해야합니다.
청각 언어, 시각 언어와 마찬가지로 움직임 역시 언어의 한 종류입니다. 한정된 공간에 다양한 정보를 전할 수 있어 정적인 요소로 전하기 어려운 내용을 쉽게 전하고 자연스러움 한 스푼을 더해줄 수 있습니다.
지식을 사용하는 과제를 만듭니다.
정보를 구성하는 구조에 대한 개념입니다. 도서관에서 책장을 어떻게 나눌지 책은 어떤 기준으로 배치할지에 대해 정하는 것이 곧 정보 구조입니다. 책을 찾는 것처럼 사용자가 원하는 정보에 쉽고 편하게 접근할 수 있는 것이 목표입니다.
디자이너는 현재 사용자 상태, 사용자가 시스템에 주는 정보, 시스템이 사용자에게 주는 정보 등을 꼼꼼하게 살펴 사용자의 경로를 설계합니다.
우리는 처음부터 모든 것을 다 만들지 않습니다. 언제나 이전에 만들어진 더 좋은 틀이나 도구가 있습니다. 이런식으로 항상 새로 만들지 않고 반복해서 사용할 수 있는 레고 조각이나 퍼즐처럼 쓸 수 있는 도구를 컴포넌트라고 부릅니다.
컴포넌트와 다양한 시각 요소를 이용해 페이지를 설계하고, 각 페이지에서 사용자와 상호작용하며 최종 결과에 도달하기까지의 과정을 설계합니다.
지식을 사용하는 과제를 만듭니다.
버튼은 UI의 가장 기본적인 인터랙션입니다. 모든 UI는 버튼에서 출발한다해도 과언이 아닙니다. 사용자가 기계에게 의사를 전달하는 가장 단순한 요소입니다.
텍스트 필드는 사용자가 버튼으로는 알려줄 수 없는 정보를 전달하는 기초 요소입니다. 주로 키보드나 음성을 이용해 정보를 입력하는 컴포넌트입니다.
셀렉트는 기본적인 UI 요소 중 하나입니다. 정보를 골라 기계에 전달하는 기초적인 인터페이스입니다. 토글 형태로 On/Off 상태를 지입력하거나 여러 버튼을 눌러 정보를 입력할 수도 있습니다.
탭은 많은 량의 정보를 큼지막하게 나눠 사용자가 이해하기 쉽게 돕습니다. 과거 오프라인에서 많은 량의 문서나 주소록을 공통 특성으로 묶어 구분하는 장치의 모습을 따왔습니다.
꼭 알아야 하는 지식을 한데 모은 패키지
챕터가 공개될 때마다 가격이 인상됩니다.
개인 SNS에 후기, 클래스 URL, 태그를 공유하세요. 인스타그램은 @designcompass를 멘션해주세요.
https://designcompass.org/courses/ui-design/
#디자인나침반 #UI디자인 #온라인클래스
매주 화요일 오전
놓치면 안 될 디자인 소식 모아보기
클래스 할인, 커뮤니티 스케쥴 등 중요한 알림을 받으시겠어요?