같은 문장과 같은 숫자를 두 디자인 시스템에 넣어봤습니다.
한쪽은 읽으라고 말했고, 다른 쪽은 훑으라고 말했습니다.
무엇이 더 예쁜가보다 어떤 사이트처럼 느껴지는지가 먼저 달라졌습니다.
2026-08-11약 8분cmore.dev 실험 기록
위의 전환 버튼은 DOM을 갈아 끼우지 않습니다. 제목, 본문, 숫자, 카드, 코드 창까지
같은 HTML을 그대로 둔 채 CSS 변수와 글꼴 스택만 바꿉니다. 그런데 결과는 단순한
서체 비교보다 컸습니다. 기존 모드에서는 작업 기록처럼 보이던 내용이 Geist 모드에서는
제품 현황판처럼 보였습니다. 콘텐츠는 그대로인데 독자가 예상하는 읽는 방식이 달라졌습니다.
먼저 범위를 밝혀둡니다. 여기의 ‘기존 cmore’는 본채 전체를 복제한 화면이 아닙니다.
제호판, 인주 도장, 종이 지문, 교정 부호, 마스코트 같은 본채의 인쇄 유물은 빠져 있습니다.
이 실험이 비교하는 것은 두 브랜드 경험 전체가 아니라 색, 서체, 경계, 간격, 깊이 같은
조판의 뼈대입니다. 그 제한 안에서도 차이는 충분히 선명했습니다.
기존 cmore 모드와 Geist 모드의 구현 차이
항목
기존 cmore
Geist 적용
첫인상
편집된 작업 기록
정돈된 제품 UI
제목
Georgia·명조 계열 세리프
Geist Sans·한글 시스템 폴백
표면
크림 종이, 직각, 그림자 없음
흰 표면, 10px 라운드, 얕은 그림자
구획
2px 잉크 선과 평면 조판
1px 경계와 독립된 카드
강조색
벽돌색 #9f2d24
파랑 #0064db · AA 보정
리듬
섹션 76px, 카드 안쪽 26px
섹션 64px, 카드 안쪽 24px
코드·숫자
시스템 Mono, 기록의 일부
Geist Mono, 상태 표시의 중심
01 / GENRE첫 1초에 사이트의 장르가 바뀐다
가장 먼저 달라지는 것은 가독성보다 장르입니다. 기존 모드의 크림 바탕, 세리프 제목,
직각 모서리, 굵은 선은 누군가 골라 묶은 지면을 연상시킵니다. “직접 써본 것만 남긴다”는
문장이 선언문이나 편집 원칙처럼 읽힙니다. 정보 사이의 여백도 쉬어가는 빈칸에 가깝습니다.
Geist 모드에서는 같은 문장이 서비스의 가치 제안처럼 보입니다. 중성적인 흰 바탕 위에
48px 그리드가 희미하게 깔리고, 카드가 얕은 그림자로 표면에서 분리되며, 파란 상태색이
시선을 다음 정보로 보냅니다. 잘못된 변화가 아닙니다. 다만 독자는 이제 “누가 무엇을
기록했는가”보다 “이 제품에서 무엇을 할 수 있는가”를 먼저 찾게 됩니다.
02 / HANGUL한글은 Geist로 바뀐 것이 아니다
여기서 가장 중요한 기술적 구분이 있습니다. 이 실험이 불러오는 Geist Sans와
Geist Mono 파일은 영문, 숫자, 기호를 담당합니다. 한글 글리프는 폰트 스택 뒤에 둔
Pretendard나 운영체제 한글 글꼴로 폴백됩니다. 화면에서 보이는 한글까지 모두
‘Geist 글꼴’이라고 부르면 틀립니다.
한글의 인상이 달라지는 주된 이유는 폴백 글꼴 위에 적용된 굵기, 크기, 행간,
색, 주변 여백입니다. 초안에서는 Geist식 인상을 강조하려고 제목 자간을 -0.055em까지
조였지만, 390px 화면에서 한글 덩어리가 지나치게 촘촘해졌습니다. 최종본은 한글 제목과
레이블의 자간을 0으로 되돌리고 영문과 숫자만 촘촘하게 남겼습니다. 본채 디자인 계약이
한글의 음수 자간을 피하는 이유를 실험에서도 확인한 셈입니다.
그래서 이 페이지는 Geist로 한글을 개선하는 실험이 아닙니다.
더 정확히는 Geist의 라틴 문자와 Mono, 한국어 시스템 글꼴, Geist식 간격 규칙을
섞었을 때 어떤 제품 인상이 생기는지 보는 실험입니다. 혼합이라고 밝히는 편이
결과를 과장하지 않습니다.
03 / STRUCTURE선으로 엮을 것인가, 카드로 나눌 것인가
기존 모드는 요소를 띄우지 않습니다. 그림자를 없애고, 모서리를 직각으로 두고,
잉크 선과 바탕색 차이로만 영역을 나눕니다. 도구 카드와 편집 원칙도 한 지면 안에서
서로 붙어 있습니다. 각 조각보다 그 조각을 편집한 순서가 먼저 보입니다.
Geist 모드는 반대로 각 모듈을 독립시킵니다. 1px 경계, 10px 라운드, 얕은 그림자를
통해 장부, 도구, 인용문, 코드 창이 각자 하나의 단위가 됩니다. 사용자는 페이지를
처음부터 끝까지 읽지 않아도 관심 있는 카드를 골라 들어갈 수 있습니다.
제품 문서나 대시보드에서는 이 분리가 유리합니다. 긴 리뷰에서는 흐름이 자주 끊길 수 있습니다.
실제 간격도 조금 더 조밀합니다. 실험의 기존 모드는 큰 섹션 사이에 76px,
카드 안쪽에 26px을 두고, Geist 모드는 각각 64px과 24px을 씁니다.
숫자 차이는 작지만 라운드 카드와 1px 경계가 함께 붙으면 한 화면에 더 많은
‘조작 가능한 단위’가 있다는 인상을 만듭니다.
04 / SCANNING메타데이터가 본문보다 앞에 나온다
Geist가 가장 자연스러운 곳은 숫자와 상태입니다. 47, 100%, 0 같은 메트릭은
큰 산세리프로 빠르게 비교되고, 장부 수치는 tabular-nums로 자리폭을 맞춥니다.
날짜와 검증 상태는 Mono 레이블로 본문에서 분리됩니다. 영문 키커의 촘촘한 자간,
파란 액센트, 48px 그리드가 합쳐져 화면 전체를 계기판처럼 훑게 합니다.
기존 모드에도 Mono와 메타데이터는 있습니다. 차이는 역할입니다. 기존 조판에서
메타는 기록을 보조하는 각주에 가깝고, Geist 조판에서는 화면을 탐색하는 좌표에 가깝습니다.
코드 창도 내용은 같지만 Geist Mono와 파란 강조색이 붙으면 실행 결과나 로그 뷰어처럼
보입니다. 벽돌색 강조와 직각 모서리에서는 기록에 첨부한 증거물처럼 보입니다.
도구 수, 마지막 검증일, 라이선스, 설치 명령처럼 짧고 반복되는 정보에는 Geist식
위계가 분명히 효율적입니다. 반대로 왜 이 도구를 올렸는지, 어디에서 막혔는지,
무엇을 믿지 말아야 하는지 설명하는 문장에는 기존의 느린 리듬이 더 잘 맞습니다.
05 / COST더 현대적이라는 말과 더 낫다는 말은 다르다
Geist 모드가 더 빠르거나 접근성이 높다고 결론 낼 근거는 없습니다. 두 모드는
같은 HTML과 같은 접근성 장치를 공유합니다. 스킵 링크, 버튼의 aria-pressed,
키보드 1·2 전환, reduced-motion 대응은 비교 화면의 공통 기반이지 Geist의 장점이 아닙니다.
성능도 마찬가지입니다. 본채는 외부 웹폰트를 받지 않고 시스템 글꼴을 사용합니다.
이 실험은 jsDelivr에서 Geist Sans와 Geist Mono 가변 폰트 두 개를 추가로 가져옵니다.
font-display: swap으로 글이 늦게 나타나는 문제를 줄였지만, 다운로드 비용 자체는
Geist 쪽에 생깁니다. ‘더 정돈돼 보인다’와 ‘더 가볍다’를 같은 말처럼 쓰면 안 됩니다.
또 비교 화면의 기존 모드는 본채의 모든 개성을 싣지 않았습니다. 실제 홈에는 제호판,
인주 도장, 종이 지문, 미스프린트, 교정 부호가 있습니다. 따라서 이 실험에서 Geist가
더 완성돼 보인다면, 한쪽은 제품 UI를 충분히 재현했고 다른 쪽은 신문의 뼈대만 가져왔다는
조건도 함께 봐야 합니다.
06 / DECISION교체보다 역할 분담이 맞다
결론은 본채 전체를 Geist로 바꾸지 않는 쪽입니다. cmore.dev의 차별점은
크림색이나 세리프 하나가 아니라, 검증 기록을 편집해 발행한다는 태도에 있습니다.
그 태도를 만든 제호판, 선, 종이 질감, 인주 도장까지 걷어내면 사이트는 더 익숙하고
세련돼 보일 수 있지만, 어느 개발자 도구 사이트와도 바꿔 놓을 수 있는 얼굴에 가까워집니다.
본채에 남길 것
세리프 제목과 따뜻한 종이색
직각 모서리와 그림자 없는 평면
굵은 선으로 이어지는 편집 흐름
검증 기록이라는 느린 읽기 리듬
선택적으로 가져올 것
숫자의 tabular-nums 정렬
상태·날짜를 나누는 Mono 위계
데이터가 많은 화면의 조밀한 간격
도구형 인터페이스의 명확한 상태 표시
즉 Geist는 대체안보다 보조 언어에 가깝습니다. 긴 리뷰와 홈은 Newsprint가 맡고,
표, 검증 상태, 코드, 필터처럼 조작과 비교가 많은 부분에는 Geist가 잘하는
숫자 정렬과 정보 밀도를 골라 이식할 수 있습니다. 글꼴 파일을 통째로 들이는 것보다
그 규율만 가져오는 편이 비용도 적고 본채의 얼굴도 지킵니다.