![[Frontend] UI를 꼭 사람이 짜야 할까요?](https://i.ytimg.com/vi/PHWO5TKzIs4/sddefault.jpg)
[Frontend] UI를 꼭 사람이 짜야 할까요?
채널데브톡 2025 채널톡 · YouTube
AI 핵심 요약
Figma 명세를 채널톡의 Bezier 디자인 시스템 기반 프로덕션 코드로 옮기는 반복 작업을 줄이기 위해, 팀은 Cursor와 LLM을 활용한 UI 자동화 파이프라인을 만들었습니다. 이미지 입력은 디자인 토큰과 구조 정보가 유실돼 성능이 낮았고, 대신 Figma 플러그인으로 노드 데이터를 XML로 변환해 전달한 뒤 기본 TSX 생성, 컴포넌트 식별·그룹화, 명세 기반 리팩터링, 린트·TypeScript 오류 수정의 단계로 처리했습니다. 한 번의 긴 프롬프트에서 발생하는 환각과 컨텍스트 한계를 줄이기 위해 작업을 여러 턴과 세션으로 나누고, 파일 경로 등 필요한 상태는 메모리에 저장했습니다. 발표에서는 사람이 사소한 부분을 다듬으면 프로덕션에 쓸 수 있는 결과를 얻었고, 기존 UI 작업이 복잡도와 무관하게 최대 15분으로 줄었다고 설명했으며, 다음 단계로 Codex 같은 에이전트를 실험하고 있다고 밝혔습니다.
- 스크린샷만으로 코드를 생성하면 디자인 토큰, 계층 구조, 인터랙션 정보가 빠지므로 Figma 노드 데이터를 구조화해 전달하세요.
- Figma와 디자인 시스템의 인터페이스 차이를 모두 규칙 기반 어댑터로 해결하면 양쪽 스펙 변경에 취약해질 수 있습니다.
- 긴 작업을 한 번의 프롬프트에 몰아넣기보다 단계별 노드와 별도 세션으로 나누고, 필요한 상태는 메모리에 저장하세요.
- Cursor Rules에는 컴포넌트 명세와 코드 제약을 담아 반복 작업의 지침으로 재사용하고, 구현 도구와 독립적인 자산으로 관리할 수 있습니다.
- 자동 생성 코드도 린트와 TypeScript 검증, 사람의 최종 확인이 필요하며 완전한 무인 자동화와는 구분해야 합니다.
소개
[디자인 명세로부터 잘 동작하는 코드까지, 프롬프트만으로 자동화하다] 디자인 명세(Figma)부터 실제 코드 구현까지, 반복적이고 시간이 오래 걸리는 UI 작업을 어떻게 효율적으로 해결할 수 있을까요? 채널톡 프론트엔드 팀은 Figma의 구조화된 데이터를 기반으로, LLM과 프롬프트를 결합해 UI 작업 자동화를 시도했습니다. 이 병목을 풀기 위한 저희의 전략과 시도 과정을 공유합니다.
비슷한 학습 자료
컨퍼런스 당근 밋업
아이콘, 브랜딩 에셋까지 디자인시스템으로 | 2024 당근 테크 밋업
컨퍼런스 당근 밋업
‘디자인시스템’하면 무엇이 떠오르나요? 컴포넌트 제작, 스펙 정의, 문서 작업과 같은 업무들이 떠오르는데요. 이 외에도 당근에는 다양한 문제들이 있었고 이를 해결해 왔어요. 아이콘은 어떤 식으로 관리하고 배포해야 하는지, 브랜딩 에셋은 어떤 식으로 관리할지, 지속 가능한 시스템은 어떻게 구축할지와 같은 문제들이 있었어요. 여러분이라면 이 문제들을 어떻게 해결하시겠어요? 제가 당근에서 이 문제를 해결한 경험을 들려드릴게요. 🥕 영상을 보고 당근에 관심이 생기셨다면 채용 공고를 확인해보세요! https://about.daangn.com/jobs/
프론트엔드 UI/UX
컨퍼런스 DAN 2025
[팀네이버 컨퍼런스 DAN25] 생성형 UI와 에이전틱 UX 리서치, AI 네이티브 디자인 프로세스의 가능성 기존 UX 디자인과 리서치 방식은 개인화된 사용자 특성과 빠르게 변화하는 AI 환경을 반영하기 어려웠습니다. 본 세션에서는 UI 디자인과 UX 리서치 과정에 AI를 접목해 새로운 디자인 프로세스를 실험한 경험을 공유합니다. Telecast(생성형 UI 플랫폼)와 EchoX(AI 페르소나 기반 UX 리서치 시스템)를 직접 구현하며, 디자이너들이 AI와 함께 도구를 만들고 역량을 확장해 나간 과정을 다룹니다. 이 과정에서 AI를 통해 UX 디자이너와 리서처의 역할과 협업 방식을 어떻게 재발견하게 되었는지, 그리고 앞으로 디자인 프로세스를 어떻게 재정의해 나갈 수 있을지 경험을 공유합니다. 목차 1. 기존의 디자인 프로세스와 자동화 시도 - 복잡함이 더해지는 사용환경 - AI 코딩을 활용한 작업 자동화 시도 경험 2. Telecast: Generative...
AI 코딩 UI/UX
컨퍼런스 엔지니어링데이 2025
KMP 기반 UI 컴포넌트 통합 전략
컨퍼런스 엔지니어링데이 2025
네이버 사내 기술 교류 행사인 NAVER ENGINEERING DAY 2025(5월)에서 발표되었던 세션을 공개합니다. [발표 내용] 멀티플랫폼에 대응 가능한 밴드 디자인 시스템의 설계 및 구현 방식에 대해 소개하고, 밴드 안드로이드 팀에서 아이콘 리소스를 자동화하여 관리하는 방법에 대해서 공유합니다. [강의 대상] * 안드로이드 개발자 및 멀티플랫폼에 대한 관심이 있는 분 * 디자인 시스템에 관심이 있는 분 [목차] Episode 1 : 디자인 시스템, 개념에서 실전까지 Episode 2 : KMP, 진짜 실무에 쓸 수 있을까? Episode 3 : BDS 모듈에 KMP 적용하기 Episode 4 : 디자인 시스템 UI 컴포넌트, Maven으로 배포하기 Episode 5 : Figicon으로 아이콘 자동 동기화하기
프론트엔드 모바일 앱 개발
컨퍼런스 엔지니어링데이 2025
디자인시스템을 개발에서 적용 하는법
컨퍼런스 토스증권 Tech Talk Talk
테크톡톡 2026 | Frontend Developer - 우당탕탕 디자인 시스템
컨퍼런스 채널데브톡 2025