[세미나] Figma를 통한 design-to-code 도구 사용기와 실전 비교

사내에서 진행했던 세미나 발표 자료, 스크립트 정리

 

안녕하세요. 오늘의 주제는 피그마를 통한 design-to-code 도구 사용기와 실전 비교 입니다.

첫번째로는 디자인 도구인 피그마에 대해 알아보고, 이 도구를 통해 어떻게 디자인을 코드로 변환시킬 수 있는지 먼저 알아보겠습니다.

1. 디자인과 코드의 연결

피그마란?

 

Figma는 현재 가장 인기 있는 UI/UX 디자인 도구로, 클라우드 기반으로 동작하여 실시간 협업을 가능하게 해줍니다. 과거에는 디자이너가 디자인을 완료하면 개발자가 이를 일일이 코딩하던 방식이었지만, Figma와 같은 협업 도구의 등장과 발전으로 인해 디자이너와 개발자가 동시에 작업하고 실시간으로 피드백을 주고받을 수 있게 되었습니다.

디자인 변환 과정의 어려움

하지만 피그마가 등장했어도, 디자인 공유와 소통이 쉬워졌을 뿐, 프론트엔드 개발에 있어서 디자인을 코드로 변환하는 작업은 꼭 필요했습니다. 디자인을 코드로 변환하기 위해서는 복잡한 구조를 일일히 마크업 해야 하며, 디자이너의 의도를 정확하게 반영하면서 오차 없이 전환해야 합니다. 이러한 작업은 디자인이 복잡해질 수록 불일치가 발생할 수 밖에 없게 되고, 추가적인 검수와 조정이 필요해지기 때문에 많은 시간과 노력을 소모하게 만듭니다.

피그마 Dev Mode

이러한 문제를 해결하기 위해 피그마는 2023년 6월, 디자인을 코드로 변환할 수 있는 개발 모드(Dev Mode)를 출시했습니다.

피그마의 개발 모드는 코드 변환 뿐만 아니라, 디자인 요소의 상세 정보를 쉽게 확인할 수 있고, 전체 레이아웃을 파악하고 디자이너와의 소통 도구가 늘어나는 등의 다양한 기능을 제공했습니다. 이로 인해 디자인이 어떻게 코드로 변환되는지 미리 알 수 있게 되었고, 디자이너와 개발자 간의 소통이 더욱 쉬워지게 되었습니다. 이렇듯 디자인 코드를 직접 작성하지 않고도 코드를 얻을 수 있는 방식을 바로 디자인 투 코드라고 합니다.

 

그러나 2024년 1월, 피그마의 개발 모드가 유료화되면서 일부 사용자들이 접근에 제한을 받게 됩니다. 유로화 뿐만 아니라 방식에도 한계가 있었는데요. 개발 모드는 코드를 제공해 주긴 하지만, 디자인을 완전히 동작하는 코드로 변환해 주는 도구는 아니였습니다. 여전히 개발자가 수작업으로 코드를 작성하고 최적화해야 했기 때문입니다.

디자인을 완전한 코드로

이러한 한계로 인해 디자인을 코드로 더욱 정교하게 자동 변환해 주는 기술의 필요성이 점차 증가하게 되었고, AI의 발전과 Figma 플러그인의 확장과 함께 design-to-code 자동화 도구들이 주목받기 시작했습니다.

앞서 피그마의 개발 모드는 요소에 대한 퍼블리싱 코드를 개별적으로 제공했지만, design-to-code 자동화 기술은 이를 넘어 프론트엔드 프로젝트 전체를 생성하고, 여러 기기에 대응하는 반응형 디자인의 동적 코드까지 자동으로 제공해 줍니다.

이러한 자동화 기술들은 디자인과 개발 간 발생할 수 있는 불일치를 더욱 최소화 할 수 있고, 개발 속도를 크게 단축할 수 있게 해줍니다.

디자인 투 코드의 실전 가치

그렇다면 이러한 자동화 도구는 현재 어느 정도까지 정교하게 동작하며, 실제 디자인과 개발 과정에서 얼마나 실질적으로 도움이 되는 기술일까요? 따라서 이번 세미나에서는 디자인 투 코드 도구가 어떤 식으로 동작하고, 얼마나 실무적으로 유용할지 피그마와 함께 사용하는 자동화 도구인 Locofy.ai, Builder.io 두 기술의 사용 예시와 비교 분석을 통해 알아보고자 합니다.

2. Locofy.ai 사용법

Locofy.ai 소개

 

Locofy.ai는 Figma와 같은 디자인 도구에서 생성한 디자인을 자동으로 코드로 변환해주는 design-to-code 자동화 도구입니다.

 

로코파이는 2021년 싱가포르의 한 회사에서 디자이너와 개발자의 원활한 협업을 위해 개발되었습니다.

초기에는 피그마와 스케치를 중심으로 자동 코드 변환 기능을 제공했고, 이후로는 AI와 머신러닝을 통해 반응형 디자인을 제공함과 동시에 이와 같은 다양한 프레임워크에 대한 지원, 코드 배포 기능을 더욱 강화하면서 더 완성도 높은 코드를 제공하는 서비스가 되었습니다.

Locofy.ai 주요 기능

 

로코파이의 주요 기능은 위과 같습니다. 피그마의 플러그인으로써 원활하게 연동되고, 자동으로 프로젝트를 생성하며 배포 가능한 상태의 코드를 제공합니다. 또한 다양한 기기에 대응하여 작동되는 반응형 레이아웃을 자동으로 생성하고, 버튼, 입력 폼과 같은 요소에 대해 자동으로 상호작용을 반영합니다.

Locofy.ai 동작 과정

(설명 없이 사진으로 대체합니다)

 

 

Locofy.ai 특징과 사용 소감

 

정리하자면 Locofy는 이러한 특징들이 있습니다. 우선 정해진 단계를 따르면 빠르게 코드를 생성할 수 있고, 자동으로 반응형 디자인을 적용해 줍니다. 또한 편집 과정에서 리액트의 상태나 버튼 클릭 등의 상호작용을 넣을 수 있으며, 내보내기 시 프로젝트 전체 구조를 자동으로 구성해 줍니다.

 

저의 로코파이 사용 소감을 말씀드리겠습니다. 우선 변환 과정이 단계별로 잘 정리되어있어 빠르고 직관적으로 변환할 수 있었지만, 디자인이 조금만 복잡해지더라도 수동으로 조작해야 하는 부분들이 늘어나 어려운 느낌이 있었고, 전체 프로그램 자체가 동작 시 무겁고 버벅이는 느낌이 있었으며 에러가 많아 중도에 종료했다가 재시작 해야 하는 일이 잦았습니다.

또한 변환 과정에서 디자인을 수정하는 경우에는 플러그인을 재시작 하여 변환 과정을 처음부터 다시 진행해야 하는 점이 불편했습니다.

마지막으로는 프로토타입으로 지정해 놓은 동작이 변환 후에는 의도와 다르게 동작하는 경우가 있었습니다.

이전에 프로젝트를 진행했을 때, 실제로 로코파이를 사용하여 전체 프로젝트를 구성했던 적이 있었는데 짧은 기간 안에 빠르게 프로젝트를 구성할 수 있어 유용하였으나, 생각보다 복잡하고 어려운 사용 방법 때문에 결국 변환 이후에도 추가적인 수정이 많이 필요했습니다. 또한 변환 단계에서 어느 정도의 개발 지식이 필요하겠다고 느꼈습니다.

3. Builder.io 사용법

Builder.io 소개

 

Builder.io는 로코파이와 유사하지만 개발 목적과 사용에서 조금 차이가 있는데요.

Builder.io는 시각적으로 웹 페이지나 애플리케이션을 만들 수 있는 비주얼 기반의 개발 도구입니다.

로코파이처럼 디자인 투 코드를 목적으로 만들어진 도구라기보다, 코드 없이 웹 페이지나 애플리케이션을 ​만들기 위해 만들어진 노코드 도구이자, 코드 변환 기술도 제공하는 프로그램입니다.

Builder.io 주요 기능 

빌더의 주요한 기능은 위와 같습니다.

우선 비주얼 에디터로 조작하기 때문에 드래그 앤 드롭을 통해 쉽게 디자인을 만들 수 있고, 리액트, 뷰, 앵귤러 등의 프레임워크와 통합되어 개발자가 코드를 커스터마이징 할 수 있습니다. 또한 두 개 이상의 버전의 웹 페이지나 UI 요소를 비교하여 테스트하는 A/B 테스트 기능과 실시간으로 성능을 모니터링 할 수 있는 기능을 제공하여 디자인과 성능 모두를 최적화할 수 있도록 도와줍니다.

Builder.io 동작 과정

Builder.io 특징과 사용 소감

 

정리하자면 빌더는 이런 특징이 있습니다.

우선 코드 없이 페이지를 생성할 수 있어 비개발자도 쉽게 웹 페이지를 제작할 수 있고, 실시간 상호작용하고 테스트를 진행할 수도 있습니다. 또한 다양한 프레임워크 연동되어 개발자가 추가로 커스터마이징 하기 쉬우며, Figma와 잘 연동되기 때문에 디자인을 코드로 빠르게 변환할 수 있습니다.

 

저의 빌더 사용 소감을 말씀드리겠습니다.

빌더는 우선 사용 방법이 간편하고 짧았으며, 변환 속도가 빨랐습니다. 또한 비주얼 에디터가 직관적으로 구성되어 있어 사용하기 편했고, 간단히 배포와 테스트도 가능하다는 점이 좋았습니다. 하지만 전체 프로젝트를 내보낼 수 없고, 페이지나 컴포넌트, 프레임 별로 내보내야 하며, 피그마에서 지정한 프로토타입 등의 동작은 변환되지 않아 아쉬웠습니다. 전체적으로 빠르고 쉬운 느낌이였습니다.

4. Locofy.ai, Builder.io 비교 분석

 

전체적인 비교 표입니다. 항목에 따라 묶어서 살펴보자면 우선 로코파이의 목표 사용자는 디자이너 및 프론트엔드 개발자, 빌더는 비개발자, 디자이너, 마케터이고 사용 편의성은 유사하지만 빌더가 조금 더 직관적인 에디터를 제공합니다. 커스터마이징과 코드 생성 방식도 유사합니다.

차이가 나는 부분은 테스트 도구와 배포 및 수정 인데요. 로코파이는 자체적으로 테스트 도구를 지원하지 않지만 빌더는 테스트를 비롯해 실시간 성능 분석 기능을 제공합니다. 또한 배포 및 수정 과정도 로코파이는 코드를 내보낸 후 개발자가 자체적으로 배포해야 하지만, 빌더에서는 간단한 수준이지만 실시간으로 웹 페이지를 배포할 수 있는 기능을 제공합니다.

 

종합해서 보자면, 로코파이는 좀 더 개발자에 친화적이지만, 그에 따라 개발 지식이 조금 필요하고, 완전한 프로젝트를 만드는 데 장점이 있습니다. 별도의 배포 과정이 필요하며, 개발자와 디자이너 간 협업에 좀 더 강점을 가집니다.

 

빌더는 비개발자나 마케터, 디자이너 등도 비주얼 에디터를 통해 쉽게 사용할 수 있고, 실시간으로 웹페이지를 생성하고 간단히 배포할 수 있습니다. 이로 인해 좀 더 폭넓은 방식으로 활용할 수 있습니다.

5. 미래 전망 및 동향

마지막으로, 이러한 디자인-to-코드 자동화 도구들이 앞으로 어떻게 발전할지와 기술 동향에 대해 알아보겠습니다.

미래 전망

1. AI와 머신러닝의 발전

사실 아직까지는 변환 수준이 아주 높지 않고, 추가적인 수정도 필요하지만

AI의 발전 속도로 미루어 보았을 때, 이러한 격차는 점차 줄어들고 빠른 시간 안에 더욱 정교한 기술로 발전할 것이라 예상할 수 있습니다.

 

2. No-Code/Low-Code 확장

또한 비개발자도 쉽게 웹 애플리케이션을 구축할 수 있는 No-Code/Low-Code 도구의 수요가 빠르게 증가하고 있습니다.

세계적 시장 조사 및 컨설팅 회사 포레스터 리서치의 2023년 보고서에 따르면, 노코드와 로우코드 플랫폼 시장이 2027년까지 37% 성장할 것이라 예측했는데요, 앞으로는 이러한 도구들이 더 많은 프로젝트에서 필요로 할 것이고, 비개발자들도 쉽게 개발할 수 있는 환경이 만들어질 것이라고 예상하고 있다고 합니다.

 

3. 실시간 협업 증가

마지막으로는, 앞으로는 더욱 실시간 협업 기능이 활성화되고 중요해질 것이라는 전망이 있습니다.

이미 지금도 피그마, 구글 독스, 슬랙 등의 실시간 협업 도구들이 많이 사용되고 있습니다.

이러한 협업 도구들을 사용하면 개발 시간을 더욱 단축하고 효율을 높일 수 있기 때문에, 실시간 협업 도구인 피그마를 활용하는 두 기술 또한 앞으로도 꾸준히 수요가 있을 것이라 예상할 수 있습니다.

현재의 한계

하지만 현재 상황에서는 아쉬운 부분과 한계 또한 존재하는데요.

 

1. 아직까지 높지 않은 변환 수준

우선 아직까지는 변환 수준이 높지 않다는 점입니다. 로코파이의 경우에는 좀 더 동적인 코드 설정도 가능하지만, 오작동도 많고 의도대로 동작하지 않기도 합니다.

 

2. 플랜에 따른 비용

또한 제가 발표로 보여드린 실습은 모두 무료 플랜으로 진행한 것인데요. 두 도구 모두 무료 플랜의 한도가 정해져 있고 더 고급 기능을 원한다면 비용을 지불해야 합니다. 로코파이의 경우에는 연간 개인 30만원, 기업 용으로는 그 이상이고, 빌더의 경우에는 개인 플랜 약 2만원, 팀이나 대규모 플랜은 그 이상을 지불해야 합니다.

사실상 아직까지 성능에 비했을 때 비용이 많이 든다고 볼 수 있습니다.

 

동향들을 살펴보았을 때, 아직까지 실무에 활용하기는 어렵지만, 가까운 미래의 프론트엔드 개발 환경에는 변화를 가져올 것이라고 생각합니다.

개발자의 방향

이러한 상황 속에서, 개발자는 앞으로 어떤 역량을 기르고 대비해야 할지 생각해 보았습니다.

 

1. 자동화 도구 활용 능력

첫번째는 자동화 도구를 활용하는 능력을 기르는 것입니다.

자동화 도구들은 반복적인 작업을 줄여주지만, 개발자의 역할이 사라지지는 않습니다.

오히려 이러한 도구들을 잘 이해하고 활용하여 더 복잡한 문제 해결과 고급 커스터마이징에 집중하는 것이 중요해질 것이라 생각합니다.

 

2. 디자이너와 협업 능력 강화

두번째는 디자이너와의 협업 능력을 강화하는 것입니다.

디자인 투 코드나 자동화 도구를 사용하는 목적은 결국 디자이너와 잘 소통하고 코드로 잘 옮기기 위함입니다.

따라서 디자이너의 의도를 잘 이해하고 이를 시스템으로 잘 구축하는 것은 앞으로도 더 중요한 역량이 될 것입니다.

 

3. 최신 기술 지속적 학습

세번째는 최신 기술을 지속적으로 학습하는 것입니다.

백엔드에 비해 프론트엔드는 기술의 발전 속도와 변화의 주기가 비교적 매우 짧습니다.

또한 AI의 발전으로 인해 몇 년, 몇 개월 사이에도 개발 트렌드의 흐름이 바뀌기도 합니다.

따라서 이와 같은 자동화 기술이나, 이와 연동할 수 있는 기술들을 지속적으로 공부하는 것이 필요합니다.

 

4. 문제 해결 능력 강화

마지막으로 문제 해결 능력 강화입니다.

아직까지 자동화 도구는 반복적인 작업을 줄여줄 뿐, 복잡한 사용자의 상호작용이나 데이터를 처리하는 로직은 개발자가 구현해야 하는 핵심적인 부분입니다. 성능을 최적화하고 보안을 강화하는 작업은 자동화 도구로 처리하기 어렵기 때문에, 개발자로서 이러한 자동화 도구에 의존하지 않고 문제 해결 능력을 지속적으로 키워 나가는 것이 여전히 중요한 능력이 될 것입니다.

 

정리하자면, AI 의 발전과 자동화 기술들의 빠른 발전 속에서 이러한 도구 활용 능력을 키우고, 꾸준히 개발자로써의 역량을 기르고자 하는 자세가 더욱 중요해질 것이라 생각합니다. 감사합니다.