Get started
Get started (시작하기)
Carbon으로 디자인을 막 시작하는 분이라면 바로 이곳이 맞아요. 실행하는 데 필요한 모든 것의 체크리스트를 준비했어요.
출처: Get started
본문
1단계: Carbon 알아보기 (Step 1: Learn about Carbon)
Carbon을 도입하면 디자이너는 웹사이트와 사용자 인터페이스를 빠르고 효율적으로 디자인할 수 있는 재사용 가능한 에셋 모음을 얻게 됩니다.
IBM 디자인 언어는 색상, 타이포그래피 스케일, 그리드 등을 포함한 IBM 브랜드의 시각적 표현이에요. Carbon은 이 디자인 언어를 디지털 경험을 구축하기 위한 코드로 변환합니다.
이것은 가이드와 컴포넌트를 통해 모든 종류의 디지털 경험에 적용되도록 만들어진 색상 토큰, 타이포그래피 토큰, 간격 토큰 같은 요소를 통해 이루어집니다.
2단계: 도구 접근하기 (Step 2: Access the tools)
IBM 직원 전용: IBM 직원은 주요 디자인 키트 도구인 Figma 라이선스를 받아야 해요. 우리는 Sketch, Adobe XD, Axure의 라이브러리를 더 이상 유지·지원하지 않지만, 필요하다면 w3 Apps Software Licenses 페이지에서 이 디자인 도구들의 라이선스 가용성을 확인할 수 있어요. 가장 최신 키트를 받으려면 Figma로 마이그레이션할 것을 권장합니다.
3단계: Figma 디자인 키트 받기 (Step 3: Get the Figma design kits)
핵심 Carbon 키트를 Figma에서 유지 관리해요. 이 키트에는 제품과 웹 경험에서 재사용할 수 있는 모든 Carbon 핵심 컴포넌트와 스타일이 포함됩니다. 키트를 사용하면 Carbon 라이브러리에 가해지는 업데이트를 자동으로 받아 디자인이 최신 릴리스와 함께 최신 상태로 유지됩니다. 이를 통해 개발자와 같은 언어를 사용하고 핸드오프·개발 사이클에서 공유된 기능 기대치를 가질 수 있어요.
디자인 키트 섹션으로 이동해 Figma 설정 지침을 따르세요.
핵심 디자인 키트 (Core design kits)
Carbon을 사용하는 모든 사람은 사용자 인터페이스 구축의 출발점으로 다음 Figma 핵심 디자인 키트를 사용해야 해요. 이것은 일관성과 속도를 가져와 팀이 더 구체적인 사용자 과제 해결에 집중할 수 있게 합니다. 핵심 디자인 키트에는 요소, 핵심 컴포넌트, 와이어프레임, 가이드라인이 포함됩니다.
| Maintainer | Design kit | Type |
|---|---|---|
| IBM Brand | IBM® Pictogram Library | Elements |
| IBM Brand | IBM® UI Icon Library | Elements |
| IBM Brand | IBM® Color Library | Elements |
| IBM Brand | (v11) Carbon Type Sets | Elements |
| Carbon Core | (v11) Carbon Design System | UI |
| Carbon Core | [v11 Deprecated] Gray 10 Theme | UI |
| Carbon Core | [v11 Deprecated] Gray 90 Theme | UI |
| Carbon Core | [v11 Deprecated] Gray 100 Theme | UI |
| Accessibility | IBM® Accessibility Design Kit | Guidelines |
Figma Libraries 표의 링크는 미리 보기 전용이에요. 일부 Figma 키트는 내부 IBM 직원용입니다. Figma Libraries 설치와 사용 가능한 외부 라이브러리에 대해 더 알아보려면 Figma 튜토리얼을 방문하세요.
추가 디자인 에셋 (Additional design assets)
v11 Figma 키트 지원이 우선되지만, Figma v10 키트도 제한된 지원으로 제공됩니다. 기타 리소스에서 아이콘 라이브러리, 컬러 팔레트, 플러그인 등에 대한 링크를 찾을 수 있어요. Adobe XD 키트는 더 이상 우선시되거나 유지되지 않지만, 여기에서 접근할 수 있습니다.
4단계: 사용 가이드 검토하기 (Step 4: Review our usage guidance)
사용 가이드는 상세하고 철저하며, 컴포넌트와 패턴 문서를 읽으면서 시스템에 대해 많은 것을 배우게 됩니다.
- 컴포넌트(Components): Carbon은 모든 컴포넌트에 대한 심층적인 디자인 사용과 스타일 가이드를 제공해요. 우리 컴포넌트로 디자인할 때는 이 추가 UX·시각 가이드에 익숙해지는 것이 중요합니다.
- 패턴(Patterns): 사용자가 목표를 달성하는 방법에 대한 모범 사례 해결책인 핵심 패턴 범위도 제공해요. 이 디자인 패턴들은 Carbon으로 구축된 제품에서 수집되었으며, Carbon 거버넌스 팀이 검토하고 사용 승인했습니다.
5단계: 기반 가이드 탐구하기 (Step 5: Explore foundational guidance)
다음 사이트들은 일관된 경험을 만들고, 다른 오퍼링과의 경험 상호운용성을 제공하며, 회사로서 IBM을 대표하는 경험을 만드는 가이드를 제공합니다.
일부 콘텐츠는 IBM 직원만 접근할 수 있어요.
| Resource | What you’ll find |
|---|---|
| IBM Brand Center | IBM 브랜드 스토리, 시각적 브랜드 요소, 가이드라인, 에셋의 홈 베이스예요. |
| IBM Brand Systems | IBM 사업, 대상 고객, 카테고리, 오퍼링의 모든 시각적·언어적 세부 사항 뒤의 근거에 대한 문서예요. |
| IBM Design Language | IBM이 설계한 모든 경험을 지배하고 안내하는 IBM의 디자인 철학과 원칙이에요. |
| IBM Style | 외부 대상 고객을 위한 모든 IBM 콘텐츠가 문법적으로 정확하고, 명확하며, 일관되고, 글로벌 대상에 적합하며, 번역하기 쉬운지 보장하는 중앙 참조 자료예요. |
| IBM Experience Standards | IBM에서 우리 표준에 대한 공유된 정의, 우수성을 측정하는 방법, 제품·서비스 경험을 개선하는 실행 가능한 방법을 제공해요. |
| IBM Accessibility | 제품을 더 접근성 있게 만드는 방법에 대한 분야별 방향을 제공해요. |
6단계: 우리와 연결하기 (Step 6: Connect with us)
우리와 Carbon 커뮤니티에 함께하세요
IBM 직원 전용: 키트나 도구의 어떤 측면에 대한 질문이 있다면 Slack에서 우리에게 연락해 동료 디자이너와 연결하는 방법으로 사용하세요. 누군가 당신과 비슷한 문제를 겪었고 도와줄 가능성이 높아요.
- #carbon-design-system
- #carbon-tutorial
그리고 #carbon-announcements에서 최신 Carbon 소식을 꼭 구독하세요.
우리가 하는 일 알아보기 (Learn about what we’re doing)
Carbon의 최신 변경 사항과 향후 계획은 Releases 페이지에서 확인할 수 있습니다.
질문이 있다면 contact us를 통해 연락하는 모든 방법이 여기 있어요.
미트업에 함께하세요 (Join us at a meetup)
우리와 연결하고 스킬을 높이려면 미트업 중 하나에 참석하세요. 격주 디자인 플레이백은 당신의 성공에 헌신하는 디자이너와 디자인 리더 그룹으로부터 작업 진행 중인 것에 대한 피드백을 받기에 좋아요.
특별히 관심 있는 것이 있다면 당신의 이야기를 듣고 싶습니다.
혜택 알아보기 (Learn about the benefits)
디자이너로서 Carbon 사용의 혜택과 Carbon이 제품 팀의 모든 구성원에게 주는 이점에 대해 더 알아보세요.
더 알아보기 (Learn more)
Carbon으로 디자인 시작은 여섯 단계 체크리스트로 진행돼요. Carbon과 IBM 디자인 언어를 이해하고, Figma 도구와 핵심 디자인 키트를 받은 뒤, 컴포넌트·패턴 사용 가이드를 검토하고 IBM 브랜드·접근성 기반 가이드를 탐구하세요. 마지막으로 Slack과 미트업, Releases 페이지를 통해 커뮤니티와 연결하면 됩니다.