기본 콘텐츠로 건너뛰기

큰 이미지가 느릴 때 렌더링 속도를 높이는 법: 포맷, 크기, 로딩 전략 한 번에 정리

큰 이미지가 느릴 때 렌더링 속도를 높이는 법: 포맷, 크기, 로딩 전략 한 번에 정리 빠른 답 원본 이미지를 그대로 내려보내지 말고 실제 표시 크기와 DPR에 맞춘 파일을 서버나 CDN에서 변환해 제공합니다. AVIF와 WebP를 우선하되 로 JPEG 또는 PNG fallback을 함께 두어 브라우저 호환성을 확보합니다. 첫 화면 핵심 이미지는 무조건 lazy 처리하지 말고 fetchpriority="high" 또는 preload를 검토하고, 나머지 이미지만 지연 로딩합니다. Network와 Performance 패널에서 전송 크기, 선택된 소스, 디코드 시간, LCP 후보 이미지를 함께 봐야 병목을 정확히 찾을 수 있습니다. 브라우저 렌더링 흐름을 중심으로 초안을 다시 정리하고, 현재 기준의 포맷 지원과 우선순위 관련 공식 문서 포인트를 짧게 확인하겠습니다. 오래된 설명과 지금 설명이 갈리는 부분도 함께 정리해서 발행용 본문으로 맞추겠습니다.# 큰 이미지가 느릴 때 렌더링 속도를 높이는 법: 포맷, 크기, 로딩 전략 한 번에 정리 목차 시간 흐름으로 이해하기 흐름으로 보기 브라우저 안에서 실제로 무슨 순서로 일어날까 큰 이미지가 느린 이유는 다운로드만이 아니다 현재 기준 포맷 선택과 오래된 설명의 차이 요청 시점과 우선순위 다루기 표시 크기와 레이아웃 안정성 맞추기 CDN, 캐시, 변환 파이프라인에서 줄일 수 있는 비용 DevTools로 병목 확인하기 무엇부터 바꾸면 좋을까 공식 문서와 레퍼런스 시간 흐름으로 이해하기 HTML 파싱 시점 img 는 비교적 빨리 발견되지만 CSS 배경 이미지는 CSS를 읽은 뒤에야 요청 후보가 되는 경우가 많습니다. → 전송 시점 파일 크기, 캐시 적중 여부, CDN 거리 차이가 첫 바이트와 다운로드 시간을 바꿉니다. → 디코드 시점 압축된 파일을 화면용 비트맵으로 풀어내는 과정에서 CPU와 메모리를 사용합니다. → 레이아웃 시점 이미지 비율이 늦게 확정되면 자리 계산이 다시 일어나고 CL...
최근 글

자바에서 일급 컬렉션을 쓰는 이유: List를 감싸면 설계가 어떻게 달라질까

자바에서 일급 컬렉션을 쓰는 이유: List를 감싸면 설계가 어떻게 달라질까 빠른 답 컬렉션에 규칙과 의미가 붙기 시작하면 List<Order> 보다 Orders 처럼 이름 있는 타입이 의도를 더 분명하게 드러냅니다. 검증은 생성 시점과 변경 메서드 안으로 모으고, 외부에는 add() , totalAmount() 처럼 목적이 보이는 연산만 열어두는 쪽이 흐름을 읽기 쉽습니다. 외부에 컬렉션을 그대로 노출하면 상태가 예상 밖에서 바뀌기 쉬워서, 읽기 전용 뷰나 복사본으로 경계를 분리하는 편이 도움이 됩니다. 다만 단순 전달용 목록까지 모두 감쌀 필요는 없고, 중복 검사·합계 계산·정렬 정책처럼 컬렉션 자체의 규칙이 생길 때 도입하는 편이 효과적입니다. 목차 한눈에 비교 왜 그냥 List 로는 도메인 규칙이 흩어질까 일급 컬렉션은 무엇을 바꾸는가 실전 코드로 보는 Orders 구현 생성 검증, 변경 통제, 계산을 한곳에 모으는 방식 읽기 전용 뷰와 복사본은 다르다 언제 쓰면 도움이 되고, 언제는 과할 수 있을까 구현할 때 함께 보는 구조 예시 자주 나오는 오해와 주의점 마무리 한눈에 비교 표현 대상 List<Order> 는 저장 구조를 보여주고, Orders 는 도메인 안에서 어떤 주문 묶음인지 의미를 함께 드러냅니다. 책임 위치 List<Order> 를 직접 쓰면 검증과 계산이 서비스나 유틸로 흩어지고, 일급 컬렉션을 쓰면 관련 규칙을 한 타입 안에 모을 수 있습니다. 변경 방식 List 는 add , remove , clear 같은 범용 API가 열려 있지만, Orders 는 허용할 변경만 메서드로 제한할 수 있습니다. 검증 시점 raw 컬렉션은 사용할 때마다 방어 코드가 따라붙기 쉽고, 일급 컬렉션은 생성 시점과 변경 시점에 규칙을 일관되게 적용하기 쉽습니다. 외부 노출 List 를 그대로 반환하면 내부 상태가 새기 쉽지만, 일급 컬렉션은 읽기 전용 목록, 개수, 합계처럼 필요한 표면만 제공할 수 있습니다. 테...

프론트엔드 E2E 테스트란 무엇이고, 어떤 사용자 흐름부터 검증해야 할까

프론트엔드 E2E 테스트란 무엇이고, 어떤 사용자 흐름부터 검증해야 할까 빠른 답 E2E 테스트는 브라우저에서 사용자의 주요 흐름이 끝까지 완료되는지 확인하는 마지막 품질 기준선이다. 모든 화면을 자동화하기보다 로그인, 결제, 신청, 권한 확인처럼 실패 비용이 큰 여정부터 잡는 편이 유지 비용이 낮다. 도구 선택보다 더 자주 발목을 잡는 것은 불안정한 셀렉터, 고정 대기, 재현되지 않는 테스트 데이터다. 실패를 빨리 좁히려면 스크린샷만 남기지 말고 trace , 콘솔 로그, 네트워크 기록, 요청 ID를 함께 남겨야 한다. E2E 테스트는 브라우저를 얼마나 많이 조작했는가를 보는 작업이 아니라, 배포 전후에 사용자가 중요한 일을 실제로 끝낼 수 있는지를 확인하는 작업에 가깝다. 단위 테스트와 통합 테스트가 코드 단위의 정확도를 높여 준다면, E2E 테스트는 라우팅, 인증, 렌더링, 네트워크, 권한이 연결된 최종 경로를 확인한다. 목차 시간 흐름으로 이해하기 흐름으로 보기 왜 이 기준을 기본 품질로 볼까 핵심 흐름 선정 실제로 막히는 지점 테스트 환경 준비 브라우저 시나리오 실행 실패 증거 수집 CI 품질 게이트 무엇을 E2E로 두고 무엇은 단위·통합 테스트에 맡길까 시간 흐름으로 이해하기 설계 시점 실패 비용이 큰 사용자 여정 2~5개를 먼저 고른다. → 준비 시점 계정, 시드 데이터, 외부 의존성을 반복 가능한 상태로 맞춘다. → 실행 시점 입력과 클릭보다 최종 화면, 세션 유지, 응답 결과를 기준으로 본다. → 실패 시점 스크린샷, 콘솔, 네트워크, trace 를 함께 저장해 원인을 좁힌다. → 배포 시점 PR 스모크, 배포 전 회귀, 스테이징 검증을 분리해 운영 흐름에 붙인다. 시간축으로 보면 E2E는 테스트 코드 한 파일의 문제가 아니라, 설계와 운영을 잇는 품질 장치에 가깝다. 앞단에서 범위를 잘 고르고, 중간에서 증거를 잘 남기고, 뒷단에서 품질 게이트를 분리해야 유지가 쉬워진다. 흐름으로 보기 흐름 다이어그램 이 순서를 거꾸...

CSS Flexbox와 Grid, 무엇이 다르고 언제 선택해야 할까

CSS Flexbox와 Grid, 무엇이 다르고 언제 선택해야 할까 빠른 답 한 줄 정렬, 버튼 그룹, 메뉴 바처럼 콘텐츠 흐름이 먼저 보이는 화면은 Flexbox 쪽이 더 단순하게 풀리는 경우가 많습니다. 페이지 골격, 카드 목록, 대시보드처럼 행과 열 규칙을 먼저 정해야 하는 화면은 Grid가 더 읽기 쉽고 배치도 안정적으로 유지됩니다. 둘은 대체재라기보다 함께 쓰는 경우가 많습니다. 바깥 구조는 Grid로, 카드나 헤더 내부 정렬은 Flexbox로 나누면 역할이 또렷해집니다. 1차원 과 2차원 이라는 구분만 외우기보다, 콘텐츠 크기 변화가 먼저인지 배치 규칙이 먼저인지로 보면 선택이 한결 쉬워집니다. Flexbox와 Grid는 둘 다 CSS 레이아웃 도구이지만, 브라우저가 레이아웃을 계산하는 출발점이 다릅니다. 브라우저는 DOM과 CSSOM을 합쳐 렌더 트리를 만든 뒤 레이아웃 단계에서 박스의 크기와 위치를 정하는데, 이때 Flexbox는 아이템 흐름을 중심에 두고, Grid는 트랙 구조를 중심에 둡니다. 목차 한눈에 비교 시간 흐름으로 이해하기 브라우저 안에서 실제로 무슨 순서로 일어날까 왜 둘 다 정렬 도구처럼 보여 헷갈릴까 선택 기준 매트릭스 Flexbox가 먼저 떠오르는 장면 Grid가 먼저 떠오르는 장면 함께 쓰는 구성이 더 자연스러운 경우 DevTools로 확인하는 포인트 자주 헷갈리는 지점 더 읽을 거리 한눈에 비교 출발점 Flexbox는 아이템의 순서와 크기를 따라 남는 공간을 분배하고, Grid는 컨테이너의 행과 열을 먼저 선언한 뒤 아이템을 그 위에 올립니다. 계산 축 Flexbox는 주 축과 교차 축이라는 한 축 중심 계산이 기본이고, Grid는 행과 열을 함께 다루는 2차원 배치가 기본입니다. 줄바꿈 이후 Flexbox는 flex-wrap 이 걸려도 각 줄이 독립적으로 공간을 나누고, Grid는 같은 열 트랙을 공유하므로 열 폭이 더 일정하게 유지됩니다. 제어 위치 Flexbox는 flex-grow , flex-sh...