디자이너의 상상을 현실로: 여기어때 아이콘 생성기 제작기
여기어때가 디자인 시스템에 맞는 아이콘을 빠르게 만들기 위해 생성기와 벡터화 파이프라인을 구축했습니다. 실무에 바로 쓰이도록 프롬프트, 정제, UX까지 함께 최적화했습니다.
#벡터화#prompt#UI/UX
11300
디자이너의 상상을 현실로: 여기어때 아이콘 생성기 제작기
태그
디자인 시스템 기술 블로그 글
디자인 시스템 태그가 달린 국내 IT 기업 기술 블로그 글을 최신순으로 모았습니다.
전체 32개최신 20개 표시
관련 태그
최신 게시글
20개 표시
프롬프트 한 줄로 화면이 나오는 시대, ‘당근스러운 화면’을 만드는 법
프롬프트 한 줄로 만드는 화면의 한계를 짚고, 디자인 시스템에 맞는 의사결정 자동화가 핵심이라고 설명했습니다. 어드민, CLI, 에이전트로 발전한 Kraft와 Plan/Orchestra 구조도 소개했습니다.
#prompt#디자인 시스템#CLI
19500
프롬프트 한 줄로 화면이 나오는 시대, ‘당근스러운 화면’을 만드는 법
AI가 실행을 맡는 시대, 디자이너의 경쟁력
AI가 실행을 맡는 시대에 디자이너는 문제를 발견하고 판단하는 역할로 이동했습니다. 또한 AI가 일관되게 일하도록 시스템을 설계하는 능력이 중요하다고 강조했습니다.
#디자인 시스템#ChatGPT#Claude
700
AI 시대의 디자인 시스템: 적정 밀도는 무엇일까?
디자인 시스템을 일관성과 판단 비용 관리의 문제로 다시 정리했습니다.\nAI를 활용해도 최종 기준과 예외 판단은 사람이 맡아야 한다고 설명했습니다.
#디자인 시스템#Figma#토큰
7100
AI 시대의 디자인 시스템: 적정 밀도는 무엇일까?
멀티 프레임워크 디자인 시스템, 결국 운영 가능한 구조를 선택한 이유
React와 Vue를 함께 지원하던 디자인 시스템에서 운영 비용을 줄이기 위해 지원 범위를 재정의했습니다. React는 컴포넌트 운영축으로, Vue는 파운데이션 중심으로 전환한 사례입니다.
#React#Vue.js#Next.js
6500
멀티 프레임워크 디자인 시스템, 결국 운영 가능한 구조를 선택한 이유
FE News 26년 1월 소식을 전해드립니다!
React Server Components 시각화 도구와 클라이언트 사이드 AI 흐름, 디자인시스템 기반 마크업 자동화 사례를 소개했습니다. 프런트엔드 관점에서 AI와 브라우저 기술의 변화 지점을 함께 살펴볼 수 있습니다.
#React#LLM#WebGPU
13100
FE News 26년 1월 소식을 전해드립니다!
디자인 시스템, 이제 감이 아니라 데이터로 말하기 (3,272시간의 가치)
디자인 시스템 성과를 감이 아니라 설문과 인터뷰 데이터로 측정한 사례를 정리했습니다. 연간 3,272시간 절감 효과와 직군별 차이를 바탕으로 개선 과제를 도출했습니다.
#디자인 시스템#ROI#설문
8800
디자인 시스템, 이제 감이 아니라 데이터로 말하기 (3,272시간의 가치)
디자인 컴포넌트 라이브러리를 ‘실제 사용 방식’에 맞게 다시 설계한 이야기
Kitchen의 빌드·패키지 구조를 실제 사용 방식에 맞게 다시 설계했습니다. ESM 전환과 단일 패키지화로 트리셰이킹과 DX를 개선했습니다.
#React#ESM#번들링
11200
달리는 기차 바퀴 칠하기: 7년만의 컬러 시스템 업데이트
토스가 7년 만에 컬러 시스템을 전면 개편한 과정과 토큰 시스템 재구축 방법을 공유했습니다. OKLCH, 시맨틱 토큰, 자동 코드 생성으로 확장성과 일관성을 높였습니다.
#디자인 시스템#토큰#접근성
15200
디자인시스템이 AI를 만났을 때: FE 개발 패러다임의 변화
네이버파이낸셜 디자인시스템과 AI를 활용한 마크업 자동화 경험을 공유한 세션입니다. 디자인 토큰과 Code Connect 등 준비 요소와 실제 개발 적용 시 아쉬운 점을 다뤘습니다.
#디자인 시스템#마크업#컴포넌트
21100
디자인시스템이 AI를 만났을 때: FE 개발 패러다임의 변화
[온∙오프라인/마감] COMMIT × Figma: From Idea to Reality
Figma와 구름의 COMMIT 행사에서 AI 기반 제품 개발과 디자인 시스템 자동화 사례를 공유했습니다. 디자인과 개발 사이의 워크플로우를 줄이는 실무 인사이트를 전했습니다.
#Figma#디자인 시스템#자동화
1500
![[온∙오프라인/마감] COMMIT × Figma: From Idea to Reality](https://tech.goorm.io/wp-content/uploads/2025/11/BLOG_thumbnail.jpg)
[디자인 시스템 어떻게 만들었어요?(1)] 아이콘 라이브러리 만들기
요기요는 디자인 시스템 아이콘을 개별 SVG 컴포넌트와 전용 라이브러리로 재구축했습니다. 자동 변환, 접근성, 토큰 연동, 변경 내역 자동화로 운영 효율을 높였습니다.
#React#SVG#디자인 시스템
12800
![[디자인 시스템 어떻게 만들었어요?(1)] 아이콘 라이브러리 만들기](https://miro.medium.com/v2/resize:fit:1200/1*kCf05hhyLPa7iBp2vBTJAA.png)
모노레포 절망편 – 14개의 레포로 부활하기까지 걸린 1년
모노레포 확장으로 생긴 충돌과 복잡도를 줄이기 위해 14개 레포로 분리한 과정을 정리했습니다. 패키지 정리와 체계 재설계로 빌드 성능과 CI 속도를 개선했습니다.
#모노레포#polyrepo#CI/CD
2300
“프로덕트를 잇고, 고객 경험을 확장해요”
미리디 프로덕트 디자인팀이 제품 간 연결로 고객 경험을 확장하는 방식과 팀의 방향성을 소개했습니다. 글로벌 확장, AI 고도화, 리서치와 협업 체계 강화에 집중하고 있습니다.
#UI/UX#디자인 시스템#사용성 테스트
1500
피그마 플러그인을 통한 개발 생산성 끌어올리기
피그마 플러그인으로 디자인 토큰과 Tailwind 클래스를 자동 추출해 개발 생산성을 높인 사례를 소개했습니다. 디자인 시스템의 일관성과 지속적인 도구 개선의 중요성도 함께 강조했습니다.
#Figma#Tailwind CSS#TypeScript
10100
KMP 기반 UI 컴포넌트 통합 전략
KMP 기반으로 멀티플랫폼 디자인 시스템과 UI 컴포넌트 통합 전략을 다뤘습니다. 아이콘 리소스 자동화 관리와 배포 방식까지 함께 소개했습니다.
#KMP#UI/UX#디자인 시스템
12500
KMP 기반 UI 컴포넌트 통합 전략
디자인 시스템 이전으로 돌아가실래요? (2)
디자인 시스템 운영의 비효율을 줄이기 위해 버전 관리, 샘플앱 검수, 이슈 트리아지, 가이드 통합을 정리했습니다. 팀 간 사전 공유와 기록 중심의 프로세스로 시스템 신뢰성과 일관성을 높였습니다.
#디자인 시스템#컴포넌트#피그마
1700
iOS 개발에서 MFA 패턴 활용하기: with SampleApp
MFA와 샘플앱으로 iOS 앱을 피처 단위로 분리해 협업 효율과 유지보수성을 높였습니다. 전체 빌드와 불필요한 화면 흐름을 줄여 개발 시간을 크게 단축했습니다.
#iOS#module#sample app
5300
디자인 시스템 이전으로 돌아가실래요? (1)
디자인 시스템 운영이 단순한 컴포넌트 관리가 아니라 프로덕트 운영에 가깝다는 점을 짚었습니다. 버전 추적과 가이드 부족, 이슈 처리 부재로 생긴 비효율을 정리했습니다.
#디자인 시스템#UX/UX#Figma
3300
시니어 사용자가 어려워하는 UX 5가지
시니어 사용자가 금융 앱에서 겪는 공통 오인지 패턴을 UT로 분석해 UX 가이드라인으로 정리했습니다. 버튼, 예시 이미지, 모션, 라이팅, 화면 구조를 시니어 관점에서 점검해야 한다고 제안했습니다.
#UI/UX#유저 리서치#사용성 테스트
4700
