Ghostty 👻의 첫 개발 로그예요! Ghostty는 제가 2021년부터 사이드 프로젝트로 개발해 온 터미널 에뮬레이터예요. 얼마 전 Ghostty의 존재를 공개했는데 그 이후로 정말 많은 관심을 받았어요!

아직 일반에 공개할 준비는 되지 않았어요(하지만 완전히 오픈소스(FOSS)로 공개할 계획이라는 건 약속드려요). 그래도 기록을 남기기 위해 터미널에 대한 자세한 이야기와 진행 상황을 공유하는 개발 로그를 시작하고 싶었어요. 공유할 만한 흥미로운 엔지니어링 이야기가 꽤 있다고 생각하고, 여러분이 재미있게 봐주시고 한두 가지 정도는 배워 가시길 바라요. (혹은 연락해서 저에게 한두 가지 알려주셔도 좋고요.)

이 개발 로그들은 모두 아주 캐주얼하고 거의 대화하듯 편안한 톤으로 쓰일 거예요. 특정한 주기로 올라오지도 않을 거고요. 터미널과 관련된 것이라면 뭐든 다룰 예정이에요. 기능 이야기, 이상한 버그, 제가 미처 몰랐던 것들 등등요.

기술 스택

첫 개발 로그이니 Ghostty의 기술 스택에 대해 이야기해 볼게요. Ghostty는 크로스 플랫폼(현재는 macOS와 Linux를 지원하지만 나중에 Windows도 지원할 수 있도록 작성됐어요) GPU 가속 터미널 에뮬레이터예요.

• Zig로 작성
• Libxev 이벤트 루프(Ghostty를 위해 직접 작성해 분리한 것이에요)
• Linux에서는 OpenGL, macOS에서는 Metal
• Linux 폰트 렌더링은 Fontconfig, Freetype, Harfbuzz
• macOS 폰트 렌더링은 CoreText와 Harfbuzz
• macOS 프론트엔드는 SwiftUI, Linux에서는 GTK, 추가로 GLFW 옵션도 있어요
• 그 외 거의 모든 부분은 Zig로 직접 만들었어요

각각을 왜 선택했는지에 대해서는 이야기하지 않을게요. 그냥 관심 있는 분들을 위해 기술 스택을 있는 그대로 정리해 둔 거예요. 편하게 받아들여 주시면 돼요.

셸 통합 자동 주입 (#191)

첫 번째 기능을 이야기해 볼게요!

최신 터미널 에뮬레이터가 셸과 통신해서(제대로 설정된 경우) 정말 유용한 기능들을 많이 제공할 수 있다는 사실, 알고 계셨나요? 제 주변 개발자 친구들에게 물어보면 대부분 이 사실을 모르거나, 설정해 두지 않았거나, 이런 기능을 지원하지 않는 터미널을 쓰고 있더라고요. 😢

터미널의 셸 통합은 정말 많은 일을 해요(Kitty 참고). 워크플로 지식 없이도 삶의 질을 확 높여주는 기본 기능 몇 가지는 이거예요.

• 리사이즈 시 복잡한 프롬프트 다시 그리기. 최신의 복잡한 프롬프트를 쓸 때 터미널 크기를 조절해도 훨씬 덜 깨져요.
• 작업 디렉터리 보고. 이전에 포커스된 터미널의 작업 디렉터리를 새 탭이나 분할 창이 그대로 이어받아요.
• 활성 프로세스 감지. 터미널 에뮬레이터가 사용자가 단순히 셸 프롬프트에 머물러 있다는 걸 알면, 종료 시 확인을 묻지 않고도 안전하게 닫을 수 있어요.

저는 데모를 좋아해서 예시 하나를 보여 드릴게요. 바로 복잡한 프롬프트 다시 그리기예요. 아래 영상은 Ghostty가 아니고, macOS에서 인기 있는 다른 터미널 에뮬레이터예요. 셸 통합 없이 fish 프롬프트를 리사이즈하는 모습이에요.

프롬프트가 엉망이 되는 걸 보세요. 터미널 에뮬레이터가 잘못한 건 아니에요. 텍스트를 리플로우하는데, 셸이 그 프롬프트가 여러 줄로 리플로우됐다는 걸(지금으로서는) 알 방법이 없어서 아래쪽 새 줄에 다시 그려지면서 중복이 생기는 거예요.

다음은 셸 통합을 설정한 Ghostty예요.

훨씬 낫죠! 셸이 리사이즈 시 프롬프트를 다시 그릴 수 있다는 걸 터미널에 알려줄 수 있어요. 리사이즈할 때 Ghostty는 터미널 라인을 지워요(깜빡이는 게 보이실 텐데 나중에 개선하고 싶어요). 덕분에 텍스트 리플로우가 일어나지 않고 새 줄도 생기지 않아서 리사이즈해도 깔끔하게 유지돼요.

그럼 이건 어떻게 설정하나요? 셸별로 다른 설정(zsh용은 zsh 코드, fish용은 fish 코드, bash용은 별로인 코드 등)이 필요해요. #191 이전에는 사용자가 직접 설정하는 방법을 문서로 안내했어요.

하지만 이제 Ghostty가 🪄 마법처럼 자동으로 🪄 처리해 줘요(지금은 fish와 zsh만 해당해요). 이 기능은 끌 수도 있지만, 동작 방식은 간단해요. 셸 이름의 basename을 확인해서 “fish”면 fish로, “zsh”면 zsh로 인식하고, 올바른 환경 변수를 설정해서 셸이 실행될 때 필요한 설정 파일들이 자동으로 로드되도록 하는 거예요.

폰트 자동 이탤릭 처리 (#179)

이번에는 버그 하나를 고치고 기능 하나를 추가했어요.

기본부터 설명할게요. 일반(regular), 볼드, 이탤릭, 볼드 이탤릭은 서로 다른 폰트 페이스예요. MyAwesomeFont.ttf 같은 폰트가 있다면, 그건 보통 하나의 페이스(아마도 regular)일 뿐이에요. 많이 단순화한 설명이지만 대체로 그렇다고 보시면 돼요.

사용자가 MyAwesomeFont를 쓰겠다고 하면, Ghostty는 그 폰트 자체뿐 아니라 그 폰트에 연결된 모든 페이스를 찾아야 해요. 많은 프로그래밍용 폰트에는 이탤릭이나 볼드 페이스가 없거든요. (참고로 폰트와 연결된 모든 페이스를 찾는 과정을 보통 폰트 탐색(font discovery)이라고 해요. 더 넓게는 사용자가 폰트를 지정하지 않았을 때 어떤 폰트를 기본값으로 쓸지 결정하는 문제까지 포함하고요.)

먼저, 버그 이야기

또 하나 중요한 배경 지식은, 폰트가 모든 글리프(하나의 그릴 수 있는 문자)를 가지고 있지 않은 경우가 많다는 거예요. 예를 들어 일반적인 고정폭 프로그래밍 폰트에는 중국어 문자(예: 풀 초(草) — 제대로 보이셨다면)가 없을 확률이 높아요.

프로그램이 설정한 폰트에 없는 문자를 그리려고 하면, Ghostty는 그 문자를 가진 다른 폰트를 찾아보려고 해요. 존재하는 모든 글리프를 폰트 파일 하나에 다 넣도록 강제하는 것보다 보통은 이게 더 나은 동작이거든요. 물론 설정한 폰트와 어울리도록 그 글리프를 그리는 방법에는 복잡한 문제들이 있지만, 지금은 그 이야기가 아니니 그런 문제들이 존재한다는 것만 알아두시면 돼요. 개인적으로 그 해법을 고민하는 건 일종의 자해 행위처럼 느껴지고요.

버그 내용은 이랬어요. 이전에는 특정 스타일의 폰트에 문자가 없을 경우, Ghostty가 그 스타일로 그 문자를 가진 폰트를 찾아다녔어요. 그 결과는… 정말 보기 흉했죠. 고정폭 폰트에 없는 문자가 있으면 고정폭이 아닌 폰트를 찾아와서 이런 모습이 됐거든요.

맙소사. 버그 수정 방법은 이랬어요. 특정 스타일에 문자가 없고 그 스타일이 “regular”가 아니라면, 먼저 regular에서 찾아봐요. 그러면 스타일은 무시되지만 렌더링은 제대로 돼요. 좋아요.

참고로 Ghostty는 이미 고정폭 폰트부터 먼저 찾도록 되어 있었어요. 고정폭이 아닌(가변폭) 폰트를 아예 쓰지 않는 게 낫지 않냐고 생각할 수도 있지만, 중국어 문자 같은 경우는 가변폭 폰트에서도 꽤 잘 보이기 때문에 굳이 그렇게 제한할 필요는 없다고 봐요.

더 나아가, 프로그래밍 방식으로 이탤릭 만들기

특히 이탤릭의 경우에는 더 잘할 수 있어요. 폰트에 이탤릭체가 없으면, 일반체를 기울여서 가짜 이탤릭을 만들 수 있거든요. 싱글 오리진 핸드드립을 마시며 장인이 정성껏 디자인한 것만큼 보기 좋진 않겠지만, 그래도… 쓸 만은 해요.

그래서 Ghostty가 이제 하는 일이 바로 그거예요. 이탤릭으로 된 문자를 요청했는데 사용 중인 폰트가 이탤릭을 지원하지 않으면, 일반 글리프를 래스터라이즈할 때 기울임을 적용해서 가짜 이탤릭을 만들어요.

위 폰트는 이탤릭을 지원하지 않아요. 이탤릭은 가짜예요. 그래도 괜찮아 보이죠! 그리고 이탤릭을 아예 표시하지 않는 것보다는 확실히 낫고요.

내부 동작이 궁금하시다면, FreeType이나 CoreText 같은 폰트 래스터라이제이션 라이브러리에서는 호출자가 변환 행렬을 전달할 수 있게 해줘요. CoreText의 경우 CTFontCreateCopyWithAttributes로 폰트를 초기화할 때 변환 행렬을 넘길 수 있어요.

Ghostty에서는 그냥 15도 기울임을 하드코딩해 두었어요(아래 코드 참조). 하지만 보시다시피 원하는 대로 글리프를 기울이도록 커스터마이즈할 수도 있어요.

pub const italic_skew: macos.graphics.AffineTransform = .{
    .a = 1,
    .b = 0,
    .c = 0.267949, // approx. tan(15)
    .d = 1,
    .tx = 0,
    .ty = 0,
};

마무리

이것으로 첫 Ghostty 개발 로그를 마칠게요. 한두 가지 배우셨거나 재미있게 보셨길 바라요. 첫 번째인 만큼 다룰 수 있었던 이야기가 정말 많았는데, 다음 개발 로그를 위해 아껴 둘게요(앞으로는 더 최신 개발 내용을 중심으로 다루려고 해요).

최신 소식을 받아보고 싶다면 트위터나 마스토돈에서 저를 팔로우해 주세요(링크는 푸터에 있어요). 이 블로그에는 RSS 피드도 있어요.

Boo. 👻