brunch

You can make anything
by writing

- C.S.Lewis -

by 이주명 Sep 23. 2020

타이포그래피로 보는 애플 - UI 편

애플의 UI에 사용된 역대 서체들




내 인생의 전환점은 타이포그래피 수업이었다.
- 스티브 잡스 -



스티브 잡스에 관한 책 혹은 영화를 한 번이라도 접하신 분들이 있다면, 그가 생전에 얼마나 타이포그래피에 신경을 썼는지 알고 계실 겁니다. 대학교 재학 시절 우연히 들어간 캘리그래피 수업을 듣고 타이포그래피의 세계에 눈을 뜬 스티브 잡스. 이번 글에서는 그의 타이포그래피에 대한 열정이 애플에 남긴 유산을 살펴보려고 합니다.

그럼, 시작해볼까요?



애플이 최초의 제대로 된 비트맵 디스플레이를 갖춘 Lisa..





1. Chicago and Charcoal


1984년 소개된 Machintosh에는 Susan Kare가 디자인한 비트맵 폰트 Chicago가 사용되었습니다. 이후 1997년에 출시된 Mac OS 8에서는 시스템 글꼴이 Charcoal으로 변경되었습니다. 

Font Bureau의 David Berlow가 디자인한 Charcoal는 여타 산세리프 폰트들과 비슷하지만 눈에 띄는 특징이 있는데, g, j, p, q, 와 y 같은 알파벳의 하단 부분을 줄여 x-height의 공간을 확대해 가독성과 행간을 줄였다는 점입니다.



Chicago를 사용하고 있는 iPod


2001년 출시된 애플의 음악 플레이어, iPod은 Macintosh에 사용되었던 Chicago를 시스템 글꼴로 다시 사용했으며 다음 세대들의 iPod에서는 확장된 레퍼토리의 TrueType Chicago를 사용하며 이전 비트맵 버전 Chicago에서는 없던 그리스어, 키릴어 등 많은 문자들을 추가했습니다. 다만 당시의 아이팟에서 문자들은 Anti-Aliasing 되지 않았습니다.














Anti-Aliasing은 디지털 화면에서 렌더링 된 콘텐츠를 재생할 때 출력되는 이미지의 픽셀 조각이 튀거나, 선이나 도형의 가장자리가 우둘투둘하고 날카로워지는 형상을 방지하기 위한 기술입니다.
TrueType은 1980년대 말, 애플 컴퓨터가 개발한 외곽선 글꼴 표준입니다. TrueType은 폰트 개발자들에게 폰트가 다양한 크기에서 높은 수준의 제어를 할 수 있다는 점에서 기존 비트맵 폰트의 문제들을 개선했습니다. 이 글꼴 표준을 사용하는 파일 확장자로는 .ttf, .tte가 있습니다.





2. Geneva

애플은 Finder에서 아이콘과 표시되는 파일 이름과 같은 작은 UI 요소의 경우, Helvetica의 리디자인된 버전인 Geneva 서체를 사용했는데 이는 Chicago 특유의 좁은 counter가 작은 화면에서 판독성이 떨어져서 그런 것으로 추측됩니다.


Geneva 역시 Susan Kare가 애플 컴퓨터를 위해 디자인한 산세리프 서체로 Helvetica의 리디자인 버전입니다. Helvetica의 디자이너, Max Miedinger의 고향인 Geneva에서 이름을 따왔으며, 초기 버전은 비트맵 폰트로 제작되었으나 이후 기술의 발전으로 TrueType 버전으로 전환되었습니다. 







3. Shaston

1986년에 소개된 Apple II 시리즈의 다섯 번째 모델 Apple IIGS는 640 X 200의 해상도를 가지고 있었으므로  Shaston 8이라고 하는 견고한 8pt 비트맵 폰트를 시스템 폰트로 사용해야 했습니다. Shaston은 애플 IIGS Technote #41에서 "수정된 Helvetica"로 묘사되었지만, 사실 큰 유사점은 없다고 합니다.






4. Espy Sans

1991년, 애플의 Human Interface Group은 LetterPerfect Fonts의 Garret Biew, Damon Clark과 계약하여 Mac OS 버전 7.5에서 Chicago와 Geneva를 대체할 비트맵 디스플레이 폰트를 만들었습니다산세리프와 세리프 두 버전으로 제작된 Espy 폰트 패밀리는 Regular와 Bold 두 두께로 구성되었으며  8, 9, 10, 12, 14 pt의 개별 사이즈로 개발되었습니다. 이중 Espy Sans는 화면 가독성이 뛰어난 것이 증명되어 이후 Newton OS GUI에도 사용되었습니다. 


Espy Sans는 이후 1994년에 Apple의 eWorld 온라인 서비스의 글꼴로도 사용되었으며, 2004년에 출시된 iPod Mini도 Espy Sans를 사용했습니다



iPod Mini와 Espy Sans






5. Lucida Grande


2000년 OS X 매버릭스를 통해 도입된 이후 Lucida Grande는 메뉴, 대화 상자 등 기타 위젯과 같은 Mac OS X 사용자 인터페이스 요소에 사용되는 시스템 폰트입니다. 이후 Helvetica Neue로 대체되었습니다.












6. Podium Sans

2004년부터 시작해 애플은 iPod photo(iPod 4세대의 프리미엄 버전), iPod (5세대), 그리고 iPod Nano(1-2 세대)에 기존 iPod 시스템 폰트로 사용되던 Chicago를 대체하여 Podium Sans라고 하는 비트맵 폰트를 사용됐습니다. 원래 Myriad로 홍보되었지만, Podium Sans는 벌려진 "M"과 독특한 "y"와 같은 Myriad의 트레이드마크와 같은 특징들을 놓치고 있습니다. Podium Sans는 컬러 디스플레이를 가지고 있는 전 세대 iPod에서 채택되었으며, 이후 2007년 9월 iPod 라인업 리프레쉬 이전까지 활용되었습니다.





7. Helvetica

1세대 iPhone이 출시된 2007년, 소프트웨어 디자인에 Helvetica를 사용하기 시작한 애플은 iPhone, iPod touch, iPad, Apple TV 등 iOS 기반의 디바이스와 iPod Classic(6세대)와 iPod Nano(3세대)를 시작으로 iPod 라인업에도 Helvetica를 사용했습니다.


2010년, iPhone 4가 출시됨에 따라 애플은 레티나 디스플레이를 사용하는 기기에는 Helvetica Neue를, 레티나 디바이스가 아닌 제품에서는 Helvetica의 사용을 유지했습니다. 


그로부터 2년 후 애플은 MacOS(당시 OS X)에서도 Helvetica를 사용하기 시작했습니다. iTunes, iMovie, iPhoto, GarageBand, Apple의 전문가용 애플리케이션에 Helvitica의 활용 범위를 늘려갔으나, OS X(현재의 MacOS) 환경에서는 Lucida Grande를 유지했는데, 이는 처음부터 디지털 화면을 위해 제작된 Lucida Grande가 Helvetica보다 가독성이 좋았기 때문입니다.



2013년 6월 iOS 7을 선보인 후, Helvetica Neue의 Extra-thin 두께를 iOS 7의 사용자 인터페이스에 사용하기 시작했는데, 가독성이 떨어진다는 빗발치는 불만에 좀 더 두꺼운 두께로 변경했습니다. (iOS 7의 미려한 플랫 디자인과 어울리게 하고, 레티나 디스플레이의 성능을 과시하기 위한 애플의 전략이었으나 실패했습니다.)


Extra light에서 light로 두께를 바꿔 판독성을 높이는 기능

OS의 최종 릴리즈를 위해 애플은 시스템 폰트를 Helvetica Neue에서 조금 더 두꺼운 폰트로 수정했지만 이전 버전에 비해 여전히 가독성이 떨어진다는 불만들이 제기되었습니다. (이전 버전의 iOS 기기는 낮은 해상도의 디스플레이에서 더 높은 대비를 가진 regular 두께의 Helvitica 또는 Helvetica Neue를 사용했습니다.)


2014년 6월 애플은 OS X 10.10 버전 "Yosemite" 출시와 함께 Mac의 시스템 폰트 또한 Helvetica Neue를 사용하기 시작하며 애플의 모든 UI를 Helvetica Neue로 정리했습니다.





8. San Francisco

San Francisco는 현재 WatchOS, macOS, iOS, iPadOS 그리고 tvOS를 포함한 모든 애플 제품군(Helvetica를 계속 사용하는 TVOS의 자막은 제외)에서 UI에 사용되고 있습니다. Apple Watch와 함께 처음 소개된 이 서체는 향상된 가독성과 소형 디스플레이에서 판독성을 높인 x-height를 위해 사용되었습니다. 


San Francisco는 여러 다른 서체들의 디자인을 참조했는데, 대표적으로 FF DIN(iOS 7 이상 카메라 앱 UI에서 사용됨), Helvetica(iOS 6 이하 UI에서 사용됨), Helvetica Neue(iOS 7 및 iOS 8의 UI에서 사용됨, OS X Yosemite에서 사용됨), Roboto(Google의 UI 서체), Univers(애플의 초기 키보드 디자인에 사용됨) 등 다양한 서체를 모티브로 삼았습니다.


2015년 6월, WWDC 2015 콘퍼런스에서 공개된 San Francisco는 MacOS와 iOS 운영 체제의 시스템 폰트로 Helvetica Neue를 대체했습니다. 


San Francisco는 전 세계적으로 사랑받아온 Helvetica의 특징들을 가져오면서도 Din의 공간 효율성 또한 가지고 있는 매우 훌륭한 서체입니다. 또한 폰트가 활용되는 환경에 따라 SF Pro(iOS와 macOS에 활용), SF Compact(WatchOS에 활용), SF Mono(코딩 등 수직 정렬이 필요한 환경)로 분류되며, 각 스타일당 Display(20pt 이상의 텍스트)와 Text (20pt 이하의 텍스트) 버전이 따로 제작되어 활용성과 완성도가 굉장히 높습니다.





New York

2019년에 애플이 출시한 New York는 산세리프인 San Francisco체에 대응하여 제작된 세리프 서체입니다.








글을 마치며


이번 콘텐츠는 위키피디아에 게재된 Typography of Apple Inc. 을 바탕으로 했으며 이해를 돕기 위한 추가적인 정보나 이미지는 제가 따로 찾아 첨부했습니다. 추가적인 질문 사항이나 수정할 내용이 있으면 댓글로 달아주세요!







구독과 좋아요는 다음 콘텐츠를 만드는 데 큰 힘이 됩니다.

질문과 외주 문의는 언제든 편하게 주세요.✌️


뉴욕을 기반으로 브랜딩, 타이포그래피, UIUX 작업을 하는 그래픽 디자이너 이주명입니다. 

2019년  VCU 그래픽 디자인 학사 졸업 후 다양한 디자인 프로젝트를 통해 커리어를 이어나가고 있습니다. 브런치에 제 경험을 바탕으로 디자인 관련 글을 연재하고 있습니다.

외주 및 질문은 jmlee9762@gmail.com로 연락 주세요.

감사합니다.  


작가의 이전글 구독자 1000명 달성 기념 감사 인사 

매거진 선택

키워드 선택 0 / 3 0

댓글여부

afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari
브런치 시작하기

카카오계정으로 간편하게 가입하고
좋은 글과 작가를 만나보세요

카카오계정으로 시작하기
페이스북·트위터로 가입했다면