[05주_2024_11_21] 오늘 또 복습...

2024년 11월 21일 ( Thursday )
───────────⚪──────
◄◄⠀▐▐⠀►► 𝟸:𝟷𝟾 / 𝟹:𝟻𝟼⠀───○ 🔊

[개인]
🩶 디자인 카타 진행
🩶 UX 강의 듣기
🩶 TIL 작성 및 제출하기
[팀플]
🩶 저녁 팀 스크럼(회고)

---

🤤오늘 진행한 부분!

오전에는 디자인 카타에서 정해진 컨포넌트를 발표하는 시간을 가졌다. 순서는 버튼, 바, 토글, 입력필드, 모달팝업이여서 오늘은 버튼, 바까지 진행하였다. 그러고 강의 복습과 UX에 관한 TED 강의를 들었다. 그러면서 관련 내용들도 찾아보았다.

 

디자인카타

• 버튼: 어떤 기능이나 동작을 실행하거나 기능을 사용하기 위한 상태로 변하는 요소
  • 구조
    • 텍스트 레이블: 버튼을 눌렀을 때 실행되는 기능에 대한 설명. 기본적으로 모든 버튼은 텍스트 레이블을 제공해야 하지만 아이콘만으로 표현되는 버튼인 경우에는 텍스트 레이블을 시각적으로 숨긴 상태로 사용할 수 있음
    • 컨테이너(선택): 버튼을 배경과 구분하는 시각적인 수단으로 면 또는 선으로 표현됨
    • 아이콘(선택): 버튼을 눌렀을 때 실행되는 기능을 텍스트 대신 시각적인 상징으로 표현한 것
  • 사용성 가이드 라인
  • 버튼이 그룹으로 제공될 때 모든 버튼의 크기를 동일하게 제공
    • 버튼의 크기가 동일하다는 것은 그룹 내 선택지가 동질적임을 암시 특정 버튼을 강조해야 할 필요가 있다면 크기가 아닌 다른 스타일을 통해 정보의 위계를 구분해야 
  • 버튼과 관련된 사용자 과업, 플로우의 중요도에 따라 버튼 간 위계를 명확하게 구분
    • 일반적으로 서비스의 주조색(Main color)을 배경색으로 채운 버튼은 강조 버튼으로 사용자로부터 중요한 행동을 유도하고자 할 때 사용
    • 윤곽선 버튼은 기본 버튼으로 중간 수준의 강조가 필요한 경우에 사용
    • 버튼과 관련된 행동의 중요도가 낮거나 한 페이지 또는 한 개의 뷰에서 중요도가 동일한 여러 개의 기능이 제공되어야 하는 경우에 적합
    • 텍스트 버튼이 가장 낮은 수준의 강조를 가지며 다양한 기능이 제공되어야 할 때 사용하기 적합
  • 한 페이지에 최상위 수준의 강조 버튼은 한 번만 사용
    • 채운 스타일의 버튼은 시각적으로 매우 현저하기 때문에 사용자가 빠르게 인지할 수 있도록 도와줌 하지만 한 페이지에 채운 버튼을 여러 개 사용할 경우 사용자는 인지적 부담이 증가해 가장 중요한 행동 관련 버튼을 발견하는 데 많은 시간이 걸릴 수 있음
  • 버튼 그룹을 수직으로 배열할 때 최상위 수준의 강조 버튼을 첫 번째로 배치
    • 일반적으로 버튼 그룹은 수평 방향으로 나란히 배치,  그러나 버튼이 패널, 모바일 디바이스처럼 좁은 영역에 제공되어야 하는 경우 공간의 제약으로 인해 버튼을 수직으로 배치
    • 버튼의 중요도 순으로 위쪽에 배치하여 사용자의 시선이 중요도가 높은 버튼에 먼저 도달할 수 있도록 구현
  • 버튼의 텍스트 레이블은 버튼을 통해 실행되는 기능을 예측할 수 있는 명확한 내용을 동사형으로 제공
    • 버튼은 어떤 기능이나 동작을 실행시키는 요소이므로 사용자가 수행하는 작업을 동사로 표현하는 것이 적절
  • 아이콘은 중요한 작업에 그리고 반드시 필요한 경우에 사용
    • 아이콘은 가장 핵심적인 동작을 수행하는 버튼에 사용해야 하며, 아이콘은 버튼의 텍스트 레이블과 의미적으로 높은 관련성이 있어야 함
    • 아이콘이 있는 버튼은 아이콘이 없는 버튼보다 강조 수준이 높아야 한다. 버튼 그룹에서 가장 중요한 작업에 아이콘이 없으면 나머지 하위 수준 작업에서 아이콘을 사용해서는 안 됨
  • 사용자가 실수로 버튼을 두 번 이상 누르는 상황을 고려
    • 인터넷 환경이 느리거나, 시스템의 반응이 즉각적이지 않거나, 사용자가 손떨림이 있는 경우 실수로 버튼을 두 번 이상 누를 수 있음 그러므로 버튼이 데이터를 전송하는 용도로 사용되는 경우에는 사용자의 두 번째 인터랙션이 무시되도록 구현
• 네비게이션 바: 웹사이트나 앱에서 페이지 간 이동이나 주요 기능에 접근하기 위한 상단 인터페이스 요소
  • 사용자는 앱의 구조를 파악하고 원하는 기능을 빠르게 사용할 수 있음
  • 웹과 모바일은 사용환경이 다르기에 각 환경에 맞는 네비게이션 방식과 디자인을 선택하는 것이 중요
  • 탭바: 모바일 앱의 아래에서 쉽게 찾아볼 수 있으며 유저가 각 주요 색션으로 빠르게 이동할 수 있도록 도와줌
  • 사이드바: 페이지 측면에서 탐색 직업 또는 컨텐츠 그룹을 표시하는 데 사용 / 눈에 보여지거나 사용하지 않을 땐 숨겨져 있기도 함
    • 사이드 바 권장: 5개 이상의 최상위 목적지가 있는 앱 / 2개 이상의 탐색 계층이 있는 앱 / 관련 없는 목적지 간 빠른 탐색
  • 스낵바: 사용자가 수행한 액션에 대한 피드백을 줄 때 사용됨 이 때 별도의 액션을 제공하는 것도 가능
    • Toast와 비슷한 형태를 지녔지만, Toast는 단순 피드백 외의 액션이 제공 불가능하다는 차이점이 있음
    • 사용자 액션에 대한 피드백을 줄 때 사용하며, 선택에 따라 액션 버튼을 추가할 수 있음
    • 제한된 시간이 지나면 사라지기 때문에, 바르게 읽을 수 있도록 간결한 문구를 사용함
    • 올바른 스낵바 디자인
      • 모바일에서는 최대 2줄의 텍스트를 사용해 스낵바 메시지를 전달함
      • 테스크톱이나 태블릿과 같은 넓은 UI에서는 스낵바에 한 줄의 텍스트만 있어야 함
    • 잘못된 스낵바 디자인
      • 앱 아이콘을 사용하지 않아야 함 ➡️ 스낵바의 간결하고 직관적인 디자인을 유지하기 위한 것
      • 2개 이상 한번에 표시되어서는 안됨 ➡️ 사용자에게 혼란을 주거나 중요한 정보를 놓치게 만듦
      • 스낵바는 주변 UI 요소의 위치에 영향을 주거나 겹쳐서는 안됨 사용자의 기능 수행을 방해 하거나 다른 UI 요소를 가리게 될 수 있기 때문 이를 피하기 위해 스낵바가 나타낼 때 기타 UI요소는 스낵바를 피해 이동하거나 조정
      • 탐색 목적지를 5개 이상 추가하지 않음
        • 3~5개의 탐색 목적지가 적합
        • 5개 이상의 옵션을 사용하면 최상위 타겟이 너무 가까워지고 사용성이 저하됨 사용가 실수로 잘못된 옵션을 트리거 할 수 있음
      • 화려한 애니메이션 전환을 사용하지 않음 ➡️ 처음 사용하는 사용자에게는 시각적인 효과를 줄 수 있지만, 정기적으로 사용하는 사람에겐 시작적인 피로를 줌
      • 높이를 내용물 보다 높아 지지 않도록 해야 함
      • 앱이 오른쪽에서 왼쪽으로 쓰는 언어로 설정되어 있지 않은 한 화면 오른쪽에서 스낵바를  열게 하지 않음
      • 텍스트를 줄 바꿈 하지 말 것, 한 줄에 맞추기 위해 텍스트 크기를 줄이지 말 것
  • 프로그래스 바: 특정 작업을 수행할 때 작업의 진척도 또는 단계를 시각적으로 나타내는 데 도움을 줌

 

찾은 내용

• 사전적 사용자 경험은 사용자가 어떤 제품이나 서비스를 직간접적으로 이용하면서 단순히 그 기능뿐만 아니라 지각 가능한 모든 면에서 축적하게 되는 총제적 경험을 의미
• UX 용어를 처음 사용한 사람은 도널드 노먼으로 알려져 있음
• UX 분야에서 '수학의 정석' 같은 책이 도널드 노먼의 " 디자인과 인간 심리"임 ➡️ 사용자가 제품을 조작하는데 있어서 잠시라도 멈칫했다면 안좋은 UX임

• UX는 새로운 것이든 기존의 것이든 상관없이 사용자에게 최적의 무언가를 찾아내는 것을 가장 우선!
• 어포던스(Affordance- 어떤 행동을 유도): 제품 UX나 서비스 UI 설계를 고민할 때 가장 기본이 되어야 하는 개념
• 사용자들은 새로운 걸 좋아하는 듯 보여도 '다시 배우는 것'을 그다지 좋아하지 않아 이미 학습해서 자연스럽게 사용하고 있는 것을 적용 시켜주는 것이 좋음
• '카드 소팅기법': 사람들이 서로 관련이 있는 항목을 그룹화하여 어떻게 생각하고 연관시키는지 이해하기 위한 리서치 방법
  • 장점: 웹사이트의 구조를 설계하거나 수정할 때 유용한 방법론 / 사람들의 멘털 모델과 그들이 어떻게 생각하고 인식하는 지에 대한 인사이트를 제공해 줄 수 있음
  • 단점: 콘텐츠에 집중하다 보니 고객 여정과 별개로 사용될 경우 사용자들이 실제 과업에서 사용할 수 없는 인포메이션 아키텍처를 제작하게 되므로 사용자 니즈를 충족시키려면 카드 소팅은 프로토타입이나 페이퍼 프로토타입 사용성 테스트와 같은 다른 방법론과 함께 조합해서 사용해야 함
  • 종류
    • 개방형 카드 소팅: 참가자들이 아이템을 그룹으로 분류하고 그들이 원하는 방식으로 그룹명을 정함
    • 폐쇄형 카드 소팅: 그룹명을 미리 정하고 가장 관련이 있는 아이템들을 각각의 그룹에 따라 분류함
    • 하이브리드 카드 소팅: 개방형 카드소팅과 폐쇄형 카드소팅을 합친 방식으로 몇 가지 정의된 그룹이 있기는 하지만 참가자들이 그룹을 추가할 수 있음
    • 반복적인 카드 소팅: 개방형 카드 소팅과 폐쇄형 카드 소팅에서 모두 사용될 수 있으며, 참가자들이 반복적으로 앞의 참가자들이 분류한 것을 수정함

 

---

😆새로 알게 된 사실!

- 글로벌 시장에 진출할 앱 제작한다면 글 읽는 방식을 고려하여 디자인 해야 함 ➡️ 아랍 문화권에서는 우측에서 좌측 방향으로 글을 읽고 쓰기 때문에 중요한걸 왼쪽에서부터하여 오른쪽으로 와야함 (ex. 국내에선 아이콘 왼쪽, 글 오른쪽 / 아랍 아이콘 오른쪽, 글 왼쪽)

- 애플스토어는 기본적으로 애플 가이드에 맞게 제작해야 승인이 떨어질 가능성이 많음

- 색상은 채도를 신경써서 작업해야 함 ➡️ 빨간색은 지향(에러) / 빨간색을 사용할 경우 명도 있는 그레이로 변경해서 사용가능

- 프로그레스에서 가로로 길면 바라고 부를 수 있음, 위치를 나타낼 수 있는 요소를 네비게이션 바라고 부름

- 하단 네비게이션 바를 탭바, 버튼바라고 부름

- 탭바는 3~5개까지 사용하는 것이 좋음 ➡️ 6개 이상일 때 햄버거 버튼, 플로팅 버튼, 가로 스크롤 사용하기

- 젊은 사람들을 위한 앱을 만들면 프라이머 명암비를 3.1까지는 괜찮음

---

💭내일 계획

 🤍 데일리 회고

 🤍 디자인 카타

 🤍 강의 아티클 읽기

 🤍 TIL 작성 및 제출하기

 🤍 저녁 회고