Learn UX/UI

Try these UX and UI tutorials to learn the principles of user-centered design, prototyping, and wireframing. Learn to craft beautiful and intuitive user interfaces.

All UX/UI content:

  1. CSS와 JavaScript를 사용해 수평방향 타임라인 만들기

    CSS와 JavaScript를 사용해 수평방향 타임라인 만들기

    Tutorial Intermediate

    저는 지난 글에서 기초부터 작성하는 수직방향의 반응형 타임라인을 제작하는 방법을 알려드렸습니다. 오늘은 그와 관련하여 수평방향 타임라인을 만드는 과정을 내용으로 다룰 겁니다.

  2. 초보자용 와이어프레임 제작 가이드

    초보자용 와이어프레임 제작 가이드

    Tutorial Beginner

    디자인 진행 과정 전체에서 와이어프레임을 제작하는 단계는 중요합니다. 무엇보다 먼저 디자인의 정보 체계를 잡을 수 있습니다. 그에 맞춰서 여러분이 생각하는 사용자의 정보 처리 방식을 기준으로 해서 레이아웃을 짜기가 편해집니다. 아직 와이어프레임을 만들어 본 적이 없다면 지금 시작해...

  3. 당신은 모를 수도 있는 CSS의 7가지 단위

    당신은 모를 수도 있는 CSS의 7가지 단위

    Tutorial Beginner

    우리가 잘 알고 있는 CSS기술을 사용하는 것은 쉽고 간단하지만 새로운 문제에 맞닥드리면 해결하기 어려워집니다.

  4. 어도비 대안 : 픽셀 아트 응용 프로그램

    어도비 대안 : 픽셀 아트 응용 프로그램

    Tutorial Beginner

    픽셀 아트는 향수를 목적으로 만든 그래픽의 복고풍 스타일로 종종 간주됩니다. 초기 비디오 게임으로 돌아갔습니다. 그러나 저와 다른 많은 픽셀 아트의 애호가들에게, 각 픽셀을 미적 스테이지에 세심하게 놓아두는 것은 정밀도, 복잡성 및 미학적인 것입니다. 이 미학 스테이지는 진정으로...

  5. 다섯 가지의 UX 핵심 구성요소

    다섯 가지의 UX 핵심 구성요소

    Tutorial Beginner

    여러분이 사용자 경험 디자인에 대해 충분히 이해하도록 제가 사용자 경험 디자이너가 어떤 작업을 하는지, 다섯 가지의 UX 핵심 구성요소를 얘기하며 완료하는 작업을 설명하겠습니다.

  6. UX 터치포인트란 정확히 무엇인가? 

    UX 터치포인트란 정확히 무엇인가? 

    Tutorial Beginner

    사용자가 "니즈"부터 "목적 달성"까지 이동하는 방법이며 사용자들이 제품과 상호작용하는 방식인 고객 여정은 여러 다양한 단계들이나 터치포인트로 이루어집니다. 우리가 터치포인트를 더 잘 이해할 수 있도록 조금 더 면밀히 살펴보겠습니다.

  7. 종합 안내: Rem 그리고 Em, 언제 써야 할까

    종합 안내: Rem 그리고 Em, 언제 써야 할까

    Tutorial Intermediate

    여러분은 아마 좀 더 유연한 측정 단위의 사용을 고려해 보신 적이 있으셨을 겁니다. 그런데 언제 rem 단위를 쓰고, 또 언제 em을 쓸 것인지 아직 완전하게 이해하지 못하셨다면, 이번에 확실하게 안내해 드리겠습니다!

  8. 웹 디자인 용어: "어포던스(Affordance)"란?

    웹 디자인 용어: "어포던스(Affordance)"란?

    Tutorial Beginner

    "어포던스"는 웹 디자인 세계에서 자주 듣게 될 용어입니다. 이 용어는 Tuts+의 튜토리얼에서 일상적으로 보입니다. 그런 이유로 이 글에서는 용어에 관해 생기는 불확실함을 말끔히 씻어내도록 정의를 내려보겠습니다.

  9. 검색 폼의 Input과 버튼에 관한 CSS 코드 실험

    검색 폼의 Input과 버튼에 관한 CSS 코드 실험

    Tutorial Intermediate

    저는 이 튜토리얼에서 검색의 기본 폼을 꾸미는 방법에 대해 살펴보려 합니다. 전혀 허튼짓을 하지 않습니다. 다만 CSS transition을 적용해 검색 입력 영역을 멋지게 만드는 방법 4가지를 개별적으로 알아보겠습니다.

  10. 꿀팁: 편한 CSS3 체크박스와 라디오버튼

    꿀팁: 편한 CSS3 체크박스와 라디오버튼

    Tutorial Beginner

    자바스크립트 없이 어떻게 체크박스와 라디오 버튼에 스타일을 적용할지 궁금한 적이 있나요?