[내일배움캠프 본캠] 5/2 TIL

아티클 스터디

피그마 활용 심화 3주차, 4주차

 

아티클 스터디

2025.05.02 - [분류 전체보기] - [UXUI 아티클 분석 09] 눌러보고 싶은 동그란 버튼

 

 

피그마 활용 심화 3주차, 4주차

모달(Modal)과 팝업(Pop-up)

팝업

▷ 윈도우 팝업

· 쓱처럼 새로운 윈도우(브라우저 창)을 띄어주는 방식

· 점점 사용하지 않는 추세 (팝업 차단 & 불편함)

 

▷ 레이어 팝업

· 코드로 만든 컴포넌트를 보여주는 방식

· 새로운 창을 띄우는 것이 아니라, 현재 화면에서 컴포넌트로 만든 레이어(층)을 하나 더 보여주는 개념

 

모달

▷ 사용자가 행동을 취하기 전까지 뒤에 가려진 화면을 조작할 수 없는 것

▷ 모달은 UI의 이름이 아니라, 분류하는 기준 중 하나

▷ 팝업, 토스트, 바텀시트, 다이얼로그, 사이드바 등 UI

▷ 뒤쪽의 반투명한 까만 층

· '지금 여기는 작동하지 않아'를 알려줌

· 띄어진 화면에 시선을 집중시킴

 

오버레이와 라이트박스

오버레이

▷ UI가 화면 위에 중첩될 때, 오버레이 속성을 가짐

▷ 모달과 다른 개념

 

라이트박스 (스크림, 딤드, 딤레이어, 오버레이)

▷ 반투명한 층

▷ 꼭 있어야하는 건 아니지만 권장 사항

▷ 라이트박스를 누르면 사용자가 취소 또는 뒤로 가려는 것으로 간주해야 함

▷ 다만, 매우 중요한 선택을 해야하는 순간이면 눌러도 꺼지지 않도록 해야 함!!

 

 

오버레와 모달, 라이트박스 관계

 

 

다이얼로그 컴포넌트

▷ 컴포넌트의 종류 중 컨테이너에 해당하는 컴포넌트

▷ 오버레이-모달 속성

▷ 사용자에게 중요한 선택을 받고, 사용자가 선택한 행동을 확인하는 컴포넌트

· 다이얼로그(dialog) = 대화(conversation)

· 사용자의 의사를 묻고 답을 얻을 때 사용

 

▷ 선택지의 유형에 따라 조작법이 달라짐

· 사용자가 A 또는 B를 선택해야 하는 상황과, 사용자에게 경고 또는 확인 등을 표시할 때 다름

· 전자- 다이얼로그, 후자- 얼럿 or 팝업 (라이트박스 눌러도 안닫힘)

▷ 사용자 흐름에서 필수로 거쳐야 할 때

· 다이얼로그는 필연적으로 사용자를 방해

· 사용자가 반드시 확인해야 하는 정보가 아니라면 피하기

대체- 토스트(스낵바)

 

컴포넌트 인터랙션

▷ 버튼을 누르고 있을 때는 색상이 변하거나 버튼이 실제로 눌린 것 같은 효과를 보여줌

▷ 프로토타입을 사용해서 구현 가능

 

드래그 프로토타입

▷ 드래그하는 방향에 따라 프레임 전환이 발생하는 독특한 기능

▷ 이미지 슬라이드같은 캐러셀이나 회전 등의 인터랙션을 만들 때