디자인 나침반
UI 디자인 클래스

감 말고 원리로 UI 디자인하기

애플, 에어비앤비, 토스가
사랑 받는 이유

바로 간결하고 아름다운 디자인

어떤 디자인이
더 좋아 보이나요?

좋은 디자인에는 이유가 있습니다.

탄탄한 이론으로
수준 높은 디자인하기

아름답고 기능적인 UI 만들기

100명을 코칭하면서
가장 많이 받았던 질문

비전공 학생부터 시니어 디자이너까지

방값 못 내던 디자이너에서
헤드 오브 디자인까지

제가 성장한 방식을 체계적으로 정리했습니다.

디자인 임팩트를 만든
16년 경험 디렉터와 함께

1명~200명 규모 스타트업 디자인 경험

디자인을 배우는
가장 효과적인 방법

핵심 노트 읽고

16년 동안 책, 논문, 리포트를 읽고
현업에서 유용하게 쓴 지식을 압축했습니다.

지식 시험 풀고

핵심 노트를 바탕으로 구성된 문제를 풀어
온전히 내 지식이 되었는지 확인합니다.

레벨 과제 내기

배운 지식을 적용하는 과제를 만듭니다.
성실한 과제에는 전문가의 자세한 피드백을 드립니다.

막힐 때는 언제든
전문가에게 물어보세요.

채팅, 댓글, 이메일로 편하게

평생 소장
평생 업데이트

UX 디자인의 모든 것을 담을 때까지

커리큘럼

LV1. 사용자 인터페이스

정의, UI 디자인이 뭘까?

스마트폰, 컴퓨터, TV를 사용할 때는 우리는 ‘어떻게’ 쓸까요? 이 ‘사용자’가 ‘어떻게’ 도구를 쓰는지를 정의한 것이 바로 사용자 인터페이스입니다.

역사, 도구를 쓰는 법은 어떻게 변해 왔을까?

인류는 다른 생물보다 약점이 많았습니다. 시간이 흐를수록 신체만으로는 해결할 수 없는 다양한 문제가 생겼습니다. 문제를 더 잘 해결하는 도구를 끊임없이 개발했고 자연스럽게 도구를 쓰는 방법도 끊임없이 변했습니다.

신체, 영원히 변하지 않을 사람의 도구

사람은 목적을 달성하기 위해 기계를 사용합니다. 주로 눈으로 보고 손으로 조작하죠. 목적을 달성하는 데 사람이 들이는 노력을 인터랙션 비용이라 부릅니다. 이 비용은 크게 인지 부하와 신체 부하로 나뉩니다.

도구, 손에 잡히는 것과 잡히지 않는 것

인터페이스는 하드웨어와 소프트웨어로 나뉩니다. 하드웨어는 손으로 만질 수 있는 물리적인 도구를 뜻하고 소프트웨어는 하드웨어를 움직이는 가상의 도구입니다. 사람으로 치면 하드웨어는 팔, 다리, 손 ,발 같은 것이며, 소프트웨어는 생각, 마음이라고 볼 수 있죠.

도구, 손에 잡히는 것과 잡히지 않는 것

인터페이스는 하드웨어와 소프트웨어로 나뉩니다. 하드웨어는 손으로 만질 수 있는 물리적인 도구를 뜻하고 소프트웨어는 하드웨어를 움직이는 가상의 도구입니다. 사람으로 치면 하드웨어는 팔, 다리, 손 ,발 같은 것이며, 소프트웨어는 생각, 마음이라고 볼 수 있죠.

LV1 시험

배운 내용이 내 지식이 되었는지 확인하는 시험 문제를 풉니다.

LV1 과제

지식을 실제로 써보는 과제를 만듭니다. 충분한 수준이 될 때까지 피드백을 주고 받습니다.

LV2. 좋은 UI를 위한 그래픽

학문, 뿌리가 되는 기본

색은 마치 불 같습니다. 적절하게 사용하면 원하는 결과를 얻을 수 있지만 과도하게 사용하면 내 디자인을 망쳐버릴 수 있습니다. 사용자가 우선순위에 따라 빠르게 행동할 수 있도록 도와야 하는 프로덕트 디자인에서 색을 정말 신중하게 사용해야 합니다. 

문자, 귀로 듣는 언어의 기록

과장하자면 앱 디자인의 80%는 타이포그래피라 해도 과언이 아니죠. 가장 많이 쓰이는 요소이기에 전체 분위기에 많은 영향을 끼치며, 사용자가 내용을 이해하고 빠르게 행동하는데도 많은 영향을 끼칩니다.

아이콘, 눈으로 읽는 세계 공용어

아이콘은 대상의 특징을 강조해 만드는 기호로 다른 언어보다 보편적으로 이해할 수 있는 시각 언어입니다. UI 아이콘, 픽토그램, 사인 등으로 대표되며 좁은 영역을 차지하면서도 의미를 전달할 수 있어 다양한 영역에서 쓰이고 있습니다.

글, 사람과 사람의 대화

UX 글쓰기(UX Writing)는 제품과 고객의 대화를 디자인합니다. 웹사이트, 앱과 같은 다양한 디지털 환경에서 쓰이는 기능적 텍스트를 작성하죠 사용자가 목표를 달성하는데 도움을 줄 수 있는 글을 작성하고, 나아가 통일된 목소리를 전달하는 역할을 하죠. 

LV2 시험

배운 내용이 내 지식이 되었는지 확인하는 시험 문제를 풉니다.

LV2 과제

지식을 실제로 써보는 과제를 만듭니다. 충분한 수준이 될 때까지 피드백을 주고 받습니다.

LV3. 좋은 UI를 위한 컴포지션

레이어, 되돌릴 수 있는 종이 접기

레이어는 컴퓨터 그래픽 툴이 가진 특징 중 하나입니다. 자유롭게 여러 요소를 합성하고 되돌릴 수 있습니다. 수작업으로는 절대 할 수 없었던 다양한 시도와 표현을 할 수 있는 것이죠.

조직화, 부분의 합은 전체가 아니다.

디자이너는 전달하려는 정보의 량과 성격에 맞게 사용자가 매끄럽게 탐색할 수 있게 도와야합니다. 최소한의 인지 부하로 불필요한 낭비가 없으면서 자연스럽게 시선이 흐르게 레이어를 배치합니다.

레이아웃, 처음부터 그 자리에 있듯

레이아웃은 특정 영역 안에 요소를 배치하는 것입니다. 스크린 레이아웃은 정적인 화면 균형 뿐만 아니라 서비스의 추상적인 공간의 구조를 적절하게 표현해야합니다. 

움직임, 생동감을 일으키는 자연스러움

청각 언어, 시각 언어와 마찬가지로 움직임 역시 언어의 한 종류입니다. 한정된 공간에 다양한 정보를 전할 수 있어 정적인 요소로 전하기 어려운 내용을 쉽게 전하고 자연스러움 한 스푼을 더해줄 수 있습니다.

LV3 시험

배운 내용이 내 지식이 되었는지 확인하는 시험 문제를 풉니다.

LV3 과제

지식을 실제로 써보는 과제를 만듭니다. 충분한 수준이 될 때까지 피드백을 주고 받습니다.

LV4. 좋은 UI를 위한 인터랙션

정보 구조, 도서관에서 책 찾기

정보를 구성하는 구조에 대한 개념입니다. 도서관에서 책장을 어떻게 나눌지 책은 어떤 기준으로 배치할지에 대해 정하는 것이 곧 정보 구조입니다. 책을 찾는 것처럼 사용자가 원하는 정보에 쉽고 편하게 접근할 수 있는 것이 목표입니다.

입력과 출력, 기계와의 대화

디자이너는 현재 사용자 상태, 사용자가 시스템에 주는 정보, 시스템이 사용자에게 주는 정보 등을 꼼꼼하게 살펴 사용자의 경로를 설계합니다. 

컴포넌트, 효율적인 퍼즐 조각

우리는 처음부터 모든 것을 다 만들지 않습니다. 언제나 이전에 만들어진 더 좋은 틀이나 도구가 있습니다. 이런식으로 항상 새로 만들지 않고 반복해서 사용할 수 있는 레고 조각이나 퍼즐처럼 쓸 수 있는 도구를 컴포넌트라고 부릅니다.

패턴, 배울 필요 없는 익숙함

컴포넌트와 다양한 시각 요소를 이용해 페이지를 설계하고, 각 페이지에서 사용자와 상호작용하며 최종 결과에 도달하기까지의 과정을 설계합니다.

LV4 시험

배운 내용이 내 지식이 되었는지 확인하는 시험 문제를 풉니다.

LV4 과제

지식을 실제로 써보는 과제를 만듭니다. 충분한 수준이 될 때까지 피드백을 주고 받습니다.

LV5. 좋은 UI를 위한 컴포넌트

버튼 만들기

버튼은 UI의 가장 기본적인 인터랙션입니다. 모든 UI는 버튼에서 출발한다해도 과언이 아닙니다. 사용자가 기계에게 의사를 전달하는 가장 단순한 요소입니다.

텍스트 필드 만들기

텍스트 필드는 사용자가 버튼으로는 알려줄 수 없는 정보를 전달하는 기초 요소입니다. 주로 키보드나 음성을 이용해 정보를 입력하는 컴포넌트입니다.

셀렉트 만들기

셀렉트는 기본적인 UI 요소 중 하나입니다. 정보를 골라 기계에 전달하는 기초적인 인터페이스입니다. 토글 형태로 On/Off 상태를 지입력하거나 여러 버튼을 눌러 정보를 입력할 수도 있습니다.

탭 만들기

탭은 많은 량의 정보를 큼지막하게 나눠 사용자가 이해하기 쉽게 돕습니다. 과거 오프라인에서 많은 량의 문서나 주소록을 공통 특성으로 묶어 구분하는 장치의 모습을 따왔습니다.

과정 표시 만들기

과정 표시(Progress Indicator)는 시스템의 진행 상황을 알려주는 컴포넌트입니다. 사용자가 기다리는 시간을 더 짧게 느끼게 하거나 과제를 수행할 의지를 북돋아 줍니다.

모든 것을 담은
UI 디자인 클래스 패키지

56,000자 이상의 이론 핵심 노트
120개 이상의 온라인 시험 문제
회당 16만원 상당 과제 코칭 4회
회당 20만원 상당 자유 주제 코칭 1회
실시간 채팅 질문&답변
평생 업데이트
평생 소장

한번 결제하면 평생 소장,
지금이 최저가

챕터가 공개될 때마다 가격이 인상됩니다.

LV1 사용자 인터페이스

  • 역사, 도구를 쓰는 법은 어떻게 변해 왔을까?
  • 신체, 영원히 변하지 않을 사람의 도구
  • 도구, 손에 잡히는 것과 잡히지 않는 것
  • LV1 Test
  • LV1 Practice

LV2 좋은 UI를 위한 그래픽

LV3 좋은 UI를 위한 컴포지션

LV4 좋은 UI를 위한 인터랙션

LV5 좋은 UI를 위한 컴포넌트

특별한 선물

카드사 12개월 무이자 할부 시
월 40,000원
지금이 최저가, 한번 결제하면 평생 소장
480,000 640,000
총 학습기간
  • 정상 수강기간(유료 수강기간) 최초 1년입니다. 이후 복습을 위해 무료로 접근 가능합니다. 
수강 시작일
  • 수강 시작일은 결제일로부터 기간이 산정되며, 결제를 완료하시면 마이페이지를 통해 바로 수강이 가능합니다.
  • 디자인 나침반의 사정으로 수강시작이 늦어진 경우에는 해당 일정 만큼 수강 시작일이 연기됩니다.
  • 수강시작 후 7일 이내, 5강 미만 수강 시에는 100% 환불 가능합니다.
  • 수강시작 후 7일 초과, 5강 이상 수강 시 정상 수강기간(유료 수강기간) 대비 잔여일에 대해 다음과 같이 환불 가능합니다.
  • 환불요청일 시 기준
    : 수강시작 후 1/3 경과 전, 실 결제금액의 2/3에 해당하는 금액 환불
    : 수강시작 후 1/2 경과 전, 실 결제금액의 1/2에 해당하는 금액 환불
    : 수강시작 후 1/2 경과 후, 환불 금액 없음
  • 기기제한 정책
    디자인나침반 온라인 강의 시청을 위해서는 ID별 최대 3개의 기기를 등록할 수 있으며, 기기 등록은 온라인 강의 접속 시 자동 등록됩니다. 최대 갯수를 초과하였을 경우 등록된 기기 해제가 필요합니다.
  • 저작권 정책
    디자인나침반의 모든 강의는 무단 배포 및 가공하는 행위, 캡쳐 및 녹화하여 공유하는 행위, 무단으로 판매하는 행위 등 일체의 저작권 침해 행위를 금지합니다.
    부정 사용이 적발될 경우 저작권법 위반에 의한 법적인 제재를 받으실 수 있습니다.

Want to receive push notifications for all major on-site activities?