웹 디자인의 기본 요소
- 색상이 많이 사용된 이미지 -> JPG
- 몇가지 단색이 사용된 이미지 -> GIF
- 모바일 인터페이스 -> PNG로 저장할 때도 많음
- 웹상 -> SVG도 많이 사용
웹 색상 모드
- RGB 색상 모드 기준
- RGB 색상 바탕으로 16진수로 코드 표기하는 HEX 표기법 사용
- HEX ; 0-255 총 256색을 표현
폰트 크기
em, rem, px
em ; 미리 지정된 부모의 폰트 크기 기준, 백분율로 폰트 크기를 나타냄
1em = 16px (구글 크롬 브라우저의 기본 폰트 크기)
시스템 기반의 디자인 요소
버튼 스타일 시트 Button Style Sheet
- 버튼 레이블 : 버튼을 누를 때 실행되는 이름 / 동작하는 정보 명확히 전달
- 컨테이너 : 레이블을 감싸는 물리적 버튼에서 터치할 수 있는 영역(hit area)
- 아이콘 : 버튼 정보의 상징적 의미를 그림으로 표현한 요소
- 섀도우 : 버튼의 두께감을 그림자 모양으로 표현한 요소 / 클릭할 대상 표현
- 라운딩 : 버튼의 모서리 값을 조절해 부드러운 느낌을 줌
- 아웃라인 : 버튼은 주위 상황 or 전체 콘셉트에 맞게 디자인
인풋 레이블 Input Lable
- 사용자가 검색 필드에 작성하는 키워드를 유도하는 요소로 사용
- 사용자가 입력한 정보보다 더 크게 배치하거나 강조 X
체크박스, 라디오 버튼, 토글
체크박스 checkbox : 하나 혹은 다수의 독립된 선택 옵션, 복수 선택 가능
- 체크박스가 여러개인 경우 ; 일괄적으로 비교할 수 있는 형태로 정렬
- 세로로 정렬할 경우 ; 체크박스 왼쪽 위치에 고정
- 옵션 선택 시 ; 하이라이트 활용 -> 사용자 주의 이끌기
- 선택할 옵션 많은 경우 ; 전체 항목 선택할 수 있는 옵션도 제공
라디오 버튼 radio button : 여러 항목 중 버튼을 누르면 하나의 항목만 활성화
- 2가지 옵션을 선택하는 경우라면 드롭다운 메뉴보다 라디오 버튼 사용
토클 toggle : 좌우로 밀어 하나만 선택 가능, 다른 옵션은 자동으로 비활성화
웹과 상호작용하는 UX/UI
디자인 인터랙션 시 주의사항
1. 가시성 고려한 디자인 작업
UI요소 형태 표현할 때 중요 콘탠츠 요소가 먼저 눈에 띄게 배치 + 일관되게
2. 인터랙션 디자인에 있어서 피드백 정확히 전달
사용자는 제스처를 취할 때 그 이후의 변화를 기대하거나 예측
미리 짜여진 시스템을 공유하고 화면 진행에 대한 UI구조 이해
L4. iOS와 안드로이드 환경 이해하기
WSG(Web Style Guide)
- 웹사이트의 모든 페이지에 통일된 UI와 브랜딩을 나타내어 일관된 사용자 경험을 창출하고 UX사용성을 높이기 위한 규칙
➡️ UI 디자이너 뿐 아니라 프론트엔드 및 백엔드 개발자들 또한 스타일 가이드를 준수해 통일된 코드를 작성해야 함
❓WHY❓
- UI컴포넌트 코드처럼 중요한 정보와 데이터 파일을 빠르게 검색하고 쉽게 재사용할 수 있기 때문
- 디바이스별 UI 컴포넌트를 통일성 있게 정리해 두어야 UX 디자이너가 브랜딩 스타일을 반응형 레이아웃으로 구성
톤 앤 매너 Tone and Manner
- 통일된 색감이나 분위기를 나타냄
- 다양한 요소를 절제된 디자인으로 규정하는 것이 중요
- 타이포그래피 및 서체, 색상 팔레트, 아이콘 메타포, 이미지, UI 컴포넌트, 브랜딩 톤, 코드 문서의 일관성 등을 체크
ex) 좌우 행간 여백 크기 등
애플의 플랫 디자인
2007. 아이폰 1세대 등장
- 스큐어모피즘 skeuomorphism
- 세밀한 실사 그대로 표현, 장식적 치장과 화려한 그래픽 극사실적으로 표현
2012. iOS 7세대 등장
- 플랫 디자인 flat design
- 애플의 디자인 철학에서 새로운 변화를 추구
- 단순한 색상과 2차원 형태로 구성한 깔끔하고 심플한 디자인
좌 : iOS 6 스큐어모피즘 // 우 : iOS 7 플랫 디자인
2020.
- 뉴모피즘 neumorphism 유행
- 스큐어모피즘보다 입체감 ⬇️, 플랫 디자인보다 빛의 3차원 효과 ⬆️
2021.
- 글래스모피즘 glassmorphism 인터페이스 유행
- 뒤 배경이 보이는 불투명한 슬라이드 형태의 인터페이스
구글의 머티리얼 디자인
구글의 UI 디자인 컨셉 : 머티리얼 디자인 Material Design
- 플랫 디자인의 단점 보완 > 자연적 빛, 그림자, 질감 등의 물질적 요소 추가
- 물질적 공간에서 단순한 그래픽, 조형성 강조한 디자인 요소 활용
- 강조와 대비를 주며 그리드 공간 축척 색상 이미지 등을 기반
- 모션 움직임 ; 연속성을 유연하게 표현, 사용자 간 인터랙션 반응의 전환에 집중시킴
- 새로운 변환을 생성하는 인터랙션 디자인 구현
- 공간과 디자인 강약을 강조
안드로이드와 iOS 인터페이스의 차이
가장 큰 차이점은 ❕탐색 패턴의 구조❕
예를 들면 iOS는 스마트폰 자체에 뒤로 가기 전체 메뉴 노출을 하지 않고, 앱 내에 버튼이 삽입되어 있습니다. 따라서 앱/웹 디자인을 할 때 뒤로 가기 버튼을 생략하면 안됩니다.
상단 메뉴와 하단 메뉴
상단 메뉴
- iOS : 내비게이션 바 Navigation Bar 존재
- 안드로이드 : 액션 바 Action Bar >> 동작 수행하는 아이콘 2~3개 오른쪽에 배치
하단 메뉴
- iOS : 툴바 Tool Bar 사용
- 안드로이드 : 플로팅 액션 버튼 Floating Action Button
▶️ 페이지 간 이동
서체
< 기본 서체 >
안드로이드 - Roboto
iOS - San Francisco, 산돌고딕 네오
그림자 표현
안드로이드 - Elevation 기본 UI, 나인패치로 에셋 전송
iOS - Swift or Objective-C
*나인패치란?
이미지 9개 구역으로 나누어, 이미지의 크기가 바뀔 때 늘어나도 되는 부분과 크기가 고정된 부분을 정하여 왜곡을 막을 수 있다
해상도
안드로이드 - dp 단위
iOS - pt 단위
해상도에 따른 픽셀 단위 기준으로 안드로이드 및 iOS에 등록되는 이미지가 픽셀 밀도에 따라 1x, 2x, 3x, 4x까지 에셋이 입력된다.
Adobe XD에서는 3x까지 내보내기를 지원함
