디자인 시스템11 Recraft AI 디자인 (벡터 아트, 프라이버시 신뢰, 분기 거버넌스) 디자이너라면 한 번쯤 "이 AI 툴, 내 파일 어디로 보내는 거지?"라는 생각을 해봤을 겁니다. 저도 처음 Recraft AI를 클라이언트 프로젝트에 도입했을 때 그 질문이 머릿속을 맴돌았습니다. 기능은 좋은데, 신뢰를 어떻게 설계할 것인가. 그게 진짜 문제였습니다.벡터 아트 생성, 실제로 써보니 이랬습니다Recraft AI는 디자이너를 위해 설계된 이미지 생성 도구입니다. 일반적인 AI 이미지 툴과 달리 SVG, PNG, 래스터 포맷을 모두 지원해 브랜딩, 웹, 디지털 제품 작업에 바로 투입할 수 있습니다. 여기서 SVG(Scalable Vector Graphics)란 이미지를 수학적 경로로 정의하는 벡터 파일 형식으로, 어떤 크기로 확대해도 품질이 유지되는 것이 특징입니다.제가 직접 써봤는데, 사용 .. 2026. 6. 12. Claude Projects 실무 활용 (커스텀 지식, 핸드오프, 거버넌스) 디자인-개발 협업에서 가장 많은 시간을 잡아먹는 게 뭔지 아십니까? 놀랍게도, 실제 작업이 아니라 "이 컴포넌트 스펙이 뭐였죠?"라고 묻고 답하는 Q&A입니다. 저도 처음엔 AI가 그 반복을 줄여줄 거라 기대하면서도 반신반의했는데, 외주 4곳에 Claude Projects를 붙여보고 나서 생각이 완전히 바뀌었습니다.커스텀 지식으로 Q&A 자동화하기Claude Projects에서 가장 먼저 눈에 들어오는 기능은 커스텀 지식(Custom Knowledge) 업로드입니다. 커스텀 지식이란 프로젝트 단위로 문서, PDF, 마크다운 파일을 미리 올려두면 Claude가 모든 대화에서 해당 문서를 참조 기반으로 삼는 구조를 말합니다. 단순한 파일 첨부가 아니라, 프로젝트 범위 안에서 지식이 지속적으로 살아 있는 셈입.. 2026. 6. 9. 스와이프 UX 가이드 (발견성 온보딩, 색·아이콘 표준, Undo 복구) 솔직히 저는 스와이프 액션을 추가하면 사용자가 알아서 쓸 거라고 생각했습니다. 이메일 클라이언트 외주를 마치고 첫 주 데이터를 뜯어보니 현실은 달랐습니다. 스와이프를 단 한 번도 쓰지 않은 사용자가 39%에 달했고, 그때서야 '발견성' 문제가 얼마나 심각한지 깨달았습니다. 스와이프 UX에서 진짜 싸움은 기능 구현이 아니라 사용자가 그 기능의 존재를 아느냐 모르느냐에 있습니다.발견성 온보딩: 한국 사용자가 스와이프를 못 찾는 이유제가 직접 분석한 데이터에서 한국 사용자의 스와이프 첫 7일 비사용률은 39%였습니다. 영미권 서비스 사례와 비교했을 때 눈에 띄게 높은 수치입니다. 이유를 추적해보니 온보딩 자체가 없거나, 있어도 너무 늦게 노출되는 경우가 대부분이었습니다.여기서 발견성 온보딩(Discoverab.. 2026. 6. 6. 파일 업로드 UX (진행 표시, 실패 카피, 백그라운드 업로드) 진행 표시 하나 없는 업로드 화면, 그게 정말 사용자 문제일까요? 저는 한 SaaS 도큐먼트 외주에서 일주일에 32명이 같은 실수를 반복하는 걸 목격한 뒤 이 질문이 완전히 달라졌습니다. 50MB 파일을 올리다 아무 반응이 없으면 사람은 본능적으로 새로고침을 누릅니다. 설계가 침묵을 선택한 순간, 사용자는 실패를 직접 만들어냅니다.진행 표시 없는 업로드가 만드는 조용한 사고직접 겪어보니 이 문제는 서버 성능이나 네트워크 속도와 전혀 관계가 없었습니다. 파일은 정상적으로 올라가고 있었는데, 화면이 아무 피드백도 주지 않으니 사용자가 먼저 포기해버리는 구조였습니다.저는 여기서 세 가지 요소를 추가했습니다. 진행률 바(Progress Bar), 예상 완료 시간 카피, 그리고 취소 버튼입니다. 진행률 바란 현재.. 2026. 6. 4. 칩 컴포넌트 설계 (변형 구조, 단축 옵션, 도메인 최적화) 예약 시스템 외주를 맡았을 때 처음 맞닥뜨린 문제는 캘린더 입력이 아니었습니다. 정작 발목을 잡은 건 칩 컴포넌트였습니다. 첫 사용자 성공률이 64%에 머물렀고, 원인을 파고들수록 칩 설계 방식이 UX 전체에 얼마나 깊이 연결돼 있는지 실감했습니다. 컴포넌트 하나를 어떻게 만드느냐가 결국 전환율 숫자를 바꿉니다.칩 컴포넌트의 변형 구조, 왜 셋으로 나뉘는가처음 피그마에서 칩 컴포넌트를 설계할 때 저도 의아했던 부분이 있습니다. 액션 칩(Action Chip), 초이스 칩(Choice Chip), 필터 칩(Filter Chip)이 시각적으로는 동일한 형태를 가지는데 왜 굳이 세 가지로 분리하느냐는 것이었습니다.여기서 칩 컴포넌트란 사용자가 정보를 입력하거나, 선택을 내리거나, 콘텐츠를 필터링하거나, 특정 .. 2026. 6. 4. Rive 상태 기계 (입문, Figma 동기화, 컴포넌트) 애니메이션 툴을 바꾼다고 해서 사용자 반응이 달라질까요? 저는 반신반의하면서 Lottie를 버리고 Rive로 갈아탔고, 결과적으로 NPS가 6에서 9로 뛰었습니다. 도구 하나가 그 차이를 만들었다기보다, 상태 기계(State Machine)라는 개념이 인터랙션 설계 방식 자체를 바꿔놓은 겁니다. 이 글은 그 경험을 토대로 Rive 상태 기계의 구조와 실무 적용법을 논리적으로 풀어봅니다.상태 기계 입문: 노드와 트랜지션의 구조Rive의 애니메이션 작업은 타임라인(Timeline) 방식과 상태 기계(State Machine) 방식으로 나뉩니다. 타임라인은 Lottie와 비슷하게 프레임 단위로 움직임을 정의하는 방식입니다. 반면 상태 기계는 각 애니메이션을 하나의 '상태(State)'로 보고, 상태 간 전환 .. 2026. 5. 19. 이전 1 2 다음
