디자인시스템이 AI를 만났을 때: FE 개발 패러다임의 변화
엔지니어링데이 2025 네이버 · YouTube
AI 핵심 요약
마크업과 FE 개발이 분리된 환경에서 커뮤니케이션 비용을 줄이고 생산성을 높이기 위해, 네이버파이낸셜 디자인 시스템과 AI를 활용한 마크업 자동화를 시도했다. Figma MCP로 디자인 정보를 가져오고, Code Connect로 Figma 컴포넌트와 코드 구현을 연결했으며, GitHub Copilot 지침에 디자인 토큰·레이아웃·금지 사항을 명시했다. 그 결과 AI가 디자인 시스템 컴포넌트와 토큰을 활용한 반응형 마크업을 생성했지만, 설계의 불명확한 간격이나 장식 요소를 잘못 해석하는 문제와 코드 리뷰 부담은 남았다. 사전 준비와 작업 분할이 중요하며, 초기 개발 시간은 줄었지만 운영 단계의 효과는 아직 검증되지 않았다는 점을 확인했다.
- Figma MCP가 디자인 정보를 전달하더라도 사내 디자인 시스템의 규칙과 사용법은 별도로 알려줘야 한다.
- Code Connect로 Figma 컴포넌트와 실제 코드 구현을 연결하면 AI가 임의의 컴포넌트를 만드는 일을 줄일 수 있다.
- 긴 화면이나 복잡한 디자인은 레이아웃과 섹션 단위로 나눠 요청하고, 결과를 반복해서 검토하는 편이 안정적이다.
- Auto Layout과 명확한 레이어 이름은 간격과 구조를 AI가 해석하는 데 도움이 되지만, 시각적 표현용 요소는 설계에서 구분해야 한다.
- 자동 생성 코드의 리뷰와 운영 역량은 별도 과제로 남으므로 초기 설정 비용과 검토 비용까지 고려해야 한다.
소개
네이버 사내 기술 교류 행사인 NAVER ENGINEERING DAY 2025 에서 발표되었던 세션을 공개합니다. [발표 내용] 네이버파이낸셜 디자인시스템과 AI를 이용하여 마크업 자동화 작업에 대한 소소한 경험을 공유합니다. [발표 대상] AI를 이용한 마크업 등 디자인 작업관련 관심 있으신 모든 분들 [목차] * 오늘 이야기의 키워드 * 知彼知己 - 네이버파이낸셜 디자인시스템 ㄴ디자인 토큰 ㄴ 디자인 시스템 컴포넌트 * 우리를 도와 줄 AI 는? * 百戰不殆 * Let's Try * 마크업 작업을 위한 사전 준비 - 디자인시스템 Code Connect - 디자인시스템 instruction - 이제 FE 개발 시작해도 될 마크업, 하지만 아쉬웠던 점 - 그 외로 힘들었던 점 * 현실 개발에서는 어떻게 해야하는가? * 마크업 직업 개발했더니 어떠니?
비슷한 학습 자료
컨퍼런스 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
사용자의 목소리를 AI로 재현하다: LLM기반 Multi Agent UX플랫폼 개발기
컨퍼런스 엔지니어링데이 2025
네이버 사내 기술 교류 행사인 NAVER ENGINEERING DAY 2025 에서 발표되었던 세션을 공개합니다. 해당 발표는 팀네이버 컨퍼런스 DAN25 홈페이지(https://dan.naver.com/25/sessions/699)에서도 살펴보실 수 있습니다. [발표 내용] “사용자에 진심인 3명이 모여, Persona가 말하게 만들다” 이 세션은 잘 만든 AI 시스템을. 넘어, 디자이너·AI 리서처·개발자가 경험한 AI 시대의 협업 가능성을 제안합니다. 사용자 페르소나봇 NSona의 기획부터 구현, 평가까지 전 과정을 공유합니다. AI로 사용자 리서치 데이터를 실시간 협업 자원으로 전환하며, Multi-Party 대화 시스템에서 사용자와 함께 일하는 방식을 실험했습니다. 세 명은 함께 AI를 만들며 역할과 협업 구조가 바뀌는 경험을 했습니다. 디자이너는 프롬프트를 설계하고, 리서처는 로직을 에이전트 구조로 바꾸었으며, 프론트 개발자는 AI를 비평 대상으로 다뤘습니다. 중요한 건...
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
데이터는 흐른다, 연결될 준비가 되었다면
컨퍼런스 엔지니어링데이 2025
네이버 사내 기술 교류 행사인 NAVER ENGINEERING DAY 2025(5월)에서 발표되었던 세션을 공개합니다. [발표 내용] 유저 세그먼트를 손쉽게 정의하고, 이를 다양한 액션 채널(Braze, IDS, GAM 등)과 자동 연동할 수 있는 네이버 웹툰의 Cohort System을 소개합니다. 조건 기반 필터링, ML 모델 연동 등 다양한 방식으로 세그먼트를 만들고, 중복 제거 로직과 함께 효율적으로 활용할 수 있습니다. 시스템 구조와 기술 스택, 실제 마케팅 활용 사례까지 함께 공유하며, 데이터에서 인사이트, 나아가 액션까지의 연결을 어떻게 자동화했는지를 설명합니다. [강의 대상] * 데이터 엔지니어 / 백엔드 엔지니어: 데이터 흐름 자동화, 시스템 구조에 관심 있는 분 * ML 엔지니어 / 데이터 사이언티스트: ML 결과를 실시간 타겟팅에 적용하고 싶은 분 * 마케터 / PM: 타겟 유저 추출과 액션 전환까지의 전체 흐름을 이해하고 싶은 분 [목차] Episode 1...
백엔드 데이터베이스
컨퍼런스 엔지니어링데이 2025
디자인시스템을 개발에서 적용 하는법
컨퍼런스 우아콘 2025