디자인 토큰3 GitHub Copilot 활용법 (코드 이해, 디버깅, 커밋 자동화) 솔직히 고백하면, 저는 처음에 GitHub Copilot을 그냥 자동완성 도구 정도로만 생각했습니다. 그런데 사내 디자인 토큰 자동화 외주를 맡으면서 생각이 완전히 바뀌었습니다. 디자이너가 직접 스크립트를 짤 수 있도록 Copilot을 가르쳐야 했는데, 그때서야 이 도구가 단순한 코드 보조가 아니라는 걸 체감했습니다.코드를 처음 보는 사람도 이해할 수 있는 이유새 프로젝트를 열면 가장 먼저 하는 질문이 있습니다. "이 코드가 도대체 뭘 하는 건가?" 저도 외주를 받을 때마다 이 벽에 부딪혔습니다. Copilot Chat 사이드 패널에 "이 애플리케이션의 목적, 구조, 핵심 컴포넌트가 뭔가요?"라고 물으면, 전체 프로젝트를 스캔해서 기능 요약과 사용 중인 NuGet 패키지, 주요 클래스 목록까지 한 번에 .. 2026. 5. 16. UI 간격 설계 (게슈탈트, 디자인 토큰, 시각 위계) 어드민 대시보드 설정 페이지를 처음 만들 때, 저도 그랬습니다. 간격을 16px로 통일하면 깔끔해 보일 거라 생각했습니다. 그런데 파일럿 테스트에서 5명 중 3명이 "섹션 경계를 찾기 어렵다"고 했을 때, 뭔가 근본적인 걸 놓쳤다는 걸 직감했습니다. 간격이 균일하면 정돈돼 보인다는 건 초심자 시절의 미신이었습니다. 공간이 의미를 만든다는 관점으로 전환하지 못하면 시각 위계 자체가 무너집니다.균일한 간격이 왜 오히려 독이 되는가UI 설계에서 간격은 단순한 여백이 아닙니다. 어떤 요소가 같은 그룹에 속하는지, 어디서 섹션이 끊기는지를 눈이 아닌 뇌가 먼저 판단합니다. 이 판단의 근거가 되는 것이 바로 게슈탈트(Gestalt) 원리입니다. 게슈탈트란 독일어로 '형태' 또는 '전체'를 뜻하는 개념으로, 인간의 .. 2026. 4. 26. 디자인 토큰 (네이밍 컨벤션, 토큰 구조, 자동화 파이프라인) 솔직히 저는 디자인 토큰이 그냥 "색깔에 이름 붙이는 것" 정도라고 생각했습니다. 디자인 시스템을 처음 구축하던 시절, 색상 이름을 red, dark-gray, white-background 식으로 저장해 두고는 꽤 체계적이라고 자부했었으니까요. 그 착각이 얼마나 비싼 대가를 치르게 되는지는, 실제로 무너져봐야 알게 됩니다.네이밍 컨벤션 — "이름이 틀리면 시스템 전체가 흔들린다"작년에 B2B SaaS 대시보드 프로젝트에서 디자인 시스템을 처음부터 구축할 때 일입니다. 디자이너 두 명이 각자 익숙한 색상 코드를 쓰다 보니 같은 앱인데 화면마다 분위기가 달랐습니다. 버튼 배경색이 한 화면에서는 #E53935, 다른 화면에서는 #EF5350이었고, 둘 다 "빨간 버튼"으로 통했습니다. 개발자에게 "이 빨간색.. 2026. 4. 7. 이전 1 다음
