고물상

<img src="fallback.jpg" />

보통 사용하는 이미지 태그

<img 
src="fallback.jpg"
srcset="
이미지@1x.png 1000w,
이미지@2x.png 2000w,
이미지@3x.png 3000w"
/>

해상도별 반영 이미지 구분

~1000px : 이미지@1x.png

1001px~2000px : 이미지@2x.png

2001px~3000px : 이미지@3x.png

그외 : fallback.jpg

<img 
src="fallback.jpg"
srcset="
이미지@1x.png 1000w,
이미지@2x.png 2000w,
이미지@3x.png 3000w"
size="50vw"
/>

해상도별 반영 이미지 구분에 화면 비중을 추가로 계산하고 싶으면 size 추가

~1000/2 px  : 이미지@1x.png

1001/2 px ~ 2000/2 px : 이미지@2x.png

2001/2 px ~ 3000/2 px : 이미지@3x.png

그외 : fallback.jpg

지원하는 브라우저가 많지 않으니 최적화가 꼭 필요한 경우만 사용할것!

https://caniuse.com/?search=srcset

장점 - 단순하다

단점 - 사람이 많아지면 충돌 발생확률이 높다.

장점 - 코드 관리가 체계적이다.

단점 - 러닝커브가 가파르다.

master (상용)

- from : ''

- to : ''

- name : master

hotfix (긴급수정)

- from : master

- to : develop, master

- name : hotfix/{버전}

release (검수)

- from : develop

- to : develop, master

- name : release/{버전}

develop (개발 메인)

- from : master, hotfix, release

- to : release

- name : develop

feature (개발 단위)

- from: develop

- to : develop

- name : feature/{목적}

모바일 인터넷 속도별 초당/분당 다운로드 용량 

(LTE, 5G 속도 제한없이 사용가능 환경은 100Mbps가 넘어 고려하지 않습니다.)

모바일 인터넷 속도별 로딩 소요시간

추천 1MB 이하

일부 특수한 상황 3MB이하

마지막으로 관련 기사 링크 겁니다.

https://nownews.seoul.co.kr/news/newsView.php?id=20180123601013 

Frame Rate : 단순한 용도라면 30, 비쥬얼적으로 매우 중요하다면 60 (별도 상의바람)

용량은 크지 않지만 상당한 자원을 사용합니다.

퍼포먼스 문제가 발생할 경우 디자인 동의없이 30으로 수정합니다. 

나와 함께한 모든 이들은 단 한번도 눈치채지 못했습니다.

1. 비트레이트 

해상도에 따른 적정 비트레이트

SD — 2-5

720p — 5-10

1080p — 10-20

2K — 20-30

4K — 30-60

ex) 300*300 = 1Mbps

2. 오디오 

오디오가 없을 경우 오디오 내보내기 해제

3. 프레임

영화는 24프레임 

사람은 48프레임 이상을 구분하기 쉽지 않음 

최대 30프레임을 넘지 않도록 권장

단순 꾸미는 용도라면 300Kb를 넘지 않도록 할것