피그마10 피그마 대시보드 디자인 (레이아웃 그리드, 컴포넌트, 컬러 시스템) 대시보드 디자인에서 개발팀 피드백 1위는 단연 "간격이 화면마다 다르다"입니다. 저도 프리랜서 5년 차가 되기 전까지 이 말을 귀에 못이 박히도록 들었습니다. 레이아웃 그리드 하나 제대로 안 잡고 눈대중으로 요소를 쌓아올렸던 시절 얘기입니다. 피그마로 대시보드를 처음부터 완성하는 과정을 정리하면서, 제가 실제로 겪은 시행착오와 그걸 어떻게 넘었는지 함께 풀어보겠습니다.레이아웃 그리드와 컴포넌트 구조: 디자인 일관성의 실체1920x1080 해상도 프레임에 레이아웃 그리드를 설정하는 것이 대시보드 작업의 첫 단추입니다. 레이아웃 그리드란 화면을 일정한 컬럼과 여백으로 나누어 요소를 정렬하는 기준 격자를 말합니다. 쉽게 말해 도화지에 미리 줄을 그어두는 것과 같습니다. 마진 32, 거터 0 설정으로 콘텐츠 영.. 2026. 4. 10. 피그마 Variables로 다크 모드 구축 (컬러 시스템, 시맨틱 컬러, 개발자 핸드오프) 프리랜서 디자이너 5년 차에 접어들던 어느 날, 30장이 넘는 화면의 다크 모드 시안을 납품했다가 개발팀에게서 "컬러가 화면마다 달라요"라는 피드백을 받은 적이 있습니다. 밤새 버튼 배경색을 바꿔놓고 그 위 텍스트 컬러는 깜빡한 것이었습니다. 그때부터 피그마 Variables를 제대로 써야겠다고 마음먹었고, 직접 써봤더니 작업 방식이 완전히 달라졌습니다.컬러 시스템을 구조부터 다시 짠다는 것저도 처음엔 디자인 토큰 방식으로 버텼습니다. 여기서 디자인 토큰(Design Token)이란 컬러, 타이포그래피, 간격 같은 디자인 속성을 이름과 값으로 저장해두는 방식으로, 일종의 디자인 변수 사전이라고 보면 됩니다. 라이트 모드 시안을 완성한 뒤 다크 모드는 수작업으로 컬러를 하나씩 교체했는데, 화면 수가 늘어날.. 2026. 4. 9. 피그마 vs Stitch (AI 디자인, 코드 생성, 워크플로우) 피그마의 Make 기능이 자연어 한 줄로 반응형 프로토타입을 뽑아내기 시작했습니다. 디자인 툴이 코드까지 건드리는 시대가 왔다는 걸 처음 봤을 때, 솔직히 이건 예상 밖이었습니다. 5년차 프리랜서로서 툴 하나가 기획-디자인-개발을 통째로 커버한다는 게 현실이 될 줄은 몰랐으니까요.피그마와 Stitch, AI 디자인 생성의 최전선피그마의 가장 큰 변화는 코드 자동 생성입니다. Make 기능은 자연어 프롬프트(사용자가 원하는 내용을 일상적인 언어로 입력하는 방식)를 받아서 반응형 프로토타입을 즉시 생성합니다. 여기서 반응형이란 화면 크기에 따라 레이아웃이 자동으로 재배치되는 방식을 뜻합니다. 버튼과 컴포넌트를 하나씩 쌓던 방식과는 차원이 다릅니다.여기에 더해 피그마는 MCP(Model Context Prot.. 2026. 4. 8. 디자인 토큰 (네이밍 컨벤션, 토큰 구조, 자동화 파이프라인) 솔직히 저는 디자인 토큰이 그냥 "색깔에 이름 붙이는 것" 정도라고 생각했습니다. 디자인 시스템을 처음 구축하던 시절, 색상 이름을 red, dark-gray, white-background 식으로 저장해 두고는 꽤 체계적이라고 자부했었으니까요. 그 착각이 얼마나 비싼 대가를 치르게 되는지는, 실제로 무너져봐야 알게 됩니다.네이밍 컨벤션 — "이름이 틀리면 시스템 전체가 흔들린다"작년에 B2B SaaS 대시보드 프로젝트에서 디자인 시스템을 처음부터 구축할 때 일입니다. 디자이너 두 명이 각자 익숙한 색상 코드를 쓰다 보니 같은 앱인데 화면마다 분위기가 달랐습니다. 버튼 배경색이 한 화면에서는 #E53935, 다른 화면에서는 #EF5350이었고, 둘 다 "빨간 버튼"으로 통했습니다. 개발자에게 "이 빨간색.. 2026. 4. 7. 이전 1 2 다음
