UI 브리핑 : 6화 - 반응형웹과 4:3 화면비율
UI 디자인 연구소 - 단톡방에서 진행된 일일 브리핑 정리
이 내용은 UI 디자인 연구소 - 단톡방에서 진행된 일일 브리핑의 내용을 정리한 것입니다.
이번에는 저번주에 이어서 일단 실제 브라우저와 해상도에대한 내용을 좀 확인해보겠습니다. 스케일과 해상도. 반응형 지원에 대한 부분은 기술적으로 들어가면 우리가 알고있는 것보다 - 꽤 복잡하다는걸 알게되실겁니다.
모바일 디자인의 경우 OS의 가상 OS 키 영역에 의해서 디자인의 크기가 달라지기도하고 상단 상태바의 크기 등에 따라서 디자인 영역이 달라지죠. PC 웹의 경우도 마찬가집니다. 대부분의 OS가 윈도우이고. 웹브라우저를 사용한다는 가정 하에서 진행할 경우 우리가 디자인하는 디자인결과물과 - 실제 사용자들이 바라보는 시각물은 전혀 다른 모습이기 떄문입니다.
우리가 생각하는 웹디자인의 결과물은 보통 이런식이죠. 뭐가 잘못되었는지는 - 현실을 생각해보시면 아실겁니다. 우리는 윈도우 기반으로 사용하고있는 경우가 많고. 웹브라우저의 전체화면 기능을 사용하지 않는 경우가 많죠. 게다가 하단의 OS 기본 틀까지 생각하면 - 실제로 사용자들이 바라보게되는 화면은 우리의 생각과는 많이 달라집니다.
웹브라우저 상단의 영역을 제외하고. 하단의 OS영역. 또한 웹브라우저 우측의 기본 스크롤바까지 제외한 영역이 실제 화면이 되죠.
크롬만 하더라도 상단의 탭. 주소창 / 즐겨찾기 영역. 그리고 우측의 스크롤영역이 있다는걸 아실겁니다. 이게 왜 중요하냐.하면. 신규 디자인을 하실때 브라우저 영역을 생각하지않고 캔버스를 그릴경우. '실제로 좁아지는 영역'까지 생각하지 않은채 디자인을 해서. 비례 자체가 커지거나. 스크롤 영역에서 - 오차가 생기기 때문입니다.
여기에서 -조금 더 깊게 들어가면 브라우저별로 상단 높이값이 다르다는거. 알고계신가요? 실제로 체크해보시면 아시겠지만. 해상도별로. 상단 브라우저 영역을 재어보고 해상도에서 적정 영역을 빼서 - 남은 결과값이 실제 작업가능 영역입니다.
https://brunch.co.kr/@clay1987/137
https://clay1987.blog.me/221387176837
가장 흔히 쓰이는 1920 x 1080 해상도 기준으로 계산을 좀 해봤는데요. 최적해상도를 어디에 맞추느냐에따라서 상황이 많이 달라질수있다는거. 이번 이야기에서 기억하셔야할건 그런 영역일겁니다. 물론 요즘은 대부분 압도적으로 크롬이 높으니까. 크롬에최적화를 하시면되지만 추후에 환경에변화가 생기거나 / 실제 서비스 진행하는 유저층이 오래된 브라우저를 주로 쓰는지. 그런것들을 체크해야하는것도 이런 이유에서입니다.
자, 다시 스케일링 영역으로 돌아오면 높은 해상도와 반응형웹 관련된 내용인데요. 위의 사진은 4k 해상도 모니터에서 OS 해상도를 100%로 잡고. 최적 웹디자인 크기에 맞춰서 여섯개의 네이버 화면을 띄운 경우입니다. 일반적인 24~27인치 / HD 모니터에서는 이런 걱정을 할 필요는 없겠으나. 실제로 해상도가 큰 모니터에서는 우리가 생각하는 디자인이 최적의 상태로 표기되질 않습니다.
4k라는 해상도 영역의 특성 + 100% 해상도 OS 스케일을 했을 경우 일반적인 해상도에서는 제대로 확인하기도 어려운 시안들이 만들어지죠. 그래서 일반적으로는 해상도 영역을 지정하게됩니다. 이후 media query라는 명령어를 지정하고 일정 해상도 이상의 영역을 - 모바일 / 타블렛 / PC로 인식하게 만들죠. 그래서 해당 화면에선 디자인을 이렇게 보여주겠다.라고 하는게 반응형 웹입니다.
사실상 브라우저 해상도 / 환경을 감지하고 거기에맞는 최적의 결과물을 보여주는, 프리셋 방식에 가깝습니다.
미디어쿼리 작성방식 예시사례
https://gist.github.com/electricg/3832493
예로 좀더 자세히 들어가면. 화면 비례와 DPI 해상도값까지 체크를해서 거기에맞는 값을 보여주는 high dpi 대비 미디어 쿼리 방식도 존재합니다. 결국은 얼마나 자세하게 - 해당 화면정보를 체크하고. 나눌수있는가가 관건이거든요.
반응형웹은 크게 두가지 타입이존재하는데요.
하나는 도메인을 아예 따로 나눠놓고. - 기기 정보를 확인 후. 도메인으로 접속시 - 모바일 / pc 도메인을 자동으로 나눠주는 타입입니다. 네이버나 포탈급 사이트. 혹은 어떠한 이유에서든. 도메인을 따로 m.~~~~.com 같이 모바일 구분을 따로 하는 도메인인경우가 이런 경우입니다.
모바일 도메인 (좌) / PC 도메인 (우)
이런타입의경우모바일 대상으로 만들어진 사이트들만 - 반응형처리를 해놓기때문에 모바일 사이트를 크게 늘려서 사용해도 - 디자인비례적으로는 크게 문제가 없습니다. (좀 이상해보이긴하지만 대응은 됩니다) 반대로 PC 전용화면의 경우는 그냥 캔버스가 좌측 기반으로 찌그러들 뿐이죠
또다른 타입의경우. 한 도메인에서 - 여러 미디어쿼리를 걸어놓고. 화면해상도에 맞춰 자동으로 반응형을 지원하는 타입니다. 이 경우는 대부분의 접속자들이 모바일에서 들어오는 경우 + PC에서 오더라도 모바일이 중요하기 때문에. 하나로 묶어둔 경우라고 보시면될거같네요. 실제로 반응형을 모두 지원하는 서비스라해도. 관리자페이지나. 일정 기기들에 특화되어 들어오게하는 관리자서비스 등의경우는. 유저 / 홍보용 사이트들과는 다르게 PC 나 모바일 접속만을 지원하는 등의 제약을 걸기도합니다.
사이트 종류에따라서 이런 타입이 나뉘기도하니. 이 부분이 궁금하신 분들은 여기를 좀 참조하시면 될 거 같네요.
https://brunch.co.kr/@clay1987/40
정리해보면. 결국 PC / 모바일 단위를 체크해서 - 들어오는 도메인을 다르게 잡아주던가. 아니면 한 도메인에서 모든 해상도에 최적화된 화면을 보여줄 수 밖에 없다는 결과가 나옵니다. 사실 웹에서는 여러 그리드 시스템이 존재하는데요. 모바일웹 / PC웹별 그리드 시스템은 내일 알아볼거고. 이전에 간단히 4:3과 16:9 모두를 지원해야하는 설계에 대해 이야기를 좀 해보겠습니다. 일반적으로 웹디자인의 좌우 컨텐츠 크기가 640~ 1280 정도라는걸 아시는 분들도 계실겁니다.
실제로 네이버사이트의경우도 실제 화면 좌우비례에비해서 실제 컨텐츠 영역은 중심정렬로 보여지게되는데. 대체 왜 좌우에 이렇게 많은 영역을 남기는가.에대한 부분이 궁금하실텐데요. 사실 간단합니다.
인간의 기술은 생각보다 느리게 진보합니다. 그리고 과거의 모니터는 4:3 비율이 대부분이었고 여전히 2019년에도 4:3 모니터는 존재합니다. 패널은 crt에서 LED 등으로 바뀌었을지 몰라도. 4:3 비율의 고해상도 모니터를 사용하는 환경들이 아직 많기때문에 '그런 유저들을 위해서' 안정적인 4:3 / 16:9 화면을 제공하는것이죠.
실제로 4:3 / 16:9 이슈는 일반 프로그램이나. 서비스 외에도. 게임에서도 동일한 문제가됩니다. 예를 들어서. 유명한 게임인 스타2라던가. 배틀넷 프로그램을 분석해보신분이 계신진 모르겠네요. 배틀넷의경우도 PC 프로그램에 까는 프로그램에 + 웹페이지를 보여주는 형식이다보니. 이런 4:3 / 16:9 이슈에 영향을 받을 수 밖에 없습니다.
일반적인 배틀넷 프로그램의 화면
게임을 깔아본 분이계시다면 보통 이런화면만 보셨을텐데요. 실제로이걸 크기를 키워보거나.상세 화면에들어가게되면 좀 이상한 느낌의 화면들을 확인하게됩니다.
화면을 좌우로 크기를 늘릴 경우 - 이미지 배경이 이동해서 빈 공간을 메움
좌우 상하로 크기가 늘어날 경우, 이미지가 베울 수 없는 텅 빈 공간이 생겨남
말그대로 다양한 해상도에 대응을 하기위한 레이아웃으로. 좌측 정렬 + 우측에는 이미지로 비어보이는 화면을 채워주는 형태로 기획을 헀다는 얘기가됩니다.
혹은 아예 중앙정렬 형식의 레이아웃이되어, 좌우 크기가 늘어나도 무관하게 디자인을 해두었습니다. 그 이유역시 간단합니다. 4:3 비율의 해상도를 지원하기위한 방법인거죠. 그래서 주변 프로그램들을 눈여겨보시다보면. 4:3 비율을 지원하기위해. 중앙정렬을 한 - 좌우가 텅빈 화면들이나. 좌측정렬을 해놓고, 우측이 텅 비어있거나. 없어지더라도 무방한 이미지 등을 배치해놓는 방식으로 대부분 해결이된다는걸 확인하실 수 있습니다.
스타크래프트 2라는 게임은 이런 4:3 / 16:9 비율로 축소될 가능성을 모두 고려해서 만든 레이아웃들이 많은데요. 실제로확인해보시면 두가지 형식으로 대부분의 UI 규격이 나뉘게됩니다.
좌측 정렬 + 우측에는 이미지
팝업 구조로 중앙정렬 + 좌우 여백
위의 화면은 4:3 / 16:9 해상도 비교화면입니다. 16:9 화면에서는 하단 UI의 좌우의 검은 영역이 4:3 영역에서는 사라져있죠. 다른 게임들도 찾아보면 대부분 이런 '좌우 여백이 남는데. 이걸 어떻게 해결할것인가에 대해서 고민하다보니. 디자인에있어서 한계가 올 수 밖에 없는 상황들이 발생하는겁니다.
일반 PC와 웹디자인에서도 이런 문제는 동일합니다.
예를 들어 카카오같은경우 좌우컨텐츠 영역을 엄청 넓게쓰는것처럼 보이는데요. 일단 4:3은 벗어난거같아서. 확인해보니
이역시도 반응형 기반으로 4:3 비율에 맞는 좌우여백을 - 지원하고있다는걸 알 수 있었습니다.
구글의 메일시스템의경우도 4:3 비율을 위해 좌측정렬 + 우측영역은 확장 / 화면크기를 늘릴 뿐입니다.
자 오늘 이야기한 내용은 다음과같습니다.
1. 우리가 실제로 웹디자인을 할 때는 항상 OS 기본 틀과, 웹브라우저라는 규격틀에 제한을 받는다.
2. 규격없이 해상도만을 그대로 만들어서 디자인할 경우, 실제 유저들이 바라보는 영역보다 비례가 커지거나, 문제가 생길수있다. 그러니 실제 디자인 가능 크기를 확인해두자.
3. 반응형 해상도는 보통 브라우저 해상도나 / 기기타입을 확인하여 - 거기에 맞는 도메인이나, 최적화된 화면을 보여준다.
4. 항상 게임이나, 서비스나 좌우 컨텐츠 영역 크기가 중요한데. 항상 4:3 비율과 16:9 영역을 동시에 지원해야하는지 확인해야한다.
5. 4:3 비율에 맞추되, 16:9 화면을 동시 지원하기위해. 보통 중앙정렬 + 좌우 여백 디자인을 사용하거나. / 좌측 정렬 후 - 우측의 여백을 채우는 형식이 많다.
이 내용은 UI 디자인 연구소 - 단톡방에 올려진 자료를 정리하여 만들어진 컨텐츠입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
https://brunch.co.kr/@clay1987/113
