티스토리 뷰
Material Design
구글 가이드로 기본적인 가이드라인 제공 지침서이다.
① 기본틀 많이 따라해보기
② 유명 회사들이 얼마나 잘 지키고 있는 지 비교해보기
Material Design 폰트 가이드라인에 대해 설명하고 있는 유튜브이다.
https://www.youtube.com/watch?v=a-K1Uu13Uk8
아래는 Ma dia님 유튜브 방송 보며 정리한 내용.
아래 폰트는 Noto Sans kr을 사용했다.
익숙한 폰트로 일정하게 사용하는 것이 좋고, 한 디자인 당 폰트는 2가지를 넘지
않는 것이 좋다.
초보자가 알아야 할 디자인팁 5가지
초보자가 알아야 할 디자인팁 5가지 유튜브 영상이다.
이 곳에 나오는 폰트 팁도 좋은 것 같다.
https://www.youtube.com/watch?v=tq7iIZqIUeM&feature=youtu.be
1. CONTRAST[대비]
예를 들면 검은색과 흰색으로 확실하게 눈에 띄는 듯한 효과를 줘 가독성면에서 도움을 준다.
이미지와 텍스트에 시선을 주기위해 배경에 대비가 되는 색을 사용한다.
2. COLOR[색상]
WARM톤과 COLD톤으로 일정하게 가는 게 좋다. 통일성을 위해 이미지와 텍스트가 쿨톤이면
배경도 쿨톤으로 가는 것이 좋다.
아래는 무료 사이트로 톤에 맞는 색상조합을 쉽게 찾을 수 있다.
3. FONT[글씨체]
맥시멈 2종류로 끝내는 게 좋다. 자간으로 디자이너의 센스 즉 가독성이 결정된다. 답답하지도
너무 여유롭지도 않게 조절해야 한다.
중, 중보다는 강, 약 으로 사용해야 지루하지 않게 이뻐 보인다.
글씨에도 대비가 필요하다.
4. WHITE SPACE[여백]
시선을 주고 싶은 글씨가 있다고 무작정 크게 하는 것 보다는 글씨를 배경에 넣을 때
전체적으로 조금 줄이게 위치 시키더라도 좌우상하에 여백을 주는 게 가독성 면에서 더 뛰어날
수 있다. 조금 더 심플하고 트렌디해보이는 중요한 부분! 적당한 여백은 가독성을 증가시키는
역할을 한다.
5. SHAPE[모양]
모양을 추가해 텍스트들을 나눌 수 있다. 더 꽉 차 보이게 풍부하게 재미있게 만들 수 있다.
반복되지 않는 다양한 패턴으로 만들어 주는 게 좋다. 남발은 언제나 주의!
쇼핑몰 상세페이지 글꼴 폰트의 정답
김경은강사단아샘 https://www.youtube.com/watch?v=zcrPvDCs9bw
네이버에서 나눔글꼴 검색해 다운받기(윈도우용/맥용) > 나눔스퀘어를 요즘 가장 많이 사용한다.
1. 제목글씨
나눔스퀘어 울트라라이트/라이트/레귤러/볼드/엑스트라볼드
제목은 엑스트라볼드 60pt 정도가 많이 사용됨.
2. 본문글씨
본문은 라이트체로 얇게 글씨가 많을 때는 27pt 중간사이즈는 42pt
3의 배수씩 늘어나게 하는 게 좋다.
모바일에서 확인했을 때 글씨가 깨지지 않게 확대된다.
글씨의 Antialiasing
없음/선명하게(딱부러지는느낌)/뚜렷하게/강하게(굵어지나외곽선은부드럽게)/매끄럽게.
없음으로 하면 찌글찌글하게 될 수 있기 때문에 선명하게(sharpen) 또는 강하게(strong) 추천.
나눔명조, 조선일보 명조체(가독성 유발하는 진중한 느낌, sans serif)도 많이 사용된다.
아주 검정글씨보다는 어두운 회색이 가독성이 좋고 어울림이 좋다.
3. 폰트 강조라인
강조하는 부분만 글씨체를 키우거나, 색을 넣어주거나, 모양을 넣어준다.
4. 폰트별 사용
나눔손글씨펜은 고객들과의 대화
배달의민족체는 재미있게 새로운 아이디어 등에 사용
5. 폰트 규정
폰트규정을 미리 만들어 놓고 사용할 때마다 끌어다 쓰면 쉽게 사용할 수 있다.
css사용시
1. 기본크기 = 12pt = 16px = 1em(배수단위) = 100%
2. 글꼴의 기본형
Serif : 삐침이 있는 글꼴(명조체) Georgia, Times New Roman 등 책에서 많이 사용되는 가독성 좋은 글꼴
Sans-serif : 삐침이 없는 글꼴(고딕체) Arial, Verdana, Helvatica 등 웹에서 많이 사용되는 글꼴
Monospace : 글자 폭이 일정한 글꼴(고정폭 글꼴) Courier New, Lucida Console 등
퍼블리싱 기초 강의 보기 좋은 곳 곰쌤
https://www.youtube.com/channel/UC-2s80lJ2eHy8LfdSoBy8xg/playlists
웹폰트 적용방법 유튜브 영상 플러리
https://www.youtube.com/watch?v=AAWlBkCiNCk
3. 웹 폰트 적용하기
구글 > google fonts 검색 https://fonts.google.com/
원하는 폰트 검색 후 옵션 선택하면 css 인베드를 제공해 준다.
@import 탭에 있는 코드를 복사해 와서 css 파일 상단에 넣어주면 폰트파일이 로드가 된다.
font-family 복사해 css에 넣어주면 폰트가 적용되어 끝.
Open-sans는 한글을 지원하지 않기 때문에 한글폰트를 가져온다.
한글폰트는 아래처럼 로드한다.
google fonts early access 검색 https://fonts.google.com/earlyaccess
ctrl + F 혹은 command + F 로 검색 Korean
모바일 퍼스트 반응형 웹디자인(RWD) 기초 강의 야무
https://www.youtube.com/watch?v=c5TMhQDFrAU
반응형 웹디자인(RWD) 기초 강의 webstoryboy
https://www.youtube.com/watch?v=Br95hhB8xgE&list=PL4UVBBIc6giLZFjhh-UXovCCVlP57YnzA
psd > responsive_large.psd, responsive_medium.psd, responsive_small.psd → 하나의 index.html
그리드 시스템 베이스라인 / 인터렉션으로 생명력 부여
글꼴의 단위에 따른 크기 비교표
1. 기본크기 = 12pt = 16px = 1em(
http://kukie.net/resources/design/font_size.html
기존 홈페이지의 문제점 파악
디자인 방향성 결정, 요소들을 수집
기업과 어울리는 컬러와 효과를 선택
적합한 레이아웃 스케치
사용자 경험을 바탕으로 웹디자인
심미성/사용성/그사이트에맞는목적과전략을가진기획
▶ 상업적 용도 무료폰트 총정리
https://blog.naver.com/webmandu/221009606314
▶ 텍스트 아이콘 사용하기
▶ 폰트변환 후 css에 적용하기
https://blog.naver.com/webmandu/221012326995
https://blog.naver.com/webmandu/221013150029