CSS 브레이크 포인트를 잡는100% 올바른 방법(The 100% correct way to do CSS breakpoints)

이 글은 David GilbertsonThe 100% correct way to do CSS breakpoints글을 번역했습니다. 저의 모든 글은 허가를 받고 진행 하였습니다

앞으로 1분 정도 CSS는 잊으시면 좋겠습니다. 웹 개발은 잊어버리세요. 디지털 사용자 인터페이스는 잊어버립니다.
그리고 이런 것들을 잊어버리듯이, 저는 여러분의 마음이 방황하는 것을 허락해 주셨으면 합니다. 시간을 거슬러 올라가기 위해서요 젊음으로 돌아가세요. 학교 첫날로 돌아가세요.
윤곽을 그리고 본능을 억제하는 것만 고민할 수 있었던 더 간단한 시간이었어요.
presentation
위의 점들을 보세요. 어떤 것들은 어떻게 뭉쳐져 있고, 어떤 것들은 펼쳐져 있죠? 제가 바라는 것은 그들을 5개의 그룹으로 나누는 것입니다. 하지만 여러분이 보시듯이 말이죠.
계속하세요. 아무도 보고 있지 않은 것을 확인한 후, 여러분의 아이처럼 생긴 손가락으로 다섯 그룹 각각에 원을 그리세요.
아마 아래 같은 걸 생각해 냈겠죠? (그런데 뭘 하든 운동을 안 하고 아래로 스크롤을 내려간다고 하지 마세요. 손바닥을 마주볼게요.)
presentation
물론이죠, 오른쪽에 있는 두 개의 점들은 어느 쪽으로든 갈 수 있었습니다. 그룹화하면 괜찮을 것 같아요. 정답은 없다고 하지만, 저는 틀린 적이 없기 때문에 저는 그런 특정한 상투적인 것을 받아본 적이 없습니다.
제가 시작하기 전에, 아래 그림 같은 거 그렸나요?
presentation
아마 아닐 거예요. 그렇죠?
그러나 일반적으로 사용되는 장치의 정확한 폭(320px, 768px, 1024px)과 일치하는 위치에 브레이크 포인트를 설정할 경우 이러한 작업이 수행됩니다.
presentation
아래 본성에 대한 말이 귀에 들어가거나 입에서 나온 적이 있습니까?
"중간 브레이크포인트가 768px까지 올라가나요, 아니면 768을 포함해서요? 그렇군요... 그게 아이패드 배치인가요? 아니면 'large'인가요? 아, 라인은 768px 이상입니다. 그렇군요. 그리고 작은 것이 320px인가요? 이 범위는 0에서 319px 사이입니까? 개미들의 브레이크포인트요?"
정확한 브레이크포인트를 보여드리고 그대로 둘 수 있습니다. 그러나 저는 위의 방법("바보같은 그룹화")이 그렇게 널리 퍼져 있다는 것이 매우 궁금합니다.
왜 그래야 하죠?
저는 이 문제에 대한 해답은, 아주 많은 문제들과 마찬가지로, 잘못 정렬된 용어로 귀결된다고 생각합니다. 결국 관타나모 만(Guantanamo Bay)에서 수상보드는 정말 대단하게 들립니다. 만약 여러분이 그 어느 것도 모르면요. (오, 그게 제 농담이었으면 좋겠어요.)
"경계(boundaries)"와 "범위(ranges)"를 서로 혼합하여 브레이크포인트의 논의와 구현에 임하고 있다고 생각합니다.
말해봐요, 만약 당신이 Sass에서 브레이크포인트를 한다면, 당신은 $large라고 불리는 변수가 있나요? 즉, 768px입니까?
그것이 당신이 가리키는 범위(range)의 하한 경계(boundary)입니까, 아니면 상한 경계(boundary)입니까? 더 낮으면, $small이 없을 거예요. 왜냐하면 그것은 0이어야 하기 때문입니다. 그렇죠?
상한 경계(boundary)이라면 브레이크포인트 $large-and-up를 어떻게 정의하겠습니까? $mediummin-width가 있는 미디어 쿼리여야 합니다. 그렇죠?
그리고 만약 여러분이 큰 것을 말할 때 경계(boundary)만 언급한다면, 우리는 나중에 혼동을 겪게 됩니다. 왜냐하면 미디어 쿼리는 항상 범위(range)이기 때문입니다.
이 상황은 엉망이고 우리는 그것에 대해 생각하느라 시간을 낭비하고 있어요. 그래서 저는 다음과 같은 세 가지 제안이 있습니다.
  1. 브레이크포인트를 정확히 파악하세요.
  2. 범위(ranges)의 이름을 센스 있게 지정합니다.
  3. 선언적이 되세요

팁 #1: 브레이크포인트를 정확하게 맞춥니다.

그렇다면 올바른 브레이크포인트는 무엇일까요?
당신의 유치원생 자신은 이미 원을 그렸습니다. 그냥 직사각형으로 만들어 드릴게요.
presentation
600px, 900px, 1200px, 1800px의 거대한 모니터 사람들에게 특별한 것을 제공할 계획이라면요. 온라인에서 대형 모니터를 주문하는 경우 컴퓨터에 맞게 지정해야 합니다. 우편물에 거대한 도마뱀을 넣고 싶지 않을 거예요.
채널로 연결된 젊은이가 가지고 놀았던 점(dots)들은 실제로 가장 일반적인 14개의 화면 크기를 나타냅니다.
presentation
image credit
그래서 우리는 비즈니스맨, 디자이너, 개발자, 그리고 테스터로 분장한 사람들 사이에 쉽게 말이 흐를 수 있도록 하는 아주 작은 그림을 만들 수 있습니다.
presentation

주황색과 녹색을 선택한 것을 후회하고 있지만, 지금 이 모든 사진을 다시 찍고 있는 것은 아닙니다.

팁 #2: 범위(ranges)의 이름을 센스 있게 지정합니다.

물론이죠, 원하신다면 브레이크 포인트 이름을 파파베어(papa-bear)와 베이비베어(baby-bear)로 정하세요. 하지만 만약 제가 디자이너와 함께 앉아서 사이트가 다른 장치들을 어떻게 봐야 하는지에 대해 토론하려고 한다면, 저는 가능한 한 빨리 끝났으면 합니다. 사이즈의 portrait 태블릿을 쉽게 이름 지으면, 저는 팔립니다. '아이패드 portrait'라고 불러도 용서해 줄 거예요.
"하지만 landscape가 변하고 있어요!"라고 여러분은 소리칠지도 몰라요. "폰은 점점 커지고, 태블릿은 점점 작아지고 있습니다!"
그러나 웹 사이트의 CSS는 (Gmail이 아닌 경우) 약 3년의 유효 기간을 갖습니다. 아이패드는 그 당시 두 번이나 저희와 함께 해 왔으며, 아직 그 기능을 해제하지 못했습니다. 그리고 우리는 애플이 더 이상 새로운 제품을 만드는 것이 아니라 기존 제품(버튼, 구멍 등)에서 '것(things)'들을 제거한다는 것을 알고 있습니다.
1024 x 768이 여기 남습니다. 모래 속에 머리를 파묻지 맙시다.(실제: 타조는 모래가 없기 때문에 도시에 살지 않고, 따라서 포식자로부터 숨을 곳이 없습니다.)
결론: 의사소통은 중요합니다. 도움이 되는 어휘에서 일부러 분리하지 마세요.

팁 #3: 선언적이어야 합니다.

I know, I know, that word “declarative” again. I’ll put it another way: your CSS should define what it wants to happen, not how it should happen. The “how” belongs hidden away in some sort of mixin.
알아요! 알아요! '선언하다'라는 단어는 알아요. 그럼 다른 방법으로 설명하겠습니다. CSS는 원하는 것을 정의해야 합니다. 어떻게 발생해야 하는지가 아니라. "어떻게"는 일종의 혼합물(mixin) 속에 숨겨져 있어야 합니다.
앞에서 설명한 바와 같이, 브레이크 포인트 주변의 혼동의 일부는 범위(range)의 경계(boundary)를 정의하는 변수가 범위(range)의 이름으로 사용된다는 것입니다. $large: 600px입니다.
large 이건...말이 안 돼요
범위(range)입니다. var coordinates = 4;
그래서 우리는 그 세부사항들을 코드에 사용되는 것을 노출시키기 보다는 믹싱 안에 숨길 수 있습니다. 또는 변수를 전혀 사용하지 않고 한 가지 더 나은 작업을 수행할 수 있습니다.
처음에 저는 간단한 예로써 아래의 작은 조각을 했습니다. 하지만 정말 모든 기초가 다 포함된다고 생각해요. 실제로 보려면 이 펜을 확인하세요. Sass가 없는 사이트는 상상할 수 없기 때문에 저는 Sass를 이용하고 있습니다. 이 논리는 CSS 또는 Less에도 동일하게 적용됩니다.
제가 편견을 가질 수도 있지만, 이건 좋은 선언적 CSS입니다.
개발자에게 접미사 -up또는 -only을 지정하도록 강요하고 있습니다.
모호함은 혼란을 낳습니다.
이 경우 사용자 지정 미디어 쿼리가 처리되지 않는다는 분명한 비판이 있을 수 있습니다. 좋은 소식이네요, 여러분. 사용자 지정 미디어 쿼리를 원할 경우 사용자 지정 미디어 쿼리를 작성합니다. (실제로 위의 항목보다 복잡성이 더 필요한 경우 손실을 줄이고 Susy의 툴킷을 사랑스럽게 수용합니다.)
또 다른 비판은 제가 여기에 믹스인(mixin) 8개를 가지고 있다는 것일 수도 있습니다. 확실히 믹싱 한 번 하는 것이 제정신일 것입니다. 그런 다음, 필요한 사이즈를 그냥 지나치면 됩니다. 이렇게.
물론이죠. 하지만 지원되지 않는 이름을 입력하면 컴파일 시간 오류가 발생하지 않습니다. 그리고 Sass 변수를 통과한다는 것은 믹신(mixin)의 스위치에 전달하기 위해 8개의 변수를 노출하는 것을 의미합니다.
@include for-desktop-up {...} 구문은 말할 것도 없습니다. totes는 @include for-size(desktop-up) {...}보다 더 귀엽습니다.
이 두 개의 코드 조각에 대한 비판은 900px와 899px를 두 번 입력한다는 것입니다. 물론 저는 변수를 사용하고 필요할 때 1을 빼야 합니다.
그렇게 하고 싶다면, 미쳐보세요. 하지만 제가 하지 않을 두 가지 이유가 있습니다.
  1. 이런 것들은 자주 바뀌는 것이 아닙니다. 또한 코드 베이스의 다른 곳에서도 사용되는 숫자가 아닙니다. 이러한 변수가 포함된 JS 개체를 페이지에 주입하는 스크립트에 Sass 브레이크포인트를 노출하려는 경우가 아니라면 변수가 변수가 아니기 때문에 문제가 발생하지 않습니다.
  2. Sass를 사용하여 숫자를 문자열로 변환하려는 경우 구문이 고약합니다. 다음은 숫자를 두 번 반복하는 것이 모든 악 중에서 가장 나쁘다고 믿고 지불하는 가격입니다.
이해의 용이성이 막 올랐나요? 아니면 내려갈까요?
아, 그리고 지난 몇 단락에 대해 빈약한 어조로 말했기 때문에... 저는 Sass 목록에 있는 상점 브레이크포인트와 같은 마법 같은 것을 하고 그것들을 미디어 쿼리를 출력하기 위해 순환시키는 바보나 미래의 개발자들이 해독하기 힘들 정도로 우스꽝스러운 것을 불쌍히 여겨요.
복잡성은 버그들이 숨어 있는 곳입니다.
마지막으로, 여러분은 "기기가 아니라 콘텐츠에 대한 저의 브레이크포인트를 두어야 하지 않을까요?"라고 생각할 수 있습니다. 지금까지 해내셨다니 놀랍고, 대답은 '예'입니다. 단일 레이아웃으로 된 사이트 말입니다. 또는 레이아웃이 여러 개이고 각 레이아웃에 대해 서로 다른 브레이크포인트 집합이 있는 경우입니다. 또한 사이트 설계가 자주 변경되지 않거나, 설계를 업데이트할 때 브레이크포인트를 업데이트할 수 있습니다. 내용을 기반으로 유지하고 싶으시겠죠?
복잡한 사이트의 경우 사이트 전체에서 사용할 몇 개의 브레이크포인트를 선택하면 삶이 훨씬 더 쉬워집니다.
끝났어요! 하지만 이 게시물은 제가 원하는 만큼 털털하지는 않았어요. 제가 몇 가지를 포함시킬 수 있는 핑계를 생각해 볼게요...
아!

Breakpoint 개발을 위한 보너스 팁입니다.

presentation
네, flickr도 768과 1400에 브레이크포인트가 있어요.
  1. 현재 앉아 있는 모니터보다 큰 화면 크기에 대해 CSS 브레이크포인트를 경험해야 하는 경우 Chrome DevTools의 'responsive' 모드를 사용하고 원하는 큰 크기를 입력합니다.
  2. 파란색 바는 ‘max-width’ 미디어 쿼리를, 주황색 바는 ‘min-width’ 미디어 쿼리를, 녹색 바는 min 및 max를 모두 포함하는 미디어 쿼리를 표시합니다.
  3. 미디어 조회를 클릭하면 화면이 해당 너비로 설정됩니다. 녹색 미디어 쿼리를 두 번 이상 클릭하면 max 너비와 min 너비가 전환됩니다.
  4. 미디어 쿼리 바에서 미디어 쿼리를 마우스 오른쪽 버튼으로 클릭하여 CSS의 해당 규칙 정의로 이동합니다.

이 글은 번역 글입니다. 원본 링크입니다.


안녕하세요! Early adopter입니다.
페이스북 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다.
"보버"에서 "디자인 번역 공장" 연재를 저와 함께 해주실 분을 찾습니다. 하단 "리뷰" 또는 "페이스북"으로 편하게 메시지 주세요!
PS. 제가 사용하는 블로그 "보버"에 "함께 쓰는 블로그"라는 기능이 요번에 추가됐네요 ㅋ (미디엄에 퍼블리케이션 같은 기능..)
하단 링크 글을 보시면 "디자인 번역 공장"에 어떻게 함께 연재할 수 있는지 자세히 설명되어있습니다. 또는 쉽게 FB 메시지 주세요!
https://bit.ly/2L6WsZp