SIJE CI 리뉴얼 이야기 (3): 공식을 글자와 그래픽으로 넓히다

^{⬅️이전 글 보러 가기}

1편에서는 로고를, 2편에서는 컬러를 이야기했어.

그런데 로고와 색이 정해져도 사람들이 가장 많이 보는 건 결국 글자야. 제안서, 슬라이드, 명함, 웹페이지 모두 글자로 채워지니까. 그리고 그 글자 주변을 정리해 주는 그래픽이 있어야 어떤 자료를 봐도 시제라는 걸 알아볼 수 있어.

3편에서는 시제의 서체 체계와 그래픽 모티프를 정리해 볼게.

서체는 역할별로 나눴어

영문 서체는 세 가지를 역할에 따라 나눠 써. 기본은 Geist, 헤드라인은 New Frank, 코드와 숫자는 Roboto Mono야.

Geist: 기본 서체

Geist는 시제의 가장 기본이 되는 서체야. 본문, 헤드라인, 캡션까지 모든 용도에 쓰여. Regular는 일반 본문, Medium은 가볍게 강조할 때, SemiBold와 Bold는 강하게 강조할 때 써.

New Frank: 헤드라인 서체

헤드라인과 표시용 서체야. 강조된 텍스트나 블록 인용처럼 브랜드의 존재감을 힘 있게 드러내야 하는 자리에 Bold를 쓰고, 가장 강하게 강조할 때 Extra Bold를 써.

Roboto Mono: 코드와 숫자

코드나 수치처럼 기능적이고 수량적인 내용을 보여 줄 때 쓰는 보조 서체야. 1편에서 로고의 모티프를 코드에서 가져왔다고 했지? 서체에서도 그 코드 무드를 이어 가는 역할이야. 굵기는 Regular, Medium, SemiBold, Bold 네 가지를 기본으로 써.

Acumin Variable Concept: 계열사 로고 전용

서비스명이나 지역명을 로고와 함께 쓸 때만 쓰는 전용 서체야. SemiCondensed Semibold 한 가지만 쓰고, 가로형 조합에서는 워드마크 높이의 60%를 유지해. 서비스명은 첫 글자만 대문자(Service), 지역·공장명은 모두 대문자(VINA)로 써. 슬로건에 쓰는 Acumin Pro보다 가로폭이 좁아서 둘을 섞어 쓰지 않도록 조심해야 해.

한글과 다국어

한글은 Pretendard를 써. 헤드라인과 본문에 모두 쓸 수 있고, 굵기는 상황에 맞게 골라. 가벼운 톤이 필요한 보조 텍스트에는 Light 이하를, 큰 헤드라인이나 임팩트가 필요한 메시지에는 ExtraBold나 Black을 써.

Monolis는 여러 나라 공장에서 쓰이니까, 다국어 서체 기준도 따로 정했어. UX Note (2)에서 이야기한 글로벌 UX 라이팅과 같은 고민에서 나온 기준이야.

• Primary: 베트남어는 Pretendard, 일본어는 Pretendard JP, 중국어는 Noto Sans SC
• Secondary: 기본 서체를 쓸 수 없는 환경에서는 Noto Sans, Noto Sans JP, Noto Sans SC

메인 서체가 설치되지 않은 컴퓨터에서 문서를 열거나 고칠 때는 Arial로 대신해. 그래서 외부로 보내는 편집용 원본 파일은 처음부터 Arial로 만들어서 글꼴이 기본값으로 바뀌는 문제를 막아. PDF로 보낼 때는 메인 서체를 그대로 써도 돼.

글자의 위계

서체를 정했으면 어느 자리에 어떤 굵기를 쓸지도 정해야 해. 가이드라인에서 정한 기본 위계는 이래.

영문과 국문 자료의 타이포그래피 위계(출처: 2026 SIJE CI Guideline)

문장 안에서 특정 단어를 강조할 때는 굵기보다 색을 써. 배경별로 어떤 색을 쓰는지는 2편의 강조 규칙에 정리해 뒀어.

그래픽 모티프: 괄호와 점

그래픽 모티프는 코드 기호에서 출발해. 워드마크의 I와 J가 만든 대괄호, 심볼을 이루는 코너 도트가 그대로 그래픽 요소가 돼.

• Square Bracket Frame: 대괄호는 그 안에 여러 변수가 들어가고, 변수에 따라 솔루션이 달라진다는 개념을 담고 있어. 바깥 모서리는 둥글게(8px), 안쪽 모서리는 직선으로 두고, 가운데 직선은 필요한 만큼 늘릴 수 있어.
• Corner Dot Frame: 심볼의 네 점을 픽셀 형태로 단순화한 프레임이야. 바깥 모서리 8px, 안쪽 직선이라는 규칙은 같아.

이 요소들은 한 단계씩 줄여서 쓸 수 있어. Bracket Frame에서 Corner (Dot) Frame으로, 다시 Corner Dot과 가장 작은 Pixel Dot까지. 코너의 바깥 라운드는 로고의 값과 같게, 안쪽은 라운드 없이 직선으로 유지해.

Type A: 괄호 프레임

1. Full Frame: 화면 전체를 괄호로 감싸고 그 안에 로고, 슬로건, 메시지를 함께 넣어.
2. Text Highlight: 특정 문장이나 키워드를 괄호로 감싸 강조해. 괄호 높이에 맞춰 텍스트 줄 수를 조절할 수 있어.
3. Logo Variation: 워드마크의 괄호를 독립된 그래픽으로 넓혀 써. “SI”와 “JE” 사이 간격은 내용에 따라 조절하고, 텍스트뿐 아니라 이미지도 넣을 수 있어.

Type B: 코너 프레임과 도트

1. Corner Frame: 네 개의 픽셀과 프레임으로 된 도트 그래픽을 텍스트를 묶는 기본 단위로 써. 프레임 간격은 필요에 따라 넓힐 수 있고, 텍스트 대신 이미지를 넣을 수도 있어.
2. Dot Pattern: 크기를 줄여 반복하면 도트 패턴이 돼. 패턴 안에 텍스트, 로고, 심볼을 넣을 수 있지만, 도트와 겹치거나 너무 붙지 않게 해야 해.

픽셀 도트 패턴

시제의 도트 패턴은 사각형 픽셀과 코너 프레임 픽셀이 섞인 구조야. 정해진 배경과 색 조합 밖에서는 쓰지 않아.

• Mono Type: Grid Gray나 Vector Purple 배경 위에 Terminal Black 도트만 써.
• Dual Type: Terminal Black 배경 위에 Grid Gray 도트를 기본으로 쓰고, Vector Purple 도트는 포인트로만 써. 퍼플 도트만 단독으로 쓰지는 않아.
• 두 타입 모두 촘촘한 Dense(배경용, 섬세한 질감)와 간격이 넓은 Wide(개별 도트 강조, 코너 프레임 역할)로 나눠 써.

확장 요소와 아이콘

더 작은 단위의 그래픽 언어도 있어. 점과 기호로 된 Micro Elements, 연결·분리·흐름을 표현하는 Line Elements, 정보의 영역과 관계를 나타내는 Bracket Elements야. 각각 따로 쓸 수 있고, 아이콘과 패턴을 만드는 바탕이 돼.

아이콘은 모두 같은 그리드 위에서 그려. 선 굵기는 3pt/3px (32px 기준), 코너 라운드는 1px로 맞췄어.

모두 합치면

서체와 그래픽을 합친 결과가 키비주얼이야. A Type은 워드마크의 괄호를 가로로 늘려 그 안에 past, present, future 같은 키워드나 시제의 문장을 넣어.

자료 표지와 커뮤니케이션용 보조 그래픽도 같은 요소로 만들어. 괄호, 코너 도트, Roboto Mono로 쓴 짧은 문구만으로도 시제의 자료라는 걸 알아볼 수 있도록 구성했어.

마무리하며

1편부터 3편까지 로고, 컬러, 서체와 그래픽을 차례로 정리했어. 요소마다 규칙을 정해 둔 건 누가 만들어도 같은 시제로 보이게 하기 위해서야.

가이드라인 서문에도 적었듯이, 구성원 각자가 자기 업무와 프로젝트에서 같은 기준으로 브랜드를 표현하는 게 목표야. 디자이너가 아닌 팀원이 제안서나 슬라이드를 만들 때도 이 규칙을 따르면 시제다운 결과물이 나오도록 앞으로도 계속 다듬어 갈게.