[제로베이스] 1주차 학습일지2

DANO PARK·2024년 9월 4일

zero-base

목록 보기

7/37

Font
- 타이포그래피는 콘텐츠의 중요 정도를 구분하고 플랫폼에서 사용하는 텍스트 전체에 규칙을 두어 규격화
- 12px보다 작은 사이즈는 권장하지 않음
- Headline : 화면에서 가장 큰 텍스트로 중요한 정보를 짧게 전달하는 데 사용
- Body : 일반적으로 줄글에 사용
- Caption : 간단한 한 줄 또는 두 줄의 주석에서 사용
Color
- 규칙적인 컬러사용을 통해 일관된 브랜드 경험을 제공, 쉬운 정보인지를 제공
- 의도가 반영된 컬러 사용을 통해 사용자와 서비스간의 쉬운 의사소통 유도
Grid
- 하얀 백지에 논리를 부여하는 작업
- 디자인 영역을 일정하게 나누는 작업
Icon
- 사용자에게 아이디어 및 오브젝트를 전달하는 가장 효율적인 도구
- 정보의 시각화를 통해 직관적인 콘텐츠 인지를 도움

Button
- 버튼의 종류는 주 버튼, 기능 버튼으로 역할에 맞추어 사용
Selection control
- checkbox
- 사용자가 선택할 수 있는 미리 정의된 옵션이 하나 이상일때 사용
- 사용자들은 선택사항 중 복수 선택 가능
- 선택 옵션이 4개 이하일때 사용하는 것이 권장
- radio button
  - 미리 정의된 옵션이 하나 이상 있을 때 사용
    - 체크박스와 다르게 하나만 선택해야 하는 경우 사용
    - 다른 항목 선택 시 기존의 선택 된 항목은 선택 해제 됨
- switches control
  - 특정 옵션을 켜고 끌 수 있는 컨트롤
Badge
- 새로운 업데이트와 알림에 대한 정보를 제공할 때 사용
- 메뉴 또는 기능의 상태를 상위 화면에서 표시
Dialog
- 사용자의 지시 사항이나 결정을 재차 묻기 위해 대화 형태로 띄어지는 창
Tab
- 페이지 내 유사한 정보를 그룹핑하여 콘텐츠를 정리할 때 사용
- 여러 섹션을 신속하게 전환
- 탭이 표현하는 정보의 볼륨에 따라 뎁스라는 위계가 생기며 해당 위계를 탭에도 시각적으로 표현
Image box
- 배너나 프로모션 등에 이미지 영역과 텍스트 영역을 구분하여 사용

모듈들이 모여 하나의 캔버스 위에 놓여졌을 때 페이지를 구성

GNB
- Global Navigation Bar
- 웹페이지에서 표시되는 하이퍼링크들의 집합 영역
- 모바일이나 웹에서 앱과 웹들의 최상단에 위치한 메뉴들이 모이는 영역
Bottom bar
- 모바일 화면 하단에 탐색 및 주요 작업을 표시
- 주요 메뉴들로 구성되어 사용자가 쉽고 빠르게 접근
- 화면에 고정되어 스크롤 시에도 사라지지 않음
FAB
- Floating Action Button
- 모든 화면 내용의 앞에 표시되어 일반적으로 가운데에 아이콘을 포함한 원형 모양
- 기능적으로 빠르게 접근해야 하는 메뉴
Footer
- 주요한 메뉴나 연관사이트를 열거
- 저작권 관련 카피라이트 등을 작성
Popup
- 사용자에게 중요한 정보를 전달하거나 사용자의 선택을 요청하기 위해 앱 콘텐츠 앞에 나타나는 모달 형태
Table
- 많은 정보를 데이블 안에 정리하여 보여주어야 할 때 사용
- 정보를 효과적으로 구분하고 나눌 수 있다