레이아웃
1. 정의
특정 공간 안에 문자, 이미지 등의 구성 요소를 보기 쉽게 효과적으로 배치하는 작업. 인터넷 상의 디자인에서 나아가 금속, 전자, 철도, 건축, 토목 등의 분야에서의 개념도 갖는다.
2. 어원
어원은 'Lay something out', 단어 그대로 '~을 보기 쉽게 사용할 수 있도록 펼치다' 에서 유래하여 'Layout' 이라는 명사 자체로 정의되어있다.
3. 요소
단순히 공간 안에 모든 요소가 규칙적으로 배치되어 있는 것만으로는 '레이아웃' 이라 칭하기에 부족하다. 기본적으로 '레이아웃' 이라 불리기 위한 요소는 아래와 같다.
3.1. 주목성
'''중요도에 따른 우선 순위가 확실해야 한다.'''
상식적인 UX(User Experience) 에 기반하여 시선을 의도한 대로 이동할 수 있게 정리한다. 예컨대, 사용자가 필요로 하는 요소들에 대한 우선 순위를 정해 사용 빈도에 따라 중요한 내용이 정리되어있어야 한다. 고속 버스 예매 애플리케이션의 레이아웃이라면 당연히 예매 버튼이 눈에 제일 먼저 띄어야 하는 것이 예이다.
[image]
시선의 흐름은 한국 기준으로 '''왼쪽에서 오른쪽, 위에서 아래'''로 흐르는 것이 자연스러운데 그렇다, '''글을 읽는 흐름''' 대로인 것이다. 꼭 지켜져야 할 필요는 없어도 이에 따르는 것이 기본적이다.
주목성을 달리 하는 데엔 위치적인 우선 순위도 존재하지만 첨부된 이미지대로 가장 중요한 내용에 다른 색상을 부여하거나 크기를 달리 하는 수도 있다.
[image]
3.2. 가독성
'''글은 읽기 쉽게, 이미지는 목적에 적합하게 써야 한다.'''
글이 읽기 쉽다는 것은 내용, 문단 정리뿐만 아니라 글꼴이나 폰트, 배경색과 글자색의 대비 등의 시각적인 가독성 그 자체까지를 포함한다. 극단적으로 드래그로 답을 보여주게 하게끔 폰트를 바꾸지 않는 이상 검은 바탕에 어두운 색의 글자를 사용하면 제대로 읽힐리가 없다.
3.3. 명쾌성
'''사용자가 바로 의도를 알 수 있는가?'''
디자인에 대해 사용자가 그 목적과 상호 작용의 결과를 직관적으로 예상할 수 있는지에 대한 것이다. 이것도 주목성과 같이 UX 에 기반할 수 있다.
3.4. 조형성
'''시각적으로 어떻게 다루어졌는가?'''
내용이 어떤 느낌으로 와닿도록 하였는지에 대한 것이다. 심미적인 부분이 강하며 간단하게 하자면 '어떤 형태의 레이아웃인가?' 에서부터 출발하여 <심각한 사건의 개요를 다루는 정보글의 레이아웃>과 <유아용 상품 판매를 다루는 글의 레이아웃>이 각자 어떻게 달라야 하는지 범주라 볼 수 있겠다.
3.5. 창조성
'''표현이 얼마나 풍부하며 참신한가?'''
목적과 위 조건들을 충족하며 얼마나 참신하게 구성되었는가에 대한 것이다. 그러나 어디까지나 위 조건들을 충분히 충족해야 하며, 창조성에 너무 치중하여 주목성이나 가독성 등을 잃게 되어버리면 아무리 참신하고 신기한 구성이라 하여도 사용자들은 시간이 갈수록 불편함을 느낄 것이다.
4. 구성
위 조건에 맞추어 레이아웃을 구성하기 위해 사용할 수 있는 방식은 아래와 같다.
4.1. 통일
'''일관된 구조와 레이아웃을 사용한다.'''
만약 특정 컨텐츠를 구성한다면 버튼의 위치나 기능 등이 서로 동일한 것이 좋다. 장면마다 버튼의 위치가 다르다던지 중요성을 알리는 표시 방법이 시시각각 달라진다면 혼돈의 카오스를 연출하게 된다.
4.2. 조합
'''공통점이나 차이가 있는 구성 요소들을 적절히 묶거나 대비시키는 것'''
요약한 대로, 내용들이 서로 상관성이 있도록 정리되어 있어야 한다.
4.3. 강조
'''중요한 요소와 그렇지 않은 것을 확실히 나눌 것'''
레이아웃을 구성하는데 초보자가 알면서도 신경 쓰는데에 '''실패할 확률이 큰''' 요소 중 하나이다. 그 이유는 '''보는 이의 관점''' 을 충분히 예상, '''고려하지 못했을 경우'''가 크다. '''중요한 포인트'''를 독자에게 제공해주고 싶다면 중요 개념을 하나하나 강조하는 것 보다는 전체적으로 보며 인과에 맞춰 '''한 문장으로''' 읽힐 수 있도록 짚어내는게 좋다. 또한 '''이미지'''도 마찬가지로, 열심히 공들여 여기저기 알록달록 꾸미는 것 보다는 '''확실하게 중요한 부분 위주'''로 규칙을 간단히라도 정해 강조하는게 좋다.
4.4. 균형
'''크고 작은 요소를 알맞는 위치에 정리할 것'''
목적에 맞춰 적절하게 내용의 크기나 배열을 정리해주는 것이다, 특히 가독성에도 영향을 많이 준다. 만일 상품의 가격 테이블을 가운데 정렬로 작성하게 된다면 상품명의 길이에 따라 숫자가 한 줄로 정리되지 않고 난잡해질 것이다.
5. 애니메이션의 레이아웃
셀 애니메이션에서 원화를 그리기 전에 연출이나 콘티의 지시에 따라 큰 사이즈의 용지 (L/O용지)에다 화면에 있는 인물과 사물의 구도와 위치, 표정과 행동 등을 1차적으로 대충 그려넣는 작업을 말한다. 대충이라곤 하나 콘티보단 자세하게 그리는 게 일반적이다. 일본 애니메이션에서는 타카하타 이사오와 미야자키 하야오가 이 작업을 도입하였다. 그래서 타카하타 이사오를 레이아웃의 신이라고 부른다.
레이아웃 작업이 선행되면 화면의 구도가 정돈되고, 원화의 창작 부담이 줄어들어 작화가 좋아지고, 레이아웃에 맞춰 배경을 그려넣을 수 있어 배경 미술, 3D 배경 이동 연출의 질이 올라간다.
이걸로 유명한 사람으로는 '''미야자키 하야오''' [1],'''타카하타 이사오''', 콘 사토시 [2] 시바야마 츠토무, [3], 카와지리 요시아키, 야스히코 요시카즈 [4]가 있다.
반면 콘티에서 바로 원화로 넘어갈 수 있는 단계에 다른 작업이 하나 더 들어가는 거라 시간이 없으면 이루어지지 않는 경우도 있다. 토미노 요시유키는 콘티를 레이아웃으로 옮기는 과정에서 콘티의 의도가 훼손되고 시간만 더 들어가는 불필요한 작업이라며 웬만해선 하지 말라고 주장하고 있다. 기동전사 건담 F91 때는 이거 때문에 키타하라 타케오와 대판 싸웠다고 한다. [5]
현대의 일본 애니메이션은 스케줄이 빡빡하고 실력있는 원화가가 고령화되어 작업을 감당하지 못하게 되었기 때문에 레이아웃 작업을 따로 하기보단 원화가가 디테일을 좀 뺀 제1원화 (러프 원화)를 그리고 제2원화나 작화감독이 디테일하게 수정하는 방식을 많이 쓴다. 레이아웃과 원화의 단계가 섞인 시스템. 혹은 콘티를 레이아웃처럼 정교하게 그리기도 한다. 어차피 스캔해서 확대하면 똑같기 때문.
[1] 알프스의 소녀 하이디의 '''52화 전편의 레이아웃을 몽땅.''' 그것도 거의 원화 레벨로 그린 것으로 유명하다. 그리고 이 짓을 '''엄마찾아 삼만리에서 또 했다.''' 사람이 할 짓이 아닌 걸 했다고 전설로 내려오고 있다. 나중에는 레이아웃 작업을 따로하진 않으나 콘티를 레이아웃 수준으로 그린다.[2] 레이아웃을 따로 다 그리진 않았으나 아예 콘티를 레이아웃 수준으로 그렸다.[3] 20화 넘는 레이아웃을 한 적이 있다.[4] 기동전사 건담에서 이 작업을 하다 쓰러져서 병원에 실려갔으며, 대부분의 작품에서 레이아웃을 짜는 걸 우선한다. 기동전사 건담 THE ORIGIN에서는 컴퓨터로 콘티를 확대해서 레이아웃으로 삼았다.[5] 그러나 토미노도 야스히코 요시카즈와 작업할 때는 예외. 야스히코가 토미노의 콘티의 의도를 훼손하지 않고 레이아웃을 짜기 때문인 것으로 보인다. 그리고 토미노가 레이아웃을 쓰지 말라고 주장하는 건 야스히코가 건담 레이아웃 그리다 과로로 쓰러진 것에 책임감을 느껴서 그런 것이기도 하다.