본문으로 건너뛰기

개요

Grida 는 오픈소스 Design to Code 툴킷입니다. 여러분의 상상을 가장 빠르게 실현시킬수 있도록, 디자인을 휴먼 레벨의 코드로 변환해주며 이를 통해 수시간에서 수개월까지 개발 시간을 획기적으로 단축할수 있습니다. 여러분은 코어에만 집중하세요.

💸 디자인을 코드바꾸는 작업은 많은 비용이 듭니다. 이미 완성된 디자인을 재해석하여 코드로 구현해야 한다는것은 어찌보면 당여하게 받아드려지지만 더이상 그렇지 않습니다. 여러분의 로직과 코어에만 집중하고, 디자인 구현은 Grida 에게 맡겨보세요.

⚡️ 헤드레스. Headless 디자인이며, 굉장히 빠릅니다. Grida 에서는 모든 작업이 실시간으로 일어납니다. 디자인을 수정함에 따라, 별도로 디자인을 업로드하는 과정이 요구 되지 않습니다. 바로 수정하고, 바로 결과를 확인하세요.

❤️ 오픈소스. Grida 는 전세계 뛰어난 디자이너와 개발자가 함깨 만들어나가고 있습니다. 여러분도 참여하고 싶으신가요? 생각보다 쉽게 세상에 기여할수 있습니다.

패스트트랙 ⏱️​

  1. Grida Assistant Figma 플러그인을 설치하여 시작해 보세요.
  2. grida.co 의 인풋에 여러분의 디자인 링크를 입력하고, 결과물을 확인해보세요.

주요 기능​

  • 실시간 코드 변환
    • React, Flutter, Vanilla 를 지원하여, 웹, 모바일 앱 제약 없이 적용가능합니다.
    • 여러분의 선택하는 어떤 디자인이라도 순식간에 코드로 변환합니다.
  • 통합된 디자인 시스템
    • 디자인은 디자인대로 코드는 코드대로? - 이제 디자인이 여러분의 유일한 시스템입니다. Grida 를 통해 진정히 통합된 디자인 시스템을 구축하세요.
  • 다양한 윗젯 지원
    • Grida 는 똑똑합니다. 여러분의 디자인의 의도를 파악하여 알맞은 윗젯으로 변환합니다. 버튼은 누를수 있어야 하니까요 :)
  • 컴포넌트와 Variant 지원
    • 컴포넌트, Variant 등 디자인시스템을 구축할때 활용되는 도구들을 지원합니다. Figma 에서 그리기만 하세요, 그리고 걱정은 하지 마요.
  • 반응형 코드
    • Autolayout 을 완벽히 지원합니다.
    • Flexbox 가 적용된 Responsive 한 스타일 생성, 그리고 Figma 에서 제공하지 않는 기능등도 확장하여 레이아웃 표현이 가능합니다.
    • Flutter 에서도 Column, Row, Flex, Wrap 등의 다이나믹하게 화면을 표현하는데 필요한 윗젯을 완벽히 지원합니다.
    • 여러분이 이해할수 있고, 동의할수 있는 코드가 생성됩니다.
  • 디자인의 확장
  • 린트
    • 좋은 디자이너는 보이지 않는 곳까지 완벽한 디자인을 추구합니다. Grida 는 보이지 않는 부분까지 완벽하게 정리할수 있도록 Design Lint 를 제공합니다. 클린 디자인, 클린 코드를 만들어보세요.

디자인 원칙​

  • 의존성 없음 (Zero Dependency). Grida 는 의존성이 없습니다. Grida 를 언제든지 도입하고, 분리할수 있습니다. 코드에 직접적인 의존성이 생기지 않아 성능이 높으며, 여러분에게 주도권이 있습니다.
  • 철저한 표준. Grida 가 생성하는 코드는 많은 연구를 통해 결정된 표준적인 구현 방법을 채택하고 있습니다. 이는 코드 스타일에서 부터, 스타일 적용 방식, 하이라키 구성 방식등에 적용됩니다.
  • 디자인 우선. 모든 코드는 "디자인 한대로" 의 변환을 우선시 합니다. 원본이 불완전하다면 결과물도 불완전하게 됩니다.
  • 클린 디자인, 클린 코드. 우리는 클린 코드를 위해 여려툴을 만들어가며 노력하고 있습니다. 하지만 디자인 에코시스템에는 놀랍게도 이러한 계념이 없으며, 회사마다 방침또한 다릅니다. 좋은 코드는 좋은 디자인에서 부터 시작합니다.
  • 투명성. 코드를 생성해주는 기술이기에, 모든 파운데이션은 깃허브를 통해 소스가 공개되어있으며, 시작부터 끝까지 모든 과정이 투명하며, 믿을수 있습니다.
  • 모든걸 다할수는 없다. Grida 를 사용하며, 개발자의 많은 시간을 줄여줄수 있습니다. 하지만 우리의 목표는 개발자를 대채하는것이 아닙니다. 우리는 여러분이 더욱 강력한 도구와 함께 상상을 즉시 펼칠수 있도록 하는것입니다.
  • 접근성. 좋은 기술은 작은것들이 모여 큰 변화를 가져옵니다. 이런 기술은 오픈되어야하며, 무료로 누구나 접근 가능해야 합니다. 만들고자 하는 이는 제약없이 Grida 를 사용할수 있습니다.

최신 정보​

함께해요​

Grida 를 함께 만들고 싶으신가요? 여러분의 팀과 작업 프로세스에 맞는 커스텀 빌드를 구축하고 싶으신가요? 기여하기 문서를 확인해 보세요!

시작해 볼까요?​

하단의 다음 버튼을 눌러, 시작해 보세요!