IBM에서 영감을 받은 디자인 시스템

Category: 미디어 & 소비자 엔터프라이즈 기술. Carbon 디자인 시스템, 구조화된 블루 팔레트.

1. 비주얼 테마 & 분위기

IBM 웹사이트는 Carbon 디자인 시스템 위에 구축된 엔터프라이즈 권위의 디지털 구현입니다. 이 디자인 언어는 체계적으로 구조화되어 웹페이지로 렌더링된 엔지니어링 사양서처럼 읽힙니다. 페이지는 선명한 이중성으로 작동합니다. 밝은 흰색(#ffffff) 캔버스에 거의 검은색(#161616) 텍스트, 단 하나의 흔들림 없는 액센트——IBM 블루 60(#0f62fe). 이것은 스타트업식 장난스러운 미니멀리즘이 아닙니다. 기업의 정밀함을 픽셀로 증류한 것입니다. 모든 요소는 Carbon의 엄격한 2x 그리드 안에 존재하고, 모든 색상은 시맨틱 토큰에 매핑되며, 모든 간격 값은 8px 기본 단위에 스냅됩니다.

IBM Plex 타입 패밀리는 이 시스템의 근간입니다. 라이트 웨이트(300)의 IBM Plex Sans를 디스플레이 헤드라인에 사용하면 큰 크기에서 예상치 못하게 가볍고 섬세한 질감이 만들어집니다. 이는 IBM의 기업적 중후함에 대한 의도적인 대위법입니다. 바디 크기에서는 14px 캡션에 0.16px 레터 스페이싱을 가진 레귤러 웨이트(400)가 세심한 마이크로 트래킹을 도입하여 Carbon 텍스트가 디자인된 것이 아니라 엔지니어링된 것처럼 느껴지게 합니다. IBM Plex Mono는 코드, 데이터, 기술 레이블에 사용되며, 거의 사용되지 않는 IBM Plex Serif와 함께 패밀리 삼위일체를 완성합니다.

모노크롬 플러스 블루를 넘어 IBM의 비주얼 아이덴티티를 정의하는 것은 Carbon의 컴포넌트 토큰 시스템에 대한 의존입니다. 모든 인터랙티브 상태는 --cds-(Carbon Design System) 접두사를 가진 CSS 사용자 정의 속성에 매핑됩니다. 버튼에는 하드코딩된 색상이 없습니다. --cds-button-primary, --cds-button-primary-hover, --cds-button-primary-active를 참조합니다. 이 토큰화된 아키텍처는 전체 비주얼 레이어가 깊이 체계화된 기반 위의 얇은 껍질임을 의미합니다——잘 타입화된 API에 해당하는 디자인입니다.

주요 특징:

• 디스플레이용 IBM Plex Sans 웨이트 300(라이트) — 타이포그래픽 절제를 통한 기업적 중후함
• 코드와 기술 콘텐츠용 IBM Plex Mono, 소형 크기에서 일관된 0.16px 레터 스페이싱
• 단일 액센트 색상: IBM 블루 60(#0f62fe) — 모든 인터랙티브 요소, 모든 CTA, 모든 링크
• Carbon 토큰 시스템(--cds-*)이 모든 시맨틱 색상을 구동, 변수 수준에서 테마 전환 가능
• 8px 간격 그리드 엄격 준수 — 임의 값 없음, 모든 것이 정렬
• #f4f4f4 그레이 10 표면의 플랫하고 보더 없는 카드 — 그림자가 아닌 배경색 레이어링으로 깊이 표현
• 하단 보더 인풋(박스형이 아님) — Carbon 폼의 시그니처 패턴
• 프라이머리 버튼 보더 반경 0px — 타협 없는 직사각형, 부드러움 없음

2. 컬러 팔레트 & 역할

프라이머리

• IBM 블루 60(#0f62fe): 유일한 인터랙티브 색상. 프라이머리 버튼, 링크, 포커스 상태, 액티브 인디케이터. 이것이 핵심 UI 팔레트에서 유일한 유채색입니다.
• 화이트(#ffffff): 페이지 배경, 카드 표면, 블루 위의 버튼 텍스트, --cds-background.
• 그레이 100(#161616): 프라이머리 텍스트, 제목, 다크 표면 배경, 내비 바, 푸터. --cds-text-primary.

뉴트럴 스케일(그레이 패밀리)

• 그레이 100(#161616): 프라이머리 텍스트, 제목, 다크 UI 크롬, 푸터 배경.
• 그레이 90(#262626): 보조 다크 표면, 다크 배경의 호버 상태.
• 그레이 80(#393939): 3차 다크, 액티브 상태.
• 그레이 70(#525252): 보조 텍스트, 헬퍼 텍스트, 설명. --cds-text-secondary.
• 그레이 60(#6f6f6f): 플레이스홀더 텍스트, 비활성화 텍스트.
• 그레이 50(#8d8d8d): 비활성화 아이콘, 뮤트 레이블.
• 그레이 30(#c6c6c6): 보더, 구분선, 인풋 하단 보더. --cds-border-subtle.
• 그레이 20(#e0e0e0): 서브틀 보더, 카드 아웃라인.
• 그레이 10(#f4f4f4): 보조 표면 배경, 카드 채우기, 교대 행. --cds-layer-01.
• 그레이 10 호버(#e8e8e8): 그레이 10 표면의 호버 상태.

인터랙티브

• 블루 60(#0f62fe): 프라이머리 인터랙티브 — 버튼, 링크, 포커스. --cds-link-primary, --cds-button-primary.
• 블루 70(#0043ce): 링크 호버 상태. --cds-link-primary-hover.
• 블루 80(#002d9c): 블루 요소의 액티브/프레스 상태.
• 블루 10(#edf5ff): 블루 틴트 표면, 선택된 행 배경.
• 포커스 블루(#0f62fe): --cds-focus — 포커스된 요소의 2px 인셋 보더.
• 포커스 인셋(#ffffff): --cds-focus-inset — 다크 배경의 포커스를 위한 흰색 내부 링.

지원 & 상태

• 레드 60(#da1e28): 오류, 위험. --cds-support-error.
• 그린 50(#24a148): 성공. --cds-support-success.
• 옐로 30(#f1c21b): 경고. --cds-support-warning.
• 블루 60(#0f62fe): 정보. --cds-support-info.

다크 테마(그레이 100 테마)

• 배경: 그레이 100(#161616). --cds-background.
• 레이어 01: 그레이 90(#262626). 카드와 컨테이너 표면.
• 레이어 02: 그레이 80(#393939). 상승된 표면.
• 프라이머리 텍스트: 그레이 10(#f4f4f4). --cds-text-primary.
• 보조 텍스트: 그레이 30(#c6c6c6). --cds-text-secondary.
• 서브틀 보더: 그레이 80(#393939). --cds-border-subtle.
• 인터랙티브: 블루 40(#78a9ff). 링크와 인터랙티브 요소는 대비를 위해 밝아집니다.

3. 타이포그래피 규칙

폰트 패밀리

• 프라이머리: IBM Plex Sans, 폴백: Helvetica Neue, Arial, sans-serif
• 모노스페이스: IBM Plex Mono, 폴백: Menlo, Courier, monospace
• 세리프(제한 사용): IBM Plex Serif, 에디토리얼/표현적 컨텍스트용
• 아이콘 폰트: ibm_icons — 20px 전용 아이콘 글리프

계층

원칙

• 디스플레이 크기에서 라이트 웨이트: Carbon의 표현적 타입 세트는 42px 이상에서 웨이트 300(라이트)을 사용합니다. 이는 독특한 긴장감을 만들어냅니다——콘텐츠는 기업의 권위로 말하지만 레터 폼은 타이포그래픽 가벼움으로 속삭입니다.
• 소형 크기에서의 마이크로 트래킹: 14px에서 0.16px 레터 스페이싱, 12px에서 0.32px. 이 사소해 보이는 값들은 컴팩트한 크기에서 가독성을 위한 Carbon의 비밀 무기입니다——촘촘한 IBM Plex 레터 폼을 딱 적당히 열어줍니다.
• 세 가지 기능적 웨이트: 300(디스플레이/표현적), 400(바디/읽기), 600(강조/UI 레이블). 웨이트 700은 의도적으로 프로덕션 타입 스케일에서 제외됩니다.
• 프로덕티브 vs. 익스프레시브: 프로덕티브 세트는 밀도 높은 UI를 위해 타이트한 행간(1.29)을 사용합니다. 익스프레시브 세트는 마케팅 및 에디토리얼 콘텐츠를 위해 더 여유롭습니다(1.40-1.50).

4. 컴포넌트 스타일링

버튼

프라이머리 버튼(블루)

• 배경: #0f62fe(블루 60) → --cds-button-primary
• 텍스트: #ffffff(화이트)
• 패딩: 14px 63px 14px 15px(비대칭 — 후행 아이콘 공간)
• 보더: 1px solid transparent
• 보더 반경: 0px(샤프 직사각형 — Carbon 시그니처)
• 높이: 48px(기본), 40px(컴팩트), 64px(익스프레시브)
• 호버: #0353e9(블루 60 호버) → --cds-button-primary-hover
• 액티브: #002d9c(블루 80) → --cds-button-primary-active
• 포커스: 2px solid #0f62fe 인셋 + 1px solid #ffffff 내부

보조 버튼(그레이)

• 배경: #393939(그레이 80)
• 텍스트: #ffffff
• 호버: #4c4c4c(그레이 70)
• 액티브: #6f6f6f(그레이 60)
• 프라이머리와 동일한 패딩/반경

3차 버튼(고스트 블루)

• 배경: transparent
• 텍스트: #0f62fe(블루 60)
• 보더: 1px solid #0f62fe
• 호버: #0353e9 텍스트 + 블루 10 배경 틴트
• 보더 반경: 0px

고스트 버튼

• 배경: transparent
• 텍스트: #0f62fe(블루 60)
• 패딩: 14px 16px
• 보더: 없음
• 호버: #e8e8e8 배경 틴트

데인저 버튼

• 배경: #da1e28(레드 60)
• 텍스트: #ffffff
• 호버: #b81921(레드 70)

카드 & 컨테이너

• 배경: 화이트 테마에서 #ffffff, 상승된 카드에서 #f4f4f4(그레이 10)
• 보더: 없음(플랫 디자인 — 대부분의 카드에 보더나 그림자 없음)
• 보더 반경: 0px(직사각형 버튼 미학과 일치)
• 호버: 클릭 가능한 카드는 배경이 #e8e8e8(그레이 10 호버)로 변경
• 콘텐츠 패딩: 16px
• 구분: 그림자가 아닌 배경색 레이어링(화이트 → 그레이 10 → 화이트)

인풋 & 폼

• 배경: #f4f4f4(그레이 10) — --cds-field
• 텍스트: #161616(그레이 100)
• 패딩: 0px 16px(수평만)
• 높이: 40px(기본), 48px(라지)
• 보더: 사이드/탑 없음 — 바텀 2px solid transparent
• 바텀 보더 액티브: 2px solid #161616(그레이 100)
• 포커스: 2px solid #0f62fe(블루 60) 바텀 보더 — --cds-focus
• 오류: 2px solid #da1e28(레드 60) 바텀 보더
• 레이블: 12px IBM Plex Sans, 0.32px 레터 스페이싱, 그레이 70
• 헬퍼 텍스트: 12px, 그레이 60
• 플레이스홀더: 그레이 60(#6f6f6f)
• 보더 반경: 0px(탑) — 인풋은 샤프 코너

내비게이션

• 배경: #161616(그레이 100) — 전체 너비 다크 마스트헤드
• 높이: 48px
• 로고: IBM 8바 로고, 다크 위의 화이트, 좌측 정렬
• 링크: 14px IBM Plex Sans, 웨이트 400, #c6c6c6(그레이 30) 기본
• 링크 호버: #ffffff 텍스트
• 액티브 링크: 바텀 보더 인디케이터 포함 #ffffff
• 플랫폼 스위처: 좌측 정렬 수평 탭
• 검색: 아이콘 트리거 슬라이드 아웃 검색 필드
• 모바일: 좌측 슬라이딩 패널 포함 햄버거

링크

• 기본: #0f62fe(블루 60), 밑줄 없음
• 호버: #0043ce(블루 70), 밑줄 포함
• 방문됨: 블루 60 유지(방문됨 상태 변화 없음)
• 인라인 링크: 본문에서 기본적으로 밑줄

특징적인 컴포넌트

콘텐츠 블록(히어로/피처)

• 전체 너비 교대 화이트/그레이-10 배경 밴드
• 60px 또는 48px 디스플레이 타입으로 좌측 정렬 헤드라인
• 화살표 아이콘 포함 블루 프라이머리 버튼을 CTA로
• 이미지/일러스트는 모바일에서 우측 정렬 또는 하단에 배치

타일(클릭 가능한 카드)

• 배경: #f4f4f4 또는 #ffffff
• 전체 너비 바텀 보더 또는 배경 변경 호버
• 호버 시 우측 하단에 화살표 아이콘
• 그림자 없음 — 평면성이 정체성

태그/레이블

• 배경: 10% 불투명도의 컨텍스트 색상(예: 블루 10, 레드 10)
• 텍스트: 대응하는 60등급 색상
• 패딩: 4px 8px
• 보더 반경: 24px(필 — 0px 규칙의 예외)
• 폰트: 12px 웨이트 400

알림 배너

• 전체 너비 바, 일반적으로 블루 60 또는 그레이 100 배경
• 화이트 텍스트, 14px
• 닫기/해제 아이콘 우측 정렬

5. 레이아웃 원칙

간격 시스템

• 기본 단위: 8px(Carbon 2x 그리드)
• 컴포넌트 간격 스케일: 2px, 4px, 8px, 12px, 16px, 24px, 32px, 40px, 48px
• 레이아웃 간격 스케일: 16px, 24px, 32px, 48px, 64px, 80px, 96px, 160px
• 미니 단위: 8px(최소 사용 가능 간격)
• 컴포넌트 내 패딩: 일반적으로 16px
• 카드/타일 간 간격: 1px(헤어라인) 또는 16px(표준)

그리드 & 컨테이너

• 16컬럼 그리드(Carbon의 2x 그리드 시스템)
• 최대 콘텐츠 너비: 1584px(최대 브레이크포인트)
• 컬럼 거터: 32px(모바일 16px)
• 마진: 16px(모바일), 32px(태블릿 이상)
• 읽기 좋은 행 길이를 위해 콘텐츠는 일반적으로 8-12컬럼에 걸쳐
• 전체 블리드 섹션과 제한된 콘텐츠가 교대로

화이트스페이스 철학

• 기능적 밀도: Carbon은 광활한 화이트스페이스보다 생산적 밀도를 선호합니다. 섹션은 소비자 디자인 시스템에 비해 촘촘하게 채워집니다——이것은 IBM의 엔터프라이즈 DNA를 반영합니다.
• 배경색 조닝: IBM은 섹션 간 대형 패딩 대신 교대 배경색(화이트 → 그레이 10 → 화이트)을 사용하여 최소한의 수직 공간으로 시각적 분리를 만듭니다.
• 일관된 48px 리듬: 주요 섹션 전환에는 48px 수직 간격을 사용합니다. 히어로 섹션은 80px–96px를 사용할 수 있습니다.

보더 반경 스케일

• 0px: 프라이머리 버튼, 인풋, 타일, 카드 — 지배적인 처리. Carbon은 근본적으로 직사각형입니다.
• 2px: 가끔 소형 인터랙티브 요소(태그)에 사용
• 24px: 태그/레이블(필 형태 — 유일한 둥근 예외)
• 50%: 아바타 원형, 아이콘 컨테이너

6. 깊이 & 엘리베이션

그림자 철학: Carbon은 의도적으로 그림자를 피합니다. IBM은 주로 배경색 레이어링을 통해 깊이를 달성합니다——박스 섀도우를 추가하는 것이 아니라 점점 어두워지는 회색 표면을 쌓습니다. 이는 계층이 시뮬레이션된 빛이 아닌 색 값으로 전달되는 플랫하고 인쇄물에서 영감 받은 미학을 만들어냅니다. 그림자는 콘텐츠 위에 진짜로 떠 있는 요소(드롭다운, 툴팁, 모달)에만 사용됩니다. 이 자제력은 드문 그림자에 의미 있는 임팩트를 부여합니다——Carbon에서 무언가가 떠 있을 때, 그것은 중요합니다.

7. 해야 할 것과 하지 말아야 할 것

해야 할 것

• 디스플레이 크기(42px 이상)에는 IBM Plex Sans 웨이트 300을 사용 — 가벼움은 의도적인 것
• 14px 바디 텍스트에 0.16px 레터 스페이싱, 12px 캡션에 0.32px 적용
• 버튼, 인풋, 카드, 타일에는 0px 보더 반경 — 직사각형이 시스템의 언어
• 구현 시 --cds-* 토큰 이름 참조(예: --cds-button-primary, --cds-text-primary)
• 그림자 대신 배경색 레이어링(화이트 → 그레이 10 → 그레이 20)으로 깊이 표현
• 인풋 필드 인디케이터에 바텀 보더(박스형 아님) 사용
• 48px 기본 버튼 높이와 아이콘 수용을 위한 비대칭 패딩 유지
• 블루 60(#0f62fe)을 유일한 액센트로 적용 — 하나의 블루로 모든 것을 지배

하지 말아야 할 것

• 버튼 코너를 둥글게 하지 않기 — 0px 반경이 Carbon의 정체성
• 카드나 타일에 그림자 사용 금지 — 평면성이 핵심
• 추가 액센트 색상 도입 금지 — IBM의 시스템은 모노크롬 + 블루
• 웨이트 700(볼드) 사용 금지 — 스케일은 600(세미볼드)에서 멈춤
• 디스플레이 크기 텍스트에 레터 스페이싱 추가 금지 — 트래킹은 14px 이하에만
• 전체 보더로 인풋 박스화 금지 — Carbon 인풋은 바텀 보더만 사용
• 그라디언트 배경 사용 금지 — IBM 표면은 플랫한 솔리드 색상
• 8px 간격 그리드에서 벗어나지 않기 — 모든 값은 8로 나눠질 수 있어야 함(미세 조정에는 2px와 4px)

8. 반응형 동작

브레이크포인트

터치 타겟

• 버튼 높이: 48px 기본, 최소 40px(컴팩트)
• 내비게이션 링크: 터치용 48px 행 높이
• 인풋 높이: 40px 기본, 48px 라지
• 아이콘 버튼: 48px 정사각형 터치 타겟
• 모바일 메뉴 항목: 전체 너비 48px 행

접기 전략

• 히어로: 뷰포트가 좁아짐에 따라 60px 디스플레이 → 42px → 32px 제목
• 내비게이션: 전체 수평 마스트헤드 → 슬라이드 아웃 패널 포함 햄버거
• 그리드: 4컬럼 → 2컬럼 → 단일 컬럼
• 타일/카드: 수평 그리드 → 수직 스택
• 이미지: 가로세로 비율 유지, max-width 100%
• 푸터: 다중 컬럼 링크 그룹 → 스택 단일 컬럼
• 섹션 패딩: 48px → 32px → 16px

이미지 동작

• max-width: 100%의 반응형 이미지
• 제품 일러스트는 비율을 유지하며 스케일
• 히어로 이미지는 나란히 배치에서 하단 스택으로 이동할 수 있음
• 데이터 시각화는 모바일에서 가로세로 비율 유지, 수평 스크롤

9. 에이전트 프롬프트 가이드

빠른 색상 참조

• 프라이머리 CTA: IBM 블루 60(#0f62fe)
• 배경: 화이트(#ffffff)
• 제목 텍스트: 그레이 100(#161616)
• 바디 텍스트: 그레이 100(#161616)
• 보조 텍스트: 그레이 70(#525252)
• 표면/카드: 그레이 10(#f4f4f4)
• 보더: 그레이 30(#c6c6c6)
• 링크: 블루 60(#0f62fe)
• 링크 호버: 블루 70(#0043ce)
• 포커스 링: 블루 60(#0f62fe)
• 오류: 레드 60(#da1e28)
• 성공: 그린 50(#24a148)

컴포넌트 프롬프트 예시

• “화이트 배경에 히어로 섹션 생성. 60px IBM Plex Sans 웨이트 300의 헤드라인, 행간 1.17, 색상 #161616. 16px 웨이트 400의 서브타이틀, 행간 1.50, 색상 #525252, 최대 너비 640px. 블루 CTA 버튼(#0f62fe 배경, #ffffff 텍스트, 0px 보더 반경, 48px 높이, 14px 63px 14px 15px 패딩).”
• “카드 타일 디자인: #f4f4f4 배경, 0px 보더 반경, 16px 패딩. 타이틀은 20px IBM Plex Sans 웨이트 600, 행간 1.40, 색상 #161616. 바디는 14px 웨이트 400, 레터 스페이싱 0.16px, 행간 1.29, 색상 #525252. 호버: 배경이 #e8e8e8로 변경.”
• “폼 필드 구축: #f4f4f4 배경, 0px 보더 반경, 40px 높이, 16px 수평 패딩. 위 레이블은 12px 웨이트 400, 레터 스페이싱 0.32px, 색상 #525252. 바텀 보더: 기본 2px solid transparent, 포커스 시 2px solid #0f62fe. 플레이스홀더: #6f6f6f.”
• “다크 내비게이션 바 생성: #161616 배경, 48px 높이. IBM 로고 화이트 좌측 정렬. 링크는 14px IBM Plex Sans 웨이트 400, 색상 #c6c6c6. 호버: #ffffff 텍스트. 액티브: 2px 바텀 보더 포함 #ffffff.”
• “태그 컴포넌트 구축: 블루 10(#edf5ff) 배경, 블루 60(#0f62fe) 텍스트, 4px 8px 패딩, 24px 보더 반경, 12px IBM Plex Sans 웨이트 400.”

반복 가이드

1. 버튼, 인풋, 카드에는 항상 0px 보더 반경 — Carbon에서 협상 불가
2. 레터 스페이싱은 소형 크기에만: 14px에서 0.16px, 12px에서 0.32px — 디스플레이 텍스트에는 절대 금지
3. 세 가지 웨이트: 300(디스플레이), 400(바디), 600(강조) — 볼드 없음
4. 블루 60이 유일한 액센트 색상 — 보조 액센트 색조 도입 금지
5. 깊이는 배경색 레이어링(화이트 → #f4f4f4 → #e0e0e0)에서, 그림자가 아님
6. 인풋은 바텀 보더만, 전체 박스화 금지
7. Carbon 호환성 유지를 위해 --cds- 접두사로 토큰 이름 지정
8. 48px가 범용 인터랙티브 요소 높이