디자인 시스템, 디자인과 코드의 간극 줄이기
디자인 시스템, 디자인과 코드의 간극 줄이기
디자인 시스템에서 Figma와 코드 간 간극이 커지며 커뮤니케이션 비용과 개발 피로도가 늘어나는 문제를 다뤘습니다. Figma 규약 정비와 Plugin API 기반 도구로 명세 검증과 코드 변환을 자동화하는 방안을 소개했습니다.
#디자인 시스템#Figma
20005분
새로운 기술 블로그가 추가되었어요
필터 1
잘 쓰이는 디자인 시스템을 위한 여정
29CM가 디자인 시스템 Ruler를 만들며 UI 파편화와 컴포넌트 구현 비용을 줄인 과정을 공유했습니다. Headless UI와 Figma 측정 도구로 재사용성과 운영 체계를 함께 강화했습니다.
#디자인 시스템#Headless UI
62005분
1,100km 떨어져 있는 사용자를 위한 UX 리서치부터 과감한 리뉴얼까지의 기록
일본 배달 서비스 MerchantApp의 UI/UX 리뉴얼과 현지 사용자 리서치 과정을 공유했습니다. 현장 관찰, FGT, FGI를 통해 주문 흐름과 정보 배치를 개선했습니다.
#UX 리서치#UI/UX
19005분
제품이 커지면 디자인 시스템 가이드는 어떻게 개선돼야 할까?
디자인 시스템 가이드를 읽는 순서와 구조를 표준화해 이해와 작성 효율을 높인 사례입니다. 접근성과 상세 스펙을 체계화해 신규 합류자도 빠르게 기여할 수 있게 했습니다.
#UI/UX#접근성
21005분
프론트엔드와 SOLID 원칙
프론트엔드와 SOLID 원칙
프론트엔드에서 SOLID, 특히 SRP를 책무 기반 컴포넌트 설계로 해석한 글입니다. 카카오페이지 사례를 통해 기획·디자인·개발 흐름에 맞춘 구조와 OCP 적용 방식을 설명했습니다.
#SOLID#SRP
45005분
Vibrant Design System 과 함께하는 크로스 플랫폼 개발기
웹과 앱이 각자 다르게 만들던 UI를 크로스 플랫폼 디자인 시스템으로 통합한 과정을 소개했습니다. 기존 Box 중심 구조의 한계를 해결하기 위해 역할 분리와 플랫폼별 구현 방식을 도입했습니다.
#React Native#디자인 시스템
21005분
드디어 리뉴얼 하는 날이 오는구나
서비스 리뉴얼 배경과 문제 정의, 개선 목표를 데이터와 사용자 조사로 재정립한 과정을 정리했습니다. 메인홈과 검색 UX를 개편해 탐색성과 체류시간을 높인 사례를 공유했습니다.
#UI/UX#디자인 시스템
12005분
FE개발그룹에서는 Tailwind CSS를 왜 도입했고, 어떻게 사용했을까?
FE개발그룹에서는 Tailwind CSS를 왜 도입했고, 어떻게 사용했을까?
카카오페이지 웹 개편에서 Emotion CSS의 한계를 줄이기 위해 Tailwind CSS와 Twin.Macro를 도입했습니다. 디자인 시스템 네이밍을 쉽게 반영하고, 커스텀 플러그인으로 부족한 유틸리티를 보완했습니다.
#Tailwind CSS#Emotion CSS
46005분