A_10 개발자와 협업할 때 꿀팁
반응형 이란?
반응형 쉽게 이해하기.
개발자와 일을 하다 보면 안 된다, 그건 불가능하다, 지금은 구현이 안된다고 이야기한다. 왜 이렇게 안 되는 게 많을까? 나는 한때 개발자는 뭐든지 만들어내는 사이버 세상의 마법사라고 생각하고 있었다. 그러나 그것은 일반인이 디자이너를 마법사라 생각하는 것과 비슷한 느낌의 실수가 아녔을까 싶다. 비용의 문제, 인원의 문제, 기간의 문제 등을 전혀 고려하지 않았던 것이다.
제일 처음 개발자와 일할 때를 생각해보자 그동안 일러스트나 포토샵이 편한 나는 그래픽 디자이너다 회사에서 갑자기 홈페이지를 만든다고 하더니 개발자와 일을 해야 한다고 한다. 열심히 포토샵을 만지고 만저 화면을 디자인해서 짜잔 하고 줬더니 반응형이 어쩌고 스크린 사이즈가 어쩌고 디바이스가 어쩌고 라는 말이 돌아온다.
일단 반응형은 무엇인가?
반응형 웹 디자인(responsive web design, RWD)이란 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말한다.
웹사이트를 PC용과 모바일용으로 각각 별개로 제작하지 않고, 하나의 공용 웹사이트를 만들어 다양한 디바이스에 대응할 수 있다. PC용 URL과 모바일용 URL이 동일하기 때문에 검색 포털 등 광고를 통한 사용자 접속을 효율적으로 관리할 수 있다. 또한 웹 페이지 내용을 수정할 경우, 하나의 페이지만 수정하면 PC와 모바일 등 다양한 디바이스에서 동일하게 반영된다. 반응형 웹의 핵심 기술은 가변 그리드(fluid grid), 유연한 이미지(flexible images), 미디어 쿼리(media query)이다. 반대말은 디바이스별로 별도의 웹사이트를 제작하는 적응형 웹(adaptive web)이다.
위키백과에 따르면 다음과 같이 정의된다. 쉽게 말하자면
하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말한다. 즉 우리가 보는 대부분의 홈페이지나 모바일 환경의 웹페이지가 반응형이다. 맥에서도 데스크톱에서도 스마트폰에서도 자동으로 화면 조정을 해주는 것이다.
전문적인 용어를 풀어 설명하자면
가변 그리드(fluid grid), 기존에 웹디자인을 진행함에 있어 모든 것들을 픽셀로 끊었다. 하지만 반응형은 이런 레이아웃의 변형을 %로 변환한다. 기존에는 보이는 부분이 화면 크기에 따라 잘렸다면 %로 설정할 경우 같은 비율로 이미지가 줄어들어 이미지를 어떤 환경에서도 보여줄 수 있는 기술을 말한다.
가변그리드는 퍼센테이지로 표현한다.유연한 이미지(flexible images), 반응형을 가장 쉽게 설명할 수 있는 용어일 것 같다. 넓은 화면에서는 넓고 크게 좁은 화면에서는 비율을 유지하면서 줄어드는 이미지를 뜻한다. 디자이너가 고려하기보다는 개발자가 고려하는 부분이라고 생각하면 편하다.
미디어 쿼리(media query)이다. 화면의 따라 여러 가지의 배치를 해주는 것이라고 생각하면 쉬울듯하다. 넓은 모니터 화면에서 길쭉한 모바일 환경으로 넘어올 때 버튼의 위치나 이미지의 위치 등을 어떤 식으로 이동시킬지에 대한 고려를 개발자와 같이 해야 한다.
출처_ https://readme.skplanet.com/?p=9739처음 홈페이지를 디자인한다면 반응형은 그냥 알아서 이동하고 줄어드는 마법처럼 보이지만 이런 반응형 웹을 만들기 위해서는 아주 많은 고통과 디자인이 필요하다. 일단 처음 고려할 것은 디바이스 사이즈에 대한 생각이다. 스마트폰은 대표적으로 어떤 것을 표준으로 잡을 것이며, 화면비율은 몇 대 몇 모니터는 어느 사이즈 비율로 할 것인가, 태블릿은 무슨 모델에 맞출 것인가 등 세상에 나와있는 스크린 비율 중 자주 사용되는 것들을 선정하여 그에 따른 디자인을 각각 다 해야 하는 것이다. 늘고 줄어 남에 따라 어떻게 움직일지 몇 개의 지표를 세워야 한다는 것이다.
그리고 그 지표들을 기준으로 변화에 대응할 수 있는 여백이라던가의 장치를 넣어야 한다. 쉽게 말해 수정 영역과 비 수정 영역을 생각하며 화면을 구성해야 한다는 것이다.
좀 더 디테일한 꿀팁은 화면 가로폭이나 세로 폭에 따라 들어가는 글자 수 이미지 사이즈 등등을 미리 산정하고 작업을 한다면 더 완벽하다. 각각 모바일에서, PC에서 최대 몇 글자를 보여줄 수 있는가 이미지를 어떤 식으로 보여줄 것인가 하는 고민이 필요하다.
반응형은 쉽게 말해 각각의 환경별 기준을 정하고 그 기준을 지표로 삼아 다른 비슷한 환경에서 위치를 바로 잡아 보여주는 방식이다. 홈페이지 디자인일 경우 단순하게 내가 쓰는 모니터에 관한 디자인만을 하는 게 아닌, 와이드 모니터, 무슨 모니터 등등에 대한 고려를 해야 한다는 뜻이다.
Tip.
%로 표기한 화면에서 줄어드는 영역에 대한 고려를 한다.
최대 글자 수를 미리 잡아둔다.
스크린 환경이 가로로 넓은가 세로로 긴가에 따른 레이아웃을 고려한다.
스크린별로 어떤 디바이스를 기준으로 잡을지를 미리 이야기한다.
늘어나고 줄어드는 것을 받아줄 여백을 만든다.
같은 종류의 스크린에서(모바일 환경이면 모바일) 비율이 다르거나 해상도가 다르다면 이때 대응할 규칙을 미리 정한다.
-----------------------------------------------------------------------------------------------------------------------
디자이너 관련 게시글
공유, 댓글, 구독 감사합니다.
A_1 편집 디자인 프리랜서 1년_ https://brunch.co.kr/@willlink/5
A_2 디자인 프리랜서 알려주면 그만이야_ https://brunch.co.kr/@willlink/7
A_3 디자인 프리랜서 팀 만들기_ https://brunch.co.kr/@willlink/8
A_4 디자인 프리랜서 외주 구하기_ https://brunch.co.kr/@willlink/9
A_5 디자인 프리랜서 외주 구하기_ https://brunch.co.kr/@willlink/6
A_6 디자인 프리랜서 항상 '을'일 필요는 없다._ https://brunch.co.kr/@willlink/10
A_7 디자이너, 개발자, 기획자 설명충이 돼라_ https://brunch.co.kr/@willlink/12
A_8 몸값 하는 사람_ https://brunch.co.kr/@willlink/18
A_9 실력 있고, 얄미운 주변 사람 따라잡기._ https://brunch.co.kr/@willlink/26
