UI 디자인 기초 UI design fundamentals

UI 디자인 기초 UI design fundamentals

---

 

• 대중적 전형의 이해

•  

  • 이미 대중적으료 학습된 요소를 숙지한다.
  • 대중적인 전형의 주요한 특징은 두 가지가 있다. 하나는 다들 쓰는 것이기 때문에 차별화가 어렵다는 것이고, 다른 하나는 모두가 알기 때문에 설명이 필요 없다는 것이다.
    • 대중적인 경험과의 차별화를 위해서는 그만큼 대중적인 경험을 잘 알아야 한다.
    • 모두가 알고 있기 때문에 UI 요소를 압축하는 가장 확실한 방법이 된다. 하트/엄지, 말풍선, 좌측화살표, X 이미지는 이것이 무엇을 의미하고 누르면 어떤 일이 발생하는지 구구절절 설명할 필요가 없다. 러닝 커브를 획기적으로 낮출 수 있으며, 이처럼 인지적 부하를 덜어주는 것이 리텐션에 유리하다. 사람들은 피곤함 같은 부정적 감정을 야기하는 화면에 오래 머물고 싶어하지 않는다.
• 시각적 계층

•  

  • 핵심적인 요소를 돋보이게 구성한다.
  • 가이드라인
    • 사이즈나 색 대비를 차등적으로 구성하며 더 중요한 정보가 한 눈에 띄도록 구성한다.

.

• 시각적 묵음/분리

•  

  • 요소 Grouping을 시각화한다.
  • 가이드라인 
    • 묶이는 정보를 더 근접하게 배치하거나, 색상, 컨테이너, 양식 등 톤앤 매너를 일치시킨다. 
• 핵심 행동/가치 : 정교한 단순함

•  

  • 가장 주요한 걸 추려 전면에 내세운다.
  • 가이드라인 
    • 최상위 시각적 계층이라 볼 수 있다. 사이즈나 색 대비를 가장 강하게 구성하고, 동시에 나머지의 접근성은 의도적으로 떨어뜨린다.
    • 관찰 위주 UI라면 상단에는 핵심 컨텐츠를 크게 배치하고 최상단이나 하단에는 유관 정보를 작게 배치한다. 행동 유도 UI라면 정보/입력 요소를 상단에 배치하고 하단에 CTA를 눈에 띄게 구성하는 것이 보편적이다.
  • 팁
    • 디자인 측면에서 화면이나 뷰 컴포넌트의 핵심이 무엇인지 정의하고 시작하면 UI 구성이 편리한 경우가 많다. 핵심이 정의됐기 때문에 책임 분리적으로 깔끔하고, 동시에 UI 요소가 팽창하는 것을 저지하는 주요한 가이드라인으로도 기능한다.
    • 사용성 측면에서도 잘 쓰지도 않는 게 전면에 과하게 배치되면 좋은 인상을 주기 어렵다. 그리고 이런 경향은 모바일 환경에서 두드러진다. 화면이 작은 만큼 사용자가 한 눈에 수용할 수 있는 정보량의 임계도 쪼그라들기 때문에 모바일 환경에서 핵심만 추리는 것(부수적인 걸 버리는 것)은 특히 주요하다.
      • 정보량의 임계 내에서 필요한 요소를 추리기 위해서는 대중적 전형을 적극적으로 도입하는 것이 필요하다. 이렇게 설명할 필요가 없는 요소는 정보량의 임계에 큰 영향을 주지 못한다. 다만 균형감은 잘 살펴야 한다.
• 시선의 흐름 : 아이고 어지러워

•  

  • 직선적인 시선을 설계한다.
  • 시선의 흐름이란
    • 상술과 꽤 겹친다는 인상을 받을 수 있다. 그러 이는 컴포넌트간 배치(상하좌우)에 따른 직관적인 시선의 흐름(직선/굴곡)을 의미한다. 상술은 주로 일 컴포넌트 레벨의 크기, 색깔, 배경 등을 염두하고 서술했다는 점에서 차이가 있다.
  • 가이드라인
    • 일반적으로 직선적인 흐름이 유리한데, 흐름이 굴곡지면 받아들이는 속도가 느리거나, 어지러움 내지는 피곤함을 유발할 수도 있다.
    • 텍스트 기반에서 좌측 정렬 UI가 일반적인 이유인데, 시선이 강하게 머무는 왼쪽에 일정한 가이드라인을 잡아두고 시선 약한 우측 사이드로 필연적인 굴곡을 덤핑해버리기 때문이다. 가운데 정렬 텍스트가 보면 볼수록 매력이 떨어지는 이유는 이것이라 생각한다. 가운데 아래로 향하는 시선을 중심으로 좌우 양쪽에 굴곡이 존재하기 때문에 깔끔하고 정돈된 느낌을 주기 어려운 것이다.
  • 팁
    • 텍스트 위주라면 크게 어렵지 않다. 언어에 따라서 좌측 정렬 또는 우측 정렬을 베이스로 전개하면 이 섹션의 문제는 없다고 보면 되고, 계층/그룹 등의 다른 섹션의 문제가 남는다.
    • 이미지 위주도 마찬가지로 크게 어렵지 않고, 가운데 정렬이 좋은 옵션으로 떠오른다. 좌우 가이드라인이 명확해지기 때문에 좌측,우측 정렬의 비대칭성이 불편한 경우가 많다. 이미지 사이즈나 여백을 일정하게 가져가는 것이 더 보기 좋은 이유도 이런 시선의 굴곡 때문으로 이해될 수 있다.
    • 텍스트와 이미지가 혼합된 경우가 가장 까다로운데, 텍스트는 일방 정렬, 이미지는 가운데 정렬이 가장 바람직한 옵션이기 때문이다. 이 케이스는 전체적인 비중을 따져 이미지 비중이 크다면 소수 텍스트도 가운데 정렬로 가져가서 전체적으로 가운데 중심의 직선적인 흐름을 유지하고, 텍스트 비중이 크다면 텍스트는 좌측 정렬로 가져가서 왼쪽에 시선의 중심을 두는 것이 경험적으로 타당했다.
      • 텍스트와 이미지를 엄격하게 분리된 객체로 묘사했지만, 실제로는 그 둘이 적절히 혼합하는 것이 케이스를 아우르기 좋다. 이에 따르자면 비중이라는 것은 요소의 시각적인 비중 대신 정체성 비중으로 이해할 수도 있다. 전체적으로 콤팩트하고 단정하다면 텍스트 정체성에 가까워 이미지도 일방 정렬이 잘 어울리고(주로 프로필 이미지나 텍스트 아이콘이 이에 속한다), 전체적으로 화려하다면 시선의 굴곡이 무시될 수 있어 가운데 정렬 텍스트도 볼만 하다(실물 카드나 게임에서 선택 카드를 떠올려보자. 이미지 비중이 크면 가운데 정렬/중앙대칭, 텍스트 비중이 크면 좌측정렬인 것이 대중적인데, 같은 맥락으로 사료된다)
      • 정체성 비중은 의도에 따라 만들어 나갈 수도 있다. 예를 들어 이미지 위에 딤을 배경으로 텍스트를 가운데 정렬로 부드럽게 덮으면 이미지+텍스트가 아니라 하나의 이미지 정체성을 구성할 수도 있다. 또는 이미지와 텍스트 섹션을 명확하게 분리하고자 한다면 가운데정렬 이미지와 분리된 일방 정렬 텍스트를 구성함이 바람직하다. 이미지의 수평선 자체가 역할을 구분선 하기 때문에 별도의 디바이더는 좀 과하다.
• 사용자 경험

•  

  • 사용자 경험이란
    • 상술한 요소들이 모두 귀결되는 종착역이라고 볼 수 있다. 심미적/의미적 균형감을 포괄한다. 인지적 부하, 차등적 크기와 색 대비, 톤앤매너, 요소간 배치 등 상술한 요소에 더불어 전체적인 정보의 양, 모서리 라운드, 상하좌우 여백 등에 의해 촉발되는 소비자의 종합적인 감상을 의미한다. 좋다, 별로다, 예쁘다, 어지럽다, 깔끔하다, 구성이 탄탄하다 등이 될 수 있다.
  • 가이드라인
    • 소비자의 사용성과 감성을 올바르게 캐치해야 한다. IT기기 숙련도의 양극화와 소비자의 행동을 촉구하는 핵심의 분리(차별화/실속)는 잘 알려져 있다. 소비자 유형에 맞추어 디자인을 구성하는 것이 바람직하다. 대중적인 경험의 현 위치를 캐치하는 감각이 중요하다
    • 스스로의 노력을 견제할 줄 알아야 한다. 인간은 노출이 많이 되거나 신경을 많이 쓴 것을 더 좋아하는 경향이 있는데, 이는 노력을 들인 대상을 그것의 객관적인 가치보다 더 고가치하게 평가하게 한다. 일 UI/UX의 위상은 절대적이거나 영원하지 않다. 눈에 띄는 디자인도 자주 보면 피곤하고, 훌륭한 디자인도 시간이 지나면 뻔하게 느껴진다. 운영진의 노력도 비슷하다.
      •