
Syrup Design System 개발 : UX에서 Front-End로의 효과적인 Hand-off
Syrup Design System은 UX와 프론트엔드를 하나의 기준으로 연결해 Hand-off 효율을 높였습니다. Storybook, Token, NPM 배포를 통해 일관성과 재사용성을 강화했습니다.

Syrup Design System은 UX와 프론트엔드를 하나의 기준으로 연결해 Hand-off 효율을 높였습니다. Storybook, Token, NPM 배포를 통해 일관성과 재사용성을 강화했습니다.

피그마 디자인을 React 컴포넌트로 바로 변환하는 플러그인 구현 과정을 소개했습니다. 사내 규칙을 반영한 자동화로 수작업을 줄이고 생산성을 높인 사례입니다.


리브랜딩 후 사용자에게 오류처럼 보이던 UI icon을 폰트 기반 디자인과 명확한 가이드로 개선했습니다. 그 결과 VOC가 감소하고 아이콘 제작 리소스도 크게 줄었습니다.

네이버 검색 FE 시스템의 반복 작업과 UI 중복, 느린 피드백 문제를 해결하기 위한 구조를 정리했습니다. 서버 주도 UI, 디자인 시스템, 데이터 기반 개선과 Design To Code 자동화를 함께 소개했습니다.

디자이너와 개발자의 리소스 관리를 일원화하기 위해 3단계 토큰 기반 디자인 시스템을 구축했습니다. Figma와 코드, Storybook을 연결해 테마 전환과 컴포넌트 커스터마이징을 유연하게 운영했습니다.


디자인 시스템 운영이 단순한 컴포넌트 관리가 아니라 프로덕트 운영에 가깝다는 점을 짚었습니다. 버전 추적과 가이드 부족, 이슈 처리 부재로 생긴 비효율을 정리했습니다.


Figma Slides를 디자이너 관점에서 테스트하며 팀 도입 가능성을 살펴보았습니다. 기존 툴의 한계를 보완하면서 협업과 수정 효율을 높일 수 있다는 점이 인상적이었습니다.

디자인 토큰을 Figma에서 정의하고 GitHub Actions와 token-transformer로 자동 변환하는 과정을 소개했습니다. 또한 Panda CSS에 맞게 토큰을 재구성해 디자인 시스템에 연결한 흐름을 설명했습니다.

QueryPie PM의 업무 방식과 협업 도구, 요구사항 관리 흐름을 소개했습니다. 고객 VoC부터 릴리즈 조율까지 제품 관리에 필요한 역량도 함께 정리했습니다.

Figma를 중심으로 기획, 디자인, 개발, QA를 실시간으로 연결하는 협업 방식의 장점을 소개했습니다. 과거의 파일 공유와 버전 관리 문제를 줄이고 생산성과 일관성을 높이는 흐름을 설명했습니다.

QueryPie PM이 고객 요구를 제품으로 옮기기 위해 어떤 방식으로 일하는지 소개했습니다. Jira, Slack, Figma, 자체 테스트 환경과 성장 지원 제도를 함께 다뤘습니다.

Figma 도입 전의 협업 비효율과 그로 인한 문제를 정리하고, 쿼리파이의 실시간 협업 프로세스를 소개했습니다. 또한 Figma가 기획부터 QA까지 전 단계에서 생산성과 커뮤니케이션을 높이는 이유를 설명했습니다.