이번엔 UI/UX에 대해서 학습!

물리 버튼이 없어진 스마트폰, 사용자 중심 서비스가 강화됨에 따라 UI/UX는 더더욱 중요해짐, 그러므로 프론트엔드도 사용자 경험도 고려할줄 아는 개발자가 돼야함

UI/UX

UI: 걍 GUI, 사용자가 컴퓨터와 정보를 교환할 수 있는 직관적인 작업 환경(키보드, 마우스 등도 들어감)
UX: 사용자 경험, 사용자가 웹•앱을 사용하며 얻는 총체적 경험
즉, 서로의 관계는 EX로 느끼는 다양한 이유 중 UI가 있다. UI가 큰 비중을 차지하므로 제일 중요시 해야한다.

자주 쓰이는 UI 디자인 패턴

업계에서 디자인 시스템, 디자인 패턴을 자주 쓰는 형식이 있다. 이 것만 알아둬도 좋게 먹힐 것이다.

모달

• 기존에 이용하던 화면 위에 오버레이 되는 창
  • 코플릿의 레퍼런스 창 같은 거
• 닫기 버튼, 혹은 모달 범위 밖을 클릭하면 모달이 닫히는 것이 일반적
• 모달을 닫기 전에는 기존 화면과 상호작용할 수 없음
• 팝업과 다르게 모달은 브라우저 설정에 막히지 않아 꼭 보여줘야하는 내용이면 사용

토글

• On/Off를 설정할 때 사용하는 스위치 버튼
  • 다크모드, 언어, 검색 카테고리 등
• 색상, 스위치의 위치, 그림자 등의 시각적 효과를 주어 사용자가 토글의 상태를 직관적으로 알 수 있게 만들어야
• 보통 2개의 옵션을 사용하지만 직관적으로 만든다면 3개의 옵션도 가능
• 리액트의 useState가 떠오르지 않는가?

탭

• 콘텐츠를 분리해서 보여주고 싶을 때 사용
  • 
• 가로, 세로, 여러줄 등 줄서기 배열로 배치
• 각 섹션의 이름이 너무 길지 않아야 하고, 섹션의 구분이 명확해야 하며, 현재 어떤 섹션을 보고 있는지 표시

태그

• 콘텐츠를 설명하는 키워드를 사용해서 라벨을 붙이는 역할
  • 
• 사용자는 태그를 붙여 콘텐츠를 분류, 태그로 콘텐츠를 검색할 수 있음
• 사용자가 직접 정할 수도, 개발자가 정할 수도 있음, 확실한 건 태그의 추가와 제거는 확실히

자동완성

• 사용자가 내용을 입력 중일 때 사용자가 원하는 내용과 일치할 가능성이 높은 항목을 보여주는 것
  • 구글링 등 정보를 검색할 때 많이 쓰임
• 사용자가 정보를 입력하는 시간을 줄여줌, 즉 많은 정보가 나오지 않게끔 해야하고, 키보드로 조작 가능케 해야함
• useEffect가 생각나지 않음?

드롭다운

• 선택할 수 있는 항목을 숨겼다가 펼쳐지며 활성화 할 수 있는 패턴
  • 
• 보통 화살표를 눌러 활성화, 옮겨도 활성화하게끔 만들어도 오케이
• 아래 주석 같은 걸 달아 사용자가 자신이 선택한 항목을 정확히 알 수 있게 만드는 것이 제일 중요

아코디언

• 접었다 폈다 할 수 있는 컴포넌트의 패턴
  • 
• 보통 같은 패턴을 여러개 줄서기 배치
• 화면을 깔끔하게 구성(정보 과도화 방지), 상하관계 표현, 핵심 내용 두괄식으로 전달하게

캐러셀(Carousel)

• 공항의 수하물 컨베이어 벨트, 또는 회전목마라는 뜻, 걍 미국식표현의 슬라이드임
• 눌러야 넘어가거나, 일정 시간 이후 넘어가거나 등의 방식을 취함
• 콘텐츠가 넘어가는 걸 직관적으로 알 수 있게 양 옆 콘텐츠 일부를 보여주거나 화살표를 배치하는 방식

페이지네이션

• 한 페이지의 정보 과도화를 막기 위해 번호를 붙여 나누는 방식
• 사용자가 잠시 멈춰 생각하기에 매끄러운 EX를 추구한다면 안맞을 수도?

무한 스크롤(Infinite Scroll, Continuous Scroll)

• 페이지네이션과 마찬가지로 정보 과도화를 막기위해 맨 아래에 도달하면 렌더링 되는 디자인 시스템임
• 페이지네이션과는 반대로 매끄러운 UX를 주기위해 고안됐지만 언제 끝날지 모르고, 지나친 정보 과도화로 귀결돼 찾기 힘들다는 단점이 있음
• 주의점:

GNB(Global Navigation Bar), LNB(Local Navigation Bar)

• 

그리드 시스템

격자를 나눠 UI를 배치하는 기법

• 디자인 시스템은 세로로 나누는 '컬럼 그리드 시스템'으로 많이 쓴다. 세로를 격자로 나눠 Margin, Column, Gutter를 배치해 통일성을 이룬다.
• 특징
  • Margin: 여백으로 페이지의 틀을 정한다.
  • Column: 콘텐츠 위치 기준선, 표준으로 휴대폰에서 4개, 태블릿에서 8개, PC에서는 12개의 컬럼으로 나눔, 목표가 어떤 것인지 따라 설정하기
  • Gutter: 콘텐츠 사이 여백, 통일하기, 아무리 넓어도 컬럼 너비보다는 작게 설정

핵심: 반응형을 만들려면 각자 비율에 따라 콘텐츠를 나오게 만들어야 좋은 UX에 적합함

평가하기

UI/UX를 잘 만들려면 만들어놓은 분석 툴들이 있다.

• 피터 모빌(Peter Morville)의 벌집 모형
• 특히 사용성엔 제이콥 닐슨의 10가지 사용성 평가 기준
  참고: 휴리스틱 방법론(Heuristic): '체험적인'이라는 뜻으로, 완벽한 지식 대신 직관과 경험을 활용하는 방법론

와이어프레임, 프로토타입

기획단계에서 와이어프레임을 잘짜야 효율적인 협업 및 방향을 잃지 않고 프로토타입으로 시장 반응을 예상할 수 있다.핵심: 서로 같은 목표를 공유하기위한 도구

Figma

피그마는 최고의 툴이다.
Share를 통해 같이 보면서 디자인, 기획할 수 있고 프로토타이핑까지 할 수 있는 만능 툴이다.

어렵긴 한데 되게 재밌다.
핵심 기능: 컴포넌트를 만들어 옵션으로 드래그 해서 인스턴트를 만들어서 다같이 고칠 수 있게 하기, 스크롤, 페이지 연동(컴포넌트의 속성으로 연결)까지 쉽게 할 수 있다.

자주 쓰는 기능, 단축기

기본 단축키

• 복제하기 : Command + D 혹은 ⭐️Option 누른 상태로 드래그(인스턴스도)
• 그룹으로 묶기 : Command + G
• 프레임으로 묶기 : Command + Option + G
• 그룹, 프레임 해제하기 : Command + Shift + G
• ⭐️간격 측정하기 : 요소를 선택한 상태에서 Option 누르고 다른 요소에 마우스 올려놓기

프레임으로는 페이지 연동 안된다? 알겠제?

오토 레이아웃

• 오토 레이아웃 추가하기
  • 오토 레이아웃 적용할 요소 선택 → Shift + A
  • 오토 레이아웃 적용할 요소 선택 → Design 탭 Auto layout 에서 + 버튼 선택
• 오토 레이아웃 제거하기 : Shift + Option + A

컴포넌트

• ⭐️단일 컴포넌트 생성 : 컴포넌트로 만들 요소 선택 → Command + Option + K 혹은 상단 Create component 버튼 클릭(다이아 4개)
• 컴포넌트 여러 개 생성 : 컴포넌트로 만들 요소 모두 선택 → Create component 버튼 옆 드롭다운 클릭 → Create multiple component 선택
• 상태를 가진 컴포넌트 생성 : 컴포넌트의 상태로 만들 요소 모두 선택 → Create component 버튼 옆 드롭다운 클릭 → Create component set 선택(버튼 여러개 만들었음 전체 드래그 후 set 누르면 편하게!)
• ⭐️컴포넌트에 상태 추가하기 : 상태를 추가할 컴포넌트 선택 → 화면 우측 Design 탭 Properties 에서 + 버튼 클릭 → Variant 선택 → 컴포넌트 하단에 생긴 보라색 + 버튼 눌러 상태 추가
  • ⭐️Variant로 연결해야 페이지들도 연동됨
• ⭐️컴포넌트의 인스턴스 생성
  • 컴포넌트 복제하기 (Command + D 혹은 Option 누른 상태로 드래그)
  • 화면 좌측 Assets 탭에서 인스턴스를 생성할 컴포넌트를 드래그하여 화면에 끌어다놓기

⭐️Figma는 이 외에도 다양한 단축키를 제공합니다. Figma 화면에서 Control + Shift + ? 를 누르면 사용 가능한 모든 단축키를 확인!

🦏