프로덕트 디자인/Sub Note

[디자인부트캠프] Chapter 7. 피그마 심화(1)

娥怡 2025. 5. 19. 07:01

1. UI 구성요소

 

UI 개념은 사용자가 디지털 제품과 상호작용하는 모든 화면요소. 즉, 우리가 웹사이트, 앱, 소프트웨어에서 직접 보고 클릭하는 모든 것!

 

  1. 네비게이션 UI : 사용자가 원하는 정보를 쉽게 찾을 수 있도록 도와주는 메뉴 / 탭바. 화면을 어떻게 돌아다녀야 할지 안내하는 길잡이.
  2. 버튼 UI : 클릭하거나 터치하면 어떤 행동이 일어나게 만드는 요소. 화면 이동, 폼 제출, 팝업 열기 등 다양한 액션을 유도.
  3. 인풋 UI : 사용자가 정보를 입력하거나 선택할 수 있게 만드는 요소. 텍스트 입력창, 체크박스, 라디오 버튼 등이 해당.
  4. 카드 UI : 정보를 묶어서 보기 좋게 정리. 보통 이미지, 제목, 설명 같은 내용을 하나의 카드에 담아 전달.
  5. 알림 UI : 사용자에게 시스템 상태피드백을 전달. 저장 완료 메시지, 오류 경고, 새 소식 알림 등이 해당.

 

📌 좋은 UI를 만들기 위한 조건

 

  • 직관적 사용 : 별다른 설명 없이도 이 버튼의 역할이나 어디를 눌러야 할 지 쉽게 알 수 있어야 한다.
  • 빠른 정보 검색 : 사용자가 원하는 내용을 최대한 빠르게 찾고 적은 클릭으로 이동할 수 있어야 한다.
  • 편하고 자연스러운 조작 : 클릭이나 입력 등 상호작용이 부드럽고 불편함이 없어야 한다.
  • 즉각적 피드백 : 클릭 시 반응이 없으면 사용자는 혼란에 빠진다. 버튼을 누르면 로딩중과 같은 피드백이 표시되어야 한다.
  • 일관성 유지 : 같은 앱 내에서 버튼 스타일과 글씨 크기 등이 계속 바뀌면 혼란을 준다. 디자인 시스템과 기준을 정해두고 따라야 한다.