UIUX - 컴포넌트 실무용어 03

1) 스플래시(Splash)

• 정의: 스플래시는 모바일 앱을 실행할 때 가장 먼저 나타나는 화면으로 보통 1초에서 3초 정도 지속된다. 주로 서비스를 대표하는 대표 화면으로 구성되어 있기에 사용자로 하여금 '시각적' 요소를 통해 서비스의 긍정적인 인상을 심어줄 수 있다는 장점이 있다.
• 목적: 서비스의 로고나 이미지를 통해 브랜드 아이덴티티를 사용자에게 인지시킴

예시) 모바일 스플래시 - 링크드인

2) 코치마크(Coach Mark)

• 정의: 코치마크는 앱을 처음 사용하는 사용자에게 기능이나 사용 방법을 안내하는 작은 팝업 또는 화면이다. 보통 최초 실행 시에만 볼 수 있도록 설계 되어 있다.
• 목적: 사용자가 각 기능의 위치와 사용 방법을 쉽게 이해하도록 도움
  예시) 네이버 앱 - 코치마크
  

3) 새로고침 (Pull to Refresh)

• 정의: 사용자가 앱을 사용하다가 문제가 발생했을경우 화면을 아래로 끌어당겨 콘텐츠를 새로 업데이트하여 적용할수 있는 걸 말한다.
• 역사: 이 기능은 트위터(현: X로 변경) 클라이언트 앱인 Tweetie에서 처음 도입됨
• 목적: 사용자가 손쉽게 최신 정보를 가져올 수 있도록 직관적인 방법을 제공함
• 특징: 사용자가 화면을 아래로 당기면 로딩 아이콘이나 애니메이션이 나타나며, 새로고침이 진행되고 있음을 시각적으로 보여준다. 사용자가 쉽게 인식할 수 있는 제스처 이다.
  예시 1) 당겨서 새로고침: 네이버 웨일 - iOS
  

예시 2) 당겨서 새로고침: 배달의 민족 - iOS

4) 플로팅 버튼 (Floating Action Button)

• 정의 : 플로팅 버튼은 화면의 특정 위치에 부유하는 형태로 표시되는 버튼으로, 사용자가 쉽게 접근할 수 있도록 디자인 되었다
• 목적 : 사용자가 자주 사용하는 주요 기능을 빠르게 호출할 수 있도록 도와주고, 앱 내에서 중요한 행동을 강조하여 사용자가 쉽게 인식하고 사용할 수 있게 함
  예시 1) Web 플로팅 버튼 - HR 솔루션 기업(Flex)
  
  

예시 2) Web 플로팅 버튼 - 갓차

플로팅 버튼 사용 시 주의사항

• 과도한 사용 피하기: 너무 많은 플로팅 버튼을 사용하면 사용자에게 혼란을 줄 수 있으므로, 핵심 기능에만 제한하여 사용하는 것이 좋음
• 적절한 위치 선정: 버튼이 다른 UI 요소와 겹치지 않도록 배치해야 하며, 일반적으로 오른쪽 하단에 위치하는 것이 가장 일반적임
• 명확한 아이콘 사용: 버튼에 사용되는 아이콘은 직관적이고 이해하기 쉬워야 하며, 사용자가 버튼의 기능을 쉽게 인식할 수 있어야 함
• 애니메이션 주의: 버튼 클릭 시 애니메이션 효과를 추가할 수 있지만, 너무 과도한 애니메이션은 사용자 경험을 방해할 수 있으므로 적절히 조절해야 함
• 접근성 고려: 모든 사용자가 쉽게 접근할 수 있도록 버튼 크기와 위치를 조정하고, 색상 대비를 충분히 고려해야 함

5) 고정 값 (Default)

• 고정 값은 가장 많이 사용하는 용어 카카오톡의 프로필 사진을 설정하지 않았을 때 사진이 없는 아이콘 이미지가 뜨는 것 처럼, 초기 설정 상태 및 기본 상태를 Default 즉, 고정값이라고 한다.
  예시) 기본 고정 값 - 카카오톡 프로필
  

6) 모달 (Modal)

• 모달은 사용자의 이목을 집중시키기 위해 화면 위에 또 다른 화면을 띄우는 방식의 인터페이스입니다. 모달은 일반적으로 현재 페이지의 콘텐츠를 흐림 처리하거나 비활성화하여 사용자가 모달에 집중할 수 있도록 하였음, 또한 모달은 기존 페이지와 부모-자식 관계를 형성한다.
  예시)