[내일배움캠프_UX/UI] 4주차 월요일 TIL

TIL (Today I learned)

 

 

🙄 오늘 나는 무엇을 했나요

- 피그마 활용법 (2) 1주차 수강완료

- 1주차 과제(로그인 화면, 다이얼로그 만들기) 완료 

- UXUI 디자인입문 추가 실습 과제 완료

- 무드보드 만들기 진행중

 

😰 오늘은 어떤 문제를 겪었고, 앞으로는 어떻게 해결할 것인가요

쉬고 와서 그런지 오전 시간에 집중이 조금 힘들었다.

다행히 오후부터는 집중해서 할 수 있었다.

뭔가 끊임없이 하고는 있는데, 제대로 하고 있는 건지도 잘 모르겠다.

무드보드 한데 까지만이라도 튜터님과 얘기를 나눠봐야할 것 같다.

계획대로만 열심히 따라가고는 있는데,

제대로 깊게 파보면서 하려면 시간이 부족한 것 같다.

좀 더 집중해야 할 것 같다.

 

🧐 오늘은 어떤 것을 배웠나요

figma 활용법 (2) 강의 수강을 시작했다!

[1주차]
아토믹시스템 : 파운데이션 모아서 컴포넌트, 컴포넌트 모아서 유기체가 됨
합성 컴포넌트 : 컴포넌트를 모아서 컴포넌트가 되는 경우
- 특정 맥락을 담고 있어 컨테어너 컴포넌트라고도 함
- 바텀시트, 다이얼로그, 리스트, 카드 등

팝업
- 문자 그대로 팝하고 튀어나온다.
- 광고, 로그인 화면 등이 화면 위에 새로운 화면을 띄우는 것

 

윈도우 팝업
- 새로운 윈도우(브라우저창)을 띄워주는 것, 일반적인 인식의 팝업
- 사용하지 않는 추세, 광고, 악성코드 방지를 위해 브라우저에서 기본으로 차단함
- 사용자 입장에 불편함, 모바일 웹에서 새로운 탭으로 열려서 더 불편

예스24, 예매창이 윈도우 팝업으로 나타남

레이어 팝업
- 현재 화면에서 코드로 만든 컴포넌트 레이어를 보여주는 것
- 최근의 서비스에서 적극 사용

이디야, CJ ONE 앱 첫화면에 나타나는 모달

로그인 화면과 원래 화면 사이에 반투명한 까만 층
- 원래의 화면을 살짝 어둡게 가리면서 뒤쪽 화면은 잠시 멈춘다.
- 사용자에게 가장 중요한 부분인 로그인 화면에 시선을 집중시킴

=라이트박스

모달
- 사용자가 행동을 취하기 전까지 뒤에 화면을 조작할 수 없다는 것을 뜻
- UI의 이름이 아니라 UI를 분류하는 기준 중 하나
- 팝업, 토스트, 바텀시트, 다이얼로그, 사이드바 등 모달로 사용
- 모달의 속성을 가지고 있다.

라이트박스 UX
- 뒤에 가려진 화면은 사용할 수 없다는 걸 보여주기 위해 만든 반투명한 층
- 암실처럼 만들어 놓는 것

- 반드시 써야하는 것은 아니지만, 집중할 부분을 안내하기 위한 목적
- 하지만 없으면 사용자가 중요한 부분을 발견하기 힘듬
- 조작을 잘못하거나 다른 부분을 누를 가능성이 높아짐

- 라이트박스를 누르면 취소 또는 뒤로가려는 것으로 간주
- 모달 열기 전으로 되돌려주는 것이 일반적
- 하지만 중요한 선택을 해야하는 순간에는 꺼지지 않도록 해야함
+ 꼭 모달로 만들어야 하는 부분인지 고민

모달 사용시 주의사항
- 선택을 강요하고, 사용자의 자연스러운 흐름을 방해
- 많을 수록 사용자가 불편해하고, 이탈할 확률이 높아짐
- 사용자를 방해해서라도 반드시 확인해야 하는 부분에 사용
- 그만큼 중요한 선택이 필요한 시점에만 사용


다이얼로그 컴포넌트
- 컨테이너 컴포넌트, 모달 속성
- 사용자에게 중요한 선택을 받고, 사용자가 선택한 행동을 확인
- 대화 그 자체, 제품은 선택을 묻고, 사용자는 버튼을 통해 답
- 사용자의 의사를 묻고 답을 얻을 때 사용

유의할 점
- 다이얼로그 : 사용자가 A 또는 B 선택하는 상황
- 얼럿(Alert) : 사용자에게 경고 또는 확인 등을 표시할 때

 

얼럿은 라이트박스를 눌렀을 때 뒤로가거나 취소되지 않아야함 출처 : 김태길 튜터님, [스파르타코딩클럽] Figma 활용법 (2)- 5주차

- 라이트 박스를 누르면 다이얼로그는 닫히고, 얼럿은 닫히지 않음
- 얼럿은 사용자가 반드시 확인 누르거나, 취소로 닫아야함
  휴먼에러(실수로 잘못누름)가 발생하지 않도록
- 중요한 시점, 반드시 확인해야하는 정보만 사용
- 중요하지 않은 정보는 토스트(스낵바) 사용
- 토스트 : 사용자가 선택한 행동의 결과, 처리 결과를 안내할 때 사용

 

컨트롤 컴포넌트
- 사용자가 선택할 수 있도록 하는 요소
- 디자인 시스템들끼리 큰 차이가 나지 않음
- 체크박스, 라디오, 스위치(토글), 슬라이더

참고할 점
- 컨트롤 요소의 최소 터치 영역
- 다른 UI 비하면 크기가 매우 작아서 제대로 누르기 어려움
- 컨트롤 요소 주변에 좀 더 넓게 누를 수 있는 최소 크기 범위를 만듬
- 닐슨노먼그룹 최소 1cm * 1cm 권장

- 컨트롤 요소는 대부분 라벨과 같이 쓰인다.
- 라벨을 눌러도 컨트롤 요소가 작동
- 여러 컨트롤 요소 배치할 때 간격을 충분히 줘서 잘못 누르는 일 줄도록
- 컨트롤 요소와 라벨 두 요소의 세로를 같게 하는 것이 좋음

 

왼쪽 : 체크박스, 오른쪽 : 라디오 버튼

체크박스
- 여러 선택지 중 원하는 선택지 1개 이상 선택할 때
- 기본적인 의사 상태 2가지 : 체크됨 / 체크되지 않음
- 여러 개 선택, 다 선택 안함, 하위 항목있을 때 일부만 선택 다 가능

접근성 Accessibility
- 유니버셜 디자인 위해 체크 아이콘 크기 다르게 만들어 구분하기 쉽게 만들기 

Radius 값 설정할 때
- 원으로 만들 때, 높이/너비의 반 값으로만 하기
- 그 이상의 값을 넣었을 때 피그마에는 변화가 없지만 개발에서 문제 생길 수 있음


라디오 버튼
- 여러개 선택지 중 1개 선택
- 기본적인 의사 상태 2가지 : 선택됨 / 선택되지 않음
- 여러 개 선택 안됨, 하나를 선택하면 다른 선택지에 영향을 미침
- 아무것도 선택하지 않은 상태 불가능
- 사용자가 많이 선택하는 항목을 기본값으로 하면 좋음

 

 

뭔가 많이 했어도 마음이 허해... 시간이 너무 빨리가