단 (인쇄)
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.
1. 개요
단(인쇄)은 텍스트를 여러 개의 열로 나누어 배치하는 것을 의미하며, 가독성 향상, 페이지 구성, 정보의 계층 구조 설정 등을 위해 사용된다. 전통적으로 단의 너비는 가독성을 고려하여 정해졌으며, 단 대비를 통해 시각적 효과를 조절했다. 인쇄 매체뿐만 아니라 웹 디자인에서도 단은 중요한 역할을 하며, HTML 테이블, CSS, CSS3 Multi-column Layout 등 다양한 기술을 통해 구현된다. 웹 디자인에서는 CSS를 이용한 방식이 널리 사용되며, CSS3 Multi-column Layout을 통해 유연한 단 구성을 구현할 수 있다.
더 읽어볼만한 페이지
- 인쇄 - 구텐베르크 은하계
마셜 맥루한의 《구텐베르크 은하계》는 인쇄술이 시각 중심 문화와 근대 사회 형성에 미친 영향을 탐구하고 전자 매체의 등장으로 인한 구술 문화로의 회귀를 예측한 모자이크 형식의 책으로, 캐나다 총독상을 수상했다. - 인쇄 - 복사기
복사기는 문서나 이미지를 복제하는 기계로, 전기 사진술의 발전을 통해 현대적 형태를 갖추었으며, 디지털 기술과 결합하여 이미지 스캐너 및 레이저 프린터로 발전했고, 저작권 침해 등 사회적 문제를 야기하기도 한다. - 타이포그래피 - 팬그램
팬그램은 특정 문자 집합의 모든 문자를 최소 한 번 포함하는 문장이나 구절로, 완전 팬그램, 자기 열거 팬그램 등 여러 유형이 있으며, 다양한 언어에서 활용되고 수학적 연구 주제로도 다뤄진다. - 타이포그래피 - ß
ß(에스체트)는 독일어에서 긴 s와 s 또는 z의 합자에서 유래한 문자로, 특정 조건에서 무성음 /s/를 나타내며, 사용 범위가 축소되었으나 대문자 형태(ẞ)가 추가되어 표준 독일어에서 선택적으로 사용될 수 있다.
| 단 (인쇄) | |
|---|---|
| 단 (인쇄) | |
| 설명 | 페이지의 텍스트 또는 다른 요소를 세로로 나누는 것 |
| 목적 | 가독성 향상, 정보 구성, 디자인 요소 |
| 유형 | 단일 단 다단 |
| 적용 분야 | 신문 잡지 서적 웹 디자인 |
| 세부 사항 | |
| 여백 (Gutter) | 단 사이의 공간 |
| 가독성 | 너무 넓거나 좁은 여백은 가독성을 해침 |
| 디자인 | 단과 여백은 전체 디자인에 중요한 요소 |
| 역사 | |
| 기원 | 고대 서적에서 유래 |
| 발전 | 인쇄 기술 발전과 함께 발전 |
| 현대 | 디지털 미디어에서도 널리 사용 |
| 활용 예시 | |
| 신문 | 많은 정보를 효율적으로 전달 |
| 잡지 | 다양한 콘텐츠를 시각적으로 구성 |
| 서적 | 긴 텍스트를 읽기 쉽게 분할 |
| 웹 디자인 | 사용자 경험 향상 |
| 참고 자료 | |
| 관련 용어 | 여백 (Gutter) 단 나누기 레이아웃 |
| 추가 정보 | |
| 고려 사항 | 페이지 크기 글꼴 크기 콘텐츠 양 |
| 최적화 | 독자의 시선 흐름을 고려 |
| 중요성 | 전체적인 시각적 효과와 정보 전달력 향상 |
2. 역사와 활자 스타일
전통적인 식자공들은 단 너비를 '메저(measure)'라고 불렀다. 최적의 가독성을 위해, 타이포그래피 매뉴얼은 단이 한 줄에 대략 60개의 문자를 담을 수 있을 정도로 넓어야 한다고 제안한다.[2] 글꼴의 포인트 크기에 2를 곱하여 파이카 단위로 단 너비를 구하는 공식도 제안되었다.[3] 이는 사실상 24 em 너비의 단을 의미한다. 이러한 지침에 따르면 일반적으로 하나의 넓은 단보다 여러 개의 좁은 단을 선호하게 된다.[4] 역사적으로 텍스트가 주를 이루는 책은 단당 약 40줄을 가지는 경우가 많았지만, 이미지, 삽화, 각주 등 다양한 요소가 포함된 복잡한 텍스트에는 이 규칙이 적용되지 않는다.[5]
넓은 지면에서 한 줄로 글을 채우면 다음 행을 이어서 읽기 어려워 가독성이 떨어진다. 그림, 사진, 인용 상자 등 지면에 들어가야 할 요소를 배치하면서 본문의 통일성을 유지할 수 있다. 목차, 찾아보기 등 짧은 항목을 나열해야 할 경우에도 효과적이다.[2]
웹 디자인에서 단은 기본 콘텐츠와 보조 콘텐츠, 3차 콘텐츠를 구분하는 데 자주 사용된다. 예를 들어, 일반적인 2단 레이아웃은 탐색 링크가 있는 왼쪽 단과 본문 텍스트가 있는 오른쪽 단으로 구성될 수 있다. 웹에서 단을 만드는 전통적인 방법은 HTML 테이블 요소를 사용하는 것이었지만, 이는 구식이며 접근성 문제를 야기할 수 있다. 현재는 CSS를 사용하여 텍스트를 플로팅하거나 배치하는 방식이 주로 사용된다.[7]
'''단 대비'''는 단에서 설정된 전반적인 색상 또는 회색조를 의미하며, 단 너비와 높이의 관계를 조정하거나, 서체의 종류, 굵기, 스타일, 크기, 자간 등을 조정하여 변경할 수 있다. 단 대비는 정보의 계층 구조를 설정하고, 페이지 구성의 균형을 맞추며, 시각적인 흥미를 유발하는 데 사용된다.[6]
3. 단을 사용하는 이유
단은 가독성을 높이기 위해 사용된다. 한 줄의 글자 수가 많아지면 가독성이 떨어지는데, 단을 나누어 한 줄의 글자 수를 적절하게 조절하면 가독성을 유지할 수 있다. 또한, 한 줄의 글자 수나 구획선 종류에 따라 디자인의 폭을 넓힐 수 있다.
4. 웹 디자인에서의 단 구성
4. 1. 테이블(table)을 이용한 단 구성
HTML의 table 요소를 사용하여 단을 구성하는 방식이다. CSS 지원이 불충분했던 비교적 초기 웹 브라우저에서도 테이블 표시는 대부분 지원되었기 때문에 과거에 널리 사용되었다. 하지만 소스가 복잡해지고, 텍스트 브라우저나 음성 브라우저에서 콘텐츠 순서가 어색해져 사용성이 저하될 수 있다는 단점이 있다. W3C는 본래 표 형식을 위한 요소인 테이블을 레이아웃 목적으로 사용하는 것을 권장하지 않는다.[11][12]
4. 2. CSS를 이용한 단 구성
CSS를 사용하는 경우, `float` 속성으로 요소 배치를 설정하거나, `position` 속성으로 각 박스를 절대 배치하여 단을 구성할 수 있다. 어떤 방법을 사용할지는 경우에 따라 다르다. 예를 들어 절대 배치 방법은 HTML에서 내용 배치 순서가 자유로워, 먼저 요소를 배치해야 하는 `float` 방식보다 뛰어나지만, 경우에 따라서는 후속 박스에 겹쳐서 표시될 수 있다.[10]
2013년 현재에는 CSS 지원 브라우저가 보급되면서, W3C 표준을 따르고 비시각계 웹 브라우저에서도 사용성 문제가 적다. Google, Yahoo! 등 과거 테이블 레이아웃을 사용했던 주요 웹사이트들도 CSS로 단을 구성하는 방식으로 바뀌고 있다. 하지만 웹 브라우저의 버그나 사양, 열람 환경의 차이로 인해 테이블 레이아웃보다 표시 문제가 발생하기 쉽다. 특히 이미지를 배치했을 때 이러한 경향이 두드러진다.
4. 3. CSS3 Multi-column Layout
CSS3에서는 Multi-column module로서 단 구성을 위한 속성들이 제공되고 있다.[8] 2013년 현재 Opera, 모질라 기반 웹 브라우저나 Safari 및 Google Chrome 등 KHTML 기반 웹 브라우저에서 Multi-column module에 대한 선행 구현을 통해 지원하고 있다.[9]
웹 브라우저의 폭은 출판물과 달리 대부분의 경우 가변적이다. 이러한 가변적인 환경에서 출판물과 유사한 단 구성을 구현할 수 있도록 CSS3 Multi-column Layout이 사용된다. 이를 통해 콘텐츠를 여러 개의 셀이나 블록 레벨 요소로 나눌 필요 없이, 자동으로 열의 개수와 간격을 조정할 수 있다.
과거에는 Netscape 3.x 및 4.x에 단 구성을 위한 독자적인 확장 요소 multicol이 구현된 적이 있었으나, HTML의 이념에 맞지 않아 정식 HTML 사양에는 포함되지 않았다.
참조
[1]
웹사이트
In Typography, what are Gutters? (With pictures)
http://www.wisegeek.[...]
2023-08-30
[2]
서적
[3]
문서
[4]
서적
[5]
서적
[6]
서적
[7]
웹사이트
CSS Layout Techniques: for Fun and Profit
http://www.glish.com[...]
2007-12-12
[8]
웹사이트
CSS3 module: Multi-column layout
http://www.w3.org/TR[...]
2007-06-06
[9]
웹사이트
caniuse.com
http://caniuse.com/m[...]
2012-05-16
[10]
서적
スタイルシートサンプル&リファレンス
ソシム
[11]
웹사이트
Web Content Accessibility Guidelines 1.0
https://www.w3.org/T[...]
World Wide Web Consortium
2010-03-12
[12]
웹사이트
ウェブコンテンツ・アクセシビリティ・ガイドライン 1.0
http://www.zspc.com/[...]
ZSPC
2010-03-12
[13]
웹사이트
2002年12月2日時点でのW3Cトップ
https://web.archive.[...]
[14]
문서
국립국어대사전
[15]
서적
열린책들 편집 매뉴얼
열린책들
본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.
문의하기 : help@durumis.com