반응형 디자인의 Breakpoint 기준을 큰 화면에서 작은 화면으로 옮겨가시나요, 아니면 작은 화면에서 큰 화면으로 옮겨가시나요?
일반적으로는 큰 화면을 기준으로 설정하고, 작은 화면으로 줄여나가며 조절해 나간다고 합니다. 그리고 이 방법이 조금 더 배우기 쉬울 수 있다고 하네요.
그리고 어느 화면을 기준으로 하느냐에 따라 미디어 쿼리의 속성을 다르게 사용합니다.
작은 화면에서 큰 화면으로 조절해 나갈때는 min-width를 큰 화면에서 작은 화면으로 조절해 나갈때는 max-width를 사용합니다.
서로 반대의 과정으로 확인해 나가며 작업하게 됩니다.
Max-width 와 min-width
먼저 큰 화면에서 작은 화면으로 조절해가며 breakpoint를 설정하기 위해서 max-width 로 작업한다고 가정하겠습니다.
만약 다음과 같이 max-width 를 설정한다면, 화면 너비가 500인 기기는 어느 조건을 적용받을까요?
정답은 ‘두 조건 모두 적용받는다’입니다. 왜냐하면 500은 600보다 작으면서도 900보다도 작기 때문입니다. (500 < 600 , 500 < 900)
물론 min-width 를 사용할 때에도 마찬가지입니다. 다만 방향이 반대 일 뿐이죠.
미디어 쿼리는 셀렉터에 importance나 specificity를 추가하지 않기 때문에, 순서를 생각하여 작성하여야 합니다. 그렇지 않으면 위의 예시처럼 중첩으로 적용을 받기 때문에 원하지 않는 결과가 나올 수 있습니다.
모바일 우선 적용이 적합할까요?
모바일 우선 적용의 장점과 단점을 살펴보겠습니다.
장점
- 모바일 사용자 경험에 최적화되어 있다.
- 웹사이트와 앱에 필수적인 요소만 남기도록 만듭니다.
- 더 작고, 빠르고, 효율적인 서비스를 탄생시킵니다.
- 눈에보이는 미적인 디자인보다 컨텐츠를 우선적으로 생각하게 됩니다.
단점
- 데스크탑 버전이 간결하고 단순하게 보일 수 있습니다.
- 개발하는데 있어서 더 어렵고 덜 직관적으로 느껴집니다.
- 창의성에 제약을 받을 수 있기 때문에, 다른 서비스와 두드러진 차이점을 보여주기 힘듭니다.
- 클라이언트는 데스크탑 버전의 프로토타입을 보길 원할때도 있죠.
모바일 화면을 기준으로 개발을하면 위와 같은 특징이 있습니다. 이외에도 많은 장단점과 특징이 있을겁니다. 무엇보다 우선 고객들이 어느 기기를 통해 접속하는지 살펴보고 해당 디바이스 화면에 맞는 디자인, 개발을 우선적으로 하는 것이 먼저라고 생각합니다.
그래서 Breakpoint는 어떻게 결정하나요?
Breakpoint를 결정하는 방법 중 가장… 좋지 않은 방법은 특정 기기를 기준으로 breakpoint를 결정하는 것입니다. 예를 들면 아이폰, 아이패드, 맥북을 기준으로 개발하는 것이죠.
사실 가장 간단하고 반응형 디자인을 배우기 쉬운 방법이지만, 애플이 화면 비율을 변경하거나, 해상도를 변경한다면… 그리고 모든 사람이 애플 제품을 사용하는 것은 아니니깐요.
좀 더 나은 방법은 비슷한 류의 기기를 한데 묶어서 그룹을 기준으로 breakpoint를 설정하는 것입니다. 하지만 이역시도 기기에 맞춰 개발하므로 그에 따른 한계가 존재합니다.
가장 좋은 방법은 내 디자인을 기준으로 breakpoint를 설정하는 것입니다. 특정 화면너비에 디자인이 무너진다? 그러면 새로운 breakpoint를 설정하는 것이죠. 이렇게 하면 기기에 구애받지 않고 일관적인 디자인을 유지할 수 있습니다.
wrap up!
- 큰 화면에서 작은 화면, 작은 화면에서 큰 화면으로 조절할 때에는 서로 다른 미디어 쿼리 속성을 적용해보자.
- 모바일 우선 디자인의 장단점을 이해하고 적용하자.
- Breakpoint는 기기가 아니라 내 디자인을 기준으로 설정하자.
반응형 디자인 작업을 하면서 어렵고 귀찮은 작업 중 하나인 것 같습니다. 그렇지만 인고의 시간 끝에 여러 기기에서 일정하게 보여질 때는 그만큼 보람있는 작업인 것 같습니다.
