여백 (타이포그래피)
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.
1. 개요
여백은 문자를 배치하는 중요한 방법으로, 텍스트를 읽고 이해하는 데 기여한다. 고대 이집트의 파피루스 두루마리에서 시작하여 코덱스를 거쳐 인쇄된 책, 디지털 페이지, 워드 프로세서에 이르기까지 여백은 텍스트의 가독성과 미학을 위해 변화해 왔다. 디지털 환경에서는 CSS와 같은 기술을 통해 웹 페이지 여백을 제어하며, 워드 프로세서에서도 페이지 설정 메뉴를 통해 여백을 조절할 수 있다.
더 읽어볼만한 페이지
- 페이지 레이아웃 - 쪽
쪽은 라틴어에서 유래된 단어로 쓰여진 페이지, 잎, 시트를 의미하며, 영어권에서는 다양한 관용구로 사용되고, 도서관학 및 전자 매체에서 책의 물리적 특성 또는 웹 페이지와 같은 개념을 설명하는 데 사용된다. - 페이지 레이아웃 - 페이지 구성의 황금률
페이지 구성의 황금률은 서적 디자인에서 조화로운 레이아웃을 위해 황금 비율, 루트 2 비율, 피보나치 수열 등 다양한 기하학적 원리를 활용하는 것이다.
| 여백 (타이포그래피) | |
|---|---|
| 개요 | |
| 정의 | 타이포그래피에서 여백은 페이지 콘텐츠를 둘러싸는 흰색 공간이다. |
| 목적 | 독자가 텍스트와 이미지에 집중하도록 돕고, 페이지를 시각적으로 매력적으로 만든다. |
| 기능 | |
| 시각적 휴식 공간 | 여백은 텍스트와 이미지 사이에 시각적 휴식 공간을 제공하여 가독성을 향상시킨다. |
| 프레임 효과 | 페이지 콘텐츠에 프레임을 만들어 시선을 집중시키고, 중요한 정보를 강조한다. |
| 디자인 요소 | 여백은 페이지 디자인의 중요한 요소로서, 전체적인 레이아웃과 균형을 결정한다. |
| 여백의 종류 | |
| 바깥 여백 (Margin) | 페이지 가장자리와 콘텐츠 사이의 공간 |
| 안쪽 여백 (Padding) | 콘텐츠와 테두리 사이의 공간 |
| 고터 (Gutter) | 페이지 내부의 열이나 요소 사이의 공간 |
| 여백 설정 방법 | |
| 인쇄물 | 인쇄물의 경우, 페이지 설정에서 여백을 조정할 수 있다. |
| 웹 디자인 | 웹 디자인에서는 CSS 스타일 시트를 사용하여 여백을 설정한다. |
| 문서 편집기 | 문서 편집기 (예: 워드 프로세서)에서는 페이지 레이아웃 설정에서 여백을 조정할 수 있다. |
| 고려 사항 | |
| 대상 독자 | 대상 독자의 연령, 배경, 읽기 습관 등을 고려하여 여백을 설정해야 한다. |
| 내용의 종류 | 내용의 종류 (예: 소설, 보고서, 광고)에 따라 적절한 여백 크기가 달라질 수 있다. |
| 디자인 스타일 | 전체적인 디자인 스타일과 조화를 이루는 여백을 선택해야 한다. |
| 추가 정보 | |
| 과도한 여백 | 과도한 여백은 페이지를 비어 보이게 하고, 독자의 집중력을 저하시킬 수 있다. |
| 부족한 여백 | 부족한 여백은 페이지를 답답하게 만들고, 가독성을 떨어뜨릴 수 있다. |
2. 역사
여백은 문자를 구성하는 중요한 방법으로 오랜 역사를 가지고 있다.
고대 이집트의 파피루스 두루마리에서부터 현대의 디지털 워드 프로세싱에 이르기까지, 여백은 시대와 기술에 따라 그 역할과 형태를 달리하며 발전해 왔다. 초기에는 텍스트의 물리적 구분을 위해, 이후에는 주석과 가독성, 심미적 기능을 위해 활용되었다.
; 두루마리
: 고대 이집트에서는 파피루스 두루마리에 글을 기록했으며, 여백은 단(pagina)을 구분하여 읽기를 돕는 역할을 했다.
; 코덱스
: 코덱스는 양피지를 묶어 만든 책으로, 여백은 주석을 달거나 책을 잡을 때 텍스트를 보호하고 가독성을 높이는 역할을 했다.
; 인쇄된 책
: 인쇄술 발명 이후 책이 대량 생산되면서 여백은 점차 줄어드는 경향을 보였다.
컴퓨터와 인터넷의 등장은 문자를 소비하는 방식을 혁신적으로 바꾸었다. 초기 웹 브라우저에는 여백 개념이 생소했지만, 화면이 커짐에 따라 가독성과 심미성을 위해 여백의 중요성이 인식되었다. CSS와 같은 기술 발전으로 웹 페이지 여백 제어가 가능해졌다.
디지털 워드 프로세싱에서도 여백은 중요한 역할을 한다. 마이크로소프트 워드나 리브레오피스 라이터와 같은 프로그램에서 여백 설정을 변경할 수 있다. LaTeX는 글꼴 크기에 따라 자동으로 여백을 조정하여 가독성을 높인다.[34][35]
2. 1. 두루마리
고대 이집트에서는 파피루스 두루마리에 글을 기록했다.[4] 이집트 파피루스 두루마리는 길이가 최대 30m에 달할 수 있었으며, 왼쪽에서 오른쪽으로 배치된 단으로 구성된 텍스트를 담고 있었다.[5] 단은 'pagina'(또는 페이지)라고 불렸으며, 여백으로 구분되어 두루마리를 가로로 펼쳐 한 번에 한 섹션씩 볼 수 있었다.[6] 따라서 파피루스 두루마리에서 여백은 독자에게 읽기를 멈추고 다음 줄로 넘어갈 때를 시각적으로 알려주는 역할을 했다.[7]2. 2. 코덱스
코덱스는 초기 3세기 동안 두루마리를 점차 대체하기 시작했다.[8] 코덱스는 하나의 길고 연속된 파피루스 조각에 텍스트를 저장하는 대신, 한쪽에 묶인 개별적인 양피지 조각으로 구성되었다.[9] 각 페이지가 나머지 페이지와 물리적으로 분리되면서, 여백은 텍스트 블록의 시작과 끝을 구별하는 데 덜 필요하게 되었다. 그러나 여백은 새로운 역할을 맡게 되었다. 코덱스 이전에는 텍스트에 대한 주석이 보통 별도의 두루마리에 기록되었다.[10] 코덱스의 등장과 함께, 여백은 (원래 기능을 대부분 상실한 채) 원래 텍스트 옆에 주석을 통합하는 데 사용될 수 있는 여분의 공간이 되었다.[11] 코덱스의 여백에 포함된 추가 텍스트와 이미지를 주석이라고 한다. 원본 텍스트 옆 여백에 포함된 학술적 주석은 설명이라고 알려져 있다. 그러나 이것이 코덱스에서 여백이 수행하는 유일한 목적은 아니었다. 심지어 주석이 추가되지 않은 경우에도, 대부분의 책은 각 페이지의 모든 면에서 텍스트 블록 주변에 공간을 남겨두었다. 이 여백은 몇 가지 실용적인 목적을 수행했다. 텍스트 주변에 빈 공간을 남겨두면 독자가 책을 잡고 있을 때 엄지손가락을 놓을 수 있는 공간을 제공하여 활자 블록을 보호한다.[12] 또한, 그 빈 공간은 텍스트를 읽고 이해하는 데 중요한 역할을 한다.[13] 여백이 가독성에 미치는 정확한 영향에 대한 논쟁이 있었지만,[14] 일부 학자들은 텍스트를 상쇄할 빈 공간이 없으면 읽는 데 두 배 이상 시간이 걸릴 수 있다고 주장한다.[15] 마지막으로, 여백은 빈 테두리 안에서 텍스트를 틀로 잡아주는 미적인 기능을 수행한다.[16][17]2. 3. 인쇄된 책
인쇄술의 발명과 함께 책은 대량으로 생산되기 시작했다.[18] 종이가 대량으로 생산되면서 페이지의 크기와 모양은 생산자에게 가장 실용적인 몰드의 크기와 모양에 의해 점점 더 결정되었다.[19] 페이지가 더 표준화되면서 여백의 크기와 모양도 표준화되었다.[20] 일반적으로 책의 여백은 시간이 지남에 따라 줄어들었다. 르네상스 시대에 흔했던 넓은 여백은 훨씬 좁은 비율로 바뀌었다.[21] 그러나 책의 크기와 목적에 따라 여전히 많은 차이가 있다.[22][23]3. 디지털 페이지
컴퓨터와 인터넷은 우리가 문자를 소비하는 방식을 혁신적으로 변화시켰다. 이제 책은 물리적인 페이지 없이 존재할 수 있으며, 텍스트는 다양한 장치에서 볼 수 있다. 인터넷 초창기에는 여백의 개념이 웹 브라우저에 생소했다.[24] 그러나 컴퓨터 화면이 커짐에 따라 텍스트의 가독성과 미학에 문제가 되었다.[25]
CSS와 같은 더 정교한 기술의 발명으로 디자이너는 웹 페이지의 여백을 제어하고 더 많은 여백을 확보할 수 있게 되었다.[26] 여백이 없는 웹 페이지도 여전히 존재하지만, 오늘날에는 텍스트 주변에 충분한 여백을 제공하는 것이 디지털 텍스트의 사용성과 가독성에 중요하다는 것이 일반적으로 인식되고 있다.[27][28][29] 웹 콘텐츠는 웹 브라우저의 인터페이스, 기타 아이콘 및 창과 같은 다른 요소와 시각적 공간을 공유하기 때문에 여백은 더욱 중요해진다.[30]
여백은 디지털 워드 프로세싱에서도 중요한 역할을 하며, 페이지 설정 메뉴를 사용하여 변경할 수 있다.
3. 1. 웹 페이지
컴퓨터와 인터넷은 우리가 문자를 소비하는 방식을 혁신적으로 바꾸어 놓았다. 이제 책은 물리적인 페이지 없이 존재하며, 텍스트는 다양한 장치에서 볼 수 있게 되었다. 인터넷 초창기에는 웹 브라우저에 여백 개념이 생소했다.[24] 그러나 컴퓨터 화면이 커짐에 따라 텍스트의 가독성과 미학에 문제가 발생했다.[25]CSS와 같은 더 정교한 기술이 발명되면서 디자이너는 웹 페이지의 여백을 제어하고 더 많은 여백을 확보할 수 있게 되었다.[26] 여백이 없는 웹 페이지도 여전히 존재하지만, 오늘날에는 텍스트 주변에 충분한 여백을 제공하여 디지털 텍스트의 사용성과 가독성을 높이는 것이 중요하다는 인식이 일반적이다.[27][28][29] 웹 콘텐츠는 웹 브라우저 인터페이스, 기타 아이콘 및 창과 같은 다른 요소와 시각적 공간을 공유하기 때문에 여백은 더욱 중요해진다.[30]
3. 2. 워드 프로세서
컴퓨터와 인터넷의 발전으로 문자를 접하는 방식이 크게 변화했다. 초기 인터넷 환경에서는 여백 개념이 부족했지만, 화면이 커지면서 가독성과 심미성을 위해 여백의 중요성이 부각되었다.[24][25] CSS와 같은 기술 발전으로 웹 페이지 여백 제어가 가능해졌고, 여백 없는 웹 페이지도 있지만, 텍스트 주변에 충분한 여백을 확보하는 것이 디지털 텍스트의 사용성과 가독성에 중요하다는 인식이 일반적이다.[26][27][28][29]디지털 워드 프로세싱에서도 여백은 중요하며, 페이지 설정 메뉴를 통해 변경할 수 있다. 마이크로소프트 워드(Microsoft Word)는 2007년 이후 버전에서 기본 여백을 모든 면에서 약 2.54cm로 설정했다. Word 2003에서는 상단 및 하단 여백은 약 2.54cm였지만, 왼쪽과 오른쪽은 약 3.17cm였다.[31][32] 오픈오피스(OpenOffice.org)와 리브레오피스 라이터(LibreOffice Writer)는 모든 면에서 약 2.01cm의 여백을 사용한다.[33] LaTeX는 글꼴 크기에 따라 여백 너비를 조정하는데, 기본적으로 12pt 문서에는 약 3.81cm, 11pt에는 약 4.45cm, 10pt에는 약 4.76cm 크기의 여백을 사용한다. 이는 가독성을 위해 최대 66문자를 허용하기 위한 비교적 큰 여백이다.[34][35]
참조
[1]
웹사이트
"margin" in Merriam-Webster online dictionary
http://www.merriam-w[...]
2012-12-19
[2]
웹사이트
Typographic Terms
http://whatstype.com[...]
2010-12-30
[3]
웹사이트
In Typography, What are Gutters?
2023-08-30
[4]
웹사이트
Early Books
http://www.worldbook[...]
World Book, Inc.
2014-10-31
[5]
서적
How the Page Matters
University of Toronto Press
2011
[6]
서적
How the Page Matters
University of Toronto Press
2011
[7]
서적
How the Page Matters
University of Toronto Press
2011
[8]
웹사이트
Early Books
http://www.worldbook[...]
World Book, Inc.
2014-10-31
[9]
서적
Books: A Living History
The J. Paul Getty Museum
2011
[10]
웹사이트
Book, manuscript: development and transmission
http://search.credor[...]
Harvard University Press
2014-10-31
[11]
웹사이트
Book, manuscript: development and transmission
http://search.credor[...]
Harvard University Press
2014-10-31
[12]
서적
The elements of typographic style
Hartley & Mark
1992
[13]
웹사이트
Reading Online Text: A Comparison of Four White Space Layouts
http://psychology.wi[...]
Wichita State University
2014-11-02
[14]
서적
The Graphics of Communication: Typography, Layout, Design
Holt, Rinehart and Winston, Inc
1968
[15]
서적
How the Page Matters
University of Toronto Press
2011
[16]
서적
The Graphics of Communication: Typography, Layout, Design
Holt, Rinehart and Winston, Inc
1968
[17]
서적
Introduction to Typography
Faber and Faber
1947
[18]
서적
"Caxton to Computers" in Reader in the History of Books and Printing
https://archive.org/[...]
Indian Head Inc.
1978
[19]
서적
Basic Typography
Faber and Faber
1968
[20]
서적
Basic Typography
Faber and Faber
1968
[21]
서적
Basic Typography
Faber and Faber
1968
[22]
서적
The elements of typographic style
Hartley & Mark
1992
[23]
서적
Basic Typography
Faber and Faber
1968
[24]
웹사이트
Page Margins
http://practicaltypo[...]
2014-11-02
[25]
웹사이트
Page Margins
http://practicaltypo[...]
2014-11-02
[26]
웹사이트
Page Margins
http://practicaltypo[...]
2014-11-02
[27]
웹사이트
Size Matters: Balancing Line Length And Font Size In Responsive Web Design
http://www.smashingm[...]
2014-09-29
[28]
웹사이트
Technical Web Typography: Guidelines and Techniques
http://www.smashingm[...]
2011-03-14
[29]
웹사이트
Margin and Padding
http://smad.jmu.edu/[...]
2014-11-02
[30]
웹사이트
Legibility
http://webstyleguide[...]
2014-11-02
[31]
문서
Page borders — inches or millimetres?
http://www.metricati[...]
[32]
웹사이트
Default Print Margin in Word Documents and our Environment
http://www.labnol.or[...]
Labnol.org
2008-02-14
[33]
웹사이트
Setting an OpenOffice.org template for MS Word default margins | UST Computer Science Club
http://csclub.stthom[...]
2010-12-30
[34]
웹사이트
How can I change the margins in LaTeX? (Hermes)
http://kb.mit.edu/co[...]
Kb.mit.edu
2010-12-30
[35]
문서
LaTeX/Page Layout – Wikibooks, open books for an open world
En.wikibooks.org
2010-12-30
[36]
웹사이트
Adobe Fonts – Type topics: Glossary
http://www.adobe.com[...]
Adobe.com
2010-12-30
[37]
웹사이트
Page borders — inches or millimetres?
http://www.metricati[...]
[38]
웹사이트
Default Print Margin in Word Documents and our Environment
http://www.labnol.or[...]
Labnol.org
2010-12-30
[39]
웹사이트
Setting an OpenOffice.org template for MS Word default margins | UST Computer Science Club
http://csclub.stthom[...]
Csclub.stthomas.edu
2010-12-30
[40]
웹사이트
How can I change the margins in LaTeX? (Hermes)
http://kb.mit.edu/co[...]
Kb.mit.edu
2010-12-30
[41]
웹사이트
LaTeX/Page Layout – Wikibooks, open books for an open world
http://en.wikibooks.[...]
En.wikibooks.org
2010-12-30
본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.
문의하기 : help@durumis.com