제품 디자인 및 UI/UX

디자인 시스템

귀사 제품이 어떻게 보이고 작동하는지에 대한 하나의 공유된 출처입니다. 제품과 팀이 성장하는 동안 디자인과 코드의 일관성을 유지하는 토큰, 컴포넌트, 문서화를 제공합니다.

프로젝트 논의하기귀사의 디자인 시스템을 논의하세요

공유 시스템이 필요한 곳

새로운 브랜드 색상이나 더 나은 포커스 스타일 같은 간단한 변경조차도, 디자인과 코드가 더 이상 같은 부품을 공유하지 않기 때문에 모든 제품에서 화면마다 일일이 적용해야 합니다. 디자인 시스템은 모든 팀에게 구축의 기반이 되는 동일하게 관리된 부품 세트를 제공합니다.

  • 여러 스쿼드가 동시에 같은 제품에 UI를 출시하는 조직
  • 인수했거나 별도로 구축한 제품을 하나의 제품군으로 통합하는 기업
  • 공유 UI를 버전 관리되고 유지되는 패키지로 전환하라는 요청을 받은 프런트엔드 플랫폼 팀

디자이너와 개발자가 공유하는 일관성

모든 팀이 각자의 버튼, 폼, 모달을 만들면 제품은 어긋납니다. 일관되지 않은 화면, 반복되는 작업, 한 곳에서는 적용되었지만 다른 곳에서는 적용되지 않은 접근성 수정이 생깁니다. 저희는 디자인과 코드를 연결하는 디자인 시스템을 구축합니다. 토큰, Figma 라이브러리, 코드화된 컴포넌트, 문서화에 더해, 시스템이 최신 상태로 유지되도록 거버넌스를 포함합니다. 이는 성장하는 SaaS 제품, 여러 제품을 보유한 기업, 새로운 프런트엔드로 이전하는 팀에 적합합니다. 저희는 디자인 측면만 또는 디자인부터 코드까지 전체 시스템을 제공할 수 있습니다.

AI 지원 감사, 전문가가 소유하는 표준

AI가 돕는 방식

  • 귀사의 화면과 코드베이스를 목록화하여 중복 컴포넌트와 하드코딩된 색상 및 간격을 나열합니다.
  • 디자이너와 엔지니어가 검토할 수 있도록 컴포넌트 문서, 사용 가이드라인, 코드 예시를 초안으로 작성합니다.
  • 엔지니어링 검토하에, 승인된 디자인으로부터 코드화된 컴포넌트, Storybook 스토리, 테스트를 스캐폴딩합니다.
  • 풀 리퀘스트에서 시스템에 없는 색상, 간격, 컴포넌트를 표시하여 코드 검토 과정에서 어긋남을 잡아냅니다.

전문가가 책임지는 부분

  • 디자이너와 엔지니어가 토큰 아키텍처, 네이밍, 테마 전략을 소유합니다.
  • 엔지니어가 각 컴포넌트의 API, 동작, 상태를 정의하고 모든 AI 지원 변경을 검토합니다.
  • 접근성은 컴포넌트별로 검증됩니다: 키보드 동작, 포커스, ARIA 역할, 대비, 스크린 리더 출력.
  • 사람이 거버넌스를 소유합니다: 무엇이 시스템에 들어오는지, 버전 관리, 지원 중단, 기여 규칙.

시스템의 각 계층이 담고 있는 것

다중 제품 웹 시스템을 위한 일반적인 계층입니다. 각 계층에 무엇이 들어갈지는 귀사의 감사가 결정합니다.

  • 토큰과 테마

    • 색상, 타입 스케일, 간격, 모서리 반경에 대한 기본 값
    • 컴포넌트가 사용하는 surface, border, danger 같은 시맨틱 별칭
    • 별칭 값을 교체하여 만든 라이트, 다크, 브랜드 테마
    • 인터랙션 스펙과 공유되는, 지속 시간과 이징을 위한 모션 토큰
    • CSS 변수로, 그리고 필요한 경우 iOS 및 Android 포맷으로 내보내기

  • 컴포넌트와 상태

    • 토큰만으로 구축된 버튼, 입력란, 선택란, 모달, 테이블
    • 컴포넌트당 하나의 스펙: props, 변형, 상태, 키보드 동작
    • 코딩된 컴포넌트의 props와 일치하는 Figma 변형 이름
    • 더 작은 컴포넌트들로 조립된 날짜 선택기, 콤보박스 같은 복합 부품

  • 패턴, 지침, 거버넌스

    • 컴포넌트를 결합하는 패턴: 폼 레이아웃, 필터링, 일괄 작업, 온보딩
    • 각 패턴을 언제 사용해야 하는지, 그리고 언제 사용하지 말아야 하는지에 대한 지침
    • 기여 경로: 제안, 디자인 및 코드 검토, 그 다음 버전 관리된 릴리스
    • 초안부터 폐기까지의 컴포넌트 상태, 호환성을 깨는 변경에 대한 마이그레이션 노트 포함

디자인 시스템을 구축하는 방법

  1. 01

    감사

    AI 지원 분석으로 귀사의 현재 UI와 코드를 목록화한 뒤 우선순위를 합의합니다: 무엇을 먼저 표준화하고 무엇을 폐기할지.

  2. 02

    기초

    색상, 타입, 간격, 모션을 위한 토큰으로, 네이밍과 테마 규칙은 디자이너와 엔지니어 간에 합의됩니다.

  3. 03

    컴포넌트

    Figma에서 디자인되고, 범위에 포함될 때 코드로 구축되는 컴포넌트로, 각각 반영될 때 동작과 접근성이 검토됩니다.

  4. 04

    문서화 및 채택

    문서화, 기여 규칙, 귀사 팀과의 설명 세션에 더해, 제품이 시스템으로 이전할 때의 마이그레이션 지원을 제공합니다.

AI 도구와 함께 작업하는 두 가지 방법

AI는 허용된 리서치를 종합하고 디자인을 탐색하도록 돕습니다. 리서치와 파일을 어디에서 처리할 수 있는지 선택하세요.

확실하지 않으신가요? 범위 지정 중에 저희가 하나를 추천하겠습니다. AI 딜리버리 옵션 비교하기

받게 되는 것

디자인과 코드를 위한 시스템

  • UI 감사 및 목록화

    이미 보유한 컴포넌트, 패턴, 스타일의 카탈로그로, 중복, 불일치, 접근성 격차에 우선순위를 매깁니다.

  • 디자인 토큰

    색상, 타입, 간격, 반경, 엘리베이션, 모션 토큰으로, 라이트, 다크 또는 브랜드 테마를 포함하며, 필요에 따라 웹, iOS, Android용으로 내보냅니다.

  • Figma 컴포넌트 라이브러리

    토큰을 기반으로 구축되고 코드와 일치하도록 이름이 지정된, 변형, 속성, 모든 인터랙션 상태를 갖춘 컴포넌트입니다.

  • 코드화된 컴포넌트

    React 또는 귀사의 프레임워크로 된 컴포넌트로, 타입이 지정된 props, 테스트, 접근 가능한 동작을 갖추고, 범위에 포함될 때 버전 관리되는 패키지로 게시됩니다.

  • 문서화 사이트

    각 컴포넌트에 대한 라이브 예시, 사용 가이드, 해야 할 것과 하지 말아야 할 것, 접근성 참고 사항을 갖춘 Storybook 또는 맞춤형 문서 사이트입니다.

  • 거버넌스 및 버전 관리

    기여 규칙, 검토 단계, 릴리스 노트, 지원 중단 절차로, 시스템이 통제된 방식으로 변경됩니다.

일반적인 디자인 시스템 요청

고객 사례 연구가 아니라, 저희가 범위를 정하는 일반적인 시나리오입니다.

  • 여러 제품에 걸친 리브랜딩

    웹 앱, 모바일 앱, 관리자 도구를 보유한 기업이 브랜드 색상을 변경합니다. 우리는 먼저 색상을 테마화된 토큰으로 옮겨서, 모든 제품이 같은 곳에서 새로운 팔레트를 가져오도록 합니다.

  • Figma와 코드의 불일치

    디자이너는 개발자가 더 이상 사용하지 않는 Figma 라이브러리를 유지하는 반면, React 컴포넌트는 자체적인 간격과 색상을 가지고 있습니다. 우리는 둘 다 감사하고, 각 컴포넌트의 어느 버전을 표준으로 삼을지 합의하며, 디자인과 코드가 일치하도록 이름을 맞춥니다.

  • 모든 제품을 위한 접근성 수정

    접근성 검토 결과 여러 제품에서 사용되는 날짜 선택기, 모달, 드롭다운에서 포커스 및 키보드 문제가 발견됩니다. 우리는 공유 컴포넌트에서 이를 한 번에 수정하고, 기대되는 키보드 동작을 문서화하며, 각 제품이 채택할 수 있는 버전을 게시합니다.

이 작업이 다루지 않는 것

  • 제품의 개별 화면을 디자인하는 것은 이 작업에 포함되지 않습니다. 화면별 UI는 Figma & Visual Design이며, 이는 시스템을 기반으로 구축할 수 있습니다.
  • 모션 토큰은 포함됩니다. 그것들을 사용하는 전환, 제스처, 안무를 디자인하는 것은 Interaction Design입니다.
  • 각 제품의 기존 화면을 시스템으로 옮기는 것은 제품 개발이며 별도로 범위가 정해집니다. 시스템은 마이그레이션 노트와 우리가 합의한 지원과 함께 제공됩니다.
  • 시스템은 인수인계 후 귀사 측에 지정된 담당자가 필요하거나, 우리와의 합의된 유지보수 계약이 필요합니다. 그렇지 않으면 이탈이 다시 발생합니다.

시스템이 빌드, QA, 릴리스를 지원하는 방식

  • 엔지니어는 공유 부품으로 빌드합니다

    개발자는 컴포넌트를 다시 만드는 대신 테스트된 컴포넌트와 토큰으로 화면을 구성하며, 디자인 변경은 코드에 직접 매핑됩니다.

  • 컴포넌트 수준의 QA

    컴포넌트는 자체 비주얼 회귀 및 접근성 점검을 포함하므로, 릴리스 테스트는 여정과 비즈니스 규칙에 집중할 수 있습니다.

  • 통제된 시스템 릴리스

    버전 관리되는 패키지, 변경 로그, 마이그레이션 노트를 통해 각 제품이 예기치 않게가 아니라 의도적으로 시스템 업데이트를 채택할 수 있습니다.

  • 성장하는 동안 유지 관리됩니다

    저희는 출시 후에도 시스템을 유지 관리할 수 있습니다: 컴포넌트 추가, 기여 검토, 디자인과 코드의 보조 유지.

FAQ

자주 묻는 질문

아직 디자인 시스템이 필요할까요?

여러 사람이 제품을 디자인하거나 구축할 때, 동일한 컴포넌트가 서로 다른 방식으로 다시 만들어질 때, 또는 두 개 이상의 제품이나 플랫폼을 운영할 때 보통 그 가치가 발휘됩니다. 초기 제품의 경우, 저희는 더 가벼운 시작을 권할 수 있습니다: 토큰과 핵심 컴포넌트로 시작해 제품이 성장하면서 확장하는 것입니다.

기존 컴포넌트를 기반으로 구축할 수 있나요?

네. 저희는 귀사가 보유한 것을 감사하고, 효과적인 것은 유지하며, 나머지는 표준화하고 격차를 채웁니다. 마이그레이션은 점진적으로 진행될 수 있어, 시스템이 도입되는 동안 제품 작업이 멈추지 않습니다.

코드화된 라이브러리를 구축하나요, 아니면 Figma 측면만 구축하나요?

둘 다 가능합니다. 디자인만 진행하는 계약은 귀사 개발자를 위한 Figma 라이브러리, 토큰, 구현 가이드를 제공합니다. 코드화된 컴포넌트도 원하신다면, 저희 엔지니어가 귀사의 스택에서 이를 구축하고 테스트합니다. 문서화 사이트의 호스팅은 별도로 합의됩니다.

AI가 컴포넌트 구축을 도울 때 우리 코드는 어디에서 처리되나요?

작업을 시작하기 전에 합의됩니다. 프라이빗 / 로컬 AI 엔지니어링에서는 AI 처리가 합의된 경계 내부에서 비공개로 호스팅된 모델에서 실행됩니다. Claude Code / OpenAI Codex 엔지니어링에서는 상업용 코딩 에이전트가 합의된 계정, 데이터 처리 및 보존 설정에 따라 작동합니다. 어느 방식이든 엔지니어가 모든 변경 사항을 검토합니다.

팀이 실제로 사용할 시스템을 구축하세요

귀사의 제품, 팀, 현재 UI에 대해 알려주세요. 감사에서부터 완전한 디자인-투-코드 시스템에 이르기까지 어디서 시작하면 좋을지 추천해 드립니다.

프로젝트 논의하기디자인 시스템을 계획하세요