반응형
3주차 - 7/10
7/10 타이포그래피
타이포 그래피
- 타이포그래피는 활자를 의미하는 'Type'과 기술을 의미하는 'Graphy'의 합성어 활자의 서체나 글자 배치 다위를 구성하고 표현하는 것을 말한다
- Type: 글자 하나하나의 모양(셰리프, 산셰리프 등)
- Font: 완성된 한 벌의 글자(가, 나, 다, -파..)
- Typephograh: 글자의 글자가 위치한 공간, 레이아웃 된 모양 등 완성된 한벌의 글자인 font들의 조합으로 이루어지는 그래픽 과정
기본 용어
- Baseline - 수평 기준선
- Leading - 문자 행의 수직 간격
- Serif - 돌기(삐침) - 폰트들이 디바이스별로 보이는 것이 다르다
- Kerning - 낱문자 사이의 간격
Universe
- 헬베티가와 더불어 제목 또는 본문에 많이 사용하는 폰트
Bodoni (serif)
- 감각적으로 디자인 컨셉 표현할 때 쓰기 좋은 폰트 - 보그에서 많이 쓴다
Playfair Display
아리따 글꼴
Web Font
- 웹폰트 사용 이유
- 우수한 웹 접근성
- 효과적인 메세지 전달
- 검색 최적화
- 쉬운 텍스트 수정
- 서버단에 가지고 있다가 함께 불러올 수 있다
- 웹 폰트 최적화 방법
- 한글 글꼴 조합이 서브셋(2350자)인 폰트 사용하기: 글꼴 조합은 초성 19자, 중성 21자, 종성 28자 모두 조합해 11,172자의 글꼴 조합 목록을 만드는데, 조합 목록 수가 많을 수록 용량 증가, 서브셋 폰트는 용량을 줄이기 위해 현대에서 쓰지 않는 조합을 제외해 2350자의 조합만 만든 것
- 두께는 꼭 필요한 것만 사용: 정말 필요한 두께만 골라서 디자인 하는게 용량적 측면에서 유리. 글꼴의 두께는 Bold, Regular, Light만 사용해도 충분
- 시스템 폰트
- 각 운영체제에 기본으로 설치된 폰트
- 윈도우: 맑은 고딕, 돋움, arial / 맥: 애플 SD 고딕 네오
- 사용자의 눈에는 시스템 폰트가 익숙해서 읽기 편하고 더 빠르게 읽는다
Font Format
- TTF(True Type Font)
- 가장 오래된 폰트 파일 형식
- 맥과 윈도우에서 모두 사용 가능
- OTF(Open Type Font)
- 어도비와 MS에서 만든 폰트 형식으로 섬세한 작업으로 그래픽 디자인이나 인쇄에 사용
- EOT(Embeded Open Type)
- MS에서 웹에 사용할 목적으로 만들어진 글꼴 형식
- 익스플로어만 지원해서 맥에서는 글자가 깨짐
- WOFF(Web Open Font Format)
- 웹에 사용할 목적으로 만들어진 글꼴로 거의 모든 브라우저에서 사용 가능
- 압축이라 용량이 가벼워 다운로드 속도가 빠름
- SVG(Scalable Vector Graphics)
- 벡터 형식의 글꼴로 웹과 모바일에서 사용하기 가벼어 최근에 많이 사용
기준 폰트의 크기
- 본문의 크기: 14-18px
- 사용자의 연령대를 고려한 크기(고령자 17-18px)
- 최소 폰트 크기: 웹에서 10px미만은 웹접근성을 이유로 크롬 포함 일부 브라우저에서 출력 안됨
한 줄에 들어가는 글자 수
- 짧은 문단에는 줄 당 20-40자, 긴 문단에는 줄당 40-60자
Font Hierarchy
폰트의 계층 구조
- 제목, 캡션, 본문, 버튼 등 다양한 형식에서 사용자가 쉽게 파악할 수 있도록 계층 부여
- 글자의 크기, 두께, 색으로 구분
- 매끄럽고 직관적으로 사용할 때 도와주는 계층 구조
Color
빨강
- 정열, 도발, 사랑, 피, 힘, 정지, 불, 위험, 혁명 등 상징
- 코카콜라, 리바이스, KFC, 유튜브, 넷플릭스
주황
- 약동, 원기, 활력, 다정, 만족, 유쾌, 적극 등 상징
- 환타, 에르메스, ING생명, 던킨 도너츠
노랑
- 희망, 유쾌, 황금, 주목, 햇빛 등 상징
- 맥도날드, 3M, 니콘, 레모나
파랑
- 냉정, 차가움, 시원함, 평온함, 바다, 고요, 명상, 영원, 청명, 온전함 등 상징
- 페이스북, 삼성, 포카리, 인텔, GM
초록
- 안전, 평화, 휴식, 여름, 식수, 안식, 깨끗, 신성 등 상징
- 스타벅스, 하이네켄, 네이버
보라
- 신비, 창조, 우아, 사치, 고위, 존업, 예술, 개성, 불안, 질투 등 상징
- 페덱스, 웰치스
사회마다 컬러가 주는 의미가 다르기 때문에, 그에 맞게 디자인을 하는 것이 좋다
일일 회고
- 컬러랑 타이포그래피 배웠는데, 지금까지 수업 중 가장 재미있었다! 옛날부터 배우고 싶었던 거여서 더 그랬다.
- 알림 설정 디벨롭 관련해서 의견을 많이 냈다. 우리팀은 한 페이지를 서로 의견을 나누고, 그 중 가장 적합한 의견을 한 카드씩 모았다. 그렇게 완성된 와이어프레임으로 UI를 작업했다.
반응형