이미지 최적화의 필요성 이미지는 웹에서 많은 용량을 차지하고 있다! 그만큼 웹 최적화에 많은 영향을 끼치기 때문에 중요하다. 적절한 이미지 포맷 선택하기 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..
2025. 03. 06 블로그 A/S 프로젝트🚧 로 업데이트한 글입니다.1. 브라우저 렌더링 과정사용자가 브라우저를 통해 웹사이트에 접속하고, 브라우저가 리소스를 다운받으면서 시작된다. (HTML, CSS, JS 등)Parsing: 렌더링 엔진이 HTML을 파싱해 DOM 트리를 만듦Style: 렌더링 엔진이 CSS를 파싱해 CSSOM 트리를 만듦. 다양한 상대적인 값들이 px로 치환되어 계산.DOM 트리 + CSSOM 트리 = Render 트리 구축.Layout: 각 요소의 배치 결정Paint: 구축된 Render 트리를 화면에 어떻게 그릴 지 결정하는 페인트 레코드 생성 (이때 그리는건 아니다)Layerize: Paint 결과물을 사용해서 특정한 레이어들로 쪼갬Commit: Layerize 결과물을 ..
토스에서 진행한 세션을 참고해, 직접 스크린리더 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에서 새로 추가된 태그 "의미 있는" 태그를 활용하여 웹 페이지의 구조를 더욱 명확하게..
