디자인시스템11 마이크로 인터랙션 (타이밍, 스마트애니메이트, 디자인토큰) 버튼을 눌렀는데 아무 반응이 없는 것 같아서 한 번 더 누른 경험, 다들 있으실 겁니다. 저도 결제 플로우를 담당하면서 딱 그 문제를 마주했습니다. 중복 결제 이슈가 주 12건씩 접수되던 시절 얘기입니다. 원인을 파고들수록 결론은 하나였습니다. 버튼이 눌렸다는 신호를 사용자가 인지하지 못했던 것입니다. 마이크로 인터랙션은 그래서 존재합니다.왜 지금 타이밍 설계가 다시 화두인가마이크로 인터랙션(Micro Interaction)이란 사용자의 단일 행동에 반응하는 아주 작은 단위의 피드백 애니메이션을 말합니다. 좋아요 버튼이 채워지거나, 토글이 넘어가거나, FAQ 항목이 펼쳐지는 것처럼 0.1초 남짓한 움직임입니다.일반적으로 이런 작업은 구현 난이도가 낮다고 보는 시각도 있는데, 제가 직접 써봤는데 실상은 완.. 2026. 4. 25. 디자인 토큰 (토큰 구조, 네이밍 컨벤션, 자동화 파이프라인) 버튼 하나의 컬러를 바꾸는 데 이틀이 걸렸습니다. 수동으로 화면 수십 개를 뒤지고, 개발자에게 헥스코드를 일일이 붙여 넣어서 전달하던 시절 얘기입니다. 디자인 토큰을 도입하고 나서야 그게 얼마나 비효율적인 구조였는지 실감했습니다. 이 글은 그 경험을 바탕으로, 토큰 구조 설계부터 네이밍 컨벤션, 자동화 파이프라인까지 실무에서 어떻게 작동하는지 풀어봤습니다.손으로 하나씩 고치던 시절, 토큰 구조가 바꾼 것디자인 시스템을 도입하기 전 저는 프리랜서 UI/UX 디자이너로 B2B SaaS 프로젝트를 진행하고 있었습니다. 당시의 작업 방식은 단순했지만 끔찍했습니다. 디자인 수정이 생기면 Figma에서 화면별로 일일이 컬러를 찾아 바꿔야 했고, 개발자에게 넘길 때는 "#1A1A2E입니다"처럼 헥스코드를 직접 전달했.. 2026. 4. 10. 피그마 Variables로 다크 모드 구축 (컬러 시스템, 시맨틱 컬러, 개발자 핸드오프) 프리랜서 디자이너 5년 차에 접어들던 어느 날, 30장이 넘는 화면의 다크 모드 시안을 납품했다가 개발팀에게서 "컬러가 화면마다 달라요"라는 피드백을 받은 적이 있습니다. 밤새 버튼 배경색을 바꿔놓고 그 위 텍스트 컬러는 깜빡한 것이었습니다. 그때부터 피그마 Variables를 제대로 써야겠다고 마음먹었고, 직접 써봤더니 작업 방식이 완전히 달라졌습니다.컬러 시스템을 구조부터 다시 짠다는 것저도 처음엔 디자인 토큰 방식으로 버텼습니다. 여기서 디자인 토큰(Design Token)이란 컬러, 타이포그래피, 간격 같은 디자인 속성을 이름과 값으로 저장해두는 방식으로, 일종의 디자인 변수 사전이라고 보면 됩니다. 라이트 모드 시안을 완성한 뒤 다크 모드는 수작업으로 컬러를 하나씩 교체했는데, 화면 수가 늘어날.. 2026. 4. 9. UX 라이팅 (마이크로카피, 이용성, 디자인 시스템) 버튼 하나에 들어갈 텍스트를 두고 팀 회의가 30분 넘게 이어진 적이 있습니다. "확인"으로 할지, "삭제하기"로 할지를 두고요. 그때는 솔직히 좀 피곤했습니다. 그런데 제가 직접 B2B SaaS 대시보드 프로젝트를 운영하면서 생각이 완전히 바뀌었습니다. 화면 위 글자 한 줄이 이용자의 행동을 결정한다는 게 과장이 아니었습니다.40조 번 눌린 키패드가 증명한 것혹시 스마트폰에서 전화번호를 입력할 때 숫자 배열이 왜 이렇게 생겼는지 생각해 본 적 있으십니까? 1-2-3이 맨 위, 아래로 내려가며 7-8-9가 오는 이 배열은 1950년대 벨연구소(Bell Labs)의 인간공학 팀이 수십 가지 대안을 직접 테스트한 끝에 선택한 결과입니다. UX 분야의 권위자인 야콥 닐슨(Jakob Nielsen)은 이 키패드.. 2026. 4. 7. UX 디자인 AI 활용 (페르소나 생성, 반복 작업, 전문 용어) AI가 디자이너의 일자리를 빼앗는다는 공포와 AI 없이는 뒤처진다는 조급함 사이에서 여러분은 어디쯤 서 계신가요? 저는 UX 디자인 실무에서 생성형 AI를 2년째 쓰고 있는데, 솔직히 이 도구가 만능은 아니지만 제대로 쓰면 시간을 엄청나게 아낄 수 있다는 걸 경험했습니다. 일반적으로 AI가 창의성을 대체한다고 우려하지만, 제 경험상 AI는 반복적 분석 작업을 덜어주는 보조 도구에 가깝습니다. 이 글에서는 실제 프로젝트에서 AI를 어떻게 활용했는지, 그리고 어떤 한계가 있었는지 비교 검증하며 정리해보겠습니다.페르소나 생성과 리서치 분석에서 AI 활용페르소나(Persona)란 실제 사용자 그룹의 대표적 특성과 행동 패턴을 담은 가상 인물 프로필을 의미합니다. 쉽게 말해 "우리 서비스를 쓰는 전형적인 사람"을.. 2026. 3. 30. 이전 1 2 다음
