고정 레이아웃과 유동 레이아웃

화소와 픽셀 이야기

TV브라운관 TV와 컴퓨터 모니터의 화면 표시 방법을 알면 고정과 유동 레이아웃을 이해하는데 무척 도움이 됩니다. 단순히 "고정은 DIV의 가로(width) 값이 정해진 것이고, 유동은 %, 또는 값이 없는 것 아닌가요?"라고 생각할 수 있지만, 화면 표시 방법의 원리를 이해하지 못하면 여러분은 큰 충격(?)에 빠질 수 있답니다.

TV는 브라운관이라는 유리로 만든 상자 속에서 전기의 전자를 작은 총으로 쏴 지그제그로 위에서 부터 아래 방향으로 화면을 그리는 광학 영상 장치입니다. 전기의 전자(-)를 이용하기 때문에 CRT 모니터나 브라운관 TV를 음극선관 방식이라고도 합니다. 위에서 아래로 한번만 그리면 충분하지 않기 때문에 한 장면(프레임)을 홀수와 짝수줄로 두 번 그려줍니다. 이것을 비월 주사 방식(Interlace scanning)이라고 하고 이러한 방식의 화면표시방법을 아날로그방식이라고 합니다. 여기서 화면의 크기는 별로 의미가 없습니다. 왜냐하면 방송국에서는 한 화면당 525줄의 주사선을 보내고 아나로그 TV는 보통 그 중에서 504개의 유효주사선을 이용할 뿐 나머지를 버리게 됩니다. 작은 TV는 작게 그려주고 큰 브라운관은 확대해서 크게 보여주면 그만이지요. 옛날에 "숨겨진 1인치를 찾아라!"고 하는 모 ○○전자 광고카피는 그렇게 버려지는 신호까지 모두 보여준다는 의미가 있었던 것이지요...^^

최근에 사용하는 LCD,LED 모니터는 전자총이 없습니다. 그럼 어떻게 그림을 그릴 수 있을까요? 아주 얇은 유리판을 두장 겹쳐 놓고 그 사이에 전기가 흐를수 있는 액체(liquid)와 전기 신호에 따라 빛을 열고 차단하는 편광필터가 압축되어 그림을 그릴 수 있도록 만들어 줍니다. 브라운관처럼 큰 유리상자가 아니고 유리판처럼 아주 얇게 만들 수 있었기 때문에 박막 트랜지스터 액정 디스플레이라고 이름을 붙였습니다. 트랜지스터라는 것은 전기를 넣고(+) 빼는(-) 것을 이 유리판이 알 수 있다는 의미입니다. 여러분이 전자시계를 보시면 이해가 쉽겠지요. 작은 유리판 속에 숫자로 시간을 알려줍니다. 물론 색이 없어서 검정 숫자 뿐이지만 시간이 흘러가는 것을 깜박임으로 표시해 주고 숫자를 바꿔가며 시간을 표시해 줍니다. 이러한 방법이 더욱 발전하여 LCD 또는 LED의 광원(빛)을 이용해 여러가지 색으로 표현해 준 것이 LCD, LED 모니터입니다.

그런데 전자시계는 작은 점을 몇개만 사용해도 시간을 알려줄 수 있지만 모니터는 그보다 더 많은 점들이 필요합니다. TV와 같이 주사선을 이용한 방법이 아니고 점 하나하나 마다 전기를 넣었다(+) 뺐다(-)하면서 글씨와 그림을 그려야 하기 때문에 상상할 수 없이 많은 점들이 필요합니다. 이 작은 점 하나를 픽셀(pixel; picture element)이라고 하며 디지탈 사진 이미지에서 처음 활용하였기 때문에 picture element 즉 그림의 가장 작은 단위의 요소, 화소(畵素)라고 표현하는 것입니다. "아! 그럼 디지탈카메라에서 100만 화소, 200만 화소라고 말하는 것은 점이 100만개 또는 200만개라는 뜻이군요?" 예, 정답입니다.


해상도의 이해

Mario여기서 한가지 더 짚고 넘어가야 할 단어는 해상도(解像度)입니다. 우리가 흔히 모니터가 크면 해상도도 높을 것이라고 생각할 수 있지만 그것은 절대 그렇지 않습니다. 해상도란 어느 일정한 단위 안에서 얼마나 더 자세하게 점(화소, pixel)을 찍어 그 내용을 표현하는가하는 단위의 상대적인 표현일 뿐입니다. 컴퓨터 모니터에서는 가로,세로 1인치(25.4mm) 안에 72개의 점이 들어간다고 해서 72dpi(dots per inch)라고 합니다. 그럼 야구장의 전광판도 가로,세로 1m 안에 72개의 전구가 들어가 있다면 같은 해상도를 갖었다라고 말할 수 있나요? 이렇게 해상도가 높다, 낮다라고 표현하는 것은 그 기준이 무엇인가에 따라 달라지는 표현 방법입니다. "나는 큰 모니터를 샀으니까 해상도가 좋을 것이다." 라고 생각하면 큰 오산이지요. 그 모니터의 최대해상도 값을 꼼꼼히 살펴보아야 합니다. 실제로 대형 LED TV 모니터의 최대 표현 해상도가 1024×768픽셀 밖에 되지 않아서(컴퓨터 연결시) 홈페이지를 열어 보니 글씨 하나가 달걀만하게 그려진다면 얼마나 큰 충격을 빠질까요?

손님 : "아니, 해상도가 높다고 하셨는데, 이 글씨가 왜 이렇게 크게 나오지요?"
전자제품 점원 : "저희 제품은 타업체보다 해상도가 월등히 높답니다."

이때 빠진 것이 있지요? 기준이 무엇인가하는 점입니다. 일반적으로 컴퓨터 모니터는 1인치를 기준 단위로 계산하지만 TV를 겸용으로 사용 해야하는 디지탈 TV는 비디오 보드의 입출력 지원사양 기준이 다릅니다. 이점을 꼭 확인해야 낭패를 면할 수 있습니다. 기준은 회사마다 제각각 다르지요. 모두 최고의 해상도라고 말합니다.

또 자주하는 실수가 있는데 책을 만들때 일어나는 상황입니다.

손님 : "제가 홈페이지에 사진을 올려두었습니다. 대단히 아름답고 멋진 풍경 사진입니다. 이 사진을 책의 표지로 써 주세요."
인쇄소 직원 : "손님, 이 그림은 해상도가 너무 낮아서 인쇄를 할 수 없는 그림입니다. 높은 해상도의 큰 이미지를 보내주세요."
손님 : "아니, 한글문서에서는 인쇄가 깨끗하게 잘 되는데 왜 표지로 사용할 수 없다는 것입니까?"
인쇄소 직원 : "해상도가 낮아서 ..."

이때도 빠진 것이 있습니다. 바로 해상도의 기준입니다. 컴퓨터에서는 1인치당 72개의 점을 찍어 표현하지만, 인쇄소의 출판기계는 300dpi 즉 300개의 점을 찍어야 비로소 적정 해상도가 나오는 것입니다. 따라서 홈페이지에 올려진 그림은 그 속에 갖고 있는 픽셀의 정보가 72dpi 밖에 없는 것이고 인쇄를 하려고 보면 확대가 되어 깨진 그림처럼 보이게 되는 것이죠.


방문자를 위한 고민과 배려

"고정 레이아웃과 유동 레이아웃을 공부하면 되는데 왜 이런 이야기가 필요한 것이죠?" 고정 레이아웃 보다는 유동 레이아웃에서 실수가 많습니다. 그리고 이런 실수가 레이아웃을 제작하는 과정에서 미처 고려하지 못한다면 위와 같은 상황극에 여러분도 일조하는 경우가 되는 것이죠. 컴퓨터의 모니터는 제품마다 각각 가로와 세로의 픽셀수가 다르고 심지어는 4000픽셀 이상의 화소수를 가진 대형 모니터도 있습니다. 일반적인 모니터는 1024X768 픽셀의 모니터를, 조금 좋은 것은 1280, 2048픽셀의 가로값을 갖기도 합니다. 물론 비디오카드의 사양에 따라 지원이 가능하죠. 요즘 나오는 스마트폰과 아이패드 같은 경우는 화면의 크기는 작아도 글씨를 무척 정교하게 표현합니다. 왜냐하면 기존의 모니터 해상도와 다른 기준을 사용하기 때문이죠. 위와 같은 공부가 모니터를 이해하는데 결코 헛되지 않는 내용입니다.

유동 레이아웃이란, 쉽게 말해서 내용을 감싸는 DIV의 속성값 width(가로의 크기)를 비율(%)로 처리하여 손님(방문자)의 모니터의 가로픽셀 수만큼 유동적으로 늘려주는 것을 말합니다. 그러면 사이드 바(좌측 메뉴 부분)를 제외한 콘텐츠 영역은 방문자의 모니터 해상도에 맞게 늘어나게 되죠. 만약 1024픽셀의 모니터이면 1024픽셀만큼, 만약 2048픽셀의 모니터이면 그만큼 늘어나게 됩니다. 내가 사용하는 모니터의 크기가 1280픽셀의 모니터여서 유동 레이아웃으로 제작하였는데 이보다 큰 해상도를 가진 모니터로 보았을 때는 어떻게 표현 될까요? 아래 그림을 보면 알 수가 있겠죠?

image

image

조금 과장된 표현 같지만 그렇지 않답니다. 네비게이션 부분은 가로의 값을 고정시키고 가운데로 정렬하기 위해서 {margin:0 auto;}로 처리하였지만 콘텐츠 영역은 전체 DIV에 가로값을 100%로 속성을 주고 콘텐츠 영역은 {float:left; width:500px;}를 이용해 왼쪽으로 띄웠고(float) 사이드 바 영역은 {float:right; width:300px;}로 오른쪽으로 띄웠습니다. 물론 1024픽셀에서는 정상적으로 보일 수 있지만, 2048픽셀 이상의 모니터에서 웹사이트에 접속한다면 휭한 가운데 영역에서 축구를 할 수도 있겠지요...^^

유동 레이아웃을 사용하는 경우 최대 가로의 크기를 정해주는 max-width의 속성도 있지만, IE6에서는 효과가 없습니다. 따라서 스크립트의 도움을 받아야 최대 가로의 크기를 조정할 수 있지요. 이렇게 고정 레이아웃과 유동 레이아웃의 특징을 알고 있어야 방문자에게 의도한 목표대로 웹사이트를 만들어 보여줄 수 있는 것입니다. 레이아웃의 틀을 잡는다는 것은 위에서 이야기한 모든 것들을 종합적으로 정리하고 내가 목표로 하는 디자인을 코딩할때 방문자의 모니터 크기를 고려한 배려를 꼭 잊지말아야 하는 것입니다.


그러면 "고정형 레이아웃을 사용하면 실수가 없어서 좋겠네요?" 라고 생각하실 수도 있겠지요? 하지만 고정 레이아웃에도 실수가 있을 수 있습니다. 아래의 그림을 보면 어느것이 더 보기가 좋은가요? 객관적으로 평가할 수는 없지만 배경 처리 부분에서 윗 그림이 더 완성도가 높다고 표현할 수 있습니다.

image

image

image고정 레이아웃에서 가장 흔한 실수는 배경처리를 고려하지 않을 때 발생합니다. 내용을 감싸는 DIV에 가로값을 980픽셀로 고정했으니 "아무런 문제가 없겠지?"라고 생각할 수 있지만 가로가 더 큰 모니터에서는 헤더와 배경처리가 부족하여 흰 백지위에 웹사이트만 덩그라니 놓이게 되죠. 뭔가 2% 부족한 웹사이트처럼 보이게 됩니다.

이런 경우에는 body 전체에 {background-color:#F2F2F2;} 처럼 속성을 주고 오른쪽에 보이는 이미지처럼, 헤더의 네비게시션 바의 배경이 되는 검정계통의 라인과 아래로 내려가면서 흐려지는 그라데이션 배경 이미지를 만들어 가로 방향으로 반복시켜 주어야 전체 화면을 빈틈 없이 채워 줄수 있는 것이죠. 이것을 CSS로 정리하면,

body {background:#F2F2F2 url(images/site_bg.gif) repeat-x top center;}

레이아웃의 기본 틀을 준비하는 과정은 참고가 될만한 자료들이 무척 풍성합니다. XE 스쿨에서 모든 내용을 소개할 수도 없지만, 아래 웹사이트 주인들의 취미는 레이아웃 틀 만들기입니다. DIV 몇 개 가지고 뭐 그리 큰 공부인가? 하실 수도 있지만 그 곳의 주인들은 온 정성을 다해 레이아웃을 연구하고 개발하는 과학자들입니다.


도움말

아래의 사이트를 방문하고 다양한 레이아웃의 작동 원리를 살펴보세요.

Link Website for Layout :