반응형 및
디바이스 접점 설계
8일차까지는 화면 하나를 잘 만드는 이야기였는데,
오늘은 같은 서비스가 폰, 태블릿, 데스크톱에서 어떻게 달라져야 하는지를 배웠어요.
화면을 줄이고 늘리는 게 아니라, 기기마다 만나는 순간을 다시 설계하는 거더라고요.
오늘 배운 네 가지
디바이스별 상황
기기마다 쓰는 상황이 달라요
반응형은 화면 크기만의 문제가 아니에요.
기기마다 사용자가 놓인 상황과 입력 방식이 달라서, 접점도 달라져야 해요.
BX 17일차에서 "같은 사람도 상황이 다르면 다른 고객"이라고 배웠는데, 기기가 바로 그 상황이에요.
같은 사람이 출근길엔 폰으로 훑고, 저녁엔 데스크톱으로 비교해요.
브레이크포인트
화면 폭에 따라 그리드가 바뀌어요
화면 폭이 어느 구간을 넘으면 레이아웃을 바꾸는 기준선이 브레이크포인트예요.
1일차에서 배운 레이아웃 그리드가 구간마다 다르게 깔려요.
열 수는 흔히 쓰는 예시일 뿐이고, 프로젝트마다 기준값이 달라요.
중요한 건 구간마다 그리드를 따로 정해두는 거예요.
프레임을 만들 때 오른쪽 패널에서 기기별 크기 프리셋을 고를 수 있어요.
구간마다 프레임을 따로 만들고, 각각 레이아웃 그리드를 깔아두면 기준이 눈에 보여요.
늘어나고 줄어드는 규칙
오토 레이아웃으로 반응하게 만들기
화면마다 새로 그리지 않고, 요소가 알아서 늘고 줄고 줄바꿈하게 규칙을 심어두는 게 반응형이에요.
2일차에서 배운 허그·필·픽스와 오토 레이아웃이 여기서 진짜로 쓰여요.
규칙이 있으면 화면 폭을 바꿔도 모양이 알아서 따라와요.
규칙 없이 고정 크기로만 만들면 구간마다 처음부터 다시 그려야 해요.
우선순위와 일관성
기기에 맞게 덜어내되 같은 브랜드로
작은 화면에선 핵심만 남기고, 큰 화면에선 부가 정보를 더해요.
기기가 달라져도 한 브랜드로 느껴지게 하는 건 같은 컴포넌트와 변수예요.
터치 기기에선 누르는 영역이 충분히 커야 해요.
보통 가로세로 44~48px 안팎을 기준으로 삼는 경우가 많고,
정확한 값은 프로젝트나 플랫폼 가이드를 확인하면 돼요.
버튼은 4일차 컴포넌트의 variant로 Mobile/Desktop을 한 세트로 묶고, 색은 5일차 변수를 그대로 써요.
BX 12일차의 "어디서 만나도 같은 브랜드로 느껴지는가"를 시스템으로 지키는 방법이에요.
🧭 오늘의 정리
반응형은 화면을 줄이고 늘리는 기술이 아니라, 기기마다 달라지는 접점을 규칙으로 설계하는 일이었어요.
1일차 그리드, 2일차 오토 레이아웃, 4일차 컴포넌트, 5일차 변수,
6일차 디자인 시스템이 오늘 한 화면 안에서 전부 같이 쓰였어요.