반응형 레이아웃 설계 경험
약 90초
다양한 화면 크기에서 레이아웃이 깨지는 문제를 겪고 반응형 구조로 개선한 경험
팀 프로젝트에서 웹 서비스 UI를 만들 때 데스크탑 기준으로만 개발했다가 모바일에서 레이아웃이 전부 깨지는 상황이 QA 직전에 발견됐습니다. 급하게 수정하느라 이틀을 추가로 썼습니다.
그 이후로 모바일 → 태블릿 → 데스크탑 순서로 먼저 작은 화면을 기준으로 설계하는 방식으로 바꿨습니다. CSS 브레이크포인트를 3단계로 나누고, 공통 컴포넌트는 크기에 독립적으로 동작하도록 %와 flex 기반으로 작성했습니다.
처음엔 작은 화면 기준으로 짜면 데스크탑이 이상해 보일 것 같았는데, 실제로 해보니 반대 방향보다 훨씬 일관성 있게 됐습니다. UI 일관성은 큰 화면을 줄이는 게 아니라 작은 화면을 확장하는 방향으로 설계해야 한다는 걸 그때 배웠습니다.
이 결의 특징
팀 프로젝트에서 웹 서비스 UI를 만들 때 데스크탑 기준으로만 개발했다가 모바일에서 레이아웃이 전부 깨지는 상황이 QA 직전에 발견됐습니다. 급하게 수정하느라 이틀을 추가로 썼습니다. 그 이후로 모바일 → 태블릿 → 데스크탑 순서로 먼저 작은 화면을 기준으로 설계하는 방식으로 바꿨습니다라는 흔적이 있습니다
이 결이 통하는 자리
그 이후로 모바일 → 태블릿 → 데스크탑 순서로 먼저 작은 화면을 기준으로 설계하는 방식으로 바꿨습니다. 처음엔 작은 화면 기준으로 짜면 데스크탑이 이상해 보일 것 같았는데, 실제로 해보니 반대 방향보다 훨씬 일관성 있게 됐습니다. UI 일관성은 큰 화면을 줄이는 게 아니라 작은 화면을 확장하는 방향으로 설계해는 자리에서 통합니다