관련글 : 각 사이트별 레이아웃 너비(레이아웃 사이즈, 레이아웃 크기
위 글은 2012년 12월에 처음 작성된 글이고, 그 후로 2014년 8월에 한 번 더 조사해서 작성한 글입니다.
레이아웃을 만든다는 것은 사이트의 뼈대를 잡는다는 것인데, 그 중에 우선 '크기'를 가늠한다는 것 역시 중요한 일입니다.
한 장의 종이 위에 얼마나 많은 정보를 효율적으로 보여줄 수 있느냐 하는 것이 UI/UX 디자이너의 역할일 건데요,
요즘같이 스마트폰이 대세가 된 시점에는 작은 스마트폰 안에서 얼마나 그 공간을 효율적으로 사용하느냐가 중점이듯이
여전히 PC 웹 환경에서는 모니터의 해상도에 맞게 웹페이지를 잘 보여줄 수 있으냐가 관건입니다.
옛날 2000년도에는 1024*768도 모자라 800*600 사이즈에 맞춘 웹사이트들도 꽤나 많았고요.
요즘에는 워낙 인터넷 속도나 모니터의 해상도의 구애가 없어 가로넓이 1024픽셀 안에서 자유롭게 혹은 그 이상으로 디자인하는 경우도 많습니다만
아직까지는 이 1024픽셀에 맞춰 제작을 합니다.
2012년, 2013년도에 한 번 조사했을 때 네이버는 880픽셀이었습니다만, 2015년에 확인해보니 940픽셀로 늘어났네요.
<2012~2013년과 2014~2015년도 각 포털사이트 넓이 변화>
| 2012/2013 | 2014,2015 | 비고 |
네이버 | 880 | 940 | 60픽셀 증가 |
네이트 | 880 | 880 |
|
다음 | 940 | 940 |
|
첫 페이지는 모두 940픽셀을 넘지 않지만 다른 페이지로 갔을 때는 980 픽셀로 맞춰 제작이 되었습니다.
그럼 우리는 980픽셀 사이즈에 맞춰 레이아웃을 만들어야 하는 걸까요?
레이아웃의 넓이가 변화됨이 없이 메인 페이지와 서브 페이지 간의 화면 상의 간극이 없으니 사용자는 그 틀 안에서 화면을 바라보기는 좋겠습니다만
사이트는 페이지마다의 역할이 존재합니다.
웹페이지의 존재의 목적
1) 네이버 인덱스 페이지
http://www.naver.com
2) 네이버 tv 캐스트
http://tvcast.naver.com/v/307431/list/29049
3) 네이버 키워드 검색 화면
http://search.naver.com/search.naver?where=nexearch&frm=ff&sm=oss&ie=utf8&query=%EA%B0%84%EA%B7%B9
우리는 세 가지 페이지를 예로 들어 각 페이지의 존재 목적에 대해 살펴보도록 하겠습니다.
먼저 네이버 인덱스 페이지는 말 그대로 인덱스 페이지로써 네이버의 방대한 컨텐츠를 한 눈에 보여줘야 합니다.
한 눈에 보여줘야 한다는 것은 '가로'와 '세로'의 모니터 영역 안에서 되도록이면 스크롤을 내리지 않고
컨텐츠를 보여주어야 합니다.
그럼 우리가 위 표에서 살펴봤듯이 940픽셀로 제작한 것과 980픽셀로 제작한 것의 차이는 무엇일까요.
스크롤을 제외한 가로와 세로가 제한되어있는 모니터 화면에서 980픽셀로 작업하게 되면 그만큼 세로 영역도 늘어나게 됩니다.
우리가 웹페이지에 있는 각 위젯 요소들을 제작할 때도 적당한 비율로 각 공간에 맞춰 제작을 하는데
예를 들어 980픽셀로 제작할 경우 광고 위젯도 300*250픽셀 사이즈의 배너를 달게 된다.
예를 들어 설명한 것이지만 다른 위젯들도 동일하게 화면의 넓이에 맞게 각 비율에 따른 크기로 정사각형 혹은 직사각형의 비율로 공간을 나눠 위젯을 제작하게 되는데
가로 넓이가 넓으면 그만큼 세로 영역의 높이도 늘어나게 되어서 결과적으로 스크롤이 없는 한 화면에 많은 양의 정보를 한 눈에 보여주기는 어려워지게 된다.
화면을 적당히 늘일 수도, 그렇다고 너무 줄일 수도 없는 최적의 비율이란 것이 존재하게 된다. 마치 인체의 신비처럼 사이트마다 저마다의 컨텐츠를 인덱스에 효과적으로 보여줄 수 있는 가로 사이즈가 존재하게 된다.
2)와 3)의 경우, 2)는 동영상을 보여주기 때문에 전체 영역을 고루 사용하는 것이 효과적이고, 3)의 키워드 검색 화면의 경우 해당 키워드에 관련된 텍스트 결과만을 나눠 보여주면 되기 때문에 적당한 크기로 공간을 배분해 제작을 하면 된다.
