본문내용
1. 레이아웃의 개요
1.1. 레이아웃의 정의
레이아웃의 정의는 웹 디자인의 시각요소인 타이포그래피, 일러스트 및 이미지, 아이콘, 배너, 내비게이션 등을 제한된 공간 안에서 시선이 편리하게 이동하고 미적으로 효과 있게 배치하는 일이다. 이를 통해 통일감, 리듬감, 공간의 짜임새, 주목성, 창조성 등을 갖추어 의미를 쉽게 전달하는 시각작용을 할 수 있다. 레이아웃의 기본 조건은 주목성, 가독성, 조형성, 창조성, 명쾌성 등이며, 레이아웃의 목적은 웹 사이트의 목적과 사용자의 편의를 최우선으로 하고 적당한 시각적 효과와 웹 디자이너의 독창적이고 창의성이 가미된 좋은 레이아웃 작업을 통해 완성도 있는 사이트를 구현하는 것이다. 모든 내부 페이지에 적용할 표준 레이아웃을 잘 구성하는 것이 중요하다.
1.2. 레이아웃의 기본 요소
1.2.1. 판형
판형은 인쇄물 크기의 규격으로, 내가 디자인할 작업물의 크기를 말한다. 일반적인 보고서라면 A4가 될 것이고 책을 디자인한다면 출판 목적, 출판물의 성격, 대상 독자 등을 고려하여 책의 크기를 정하는 것이다.
들어갈 글과 이미지가 많은데 판면이 작은 경우, 정보들을 다 넣지 못하거나 넣더라도 시각적으로 답답한 결과물이 나온다. 반대로 들어갈 글과 이미지가 적은데 판면이 큰 경우, 레이아웃의 짜임새가 떨어지며 종이의 크기가 커져 제작비도 추가된다.
따라서 판형을 결정할 때는 디자인과 작품의 분위기를 신중히 고려해야 한다. 이를 통해 완성도 높은 작품을 만들어낼 수 있을 것이다. [1,3]
1.2.2. 판면
판면은 페이지에서 조판에 의해 형성되는 글자 면(자면)이다. 인쇄물인 경우 판면을 설정할 때는 읽는 이에 따라, 인쇄물의 두께나 제 책 방식에 따라 다르게 설정해야 한다. 들어갈 글과 이미지가 많은데 판면이 작은 경우, 정보들을 다 넣지 못하거나 넣더라고 시각적으로 답답한 결과물이 나온다. 반대로 들어갈 글과 이미지가 적은데 판면이 큰 경우, 레이아웃의 짜임새가 떨어지며 또한 종이의 크기가 커지니 당연히 제작비도 그만큼 추가된다. 따라서 판면 설정 시 내용과 제작 환경을 충분히 고려해야 한다.
1.2.3. 여백
판면은 페이지에서 조판에 의해 형성되는 글자 면(자면)이다. 인쇄물인 경우 판면을 설정할 때는 읽는 이에 따라, 인쇄물의 두께나 제 책 방식에 따라 다르게 설정해야 한다. 들어갈 글과 이미지가 많은데 판면이 작은 경우 정보들을 다 넣지 못하거나 넣더라고 시각적으로 답답한 결과물이 나온다. 들어갈 글과 이미지가 적은데 판면이 큰 경우 레이아웃의 짜임새가 떨어지며 종이의 크기가 커지니 제작비도 그만큼 추가된다.
여백은 판면을 제외한 나머지 상하좌우의 빈 부분이다. 여백이 반드시 흰색일 필요는 없다. 단, 디자인을 하고 남은 공간이 아닌 반드시 레이아웃이 처음 잡을 때부터 계획된 공간이어야 한다. 편집의 결정적인 요소는 판면을 에워싸고 있는 여백이다. 여백은 보는 이에게 휴식 공간의 구실을 하며 전체적인 디자인에 통일감을 부여하는 역할을 한다. 또한, 의도된 여백은 보는 이의 시선을 유도하여 주목성을 높일 수도 있다. 하지만 때론 변화를 주기 위해 이미지를 가득 채우거나 다른 크기로 설정해 새로운 느낌을 연출하기도 한다. 내용이 많을 때 글 줄을 길게 하면 읽기가 불편하므로 가능한 한 줄은 길게 하지 않는 것이 좋다. 여백이 넓을수록 서정적이면서 읽기 쉽고, 여백이 좁을수록 읽기가 불편하고 지루하다. 상하좌우 여백을 똑같이 할지 각기 다르게 할지 결정하는 것도 책의 분위기를 크게 좌우한다. 두꺼운 책은 책 안쪽이 말려 들어가는 부분이 많아지기 때문에 안쪽 여백을 많이 확보하여 작업하는 것이 좋다. 또한, 여백은 반드시 좌우대칭일 필요는 없으나 양쪽 펼침면의 글 줄 높이는 맞춰주는 것이 시각적으로 안정적이다.
1.3. 좋은 레이아웃의 특성
통일과 변화는 흥미를 끄는 레이아웃을 만들고 공간에 개연성을 부여한다. 통일은 레이아웃 구성요소들의 조형적 결합과 질서를 의미하며 통일된 레이아웃은 내용 파악이 쉽고, 지면 전체를 하나로 보이도록 한다. 지나친 통일감은 딱딱하거나 자칫 지루해질 수 있으므로 적절한 변화가 필요하다. 효과적인 변화는 통일의 영역을 침해하지 않는 범위 내에서 이루어져야 한다. 극단적인 변화는 무질서를 초래하여 산만한 레이아웃이 만들어지기 때문이다. 통일이 잘 되어있는 레이아웃과 적절한 변화의 조합은 보는 이로 하여금 시각적 흥미를 자극하고 원활한 소통도 할 수 있게 해준다. 그룹화는 같은 그룹의 요소나 비슷한 특성을 가진 디자인 요소를 근접시키는 것이며, 반대로 분산은 관계가 없는 디자인 요소 또는 정보를 분리시켜 배열하는 것이다. 내용, ...
1
2
3
4
5
6
7
8
9
10