web.dev의 학습 과정과 패턴 예제 활용하기

레이아웃 예제에 긴 제목과 다른 비율의 이미지를 넣으면 카드 배치가 달라질 수 있습니다. 예제를 앱에 적용하기 전에 카드의 크기와 배치를 정하는 CSS 선언을 확인해야 합니다. 짧은 예제 콘텐츠에서 정상으로 보이는 것만으로 실제 콘텐츠도 처리할 수 있다고 판단해서는 안 됩니다.

web.dev는 HTML·CSS·JavaScript 학습 과정과 패턴 예제, 성능·접근성 자료를 제공하는 웹 개발 사이트입니다. 학습 과정에서 개념을 확인한 뒤 예제의 실행 화면과 코드를 비교하고, 실제 콘텐츠를 넣어 적용 조건을 검사할 수 있습니다.

만들려는 화면에 맞는 패턴

처음부터 모든 과정을 순서대로 읽을 필요는 없습니다. CSS 배치가 낯설다면 학습 과정에서 기본 개념을 확인하고, 카드나 캐러셀을 만들어야 한다면 패턴 예제에서 구조와 동작을 비교할 수 있습니다.

패턴 컬렉션은 주제별로 나뉩니다. 카드 배치를 구현한다면 레이아웃 예제에서 필요한 구조를 찾고, 실제 콘텐츠를 넣어 적용 조건을 확인합니다.

실행 화면을 만드는 코드

예제를 사용할 때는 결과 화면을 먼저 확인한 뒤 그 결과를 만드는 HTML, CSS, JavaScript를 나눠 읽습니다. 어느 부분이 콘텐츠 구조이고, 어느 부분이 배치이며, 어느 부분이 상호작용인지 구분하면 수정할 위치를 찾기 쉽습니다.

캐러셀에서는 좌우 버튼의 동작뿐 아니라 항목의 이름과 현재 위치 표시도 봅니다. 이미지만 자신의 자료로 바꿔놓고 끝내면 콘텐츠 길이, 이미지 비율, 키보드 이동 같은 차이가 남을 수 있습니다. 짧은 제목과 긴 제목을 각각 넣고 같은 화면에서 확인해보세요.

복사한 코드를 작은 예제로 먼저 실행하면 의존하는 조건을 알아내기 쉽습니다. 기존 앱에 바로 붙이면 앱의 스타일이나 이벤트 처리가 개입해 예제 자체의 동작과 구분하기 어려워집니다.

브라우저 API와 대체 동작

일부 패턴은 브라우저 API와 권한, 운영체제의 동작에 영향을 받습니다. 코드가 짧다는 이유로 모든 환경에서 같은 결과를 기대해서는 안 됩니다.

미디어 관련 기능이라면 재생 상태와 버튼 동작을 확인하고, 지원하지 않는 환경에서 기본 플레이어가 어떻게 보이는지도 봅니다. 기능을 추가했을 때 사용자가 얻는 동작과 기존 방식으로도 가능한 동작을 구분하면 대체 동작을 정하기 쉽습니다.

레이아웃 예제에서도 콘텐츠 길이를 바꿔 검사합니다. 다음 카드에서는 이미지 영역의 비율을 유지하면서 긴 제목이 들어갈 공간을 확보해야 합니다.

aspect-ratio는 박스의 선호 가로세로 비율을 지정하며 자동 크기 계산에 사용됩니다. MDN의 크기 계산 설명처럼 가로와 세로를 모두 고정하면 이 속성만으로 크기가 바뀌지는 않습니다. 이미지의 크롭 방식과 긴 제목의 배치는 별도로 정해야 합니다. 이미지 영역의 비율이 일정해도 글자가 넘치거나 화면 전체가 가로로 밀릴 수 있습니다.

긴 제목을 넣은 카드 배치

화면이 요구한 모양으로 보인다면 성능과 접근성을 이어서 검토합니다. 사용자가 키보드만으로 작업할 수 있는지, 입력 요소의 이름을 알 수 있는지, 이미지가 늦게 표시될 때 배치가 크게 움직이는지 확인할 수 있습니다.

검증 기록에는 예제 URL, 변경한 CSS, 콘텐츠 길이, 화면 폭, 검사 결과를 남깁니다. 예를 들어 “카드의 이미지 비율을 고정했고, 320px 폭과 긴 제목에서 확인했다”라고 기록할 수 있습니다. 배치가 깨졌다면 실패한 조건과 수정한 선언도 적어 다음 작업에서 확인할 수 있게 합니다.