(번역) 디자인 시스템에 적합한 코드

원문: https://www.figma.com/ko-kr/blog/introducing-code-connect/

오늘, 우리는 코드 연결(Code Connect)기능 베타 버전을 발표합니다. 이는 개발자들에게 코드를 더 나은 접근성과 유용한 코드를 만들어 디자인 시스템 도입을 개선하기 위해 만들어진 기능입니다.

디자인 시스템은 디자인과 코드 사이를 연결하는 강력한 도구 중 하나입니다. 공통된 언어를 만듦으로써, 디자이너와 개발자들이 각자의 워크플로에서 효율적으로 협업할 수 있게 해 줍니다. 우리는 오토 레이아웃, 변수, 컴포넌트 프로퍼티, 그리고 작년에 출시한 개발자 모드와 같은 기능을 통해 디자인 시스템을 코드와 더 가깝게 만들기 위해 열심히 노력해 왔습니다.

이러한 발전에도 불구하고, 여전히 한 가지 큰 과제가 남아 있습니다. 바로 도입(adoptation)입니다. 엔지니어링 매니저로서, 저는 이를 직접 목격했습니다. 우리가 고객들과 대화할 때, 우리는 계속해서 같은 이야기를 듣습니다. “디자인 시스템을 구축했지만, 잠재력을 완전히 발휘하지 못하고 있습니다.” 개발자들이 디자인 시스템의 일부를 사용할 수는 있지만, 종종 시스템이 포함하고 있는 모든 것을 인식하지 못합니다. 그리고 사용할 때도, 의도된 가이드라인에 맞지 않게 컴포넌트나 패턴을 잘못 사용할 수 있습니다. 이는 중요한 문제입니다. 디자인 시스템의 성공은 사람들이 단순히 사용하는 것뿐만 아니라, 올바르고, 일관되게 사용하는 것에 달려 있기 때문입니다.

이것이 바로 제가 Code Connect를 소개하게 되어 매우 기쁜 이유입니다. Code Connect는 개발자들에게 코드를 더 접근성 있고 유용하게 만들어 조직이 디자인 시스템 도입을 촉진하도록 돕는 새로운 도구입니다. Code Connect를 사용하면 개발자 모드에 나타나는 코드 스니펫을 사용자 정의할 수 있어, 개발자들이 자동 생성된 CSS 대신 실제 디자인 시스템 코드를 볼 수 있습니다. 그 결과, 개발 속도와 효율성이 높아지고, 조직 전반에서 디자인 시스템 채택이 증가하며, 중복되고 일회성인 컴포넌트의 생성 및 유지보수가 줄어들게 됩니다.

디자인과 코드의 연결

대규모 디자인 시스템 도입은 우리가 오랫동안 고민해 온 문제입니다. 도입의 장벽은 단순히 개인의 작업 방식이나 선호도의 문제가 아닙니다. 이는 디자인과 코드 사이의 더 넓은 단절을 보여주는 증거입니다. CEO Dylan Field가 설명하듯이, 디자인과 코드는 전통적으로 다른 세계를 차지해 왔습니다.

“디자인과 코드 사이에는 자연스러운 긴장감이 존재합니다. 디자인 세계에서는 무엇을 만들지 결정하는 데 초점이라면, 코드 세계에서는 그것을 만드는 데 초점을 맞춥니다…. 실제로, 이들은 제품을 생명력 있게 만들기 위해 협력하는 파트너입니다.”
Dylan Field (Figma 최고 경영자)

디자이너와 개발자는 서로 다른 도구를 사용하며, 다른 제약 사항과 고려 사항을 가지고 작업합니다. 디자이너는 창의성과 탐구를 위해 최적화하는 반면, 개발자는 구조와 유지보수성을 위해 최적화합니다. Figma는 디자이너와 개발자가 자유로운 탐구와 체계적이고 구조화된 구현 사이를 원활하게 오갈 수 있는 세계를 상상합니다. Code Connect는 그 방향으로 나아가는 또 다른 단계입니다.

Figma 애드보케이트 디자이너 Ana Boyer가 디자인에서 코드로: Bumble, GitHub, HP와의 원탁 토론을 진행합니다. 여기서 그들은 디자인 시스템 팀이 디자인을 코드와 연결하는 데 직면하는 공통적인 도전 과제들을 논의하고 Code Connect에 대한 그들의 첫인상을 공유합니다.

개발자가 있는 곳에서 개발자를 만나기

Code Connect는 코드의 힘을 디자인 도구로 가져와 간극을 해소하는 것을 목표로 합니다. 내부적으로 Code Connect는 자바스크립트와 타입스크립트 프로젝트를 위한 npm과 SwiftUI 프로젝트를 위한 Swift Package Manager를 통해 제공되는 유틸리티입니다. 이를 통해 개발자들은 자신의 프로젝트에서 작업 중인 플랫폼과 관계없이 Code Connect를 쉽게 설치하고 사용할 수 있습니다. 곧 더 많은 플랫폼을 지원할 예정이며, Code Connect는 개발자들이 기존에 사용하는 도구와 워크플로에 원활하게 통합될 수 있도록 설계되었습니다.

패키지와 설정 지침은 깃헙에 있으며, 개발자는 간단한 명령줄 인터페이스를 통해 이를 설치할 수 있습니다. 이는 개발자들에게 익숙한 도구와 워크플로에 맞춰져 있습니다.

이 세션에서 Figma 애드보케이트 개발자인 Jake Albaugh는 Code Connect를 사용하여 연결성이 강한 디자인 시스템의 구축에 대한 개요와 시작하기 위한 몇 가지 팁을 공유합니다.

설치가 완료되면 Code Connect를 통해 디자인 시스템 팀은 디자인 시스템 사용 방법에 대한 모범 사례와 문서를 목업과 연결하여 표시하고 배포할 수 있습니다. 따라서 개발자가 목업을 클릭할 때, 디자인 시스템에서 이를 구축하는 방법을 알아내기 위해 많은 문서와 코드를 검색할 필요가 없습니다. 대신, 클릭만 하면 디자인 시스템 팀에서 게시한 승인되고 유지 관리된 코드 샘플을 바로 얻을 수 있습니다.

이 방법은 큰 이점을 가집니다. 개발자들이 컴포넌트를 다시 작성하지 않기 때문에 유지 보수해야 할 코드가 줄어듭니다. 처음부터 컴포넌트를 만드는 대신 이미 있는 것을 사용함으로써 개발자들은 더 효율적이고 효과적으로 작업할 수 있습니다. 그리고 디자인 시스템을 더 잘 준수함으로써 애플리케이션 전반에 걸쳐 접근성과 일관성을 더 쉽게 개선할 수 있습니다.

아래에서 Code Connect를 시스템에 구현하는 모습의 몇 가지 예시를 살펴보겠습니다.

// jsx
import * as figma from '@figma/code-connect'

figma.connect(Button, 'https://...', {
  props: {
    label: figma.string('Text Content'),
    disabled: figma.boolean('Disabled'),
    type: figma.enum('Type', {
      Primary: 'primary',
      Secondary: 'secondary',
    }),
  },
  example: ({ disabled, text, type }) => {
    return (
      <Button disabled={disabled} type={type}>
        {text}
      </Button>
    )
  },
})

// swift
import Figma

struct Button_connection : FigmaConnect {
  let component = Button.self
  let figmaNodeUrl: String = "https://..."
  @FigmaProp("Text Content")
  var label: String = "Submit"
  @FigmaProp("disabled")
  var disabled: Bool = false
   @FigmaProp(
      "Variant",
      mapping: [
          "Primary": ButtonVariant.primary,
          "Secondary": ButtonVariant.secondary,
          "Destructive": ButtonVariant.danger
      ]
  )
  var type: ButtonType = .primary
   var body: some View {
      Button(type: self.type, disabled: self.disabled, label: {
          Text(self.label)
      })
   }
}

더욱 통합된 워크플로우

Code Connect를 사용할 때, 개발자들은 새로운 코드를 생성하는 것이 아닙니다. 대신, 디자인 시스템 팀이 게시한 승인되고 유지 관리되는 코드 샘플과 문서에 접근합니다. 이는 오류나 불일치를 초래할 수 있는 자동화된 코드 생성에 의존하지 않고 일관성을 유지하여 디자인 시스템 가이드라인을 준수하는데 도움이 됩니다. Code Connect는 디자인 시스템의 기존 코드와 문서를 표면화하고 배포하는 기능입니다. 디자인 시스템을 가장 저항이 적은 경로로 만듦으로써, 채택을 장려하고 모든 사람이 단일 진실 공급원에서 작업하도록 보장할 수 있습니다.

이는 팀이 확장될 떄 더욱 중요합니다. 작은 팀일 때는 모든 사람을 같은 페이지에 유지하기 쉽습니다. 하지만 성장함에 따라 사일로가 형성되기 시작합니다. 디자이너와 개발자들이 고립되어 작업하기 시작하고, 디자인 시스템은 공유된 표준보다는 느슨한 가이드라인의 집합체가 됩니다. Code Connect를 통해, 우리는 팀의 규모와 관계 없이 쉽게 동기화를 유지할 수 있게 하고자 합니다.

Code Connect는 단지 시작에 불과합니다. 앞으로 Code Connect는 디자인과 개발 워크플로를 더욱 통합할 많은 흥미로운 가능성을 열어줍니다. 예를 들어, 디자인 시스템 사용에 대한 자동 감사를 코드와 디자인 모두에서 수행하여 디자인과 코드가 일치하지 않는 영역을 식별할 수 있습니다. 또한 디자인 시스템 사용에 대한 분석 및 통찰력을 제공하여 팀이 시스템이 실제로 어떻게 사용되고 있는지 더 잘 이해할 수 있도록 하는 기회를 열어줄 수도 있습니다. 또한, 컴포넌트 업데이트에 대해 디자인과 엔지니어링 간의 승인 흐름을 가능하게 하여 디자인 시스템 변경 사항이 팀 전반에 걸쳐 적절히 검토되고 조정되도록 할 수 있습니다.

이러한 특정 기능들은 현재 우리의 로드맵에 포함되어 있지 않지만, 디자인과 코드 간의 연결을 통해 미래의 탐색과 혁신을 위한 새로운 세계가 열립니다. 우리의 비전은 단순히 디자인 시스템이나 컴포넌트를 넘어서 디자인과 코드를 더욱 긴밀하게 만드는 것입니다. 변수, 아이콘, 타이포그래피 등 디자인에 관련된 모든 요소에 대해 연결이 이루어지는 미래를 상상해 보세요. Code Connect는 그 토대를 마련하고 있으며, 이 기술이 앞으로 더 강력한 워크플로를 지원하도록 어떻게 발전할지 기대하고 있습니다.

Code Connect는 Figma Organization 및 Enterprise 플랜에서 베타 버전으로 제공되며, 올해 말에 일반 출시될 예정입니다. 베타 버전은 아이디어를 제시하고, 반응을 살피며, 커뮤니티의 피드백을 받는 과정입니다. 우리는 Code Connect를 Figma 워크플로에 완전히 통합할 계획이며, 안드로이드와 웹 프레임워크와 같은 추가 플랫폼에 대한 지원도 포함될 예정입니다.

Code Connect를 시작하려면 깃헙 저장소를 방문하여 NPM 패키지 설치 및 구성에 대한 지침을 확인하고 자세한 내용은 설명서를 참조하세요.