Topic
UI
UX
Figma
Consistency
Hierarchy
What I Learned
1. UI/UX
UI란?
UI는 사용자 인터페이스, "User Interface"의 약어로, 사용자가 컴퓨터, 소프트웨어, 모바일 앱 등과 상호작용하는 방식을 말합니다.
UI는 사용자 경험(UX)의 중요한 부분으로, 사용자가 제품 또는 서비스를 쉽게 이해하고 사용할 수 있도록 설계되어야 합니다.
이를 위해 UI 디자이너는 버튼, 메뉴, 아이콘, 색상, 레이아웃 등을 사용하여 사용자가 제품 또는 서비스를 효율적으로 사용할 수 있도록 도와줍니다.
UI Design
- CLI(Command Line Interface): 문자로 된 명령어를 통해 상호 작용하는 UI
- GUI(Graphic User Interface): UI 기능을 그래픽으로 나타낸 것
UX란?
UX는 사용자 경험, "User Experience"의 약어로, 사용자가 제품 또는 서비스를 이용하면서 느끼는 모든 감정과 인식, 인지, 행동, 반응 등을 말합니다.
UX 디자인은 사용자 경험을 개선하고 사용자가 원하는 기능을 보다 쉽게 이용할 수 있도록 하는 디자인을 말합니다.
UX 디자이너는 사용자의 요구사항을 파악하고 이를 바탕으로 제품 또는 서비스를 디자인합니다.
UX 디자이너는 사용자가 제품 또는 서비스를 이용하는 과정에서 발생할 수 있는 문제를 미리 예측하고, 사용자가 원하는 결과를 얻을 수 있도록 제품 또는 서비스를 설계합니다.
UX 디자인은 사용자 인터페이스(UI) 디자인과 밀접한 관련이 있습니다. UI 디자인은 제품 또는 서비스의 시각적인 디자인을 말하며, UX 디자인은 사용자가 제품 또는 서비스를 이용하는 과정에서 느끼는 모든 요소를 고려하는 디자인입니다.
UX 디자인은 UI 디자인과 함께 제품 또는 서비스를 개발하는 과정에서 필수적인 역할을 합니다.
2. Figma
Figma 소개
Figma: 2020년부터 현재까지 사용률이 가장 많은 웹 디자인 툴로 웹 환경에서 작동합니다. 어플리케이션으로 로컬에서도 쓸 수 있습니다. 다양한 외부 플러그인을 포함한 대부분의 기능이 무료입니다.
기본 기능
툴바 새로운 요소를 생성하거나 편집할 수 있는 도구들을 모아 놓은 곳
레이어 패널 현재 페이지 안에 있는 모든 요소들을 목록으로 보여주는 곳
프로퍼티 패널 선택한 요소들의 속성을 편집할 수 있는 곳
캔버스 페이지의 모습을 보여주는 곳
Figma 단축키 cheatsheet
3. 좋은 UI 디자인
일관성
일관성이란 공통적으로 적용될 수 있는 규칙을 만들어서 인터페이스를 시각적으로 정돈하고 또 예측 가능하게 만드는 것입니다.
유사성의 원리 유사한 형태나 색을 가진 요소들은 서로 연관성이 있어 보입니다.
위계
위계란 중요한 내용과 그렇지 않은 내용을 잘 드러내서 인터페이스를 더 이해하기 쉽게 많드는 것입니다.
근접성의 원리 상대적으로 가까이 있는 것들은 더욱 연관성이 있어 보입니다.
공통 영역의 원리 어떤 형태로든 그것들이 공통된 하나의 영역에 들어가 있으면 해당 요소들 간의 연관성이 더 높아 보입니다.
유사성의 원리 다른 형태나 색을 가진 요소들은 서로 연관성이 없어 보입니다.
좌측 상단에 위치할수록, 시각적 무게감이 클 수록 높은 위계를 가집니다.
Feedback
- 이론과 용어만 기술하고 툴을 다루는 법에 대해서는 기술하지 않았다
- 일관성과 위계를 기준으로 꾸준한 시도를 하는 것이 좋을 것 같다
- 다음으로 'CSS 레이아웃' 코드잇 콘텐츠를 수강할 예정이다
Reference
