22장 반응형을 축소가 아니라 다시 편집한다

Desktop을 390px로 줄이면 작은 desktop이 된다. Mobile 디자인은 같은 서비스 결정을 더 좁은 시간과 공간에서 다시 편집하는 작업이다. Onda desktop hero는 copy와 image가 나란하지만 mobile에서는 promise→설명→행동→availability→image 순서다. 첫 화면에 image를 가득 채워 CTA를 아래로 밀지 않는다.

각 breakpoint가 아니라 content가 깨지는 순간을 관찰한다.

관찰	잘못된 처방	더 나은 처방
navigation이 두 줄	font만 축소	secondary link를 숨기거나 menu 구조 재편
세 card가 좁음	card 안 text를 12px	한 열로 바꾸고 비교 정보 순서 유지
hero 제목이 6줄	강제 줄바꿈 추가	copy 폭·fluid type·문장 길이 함께 조정
dialog가 화면 밖	transform scale	inset·max-height·내부 scroll 설계
넓은 화면의 문장이 지나치게 김	viewport breakpoint 추가	content container에 query 적용

Viewport query는 page 전체 변화에, container query는 component가 놓인 공간의 변화에 적합하다. 같은 ClassCard가 main grid와 좁은 추천 rail에 들어갈 수 있다면 부모를 containment context로 만든다.


.class-list { container-type: inline-size; }

@container (width < 42rem) {
  .class-card {
    grid-template-columns: 1fr;
  }
}

Container query 사용 여부와 관계없이 320, 390, 768, 1024, 1440px만 보는 습관을 버린다. 그 사이 너비를 천천히 움직이며 line wrap, orphan, overflow, sticky overlap을 찾는다. Landscape mobile, browser UI가 열린 짧은 높이, 긴 번역, software keyboard가 열린 dialog도 본다.

Onda mobile review는 세 질문으로 끝낸다.

첫 10초 안에 무엇을 예약하는 곳인지 알 수 있는가?
엄지로 primary action에 도달하고 결과를 예측할 수 있는가?
image를 늦게 받거나 text가 30% 길어져도 정보 순서가 남는가?

AI 웹 디자인 디렉팅: 22장 반응형을 축소가 아니라 다시 편집한다

22장 반응형을 축소가 아니라 다시 편집한다