iOS ) Typographical Concepts

안녕하세요 :) Zedd입니다.

TextKit을 공부중인데요,  iOS에서 이 "Text"에 대해서 알아야 하는 것이 의외로 많네요.

근데 WWDC세션은 정말 별로 없는 것 같음......ㅎㅎ

이 WWDC세션들을 다 공부하려고 생각중인데, 그 전에 Text Programming Guide for iOS에서 공부할 내용들이 몇가지가 있어 이거 먼저 공부해보려고 합니다.

이 개념들을 알고나면 WWDC가 더 이해가 잘 갈거라고 확신하구요 :D

그렇다면 Typographical Concepts을 공부해봅시다.

Typographical Concepts

---

Typographical Concepts은 Text Programming Guide for iOS에 있는 내용 중 하나에요.

사실 이 부분은 typography에 익숙하다면 건너뛰라고도 나와있는 챕터이지만, Text 시스템과 관련된 몇가지 중요한 개념들을 정리해놓은 챕터라서...제가 생각하기엔 정말 중요한 챕터에요.

지금부터 말한 개념의 용어 대부분은, Text 시스템 API반영되어있다고 합니다.

Characters and Glyphs

(음.. character를 문자라고 번역하진 않을게요. letters도 나오고 그래서.. 번역하면 똑같이 문자임)

character는 의미를 전달하는 문자언어의 최소단위(smallest unit)입니다.

character는 로마어 알파벳의 letter처럼 언어의 특정한 소리와 일치할 수 있고, 중국 ideographs(문자..)와 같은 전체단어를 나타낼 수도 있고, 수학기호와 같은 독립적인 개념을 나타낼 수 있습니다. 그러나 모든 경우에 있어서, character는 추상적인 개념입니다.

디스플레이 영역에 식별가능한 형태(recognizable shape)로 character를 표시해야하지만, 그 모양과 동일하지는 않습니다. 즉, 동일한 character를 유지하면서, character를 다양한 형태로 그릴 수 있습니다. 예를들어, "대문자 A" character는 여러 size나 여러 stroke 두께로 그려질 수 있고, 기울어지거나 수직이 될 수 있으며, serifs(세리프)와 같은 형태의 특정한 변형이 있을 수 있습니다. 이런 다양한 형태의 특정 character중 하나를 글리프(glyph)라고 합니다.

Glyphs of the character A. 위 그림들이 character A의 글리프들입니다. 

아~~저는 글리프라는 개념을 TextKit에서 글꼴 파일에서 문자 하나하나를 글리프라고 한다고 그랬잖아요? 그래서 그 문자하나하나가 글리프구나..싶어서 character랑 비슷하게 생각했는데, character와는 조금 다른 개념이네요. 즉, 동일한 character를 유지하면서, character를 다양한 형태로 그릴 수 있습니다. < 즉 이게 글리프의 개념이라고 생각하시면 될 것 같아요. 막 글리프가 어떤 느낌인지는 오시죠?? 느낌만 오면댐 ㄱㅊㄱㅊ

character와 glyph에는 1:1대응이 없습니다. 경우에 따라 character는 "é"와 같이 여러개의 glyphs로 표현될 수 있습니다. 양음 악센트 glyph인 "´"와 "e" glyph가 결합된 glyph일 수 있습니다. 다른 경우에는 하나의 glyph가 ligature(합자) 또는 joined letter(결합된 문자)와 같이 여러 characters를 나타낼 수 있습니다. 

이게 읽으면서..음.....그래...음...? 음......그래...1:1대응...아니군...그래...이렇게 읽힘

그러니까 "character와 glyph에는 1:1대응이 없습니다."

근데 당연한게.. character 1개. 그니까 위에서 대문자 A만에도 저렇게 많은 글리프가 있는데..당연히 1:N아닌가?

헉 여러분 갑자기 생각난건데..아.....뭔가 제가 뭔가..ㅈ[ㅔ가 이상하게 생각하고 있는건가봐요. 

그러니까 여러분 A!!! 자 머리에 A를 생각해보세요. 뭔가 고딕체의 정말 정갈하게 그려진 A가 생각나지 않으신가요...

근데 그게 "character"가 아니라.. 지금 우리가 생각하고있는건 "glyph"라고 생각하시면 됩니다. 

위에서 말했죠. "character는 추상적인 개념입니다." 그러니까 A는 막 어떻게 그려진 A가 아니라 정말 추상적인 개념이고. 그게 그려진것은 glyph라는 것이죠.

저는 제가 생각하는 정말 정갈한 고딕체의 A가 문자..그러니까 그게 character고, 그걸 변형하고 그런 작업들을 거친것들이 glyph라고 착각함ㅋ!!!!!!!!!!!!

"character는 추상적인 개념입니다."!!!! 잊지말자

제가 말하면서 글리프라고 쓸 때도 있고 glyph라고 쓸때도 있는데 걍 알아서 읽으면댈듯 

ligature(합자)는 

이런게 ligature(합자)입니다.

암튼 ligature설명을 하겠음.

ligature는 옆에있는 character에 따라, character를 나타내는 데 사용되는, glyph가 변하는 상황별 형태의 예입니다. 

근데 원문은 이렇지만,  옆에있는 glyph에 따라, character를 나타내는 데 사용되는, glyph가 변하는 상황별 형태의 예입니다. < 이렇게 말해야하지 않나?

아니 character도 맞나? 

zzzz헷갈려...

컴퓨터는 Table을 인코딩하여 해당 character로 매핑된 숫자로 character를 저장합니다.

iOS 및 OS X고유의 인코딩 체계는 유니코드 표준을 따릅니다.

유니코드는 사용되는 플랫폼, 프로그램 및 프로그래밍 언어와 상관없이, 전세계의 모든 모-던 언어로 작성된 모든 character에 대해 고유번호를 할당하는 표준 방법을 제공합니다.이 표준은 수백가지 충돌하는 인코딩 체계를 사용하여 서로 다른 컴퓨터 시스템의 오랜 문제를 해결합니다. 또한 양방향 텍스트 및 컨텍스트 양식을 처리하는 방법을 지정하는 정보도 제공합니다. 단어(words)를 형성하고, 줄(line)을 끊는 방법, 다른언어로 텍스트를 정렬하는 방법, 숫자, 날짜, 시간 및 다른 언어에 대한 적합한 기타 요소의 형식을 지정하는 방법에 대해 설명합니다.

Glyph는 glyph코드라는 숫자 코드로 표현됩니다. character를 묘사하는데 사용되는 glyph는 구성 및 레이아웃 처리 중에, layout manager에 의해 선택됩니다. layout manager 는 사용할 glyph 및 디스플레이, 또는 View의 위치를 결정합니다. layout manager는 사용중인 glyph코드를 캐시하고, character와 glyph간, character와 view 좌표를 변환하는 메소드를 제공합니다.

음.....조금 어렵게 설명이 되어있는데, 이 layout manager가 TextKit의 NSLayoutManager라고 봐도 되겠죠?/...그러니까 우리가 그 추상적인 개념의 대문자 A를 표현하는데 어떻게? 그러니까 어떤 글꼴으로 이걸 디스플레이할지 결정해야하는데, 고딕체로 할건지 궁서체로 할건지 ㅡㅡ 기울어졌는지 암튼 뭐 그런거 있잖아요. 그런거를 layout manager가 레이아웃 처리중에 layout manager가 선택하는..그런... 거같음

Typefaces and Fonts

typeface는 character의 일부 또는 전체에 대한 시각적으로 관련된 모양(shape)의 집합입니다.

typestyle 또는 simply style은 typeface의 시각적 특성(visual characteristic)을 구분합니다. 예를들어 로마식 typestyle은 serif와 stem이 수평선보다 두꺼운 직립자로 특징지어집니다.(....) italic typestyle에서, letter는 오른쪽으로 기울어지며, 필기체의 letter모양과 유사합니다. typeface는 일반적으로 몇가지 연관된 typestyles을 가지고 있습니다.

음.....음..그래...타입...페이스...타입...스타일....그래 다르지..음...

ㅎ;;

일단 계속 봅시다.

font는 일관된 크기(size), typeface 및 typestyle로 character를 묘사하는 일련의 glyphs입니다. font는 특정 디스플레이 환경에서 사용하기 위한 것입니다.

font에는 ligatures(합자)와 같은 모든 문맥 양식(contextual forms)과 일반 character 양식에 대한 glyphs가 포함되어있습니다.

font family는 typeface를 공유하지만 typestyle이 다른 font그룹닙니다. 예를들어, Times는 font family의 이름입니다. (물론 typeface의 이름이기도 합니다.)

Times roman 및 Times Italic은 Times계열에 속한 개별 font이름입니다. 

위 그림은 Times font family의 여러 font를 보여줍니다.

ㅋㅋ.ㅋ.ㅋ.ㅋ....ㅋㅋ.....ㅋㅋㅋㅋ........ㅋ...ㅋ.ㅋ............

아니 그럼 font가 typeStyle인건가?

아ㅏㅏ아ㅏ 아 뭔가 감이 올것같기도 하고 안오는것 같기도 하고....

그러니까  typeface랑 typestyle은 뭔가 character처럼 뭔가 추상적인 "개념"이고 그걸 그걸 시각화 한게 font family랑 font라는 건가?

Times가 font family의 이름이자 typeface의 이름이기도 한다니까..맞는 것 같아요.

아니 그리고 그래야 말이됨..

아니면 알려주세요 ^_ㅠ...

...아니 잠깐... typeface가 font가 아니라 font family여야 말이 되는데...

Style 또는 traits에는 bold, italic, condensed, expanded, narrow, small caps, poster fonts,  fixed pitch와 같은 변형이 포함됩니다. Text시스템에는 font-matching기능을 제공하는 font descriptor라는 객체가 포함되어있습니다. 예를들어, family이름이나 weight(가중치..?)와 같은 font descriptor를 작성하여 부분적으로 font를 설명할 수 있으며 모든 font를 찾을 수 있습니다. 

Text Layout

Text layout은 디스플레이 디바이스에서, text view라고 하는 영역에 glyphs를 배열하는 프로세스입니다. glyphs를 서로 상대적으로 배열하는 순서를 text direction이라고 합니다. 

언어마다 glyphs layout이 상당히 다를 수 있습니다. 예를들어, 일부언어는 수평이 아닌 오른쪽에서 왼쪽, 또는 수직으로 glyphs를 배치합니다. 영어나 히브리어와 같은 다른 text direction을 가진 언어를 같은 줄에 혼합하는 것은, 특히 technical writing에서 흔합니다. 

또한 일부 앱은 glyphs의 임의 배열을 요구합니다. 예를들어, 그래픽 설계 상황에서는 레이아웃이 비선형 경로에 배치되어야 합니다.

일련의 glyphs에서 line을 생성하려면, 레이아웃 엔진은 한 행을 끝내고, 다른 행을 시작할 지점(point)를 찾아 줄바꿈을 수행해야합니다. Text System에서 단어 또는 glyphs 경계에서 줄바꿈을 지정 할 ㅜㅅ 있씁니다. 로마자 텍스트에서 glyphs간에 깨진 단어는 중단 점에 하이픈(-) glyphs를 삽입해야합니다.

layout manager는 baseline이라는 보이지 않는 선을 따라 glyphs를 배치합니다. 로마자 텍스트에서 baseline은 수평이며, 대부분의 glyphs의 아래쪽 가장자리가 그 위에 놓입니다. 일부 glyphs는 baseline아래로 확장되며, 여기에는 "g", "O"가 포함됩니다. 다른 writing system은 baseline아래에 또는 중심에  glyphs를 배치합니다. 모든 glyphs에는 layout manager가 baseline과 올바르게 정렬하기 위해 사용하는 원점이 포함됩니다.

glyphs designers는 font에서 각 glyphs주변의 간격을 설명하는 메트릭스 font를 사용하여 일련의 measurement을 제공합니다. layout manager는 이러한 메트릭을 사용하여 

glyphs배치를 결정합니다. 수평 텍스트에서 glyphs에는 다음 glyphs 원점까지의 baseline을 따라 거리를 측정하는 advance width라는 메트릭이 있습니다. 일반적으로 left-side bearing이라고 하는 glyphs의 원점과 왼쪽 사이에 약간의 공간이 있습니다. glyph의 오른쪽과 advance width으로 설명되는 점 사이에 공간이 있을 수도 있습니다. 이를  right-side bearing이라고 합니다. Glyph의 vertical dimension는 ascent와 descent라고 하는 2개의 메트릭에 의해 제공됩니다. ascent은 원점(baseline)에서 font의 가장 높은 glyphs의 상단까지의 거리입니다. descent는 baseline아래에서 font의 가장 깊은 descender의 맨 아래까지의 거리입니다. glyph의 보이는 부분을 둘러싸는 직사각형을 bounding rectangle또는 bounding box라고 합니다. 

오.............그림으로 보니까 이해가 잘 되죠?

layout manager는 ascent 및 descent 메트릭을 사용해서 TextKit에서 언급되었던 capHeight를 알 수 있는거겠죠..? 아 물론 추측입니ㅏㄷ.,,

기본적으로 수평 Text에서 typesetters은 advance width를 사용하여 glyph를 나란히 배치하여 표준 interglyph공간을 만듭니다. 그러나 일부 조합에서는 두 glyphs사이의 공백을 줄이거나 늘리는 kerning을 통해 Text를 보다 쉽게 읽을 수 있습니다. 

위 그림과 같이 대문자 W와 대문자 A사이에서 kerning의 일반적인 예가 발생합니다. Type designers는 font의 메트릭에 kerning정보를 포함합니다. Text 시스템은 kerning을 끄거나 font와 함께 제공된 기본 설정을 사용하거나 Text의 전체에서 kerning을 조이거나 느슨하게 하는 메소드를 제공합니다.

Type system은 일반적으로 대부분의 컴퓨터 typesetting  시스템에서 인치당 정확히 72를 측정하는 pt라는 단위로 font 메트릭스를 측정합니다. font의 ascent 와 descent 거리를 더하면 font의 pt크기가 제공됩니다.(오...)

ascent + descent + leading(line 간격)의 합은 font의 lineHeight입니다. (역시 ascent와 descent메트릭을 이용하는군여!!)

음..이렇게 Typographical Concepts들을 몇개 봤는데요, 제가 다루지 않은 내용도 있습니다. 쓸데없는...소리는 물론 없겠지만 제가 생각했을 때 쓸데없는 소리는 뺐음.

TextKit공부하면 일단 glyph라는 단어가 진짜 많이 나오는데, 일단 오늘 이 glyph라는 개념을 뭔가 잡은 것 같아서 기분이 좋네요 :)

모두 즐거운 한글날 되세요 :0