[ch1] UI 디자인 핵심 원리

사용자 중심 디자인 :UCD

• 제품이나 서비스를 설계할 때, 사용자에게 공감하며 사용자의 문제를 이해하고, 이를 해결하기 위해 개선안을 제공함으로써, 사용자에게 만족을 제공하고자 하는 접근 방식.
• 우선 사용자와의 공감을 통해서 사용자의 목적, 행동, 상황, 니즈를 지속적으로 파악하고 사용자가 구체적으로 어떤 문제를 겪고 있는지 파악할 수 있어야 한다.
• 해당 제품이나 서비스를 처음 사용하는 이들도 쉽게 이해하고 사용할 수 있도록 직관적인 형태로 UI로 설계해야 한다.
   

UI 디자인 핵심 원리

• UI 디자인에 앞서 가장 먼저 고려해야 하는 것 : 제품과 서비스를 사용하는 사용자를 이해하는 것.
• 디자인의 목적 : 사용자 경험을 향상시키고 참여를 유도하는 것이다.
• 사용자는 제품이나 서비스 사용에 어려움이 없어야 하며 원하는 정보를 쉽게 탐색할 수 있어야 한다.
• 여러 긍정적인 경험들이 쌓여야 비로소 사용자는 서비스와 제품에 대해서 좋은 디자인이라고 느낀다.
• 즉, 의사결정은 사용자의 니즈와 기대를 중심으로 이루어져야한다.

직관적인 디자인 

• 사용자가 제품이나 서비스의 인터페이스를 따로 학습하지 않아도 쉽게 이해하고 사용할 수 있도록 직관적인 디자인을 만들어야 한다.

1. 사용자의 행동 유도.
   ▶버튼
   사용자 행동을 유도할 수 있는 중요한 인터페이스 요소로, 배경 색 혹은 콘텐츠와 대비되는 컬러를 사용하여 강조한다. 사용자의 행동을 유도하도록 흐름에 맞게 필요한 위치에 배치하여 쉽게 사용할 수 있어야 한다.
   
   ▶링크 
   더 자세한 정보를 확인할 수 있도록 연결하는 중요한 요소. 일반적으로 웹에선 파란색이 링크를 나타내며, 텍스트에 밑줄을 넣어 클릭이 가능함을 전달한다.
   
   
2. 정보를 시각적으로 표현.
   ▶픽토그램
   사용자가 정보를 더 쉽고 빠르게 이해하도록 픽토그램이나 아이콘을 활용한 시각적인 디자인을 할 수 있다.
   텍스트로 되어있는 정보를 픽토그램이나 아이콘을 활용하여 사용자의 이해를 돕고 핵심 정보를 강조해서 빠르게 전달할 수 있다.
   
   ▶아이콘
   문화적, 언어적 차이를 넘어 사용자가 즉각적으로 이해할 수 있는 요소. 국내외 상관 없이 친숙한 요소들을 이용해서 설명할 수 있다.
   
   
3. 직관적인 디자인 핵심 요소
   ▶ 대비 높은 색상 조합 : 배경과 텍스트의 색상을 대비하여 강조할 수 있다.
   ▶간단한 레이아웃 : 정보 구성과 디자인 요소를 적절하게 배치하여 이해하기 쉬운 레이아웃 구조로 만든다.
   ▶유연한 인터페이스 : 사용자가 원하는 요구사항을 편히 설정할 수 있도록 설정 기능을 제공한다.
   ▶아이콘 및 픽토그램 이미지 사용 : 누구나 이해하기 쉬운 아이콘과 이미지를 사용해서 사용자의 상호작용을 쉽게 도와준다.

일관된 디자인

• 일관된 디자인은 신뢰감을 전달하는 중요한 역할을 한다.
  
  
• 사용자가 환경이나 상황에 상관없이 제품과 서비스 이용에 동일한 사용 경험을 느낄 수 있도록 하는 것은 사용자의 불확실성을 줄이고 신뢰감을 전달할 수 있기에 중요한 부분이며. 새로운 인터페이스 사용 시, 빠르게 적응하고 이해할 수 있도록 도와준다.
  
  
• 일관된 사용자 경험
  ▶ 신뢰성 향상
  사용자가 원하는 정보를 탐색하거나 과업 수행 시의 만족도를 향상시킬 수 있으며, 이러한 긍정적인 경험을 지속적으로 하게 되면 제품이나 서비스에 대해 신뢰 하게 된다.
  
  ▶업무 효율성 증대
  일관된 경험을 통해 업무 시간을 단축시키고 빠른 결과물을 만들어 내면서도, 새로운 기능이 업데이트되어도 기존의 익숙한 상호작용 경험을 통해 빠르게 이해하고 적응할 수 있다.
  
  
• 일관된 디자인 핵심 요소.
  ▶디자인 시스템 구축
  컬러, 아이콘, 버튼 등의 시각적인 요소와 레이아웃, 그리드, UX 라이팅 등의 디자인 요소 기준을 명확히 정의하여 일관된 디자인을 할 수 있다.
  
  ▶ 사용자 피드백
  사용자로부터 지속적 피드백을 받아 분석하고 이를 디자인에 적용하여 사용자에게 친숙하면서 일관된 경험을 전달할 수 있다. 

가독성을 고려한 디자인

• 텍스트는 쉽게 읽을 수 있으면서 정보는 명확하고 간결하게 전달되도록 적절한 폰트 크기, 간격, 대비 등을 고려해야 한다.
• 여백 활용
  ▶화이트 스페이스 : 화면의 빈 공간. 
  ▶여백을 적절히 활용하면 가독성을 높이면서, 깔끔하고 정돈된 느낌을 주면서 중요한 요소를 더 돋보이게 강조할 수 있다.
  ▶여백도 디자인 요소 중 하나이기에, 너무 많은 요소로 여백을 채우지 않는다.
  
  
• 콘텐츠 그룹화
  ▶상대적으로 근접한 요소들은 하나의 그룹으로 보이며, 이를 이용해 비슷한 내용, 주제의 콘텐츠를 그룹화하여 사용자의 편의성을 높일 수 있다.
  
  
• 크기와 비율
  ▶중요도에 따라 크기와 비율을 조절해 배치하여 자연스럽게 시선을 끌면서 콘텐츠의 계층을 구성할 수 있다.
  ▶모든 요소의 중요도는 같지 않으며, 중요도에 따라 정보를 확인할 수 있도록 눈에 띄게 표시하여 강조한다.
• 계층 구조
  ▶사용자가 중요한 정보를 빠르고 쉽게 확인할 수 있도록 텍스트의 크기, 컬러, 위치를 활용하여 시각적 계층 구조를 설정한다.
  
  

명확한 피드백 제공

• 사용자는 인터페이스가 상호작용하면서 특정 작업을 수행할 때, 적절한 피드백을 받기를 기대한다.
• 즉각적인 반응 제공
  ▶사용자의 행동에 따라 시각 또는 청각적 반응을 피드백으로 제공하여 사용자가 다음 행동을 쉽게 결정할 수 있도록 도와준다.
  ▶파일을 업로드한 뒤, 진행사항을 즉시 전달하여 사용자의 불안을 줄이면서 이해는 높인다.
  
  
• 시각적 변화
  입력 필드에 정보를 모두 입력하거나 필요한 조건이 충족되었을 때 시각적인 변화를 줘 사용자가 내용을 인지할 수 있도록 한다.

접근성을 고려한 디자인

• 모든 사용자가 여러 조건에 관계 없이 동등하게 웹에 접근하여 평등한 사용을 보장하는 것을 의미.
• 다양한 사용자층이 제품을 이용할 수 있게 되므로 비즈니스 기회가 확장된다.
• 접근성을 고려한 디자인
  ▶텍스트+아이콘 : 둘을 같이 사용하는 것으로 명확한 정보 전달이 가능하다.
  ▶입력 필드 : 입력 필드에서 오류 상태를 표현할 때 텍스트로 정보를 전달할 수 있다.
  ▶텍스트 콘텐츠 : 텍스트 내에 링크나 버튼을 분리해서 작업해야 스크린 리더가 위치 파악하기 쉬워진다.
  ▶텍스트+라인 : 테두리 또는 라인을 활용하여 형태적 차이를 표현할 수 있다.
  
  
• 명도 대비
  ▶명도 대비는 색상 간의 차이를 의미하며, 요소 간의 색상 대비가 충분해야 누구나 원활한 서비스를 이용할 수 있다.
  ▶누구나 인식할 수 있도록 텍스트와 배경 간의 명도 대비는 4.5:1이상이어야한다.
  WCAG의 권장 사항은 다음과 같다.

등급	일반 텍스트(18미만 또는 Bold14미만)	큰 텍스트(18이상 또는 Bold14이상)
AA	4.5:1	3:1
AAA	7:1	4.5:1

• 접근성을 위한 디자인 전략
  ▶ 명확한 텍스트와 디자인 요소 : 텍스트, 버튼, 링크는 명확하게 구분하기 쉬워야 한다.
  ▶ 명도 대비 : 텍스트와 배경 색상 간의 충분한 대비를 제공하여 시각적인 접근성을 높여야 한다.
  ▶ 키보드 내비게이션 : 사용자가 마우스 없이 키보드만으로 웹사이트의 모든 기능을 사용할 수 있게 설계한다.
  ▶ 스크린 리더 : 스크린 리더가 올바르게 읽힐 수 있도록 설계한다.