WEB
CONF
.ASIA
참관
후기발표
NTS
@이상진 / @양현선
" 환산시 약 27만원 "
" 5장 이상 30% 할인"
Day 01
CSS 그리드 레이아웃
상향식 성능 향상
뉴스의 데이터 시각화
컬러 시스템 인터렉션
이벤트 Loop
디자인 철학
10:45 - 11:30
11:30 - 12:15
13:30 - 14:15
14:15 - 15:00
15:45 - 16:30
16:30 - 17:15
Day 02
Animation 고르기
Web App을 해킹하는 방법
험난한 업무 프로세스 진행하기
CSS 커스텀 속성의 전략적 사용
웹폰트 최적화
웹으로 특이하고 이상한 것 만들기
Day 01
CSS 그리드 레이아웃
상향식 성능 향상
뉴스의 데이터 시각화
컬러 시스템 인터렉션
이벤트 Loop
디자인 철학
10:45 - 11:30
11:30 - 12:15
13:30 - 14:15
14:15 - 15:00
15:45 - 16:30
16:30 - 17:15
Day 02
Animation 고르기
Web App을 해킹하는 방법
험난한 업무 프로세스 진행하기
CSS 커스텀 속성의 전략적 사용
웹폰트 최적화
웹으로 특이하고 이상한 것 만들기
디자인 철학
Design
Frontend
Backend
All
Day 01
CSS 그리드 레이아웃
상향식 성능 향상
뉴스의 데이터 시각화
컬러 시스템 인터렉션
이벤트 Loop
디자인 철학
10:45 - 11:30
11:30 - 12:15
13:30 - 14:15
14:15 - 15:00
15:45 - 16:30
16:30 - 17:15
Day 02
Animation 고르기
Web App을 해킹하는 방법
험난한 업무 프로세스 진행하기
CSS 커스텀 속성의 전략적 사용
웹폰트 최적화
웹으로 특이하고 이상한 것 만들기
뉴스의 데이터 시각화
디자인 철학
Design
Frontend
Backend
All
Day 01
CSS 그리드 레이아웃
상향식 성능 향상
뉴스의 데이터 시각화
컬러 시스템 인터렉션
이벤트 Loop
디자인 철학
10:45 - 11:30
11:30 - 12:15
13:30 - 14:15
14:15 - 15:00
15:45 - 16:30
16:30 - 17:15
Day 02
Animation 고르기
Web App을 해킹하는 방법
험난한 업무 프로세스 진행하기
CSS 커스텀 속성의 전략적 사용
웹폰트 최적화
웹으로 특이하고 이상한 것 만들기
CSS 그리드 레이아웃
CSS 커스텀 속성의 전략적 사용
웹폰트 최적화
웹으로 특이하고 이상한 것 만들기
이벤트 Loop
Animation고르기
Design
Frontend
Backend
All
Day 01
CSS 그리드 레이아웃
상향식 성능 향상
뉴스의 데이터 시각화
컬러 시스템 인터렉션
이벤트 Loop
디자인 철학
10:45 - 11:30
11:30 - 12:15
13:30 - 14:15
14:15 - 15:00
15:45 - 16:30
16:30 - 17:15
Day 02
Animation 고르기
Web App을 해킹하는 방법
험난한 업무 프로세스 진행하기
CSS 커스텀 속성의 전략적 사용
웹폰트 최적화
웹으로 특이하고 이상한 것 만들기
상향식 성능 향상
Web App을 해킹하는 방법
Design
Frontend
Backend
All
Day 01
CSS 그리드 레이아웃
상향식 성능 향상
뉴스의 데이터 시각화
컬러 시스템 인터렉션
이벤트 Loop
디자인 철학
10:45 - 11:30
11:30 - 12:15
13:30 - 14:15
14:15 - 15:00
15:45 - 16:30
16:30 - 17:15
Day 02
Animation 고르기
Web App을 해킹하는 방법
험난한 업무 프로세스 진행하기
CSS 커스텀 속성의 전략적 사용
웹폰트 최적화
웹으로 특이하고 이상한 것 만들기
상향식 성능 향상
험난한 엄무 프로세스 진행하기
Design
Frontend
Backend
All
Day 01
CSS 그리드 레이아웃
상향식 성능 향상
뉴스의 데이터 시각화
컬러 시스템 인터렉션
이벤트 Loop
디자인 철학
10:45 - 11:30
11:30 - 12:15
13:30 - 14:15
14:15 - 15:00
15:45 - 16:30
16:30 - 17:15
Day 02
Animation 고르기
Web App을 해킹하는 방법
험난한 업무 프로세스 진행하기
CSS 커스텀 속성의 전략적 사용
웹폰트 최적화
웹으로 특이하고 이상한 것 만들기
상향식 성능 향상
넓은 스펙트럼
+
깊이 있는 세션
(그리고 영어...)
Day 01
CSS 그리드 레이아웃
상향식 성능 향상
뉴스의 데이터 시각화
컬러 시스템 인터렉션
이벤트 Loop
디자인 철학
10:45 - 11:30
11:30 - 12:15
13:30 - 14:15
14:15 - 15:00
15:45 - 16:30
16:30 - 17:15
Day 02
Animation 고르기
Web App을 해킹하는 방법
험난한 업무 프로세스 진행하기
CSS 커스텀 속성의 전략적 사용
웹폰트 최적화
웹으로 특이하고 이상한 것 만들기
Day 01
CSS 그리드 레이아웃
상향식 성능 향상
뉴스의 데이터 시각화
컬러 시스템 인터렉션
이벤트 Loop
디자인 철학
10:45 - 11:30
11:30 - 12:15
13:30 - 14:15
14:15 - 15:00
15:45 - 16:30
16:30 - 17:15
Day 02
Animation 고르기
Web App을 해킹하는 방법
험난한 업무 프로세스 진행하기
CSS 커스텀 속성의 전략적 사용
웹폰트 최적화
웹으로 특이하고 이상한 것 만들기
Day 01
CSS 그리드 레이아웃
상향식 성능 향상
뉴스의 데이터 시각화
컬러 시스템 인터렉션
이벤트 Loop
디자인 철학
10:45 - 11:30
11:30 - 12:15
13:30 - 14:15
14:15 - 15:00
15:45 - 16:30
16:30 - 17:15
Day 02
Animation 고르기
Web App을 해킹하는 방법
험난한 업무 프로세스 진행하기
CSS 커스텀 속성의 전략적 사용
웹폰트 최적화
웹으로 특이하고 이상한 것 만들기
- CSS 그리드 레이아웃
- Animation 고르기
- 웹폰트 최적화
@양현선
@이상진
&
" Web font "
- 문제 해결과 최적화 -
일반적으로 웹브라우저에 표시될 폰트는
"사용자의 컴퓨터(=로컬)" 에 설치된 폰트로 표시된다.
로컬폰트
# 웹폰트란?
일반적으로 웹브라우저에 표시될 폰트는
"사용자의 컴퓨터(=로컬)" 에 설치된 폰트로 표시된다.
윈도우 OS
Mac OS
로컬폰트
# 웹폰트란?
웹폰트는 로컬의 폰트 설치 상황과 관계없이, 특정 서버에 업로드된 폰트파일을
"다운로드" 한 후 화면에 표시하는 방법입니다.
웹폰트
# 웹폰트란?
서버 경로
css의 @font-face 속성을 이용
# 기본 사용법
파일 포맷
css의 @font-face 속성을 이용
# 기본 사용법
# 기본 사용법
css의 @font-face 속성을 이용
폰트 이름 설정
# 웹폰트 사용 사례
# 웹폰트 사용 사례
68%
전세계
웹사이트가
웹폰트를 사용
# 웹폰트 사용률
: 1조 8천만번
: 1조 번
: 3670억 번
폰트별 request 횟수 (google webfont)
# 웹폰트 사용률
# 웹폰트 문제점
# 웹폰트 문제점
# 웹폰트 문제점
# 웹폰트 문제점
# 웹폰트 문제점
# 웹폰트 문제점
웹폰트
Critical Rendering Path
# 웹폰트 문제점 Why?
Critical Rendering Path
# 웹폰트 문제점 Why?
Critical Rendering Path
# 웹폰트 문제점 Why?
Critical Rendering Path
# 웹폰트 문제점 Why?
Critical Rendering Path
# 웹폰트 문제점 Why?
Critical Rendering Path
# 웹폰트 문제점 Why?
Critical Rendering Path
# 웹폰트 문제점 Why?
Delay or Fail
Critical Rendering Path
# 웹폰트 문제점 Why?
Delay or Fail
Critical Rendering Path
# 웹폰트 문제점 Why?
Delay or Fail
Critical Rendering Path
# 웹폰트 문제점 Why?
# 웹폰트 문제점 Why?
Delay or Fail
Critical Rendering Path
브라우저별로
전략이 다르다
Text Blocking
FOIT & FOUT
# FOIT & FOUT 예제
웹폰트가 다운로드 될 때까지 텍스트를 랜더링 하지 않다가,
로딩이 된 이후에 텍스트를 보여주는 동작
" FOIT "
모던 브라우저
기다리는 제한시간 3s가 있다.
웹폰트가 로딩이 되지 않을때, 해당 텍스트 "rendering Block"
# 브라우저별 처리방식
IE계열 브라우저
웹폰트가 다운로드 될 때까지 unstyled 텍스트(fall back폰트)를
보여주고, 로드가 되면 웹폰트로 대처하는 방식
" FOUT "
글꼴의 자간, 높이에 따라 “레이아웃”이 변경 될 수 있다.
=> 레이아웃이 틀어져서 이상해보인다.
FOIT보다 괜찮은 방법일 수 있다 (폰트의 스타일보다, 내용이 더 중요)
# 브라우저별 처리방식
FOIT & FOUT
Flash
Of
Text
Flash
Of
Text
# 브라우저별 처리방식
Unstyled
Invisible
Request & Response 과정이 필수적이기 때문에
FOIT 혹은 FOUT를 피할 수 없다.
# FOIT & FOUT
문제점을 완화하는 방법
# 웹폰트 대책
minimize
FOIT / FOUT
minimize foit/fout
# 웹폰트 대책
minimize foit/fout
용량을 줄여 다운로드 속도를 향상 시키자
# 웹폰트 대책
minimize foit/fout
1. (가능하다면) woff2 포맷 사용 : 평균 30% 압축된 형식
용량을 줄여 다운로드 속도를 향상 시키자
# 웹폰트 대책
minimize foit/fout
1. (가능하다면) woff2 포맷 사용 : 평균 30% 압축된 형식
용량을 줄여 다운로드 속도를 향상 시키자
# 웹폰트 대책
minimize foit/fout
1. (가능하다면) woff2 포맷 사용 : 평균 30% 압축된 형식
용량을 줄여 다운로드 속도를 향상 시키자
# 웹폰트 대책
minimize foit/fout
1. (가능하다면) woff2 포맷 사용 : 평균 30% 압축된 형식
2. unicode-range 사용
용량을 줄여 다운로드 속도를 향상 시키자
# 웹폰트 대책
용량을 줄여 다운로드 속도를 향상 시키자
minimize foit/fout
1. (가능하다면) woff2 포맷 사용 : 평균 30% 압축된 형식
2. unicode-range 사용 : 사용할 문자의 범위를 지정
# 웹폰트 대책
minimize foit/fout
1. (가능하다면) woff2 포맷 사용 : 평균 30% 압축된 형식
2. unicode-range 사용 : 사용할 문자의 범위를 지정
용량을 줄여 다운로드 속도를 향상 시키자
# 웹폰트 대책
더 일찍 다운받자
minimize foit/fout
용량을 줄여 다운로드 속도를 향상 시키자
preload속성 사용
# 웹폰트 대책
preload속성 사용
<link>태그에 preload 옵션을 주면, 다른 리소스보다 빨리 받아올 수 있음
# 웹폰트 대책
preload속성 사용
<link>태그에 preload 옵션을 주면, 다른 리소스보다 빨리 받아올 수 있음
preload 사용
preload 미사용
# 웹폰트 대책
# 웹폰트 대책
FOIT
FOUT
보이지 않는 텍스트
예쁘지 않은 기본 폰트 텍스트
: invisible 텍스트는 UX관점에 나쁘다
→ FOIT 는 FOUT보다 나쁠수 있다.
# 웹폰트 대책
foit fout
# 웹폰트 대책
foit fout
Font-Loader 라이브러리 이용
# 웹폰트 대책
foit fout
Font-Loader 라이브러리 이용
FontFaceObserver
# 웹폰트 대책
FontFaceObserver
: 가볍고 빠른 font loader 라이브러리
# 웹폰트 대책
FontFaceObserver
: 가볍고 빠른 font loader 라이브러리
CSS
JS
# 웹폰트 대책
foit fout
CSS의 font-display 속성
Font-Loader 라이브러리
FontFaceObserver
# 웹폰트 대책
CSS의 font-display 속성
- Auto
- Block
- Swap
- Fallback
- Optional
# 웹폰트 대책
웹폰트 요청
3s
다운로드 완료
FOIT / FOUT
webfont
CSS의 font-display 속성 : auto
# 웹폰트 대책
웹폰트 요청
3s
다운로드 실패
fallback
CSS의 font-display 속성 : auto
FOIT / FOUT
# 웹폰트 대책
웹폰트 요청
3s
다운로드 실패
다운로드 완료
webfont
CSS의 font-display 속성 : auto
fallback
FOIT / FOUT
# 웹폰트 대책
웹폰트 요청
3s
다운로드 실패
다운로드 완료
webfont
fallback
FOIT
CSS의 font-display 속성 : block
3초간 block기간, 무한정 웹폰트 응답 대기 (=FOIT)
# 웹폰트 대책
웹폰트 요청
다운로드 완료
CSS의 font-display 속성 : swap
webfont
fallback
즉시 대체 폰트 랜더링(block기간 없음)
무한정 웹폰트 응답 대기 (=FOUT)
# 웹폰트 대책
웹폰트 요청
3s
fallback
다운로드 완료
webfont
100ms
CSS의 font-display 속성 : fallback
FOIT
아주 짧은 시간(100ms) block 후, 대체폰트 랜더링
swap기간(1~2s) 내 다운로드 완료시 렌더링 / 경과시 통신하지 않음
# 웹폰트 대책
웹폰트 요청
3s
다운로드 완료
100ms
아주 짧은 시간(100ms) block 후, 대체폰트 랜더링
swap기간 내 다운로드 완료시 렌더링 / 경과시 통신하지 않음
CSS의 font-display 속성 : fallback
fallback
webfont
FOIT
# 웹폰트 대책
웹폰트 요청
100ms
CSS의 font-display 속성 : optional
FOIT
fallback / webfont
아주 짧은 시간(100ms) block 후, 대체폰트 랜더링
사용자 네트워크 상태에 따라 브라우저가 다운받을지 말지 결정
# 웹폰트 대책
CSS의 font-display 속성 :
# 웹폰트 대책
CSS의 font-display 속성
😨...
# 웹폰트 대책
foit fout
CSS의 font-display 속성 이용
Font-Loader 라이브러리 이용
FontFaceObserver
# 웹폰트 대책
foit fout
CSS의 font-display 속성 이용
Font-Loader 라이브러리 이용
FontFaceObserver
Be Less Diff
# 웹폰트 대책
webfont 적용전
webfont 적용후
Be Less Diff
# 웹폰트 대책
Be Less Diff
CHOOSE YOUR
"aNIMATION"
# Web Animation
# Web Animation
# Web Animation
# Web Animation
- 이미지를 활용한 방법 : GIF이미지
GIF 이미지 포맷은?
png, bmp, jpg 등과 같은 이미지 포맷 중 하나
gif이미지를 여러개 이어 붙이는 Animated 기능
# Web Animation
- 이미지를 활용한 방법 : GIF이미지
시퀀스
# Web Animation
- 이미지를 활용한 방법 : GIF이미지
# Web Animation
- 이미지를 활용한 방법 : GIF이미지
장점
1. 디자인 시안 그대로 재현
# Web Animation
- 이미지를 활용한 방법 : GIF이미지
시안 : mp4
GIF
# Web Animation
- 이미지를 활용한 방법 : GIF이미지
장점
1. 디자인 시안 그대로 재현
2. 간편한 구현
# Web Animation
- 이미지를 활용한 방법 : GIF이미지
2. 간편한 구현
# Web Animation
- 이미지를 활용한 방법 : GIF이미지
장점
1. 디자인 시안 그대로 재현
2. 간편한 구현
3. 크로스 브라우징
# Web Animation
- 이미지를 활용한 방법 : GIF이미지
단점
1. 네트워크 요청 발생
# Web Animation
- 이미지를 활용한 방법 : GIF이미지
단점
1. 네트워크 요청 발생
2. 파일크기
# Web Animation
- 이미지를 활용한 방법 : GIF이미지
8초의 애니메이션
1s에 30장 x 8s = 240장 (30 프레임)
80kb X 240 = 19.2mb
compression
20kb X 240 = 4.8mb
# Web Animation
- 이미지를 활용한 방법 : GIF이미지
단점
1. 네트워크 요청 발생
2. 파일크기
3. 이미지 품질의 한계
# Web Animation
- 이미지를 활용한 방법 : GIF이미지
# Web Animation
- 이미지를 활용한 방법 : GIF이미지
# Web Animation
- 이미지를 활용한 방법 : GIF이미지
# Web Animation
- 이미지를 활용한 방법 : GIF이미지
# Web Animation
- 이미지를 활용한 방법 : GIF이미지
# Web Animation
- 이미지를 활용한 방법 : png 시퀀스
스프라이트 이미지
# Web Animation
- 이미지를 활용한 방법 : png 시퀀스
스프라이트 이미지
# Web Animation
- 이미지를 활용한 방법 : png 시퀀스
스프라이트 이미지
# Web Animation
- 이미지를 활용한 방법 : png 시퀀스
스프라이트 이미지
# Web Animation
- 이미지를 활용한 방법 : png 시퀀스
스프라이트 이미지
# Web Animation
- 이미지를 활용한 방법 : png 시퀀스
스프라이트 이미지
# Web Animation
- 이미지를 활용한 방법 : png 시퀀스
# Web Animation
- 이미지를 활용한 방법 : png 시퀀스
gif형식
png형식
# Web Animation
- CSS ANIMATION :
CSS로 DOM의 속성 상태를 시간 경과에 따라 정의
이를 순차적으로 표현하는 방식
# Web Animation
- CSS ANIMATION :
상태 선언
시작전 대기시간
# Web Animation
- CSS ANIMATION :
상태 선언
애니메이션 시간
# Web Animation
- CSS ANIMATION :
상태 선언
애니메이션 반복 횟수
# Web Animation
- CSS ANIMATION :
상태 선언
애니메이션 루프 방향
# Web Animation
- css animation : 예제
로딩 인디케이터
# Web Animation
- css animation : 예제
Looping 애니메이션
# Web Animation
- css animation : 예제
간단한 움직임의 모션
# Web Animation
- css animation : 예제
hover, focus 인터렉션 애니메이션
# Web Animation
- css animation :
장점
1. 네트워크 요청 불필요
# Web Animation
- css animation :
장점
1. 네트워크 요청 불필요
2. js없이 간단한 이벤트 처리 가능 (hover, focus)
# Web Animation
- css animation :
장점
1. 네트워크 요청 불필요
2. js없이 간단한 이벤트 처리 가능 (hover, focus)
# Web Animation
- css animation :
장점
1. 네트워크 요청 불필요
2. js없이 간단한 이벤트 처리 가능 (hover, focus)
3. GPU사용으로 js에 비해 performance가 좋음
# Web Animation
- css animation :
장점
1. 네트워크 요청 불필요
2. js없이 간단한 이벤트 처리 가능 (hover, focus)
3. GPU사용으로 js에 비해 performance가 좋음
4. @keyframe 재사용 가능
# Web Animation
- css animation :
# Web Animation
- css animation :
단점
1. 크로스 브라우징 (IE10부터 지원)
# Web Animation
- css animation :
단점
1. 크로스 브라우징 (IE10부터 지원)
# Web Animation
- css animation :
단점
1. 크로스 브라우징 (IE10부터 지원)
2. 이벤트 동작의 제한 (hover, focus)
# Web Animation
- css animation :
단점
1. 크로스 브라우징 (IE10부터 지원)
2. 이벤트 동작의 제한 (hover, focus)
3. @keyframe에 정해진 상태로만 변경가능
# Web Animation
- css animation :
시작 상태
끝 상태
}
중간 상태
# Web Animation
- css animation :
단점
1. 크로스 브라우징 (IE10부터 지원)
2. 이벤트 동작의 제한 (hover, focus)
3. @keyframe에 정해진 상태로만 변경가능
4. 복잡한 움직임의 경우, CSS로 표현 불가
# Web Animation
- css animation :
단점
1. 크로스 브라우징 (IE10부터 지원)
2. 이벤트 동작의 제한 (hover, focus)
3. @keyframe에 정해진 상태로만 변경가능
4. 복잡한 움직임의 경우, CSS로 표현 불가
5. 제한된 Timing function
# Web Animation
- css animation :
# Web Animation
- css animation :
단점
1. 크로스 브라우징 (IE10부터 지원)
2. 이벤트 동작의 제한 (hover, focus)
3. @keyframe에 정해진 상태로만 변경가능
4. 복잡한 움직임의 경우, 표현 불가
5. 제한된 Timing function
# Web Animation
- css animation :
CSS + JS =
애니메이션 중 70~80%
# Web Animation
- css animation + js : 사용법
# Web Animation
- css animation + js : 예제
# Web Animation
- js animation
용도
1. drag, 키보드 등 css만으로 인식할 수 없는 이벤트 인터렉션
2. 복잡하게 움직이는 인터렉션
3. 다이나믹한 transition 상태
# Web Animation
- js animation : 예제
# Web Animation
- js animation : 예제
# Web Animation
- js animation 라이브러리:
Vanilla JS
Animation Library
vs
# Web Animation
- js animation 라이브러리:
# Web Animation
- js animation 라이브러리:
# Web Animation
- js animation 라이브러리:
Vanilla JS
GreenSock
vs
# Web Animation
- js animation 라이브러리:
특징
1. 다양한 motion 메서드 제공
# Web Animation
- js animation 라이브러리:
# Web Animation
- js animation 라이브러리:
특징
1. 다양한 motion 메서드 제공
2. 다양한 easingFunction 제공
# Web Animation
- js animation 라이브러리:
특징
1. 다양한 motion 메서드 제공
2. 다양한 easingFunction 제공
3. 크로스 브라우징 / IE브라우저 대응
# Web Animation
- js animation 라이브러리:
특징
1. 다양한 motion 메서드 제공
2. 다양한 easingFunction 제공
3. 크로스 브라우징 / IE브라우저 대응
4. CSS나 jQuery animation보다 성능이 좋을 수 있음
라이브러리 자체적 성능 최적화
# Web Animation
- js animation 라이브러리:
특징
1. 다양한 motion 메서드 제공
2. 다양한 easingFunction 제공
3. 크로스 브라우징 / IE브라우저 대응
4. CSS나 jQuery animation보다 성능이 좋을 수 있음
setInterval() vs requestAnimationFrame()
https://davidwalsh.name/css-js-animation
# Web Animation
- js animation 라이브러리:
그렇다면....
CSS or Javascript ?
# Web Animation
- css vs js animation
CSS
# Web Animation
- css vs js animation
CSS
JS
# Web Animation
- css vs js animation
CSS
JS
# Web Animation
- css vs js animation
CSS
JS
애니메이션이 실행되는 동안에 사용자의 인터렉션에 따라
상태가 다이나믹하게 변경되어야 할 때
한 시퀀스에서 애니메이션이 3번 이상 변경될 때
CSS의 transform 속성에 부분적 애니메이션을 줘야 할 때
다양한 형태의 easing그래프가 필요할 때
# Web Animation
- svg
# Web Animation
- svg
# Web Animation
- svg
# Web Animation
- svg : lottie
디자인 시안.mov
COPY
IMITATE
- GIF 이미지
- PNG SpriteSheet
- CSS animation
- JS animation
용량/품질 문제
표현의 제한
# Web Animation
AfterEffect : 모션그래픽 제작 툴
- svg : lottie
# Web Animation
- svg : lottie
AfterEffect
data.json
bodymovin.js
index.html
index.js
346 KB
# Web Animation
- svg : lottie
# Web Animation
- svg : lottie
# Web Animation
- svg : lottie
# Web Animation
- svg : lottie
# Web Animation
- svg : lottie
단점
1. 네트워크 요청 발생
2. edge브라우저 : 투명 마스트 적용되지 않음
3. blur 적용 문제
4. glow effect 미지원
5. 3d카메라 적용 버그
6. repeater Effect 미지원 (추후 적용예정)
Webconf 2018
By Sang Jin Lee
