발표자: 김수진님(이롭게)
RWD : Reponsive Web Design 반응형 웹 디자인
: 반응형 웹디자인은 flexible Image / Fluid Grid / Media Query 세가지로 구현 가능하며,
오늘의 주제는 미디어 쿠ㅓ리~!
Media Query란 ?
: Media (장치...) + Query (질문v ) -> 여러가지 조건들을 통해 미디어에 질문을 해서, 조건에 맞게 해당 속성을 주는 것 !
- 크로스 브라우징으로 점점 더 프론트엔드 개발자가 할 일이 늘어나고 있음
- 크로스브라우징(Cross Browsing) 이란 ?
: 위키에서도 해당 개념에 대해서는 논란이 많은 것 같다, 크로스브라우징테스트에 관한 글을 보니 우리가 작성한 코드들과 component들이 다양한 웹브라우저에서 잘 작동되는지 확인하는 것을 크로스브라우징테스트라고 한다. 그러니 크로스브라우징은 다양한 웹브라우저 사용을 의미하는 것을...의미하는 것이라고 정리해본다.
(내 머릿속에서)
출처 : http://www.appperfect.com/services/web-testing/cross-browser-testing.php
- 프론트엔드 개발자가 미디어쿼리를 통해 가장 많이하는 작업은 화면 크기에 따라 화면 레이아웃 구성을 바꾸는 것 !
Breakpoint란 ?
: 레이아웃이 바뀌는 기준점
- 어떻게 Breakpoint 기준을 세울까? 에 대한 질문에 정석은 여러가지 기기로 테스트를 해보는 것
그러나 모든 기기들로 다 하나하나 테스트를 하는 것은 힘듬.. 그렇기때문에 일정기준의 breakpoit를 설정하고 테스트하는 것이 좋은 방법 ! -> 개발자도구를 활용해서 확인 - 요즘 쓰는 BRAEKPOINT 기준은 768보다 큰 장치들 / 970보다 큰 장치들 등등 이런식으로 몇개의 기준점을 잡아놓고 미디어쿼리 작업을 많이함
Breakpoint 잘 정하는 법
-
'The 100% correct way to do CSS breakpoints '를 참고해서 잘 정하는 방법을 소개
-
쪼개서 나누는 것이 아니라 비슷한 것들끼리 묶어서 Boundary / Range로 정해서,, breakpoint를 정해라 ! medium / tablet...이런식으로 기기끼리 묶기 같은 그룹끼리 묶어서 속성 주기
-
글을 잠깐 찾아봐서 정리하자면,
1) 특정 기기 크기로 breakpoint를 잡지말고, 정확한 breakpoint 잡기
2) range의 이름을 명확히, 잘 이해되게 짓기
3) 명확한 이름을 지어주기 Ex. phone-only 이런식으로 -
강연자분이 개인적으로 선호하는 breakpoint
: 360 sm / 750 md / 960 lg / 1440 xl -
ideal 하게 생각한 것과 실제작업은 항상 다르기때문에 콘텐츠를 어떻게 보여줄지에 따라서 달라질지 생각해보고, 테스트 해보기 !
-
반응형 / 작은것을 작업해서.....쌓아올리는 것
breakpoint 변수로 관리하기
- less / scss 등 css 프리프로세서 활용
- 추가나 수정이 생길때 필수
- min-width/max-width 관리
- Sass MQ 를 추천해주심 !
( node sass / gulp 4 / yarn 등등..) - mq를 쓰려면은 깃허브 _mq.scss로 가서 @import 'mq'; 해서 사용하기
@include mg(medium) {
.box {
background-color:black;
}- 저장없이도 바로바로 바뀜 , 미디어쿼리 쓰면 코드가 굉장히 긴데 mq를 사용하면 코드를 줄일 수 있고, 조금 더
브레이크포인트를 다양하게 쓸 수 있음
RWD 작업을 진행하면서 겪었던 경험들 공유
- Fullpage Design 관련문제
-> 화면에 꽉 채운 컨텐츠 디자인은 예쁜데, 반응형을 하다보면 고려할 것이 많음
-> 기획자와 / 디자이너와의 꾸준한 대화가 필요
(내가 먼저 어떤 부분에서 문제가 생길지를 얘기해줘야 하는 것이 필요 , 예상되는 것들)
- Unpredictable 한 문제들..
-> 다 작업했는데도 내용이 변경되고, 맞춰야 하는 크기를 변경해야하는 기회들 생김
참고이야기
- 반응형 웹은 ART다 / SCIENCE가 아님 (정답이 없다..ㅎ.)
- W3C School은 중간중간 잘못된 설명이 있는 부분이 많기때문에, 왠만하면 사용을지양하는 것이 좋음
- Max-width는 최대한 지양하는 것이 좋음 / max는 어디까지를 max로 봐야되지? 라는 굉장히 추상적인 느낌이 있기때문에.......max-width보다는 min-width만 사용함 / 보통은 거의 !! min을 사용함
(예외: 보통 max-width는 모바일 화면 작업할 떄 사용)
Keep on my way ! :)