이미지 최적화의 필요성 이미지는 웹에서 많은 용량을 차지하고 있다! 그만큼 웹 최적화에 많은 영향을 끼치기 때문에 중요하다. 적절한 이미지 포맷 선택하기 PNG JPEG WebP 👍 비손실 압축 👍 색상이 다양한 이미지에 적합 👍 PNG보다 용량이 비교적 작다 👍 용량이 PNG, JPEG보다 작다 👎 색상이 다양한 이미지에 부적합 👎 손실 압축 👎 투명도 지원 X 👎 구형 브라우저 지원 X 👎 이미지 변환 작업 필요 ⏩️ WebP 가 95%의 커버리지를 가지고 있다고 하니 웬만하면 WebP 쓰자! 반응형 이미지 제공하기 의 속성 이용! src 반응형 X fallback으로 이용 srcset 제공할 이미지들을 적는다. "이미지이름 크기w, 이미지이름 크기w, ..." 형식으로 적어주면 된다. sizes 이..
용어 알기 ✅ 하이드레이션(hydration) 1. JS 코드가 실행되어 2. JS로직과 HTML이 연결 후 3. 유저 상호작용이 가능하도록 하는 것 ✅ 요청 페이지 요청을 의미 ✅ TTFB(Time To First Byte) ⏩️ 데이터가 브라우저에 도달 ✅ FCP(First Contentful Paint) ⏩️ 유저가 컨텐츠를 볼 수 있음 ✅ LCP(Largest Contentful Paint) ⏩️ 유저가 주요 컨텐츠를 볼 수 있음 ✅ TTI(Time To Interactive) ⏩️ 유저와 상호작용 가능 CSR (Client Side Rendering) 데이터 페칭 이후에 렌더링. 1. User Request 2. CDN이 JS로 접근할 수 있는 링크와 HTML 파일을 서빙 3. 브라우저는 HTM..
브라우저 렌더링 과정 사용자가 브라우저를 통해 웹사이트 접속 브라우저가 리소스 다운받음 (HTML, CSS, JS 등) 렌더링 엔진이 HTML을 파싱해 DOM 트리를 만듦 렌더링 엔진이 CSS를 파싱해 CSSOM 트리를 만듦 DOM 트리 + CSSOM 트리 = Render 트리 구축 Layout: 각 요소의 배치 결정 Paint: 구축된 Render 트리를 화면에 어떻게 그릴 지 결정하는 페인트 레코드 생성 Layerize: Paint 결과물을 특정한 레이어들로 쪼갬 Commit: Layerize 결과물을 Composite Thread로 옮김 Composite: Render 트리에 존재하는 레이어들을 합치는 과정 Display: 렌더링 ~~ Layer 여기서 말하는 레이어란, 포토샵의 레이어처럼 페인팅 ..
토스에서 진행한 세션을 참고해, 직접 스크린리더 UX 개선을 도입한 과정을 적었습니다. Accessible Name 스크린리더가 요소를 포커스했을 때 읽는 값 author - 특별한 속성을 사용해서 정하는 값 aria-label aria-labelledby alt ( 태그의 경우) contents - 요소의 텍스트 값 우선순위 - author > contents html 태그의 속성들 role 시멘틱태그는 암시적으로 role 을 갖고 있음 - role=“button” - role=“link” - role=“checkbox” Children Presentational 특정 role이 가진 특징 자식 요소의 Accessible Name 을 모아서 contents 로 사용 자식 요소를 스크린리더가 읽지 않도록..
웹 표준과 웹 접근성 웹 표준 - 어떤 환경(운영체제, 브라우저)에서도 이용할 수 있는 웹페이지를 만드는 방법 W3C에서 권고하는 웹에서 표준적으로 사용되는 기술이나 규칙 웹 접근성 - 어떤 사람이든 이용할 수 있는 웹페이지를 만드는 방법 웹 표준의 장점 호환성, 접근성 향상, SEO향상, 유지보수 용이 웹 표준을 준수하는 방법 1. DOCTYPE 선언 웹 페이지의 최상단에 DOCTYPE을 선언하여 웹 페이지가 어떤 버전의 HTML을 사용하는지 명시한다. DOCTYPE을 제대로 선언하지 않는다면? 각 DOCTYPE 별로 유효한 html 태그 상이 브라우저가 비표준 방식으로 해석하게 된다 2. 시멘틱 태그 사용 HTML5에서 새로 추가된 태그 "의미 있는" 태그를 활용하여 웹 페이지의 구조를 더욱 명확하게..
