디자인시스템5 디자인 시스템의 뿌리, 디자인 토큰(Design Tokens): 심화 설계를 위한 필수 기초 지식 효율적인 UI 협업의 시작, 디자인 토큰: 디자인-개발 싱크를 위한 구조적 가이드라인0. 들어가며: 왜 지금 '디자인 토큰'인가?최근 UI/UX 디자인 현장에서 '피그마 변수(Variables)' 기능의 등장은 디자인 시스템의 패러다임을 완전히 바꾸어 놓았습니다. 단순히 색상을 저장하는 '스타일' 단계를 넘어, 코드와 디자인이 실시간으로 동기화되는 '디자인 토큰(Design Tokens)' 체계가 필수가 된 것이죠.특히 대한민국 공공 웹·앱의 표준인 KRDS(Korean Government Design System) 역시 이 토큰 체계를 통해 접근성과 일관성을 관리하고 있습니다. 오늘은 초보 디자이너부터 실무자까지 아우를 수 있는 디자인 토큰의 개념과 피그마 활용법, 그리고 KRDS의 모범 사례와 202.. 2026. 1. 9. Figma Variables로 구축하는 다크모드 디자인 시스템 (Hex 코드 포함) 디자인 시스템의 실전: Figma Variables 실무 가이드단순히 색을 고르는 단계를 넘어, 개발자와 협업 가능한 디자인 토큰(Design Tokens)을 설계합니다.실제 핀테크/증권 프로젝트에서 바로 복사해서 쓸 수 있는 핵심 컬러 팔레트와 네이밍 컨벤션을 공개합니다.안녕하세요! 지난 포스팅에서 다크모드의 전략적 중요성을 다뤘다면, 오늘은 그 전략을 실제 Figma에서 어떻게 구현하는지 알아보겠습니다. Figma의 Variables(변수) 기능은 라이트/다크 모드 전환을 1초 만에 가능하게 할 뿐만 아니라, 개발자와의 소통 비용을 획기적으로 줄여줍니다.1. 핵심은 네이밍: 역할(Role) 중심의 토큰 설계많은 디자이너가 실수하는 부분이 `Color/Grey-100`처럼 색상 이름으로 변수를 만드는 .. 2026. 1. 8. 금융 앱 다크모드 디자인 전략: 단순한 반전이 아닌 UX 설계의 차이 금융 UX의 심장, 다크모드 전략 가이드증권사 MTS부터 핀테크 앱까지, 다크모드는 이제 '취향'이 아닌 '환경'입니다.실무 디자이너가 밤잠 설쳐가며 고민하는 라이트 vs 다크 모드 설계의 본질을 파헤칩니다.금융권 앱 프로젝트를 진행하다 보면 가장 많이 받는 질문 중 하나가 "그냥 색만 반전시키면 되는 것 아닌가요?"입니다. 하지만 숫자가 생명인 금융 서비스에서 다크모드 설계는 사용자의 가독성, 시각적 피로도, 그리고 실시간 데이터에 대한 반응 속도를 결정짓는 고도의 설계 작업입니다.1. 금융 환경에서의 모드별 UX 분석: 뇌가 반응하는 방식라이트 모드와 다크 모드는 단순히 색의 차이가 아니라 사용자가 정보를 받아들이는 심리적 상태를 바꿉니다.구분라이트 모드 (Positive Contrast)다크 모드 .. 2026. 1. 7. Figma 작업 시 필수! 금융권 UX 디자이너를 위한 웹 접근성 체크리스트 Figma 작업 시 필수! 금융권 UX 디자이너를 위한 웹 접근성(WA) 체크리스트금융 앱은 남녀노소 누구나 자신의 자산을 안전하게 관리할 수 있어야 합니다. 단순히 가이드라인을 지키는 수준을 넘어, 실무 작업 단계에서 디자인 퀄리티와 접근성을 동시에 잡는 Figma 전용 워크플로우와 체크리스트를 상세히 정리했습니다.많은 디자이너가 프로젝트 막바지 검수 단계에서 웹 접근성(WA) 수정 요청을 받고 당황하곤 합니다. 특히 금융권은 법적 규제가 까다로워 디자인 시스템 초기 단계부터 접근성을 고려하지 않으면 전체 컴포넌트를 다시 설계해야 하는 상황이 발생할 수 있습니다.오늘은 제가 실제 증권사 및 은행 앱 프로젝트를 수행하며 구축한 'Figma 접근성 자가 검수 워크플로우'를 바탕으로, 실무에서 놓치기 쉬운 .. 2026. 1. 6. 금융 UX의 본질: 까다로운 웹 접근성(WA) 규제 속에서 디자인 퀄리티를 지키는 법 "픽셀 너머의 세상을 설계하고, 일상의 찰나를 기록합니다."UX/UI 디자이너의 시선으로 바라본 디자인 인사이트와 감성적인 기록의 공존.안녕하세요. 16년 차 UX/UI 디자이너입니다. 최근 증권사 앱 구축 프로젝트에 참여하며 디자이너로서 가장 큰 화두는 단연 ‘웹 접근성(Web Accessibility, 이하 WA)’입니다.특히 금융권은 공공성과 법적 규제가 강해 접근성 준수가 선택이 아닌 필수입니다. 하지만 많은 디자이너가 명도 대비나 색상 제한 같은 가이드라인을 마주할 때 "디자인이 투박해진다"거나 "창의성이 제한된다"는 갈증을 느끼곤 합니다. 오늘은 규제가 까다로운 금융 인터페이스 설계 과정에서, 모두를 위한 접근성을 확보하면서도 시각적 아름다움(Aesthetic)을 놓치지 않는 저만의 실무 노하.. 2026. 1. 6. 이전 1 다음 반응형
