하루 한 장 UX의 법칙 100

DAY 01. 사용자가 최우선이다.

사용자를 중심에 두어야 하는 이유는 비즈니스 이해관계자의 개인적 의견 혹은 디자이너의 가정에 의해 잘못된 결정이 추진되지 않도록 하기 위함이다. 불필요한 의견과 가정을 배제하고 사용자의 관점에 다시 집중하기 위해, 모든 프로젝트는 다음과 같은 질문으로 시작한다.

• 이것은 누구를 위한 것인가? (대상)
• 그들은 왜 이것을 사용할까? (목표)
• 그들은 어떻게 이것을 사용할까? (사용맥락)

사용자를 최우선으로 하는 것은 그들에 대한 헌신만 있으면 가능하다. 사용자 입장에서 생각하기 위해 복잡한 과정이 필요한 것은 아니다. 그저 더 많이 듣고, 덜 말하는 것이 필요하다. 그리고 똑똑한 질문을 던지고, 호기심을 가지며, 공감하는 것이 중요하다. 작업 초기부터 최종 사용자를 고려 하면 디자인과 상호작용하는 고객들에게 실질적인 영향을 미칠 수 있는 방식으로 문제를 해결할 수 있다.

---

챕터3_피그마 활용 심화피그마 활용 심화

배리언츠와 프로퍼티 활용

* 컴포넌트 스택(Stack)

• 스택(Stack)의 뜻
  • 버튼 컴포넌트는 가장 많이 사용하는 UI 요소 중 하나다.
  • 그만큼 여러 상황에서 다양한 형태로 사용하고 있다.
  • 버튼을 상하나 좌우로 2개 이상을 같이 사용하는 경우도 있는데, 그런 경우를 스택(Stack;쌓다)이라고 부른다.
  • 팝업 등의 요소에서도 볼 수 있고, 일반적인 화면에서도 버튼을 좌우나 상하로 배치한 경우를 볼 수 있다.
• 피그마에서 버튼 스택을 만들면 좋은 점
  • 버튼 컴포넌트는 다양한 UI 형태로 사용하는 요소이다.
  • 특히 좌우 또는 상하로 2개씩 배치하는 경우가 만은데, 이런 경우마다 매번 버튼을 하나씩 넣는 것은 번거로운 일이 될 수 있다.
  • 따라서 2개씩 묶인 버튼 인스턴스를 하나의 합성 컴포넌트로 활용하는 게 스택이다.

* 버튼 컴포넌트 독(Dock)

• 독(Dock)의 뜻
  • 실제로 가장 많이 사용되는 버튼 컴포넌트의 형태이다.
  • 버튼 컴포넌트는 단일 요소로 사용하는 경우도 있지만, 대부분의 경우 화면의 하단에 고정된 독(Dock) 형태로 사용된다.
  • 여백 요소까지 고려해서 하단에 고정되는 버튼 컴포넌트의 형태를 만들어두면 매우 빠르게 디자인을 진행할 수 있다.
    💡 실무에서는 기기 하단의 인디케이터 요소까지 고려해서 만들어 두는 편이다.
    

포지션(Position)

* 포지션 복습하기

• 포지션은 실제 개발에서 사용하는 개념으로, 디자인 및 레이아웃을 위한 코드에서 사용한다고 배웠다.
• 피그마에서는 이 포지션을 다룰 수 있는 기능을 곳곳에 배치해 뒀다.
• 스태틱, 픽스드, 앱솔루트, 스티키 등 4가지 속성을 사용할 수 있다.

* 포지션이 중요한 이유

• 포지션(Position)은 화면 상에서 요소가 위치하는 방식이다.
• UI 요소는 화면 안에 다른 요소들과 상대적인 관계를 가지면서 위치한다.
• 예를 들자면-
  • 빨간 버튼은 장바구니라는 화면 자체보다는, 목록의 카드 안에 위치해 있다.
  • 이때, 버튼은 카드 안에서의 위치가 화면 전체에서의 위치보다 더 우선시 된다.
  • 디자인을 코드로 구현하면, 카드 안에서의 위치를 고려해서 버튼의 위치를 코드로 작성하게 된다.
  • 카드 안에서의 버튼 위치는, 곧 레이어 구조를 의미한다.
  • 즉, 포지션을 제대로 이해하려면, 오토레이아웃을 활용해 레이어 구조를 정확하게 잘 수 있도록 신경 써야 한다.
    

* 포지션 속성 이해하기

• 스태틱(Static)
  • 스태틱 속성은 가장 기본값으로, 요소에 아무론 속성값을 주지 않은 그대로의 상태이다.
  • 피그마에서는 일반 프레임에 요소를 배치하면 된다.
  • 스태틱 속성은 프레임 안에서 자유롭게 움직일 수 있다.
• 픽스드(Fixed)
  • 픽스트 속성은 화면 전체를 기준으로 요소를 그 위치에 고정한다.
  • 픽스트 속성을 가진 요소는 스크롤, 다른 요소에 구애받지 않는다.
  • 피그마에서는 프로토 타입에서 설정할 수 있다.
  • 피그마에서는 Fixed 속성으로 따로 구분된다.
• 앱솔루트(Absolute)
  • 앱솔루트 포지션은 픽스와 같지만, 요소가 고정되는 위치는 화면 전체가 아니라 요소를 감싼 상위 컨테이너를 기준으로 한다.
  • 스태틱과 다른점은, 상위 컨테이너가 반드시 오토레이아웃이어야 한다. 오토레이아웃이 나닌 일반 프레임 안에는 앱솔루트 포지션을 사용할 수 없다.
  • 앱솔루트 포지션이 적용된 프레임은 오토레이아웃 포지션 안에서는 위치를 자유롭게 움직일 수 있다.
  • 피그마에서 앱솔루트 포지션은 오토레이아웃 포지션 안에서 요소 위치를 고정할 때 사용하고 있다.
  • 피그마에서는 디자인 패널에서 설정할 수 있고, 앱솔루트 포지션이 적용된 요소는 테두리에 다른 표시가 생긴다.
• 스티키(Sticky)
  • 스키티 포지션은 픽스트와 스태틱을 전환하며 적용되는 속성이다.
  • 스크롤 안에서는 스태틱이다가, 스크롤은 넘어가면 화면 상단에 고정된다.
  • 스크롤과 관련있기 때문에 프로토타입 패널에서 설정할 수 있다.
    

오버레이와 모달

* 모달(Modal)과 팝업

• 팝업의 개념
  • 인터넷이나 앱을 쓰다보면 정말 많은 화면들을 보게 된다.
  • 그 중 광고, 로그인 유도 등의 화면을 내가 보는 화면 위에 띄어주는 경우가 있다.
  • 화면 위에 새로운 화면을 띄우는 걸 일반적으로 팝업이라고 부른다.
• 팝업의 유형
• 우리가 일반적으로 팝업이라고 부르는 것과 실제 UI 관점에서 팝업은 차이가 있다.
  • 팝업은 2가지 유형으로 나눌 수 있다.
  • 윈도우 팝업
    • 새로운 윈도우(브라우저 창)을 띄어주는 방식.
    • 일반적으로 팝업이라고 부르는 건 이 방식을 이야기 한다.
    • 윈도우 팝업은 점점 사용하지 않는 추세이다.
  • 레이어 팝업
    • 현재 화면에서 코드로 만든 컴포넌트를 보여주는 방식.
• 그래서 모달은 무엇일까?
  
  • 이 화면에서, 우리는 로그인 화면 뒤쪽에 숨겨진 피드 게시물을 누르거나 스크롤 할 수 없다.
• 뒤쪽에 있는 게시물은 누르거나 스크롤 할 수 없다는 걸 어떻게 아는 걸까?
  • 로그인 화면과 가려진 원래의 화면 사이에 반투명한 까만 층이 하나 있는 걸 볼 수 있다.
  • 이 까만 층이 하는 일은 다음과 같다.
    • 원래의 화면을 살짝 어둡게 가리면서 '지금은 여기는 작동하지 않아'라는 걸 알려준다.
    • 로그인 화면에 시선을 집중시킨다.
  • 모달의 개념
    • 모달은 사용자가 행동을 취하기 전까지 뒤에 가려진 화면을 조작할 수 없는 것을 뜻한다.
    • 모달(Modal)이라는 건 UI의 이름아 아니라, UI를 분류하는 기준 중 하나이다.
    • 로그인 화면에서 뒤에 가려진 부분을 조작할 수 없다면, 로그인 화면은 모달이다.
  • 모달의 종류
    • 모달은 우리가 앱이나 웹은 사용하면서 굉장히 많이 발결할 수 있는 UI이다.
    • 팝업, 토스트, 바텀시트, 다이얼로그, 사이드바 등 많은 UI들이 모달로 사용되고 있다.

* 오버레이와 라이트박스

• 오버레이의 개념
  📌 모달은 필연적으로 오버레이 속성을 가지고 있기 때문에 모달이 곧 오버레이라고 생각할 수 있지만, 오버레이는 모달과 다른 개념이니 잘 구분해야 한다.
  • 오버레이는 모달과 함께 자주 사용되는 개념이다.
  • UI가 화면 위에 중첩될 때, 오버레이 속성을 가졌다고 한다.
  • 우리가 흔히 보는 요소들 중에도 오버레이 속성을 가진 것들이 많다.
    
  • 바텀시트, 플로팅 버튼의 메뉴, 드롭다운 메뉴 등 화면 위에 중첩되는 요소는 모두 오버레이라고 부를 수 있다.
• 라이트박스의 개념
  📌 라이트박스는 스크림(Scrim;천 또는 장막), 딤드(Dimmed;흐려진), 딤레이어(Dim Layer), 오버레이(Overlay) 등으로 불린다.
  • 모달 UI를 사용할 때는 일반적으로 '뒤에 가려진 화면은 사용할 수 없다'는 걸 보여주기 위해 반투명한 층을 만들어 준다.
  • 이 반투망한 층을 라이트박스(Lightbox)라고 부른다.
• 오버레이와 모달, 라이트박스의 관계
  
  • 화면에 배치하는 UI들은 오버레이인지 아닌지로 먼저 나눌 수 있다.
  • 오버레이는 다시 모달인 것과 모달이 아닌 것으로 나눌 수 있다.
  • 모달인 것은 라이트박스를 포함하고, 우리가 잘 아는 다이얼로그나 바텀시트 등으로 보인다.
  • 모달이 아닌 것은 툴팁이나 스낵바, 드롭다운 메뉴처럼 중첩은 되어 있으나 뒤쪽 화면이 가려지지 않는 UI로 보인다.
  • 즉, 오버레이는 모달의 상위 구분이라고 할 수 있다.
  • 라이드 박스를 슬 때 이럼 점을 주의하자.
    
    • 라이드박스는 반드시 써야하는 것은 아니다.
      
      • 라이드박스는 사용자에게 모달과 배경을 명확하게 분리해주고 집중해야 하는 부분을 안내하기 위한 목적이지, 모달에 반드시 같이 써야 하는 것은 아니다.
      • 다만 라이트박스가 없다면 사용자가 봐야 하는 중요한 부분을 발견하기 힘들다보니 조작을 잘못 하거나 다른 부분을 누를 가능성이 높아지기 때문에, 라이트박스는 권장 사항이다.
    • 라이트박스를 누르면 사용자가 취소 또는 뒤로 가려는 것으로 간주한다.
      • 라이트박스를 누르면 모달을 열기 전으로 다시 되돌려주는 것이 일반적인 방법이다.
      • 다만, 매우 중요한 선택을 해야하는 순간이라 뒤로 돌아갈 수 없거나, 뒤로 돌아가면 지금까지의 진행 상황이 모두 삭제되는 경우라면 라이트박스를 눌러도 꺼지지 않도록 해야 한다.
• 모달 사용 시 주의사항
  • 모달은 뒤에 숨겨진 화면의 동작을 할 수 있는지가 모달인지 아닌지를 판별하는 기준이다.
  • 즉, 사용자가 원래 쓰고 있던 화면을 잠가버리고, 사용자가 뭔가 행동을 하기 전까진 풀어주지 않는다.
  • 다른 말로 얘기하면, 사용자의 자연스러운 흐름을 방해하는 셈이고, 그만큼 사용자가 최종 목적지까지 가는 시간이나 비용을 증가시키기 때문에 모달이 많을 수록 사용자가 불편해할 가능성이 매우 높다.
  • 반대로 말하자면, '사용자를 방해하면서라도 반드시 확인해야 하는 부분이거나, 또는 그만큼 중요한 선택이 필요한 시점'에 사용해야 하는 것이 모달이다.

다이얼로그 컴포넌트

* 다이얼로그 컴포넌트의 정의

• 컴포넌트의 종류 중 컨테이너에 해당하는 컴포넌트이다.
• 오버레이-모달 속성을 가진 컴포넌트이다.
• 다이얼로그는 사용자에게 중요한 선택을 받고, 사용자가 선택한 행동을 확인하는 컴포넌트다.
  • 다이얼로그(doalog)의 뜻은 대화(Conversation)이다.
  • 즉, 다이얼로그 컴포넌트는 대화 그 자체라는 뜻이다.
  • 다이얼로그를 쓴다는 건 사용자의 의사를 묻고 답을 얻을 때 사용한다.

* 다이얼로그의 구조

• 컨테이너(Container)
  • 다이얼로그 안에 있는 요소들을 감싸고 있는 프레임을 뜻한다.
• 헤더(Header)
  • 제목(Titile, Heading): 다이얼로그의 제목이다.
  • 부제목(Subtitle, Description, Hint Text): 다이얼로그의 내용을 설명하거나 제목을 뒷받침하는 보조 내용이다
  • 헤더 부분에는 썸네일 이미지나 아이콘, 닫기 버튼 등이 들어갈 수도 있다.
    
• 액션(Action)
  • 다이얼로그의 버튼 부분을 뜻한다.
  • 액션 부분에는 버튼이 여러개 들어갈 수도 있다.

* 다이얼로그 설계에서 유의할 점

• 선택지의 유형에 따라 조작법이 달라진다.
  • (사용자가 A또는 B를 선택해야 하는 상황)과, (사용자에게 경고 또는 확인 등을 표시할 때)가 다르다.
  • 일반적으로 전자의 경우를 다이얼로그라고 부르고, 후자의 경우를 얼럿(Alert)이나 팝업으로 부른다.
  • 다이얼로그의 경우에는 라이트 박스를 누르면 취소 또는 닫기를 누른 것과 동일하다.
  • 반면에, 얼럿의 경우에는 사용자가 반드시 알아야 하는 중요한 서비스 상태와 관련이 깊기 때문에, 사용자가 반드시 버튼을 눌러 확인하거나 직접 취소를 눌러 닫아야 한다.
    
  • 왼쪽이 다이얼로그, 오른쪽이 얼럿. 각각 어떤 내용이 담겨 있는지를 확인하자.
• 사용자 흐름에서 필수로 거쳐야 할 때 사용한다.
  • 다이얼로그는 필연적으로 사용자를 방해한다.
  • 그만큼 중요한 시점에 쓰거나 반드시 받아야 하는 정보만 받아야 한다.
  • 만약 사용자가 반드시 확인해야 하는 정보가 아니라면 다이얼로그나 얼럿을 피하자.
    📌 이런 경우에 사용하는 요소로는 토스트(스낵바)가 있다. 사용자가 선택한 행동의 결과 또는 처리 결과를 안내할 때 사용한다.
    
  • 피드백을 잘 전달했다는 이야기를 다이얼로그로 하지 않는 것이 좋다.

🥰 Blah Blah

팝업은 그냥 브라우저로 띄우는 팝업과 레이어팝업(모달), 시스템팝업(얼럿) 정도만 알고 있었는데, 용어도 너무 많고 개념도 아리송하다. 내가 알던 개념과 비슷하면서도 다르다. 몇 번 더 읽어봐야 할 것 같다. 오늘까지 '피그마 기초' 5강까지 복습 끝내고 내일 '피그마 활용 심화' 까지 다 따라해 볼 생각이다. 다른 분들은 강의에 딸려 있는 과제도 하고 그러는데 난 왜 강의 따라가기만 해도 벅차지. 앓는 소리가 더욱 더 심해졌다. 잘 할 수 있다! 힘내보자!