데이데이 큐레이션 for Design DayDay Curation

AI 에이전트 UX 디자인 | 실행 전 확인·취소·복구 설계

AI에게 “최신 시안을 고객에게 보내줘”라고 말했을 때, 디자이너는 무엇을 설계해야 할까. 멋진 채팅창과 자연스러운 답변만으로는 부족하다. 어떤 파일을 골랐는지, 누구에게 보낼지, 아직 보내기 전인지, 이미 보낸 뒤인지가 사용자에게 보여야 한다. AI 에이전트 UX 디자인의 핵심은 대화의 매끄러움보다 행동의 통제 가능성에 있다.이 글은 AI가 읽고 제안하는 단계를 넘어 실제 작업을 수행하는 제품을 위한 설계 가이드다. 공식 인간-AI 상호작용 원칙을 바탕으로 실행 전 확인, 진행 상태, 취소와 복구를 정리하고, 가상의 시안 전달 업무에 적용한다. 도구 추천이나 실제 서비스 사용 후기가 아니라 디자이너와 개발자가 함께 검토할 수 있는 의사결정 프레임이다.30초 요약· “답변 생성”과 “외부에 실제 행동”은..

온디바이스 AI란? 디자이너가 알아야 할 클라우드 AI와 UX 차이

메모 앱에 ‘AI로 요약하기’ 버튼을 추가한다고 생각해 보자.버튼 모양은 같아도 처리 방식에 따라 경험은 달라진다. 기기 안에서 처리할 수도 있고, 내용을 서버로 보내 처리할 수도 있다.이 차이는 개발 구조에만 영향을 주지 않는다. 개인정보 안내, 대기 화면, 오프라인 동작, 지원 기기 안내까지 바꾼다.AI 기능을 디자인할 때는 무엇을 생성하는지뿐 아니라, 어디에서 처리하는지도 알아야 한다.1. 온디바이스 AI는 기기에서 실행하는 AI다온디바이스 AI는 모델의 추론을 스마트폰이나 컴퓨터 같은 사용자 기기에서 실행하는 방식이다. 클라우드 AI는 원격 서버에서 처리한다.Apple은 Foundation Models의 온디바이스 모델을 활용해 오프라인 생성 기능을 구현할 수 있다고 설명한다.다만 이것을 ‘앱 전..

패스키란? 비밀번호 없는 로그인에서 디자이너가 챙겨야 할 UX

로그인 화면에서 비밀번호 입력란이 사라진다. 대신 얼굴이나 지문을 확인하면 서비스에 들어갈 수 있다.패스키를 처음 접하면 ‘생체인증 로그인’ 정도로 이해하기 쉽다. 하지만 디자이너에게 중요한 변화는 인증 방식보다 그 주변에 있다.사용자는 패스키가 어디에 저장되는지, 휴대폰을 바꾸면 어떻게 되는지, 인증 창을 닫았을 때 무엇을 해야 하는지 궁금해한다.입력란은 줄어들지만, 설명해야 할 경험까지 사라지는 것은 아니다.1. 패스키는 지문을 서버에 보내는 기술이 아니다패스키는 공개키 암호 기술에 기반한 로그인 자격 증명이다. 사용자는 기기의 생체인증이나 PIN 등으로 사용을 승인하며, 이때 생체정보는 원격 서버에 전달되지 않는다.따라서 ‘지문을 등록해 주세요’라는 문구는 서비스가 지문을 직접 수집한다는 오해를 만..

피그마 변수 사용법 | 색상 일괄 변경부터 다크 모드까지

버튼 색상을 바꾸라는 피드백을 받았다. 화면은 20개이고, 같은 색상을 사용하는 버튼과 아이콘은 수십 개다.하나씩 수정하면 시간이 오래 걸린다. 복사한 화면 중 몇 군데를 놓치면 같은 서비스 안에서도 색상이 달라진다.피그마 변수는 이런 반복 수정을 줄이는 기능이다. 색상이나 간격에 이름을 붙여 연결하고, 값이 바뀌면 연결된 요소에 반영하는 방식이다.이 글에서는 색상 변수 만들기부터 다크 모드 적용, 설정했는데 바뀌지 않을 때 확인할 것까지 정리한다.30초 요약변수: 색상·숫자 등 재사용할 값에 붙이는 이름이다.컬렉션: 관련 변수와 모드를 묶는 단위다.모드: 같은 변수에 상황별로 다른 값을 저장하는 방식이다.색상 코드를 직접 입력하는 것과 변수를 연결하는 것은 다르다.기본 변수는 모든 플랜에서 사용할 수 ..

제미나이 4 아르곤 | 출시일·사용 가능 여부·API 가격

‘제미나이 4 아르곤’을 검색했는데 Gemini 앱에는 이름이 보이지 않는다. Google AI Ultra를 결제하면 바로 쓸 수 있는지, 100만 토큰당 2달러라는 말이 월 구독료인지도 헷갈린다. 새 AI 모델 발표에서 가장 먼저 구분해야 할 것은 성능보다 발표된 모델과 실제 사용할 수 있는 제품의 차이다.이 글은 Gemini 4 Argon의 발표일, 공개 범위, 예정 API 가격을 공식 자료 기준으로 정리한다. 여기에 구독 전 확인표와 가상 업무의 토큰 비용 계산을 더해, ‘어떤 모델이 최고인가’보다 ‘내가 지금 무엇을 확인해야 하는가’에 답한다.확인 기준: 2026년 10월 11일. Google의 9월 30일 발표, Gemini API 모델·가격 문서, Gemini 앱 릴리스 안내를 확인했다. 공식..

피그마 프로토타입 스크롤 안 될 때 | 고정 헤더까지 해결

피그마에서 긴 화면을 만들었는데 프로토타입에서는 아래로 내려가지 않는다. 헤더에 고정 설정을 했더니 화면 밖으로 사라지고, 탭 메뉴에 Sticky를 적용했는데 중간부터 다시 움직인다.이럴 때 설정을 전부 바꾸기보다 보이는 창의 크기, 콘텐츠의 길이, 레이어의 부모 관계를 나눠 확인하면 문제를 좁힐 수 있다. 이 글은 세로 스크롤과 Fixed·Sticky의 차이, 증상별 확인 순서를 정리한다.안내: 2026년 10월 11일 확인한 Figma Design 공식 도움말을 바탕으로 작성했다. 실제 사용자 파일에서 실습한 결과는 아니다. 아래 화면 치수와 구성은 설명을 위한 가상 예제이며, 권장 기기 규격이나 실측값이 아니다.30초 요약· 스크롤하려면 콘텐츠가 프레임 경계 밖까지 이어져야 한다.· 프레임의 Ove..

밤에 책상 위 작은 램프 하나만 켜 두면 이상하게 생각이 또렷해진다. 방의 나머지가 어두워지면 남는 건 종이와 지금 쓰고 있는 문장뿐이기 때문이다.그런데 요즘 노트 앱을 열면 반대의 경험을 하게 된다. 알림, 사이드바, 공유 버튼, 끝없는 서식 메뉴까지. 첫 문장을 쓰기도 전에 고를 것이 너무 많다.그래서 직접 만들었다. Lamplight는 어두운 방의 작은 램프 아래에서 타자기로 한 글자씩 쓰는 느낌을 담은 macOS 메모 앱이다. 쓰는 동안에는 아무것도 고르지 않고, 다 쓴 다음에 27가지 템플릿으로 원하는 모습으로 꺼내 쓸 수 있게 디자인했다.쓰는 자리에만 빛이 닿는다. 마우스를 움직이면 램프도 따라 움직인다.30초 요약무엇: 타자기 감성의 macOS 메모 앱. 무료다.쓰는 경험: 지금 쓰는 줄만 ..

버튼 하나를 화면 30개에 복사해 두었는데, 모서리 값을 바꿔 달라는 피드백을 받는다. 하나씩 고치다 보면 꼭 한두 개는 빠진다. 피그마 컴포넌트는 이런 반복 수정을 줄이기 위한 기능이다.그런데 막상 써보면 "인스턴스에서 아이콘 위치가 안 옮겨진다", "배리언트를 바꿨더니 입력한 문구가 사라졌다" 같은 상황을 만나게 된다. 대부분은 메인 컴포넌트와 인스턴스가 각각 무엇을 담당하는지 구분하면 풀린다.이 글은 Figma Design을 기준으로 컴포넌트 만들기, 인스턴스 수정(오버라이드), 배리언트 묶기, 컴포넌트 속성 사용법과 자주 막히는 상황의 확인 순서를 정리한다.30초 요약메인 컴포넌트는 원본, 인스턴스는 원본과 연결된 복사본이다. 메인을 고치면 인스턴스에 반영된다.인스턴스에서는 텍스트·채우기·선·효과..

피그마 이미지 내보내기를 했는데 글자가 흐릿하거나, 투명해야 할 배경이 흰색으로 저장되는 경우가 있다. 같은 디자인을 PNG와 SVG로 내보냈더니 결과가 달라 보이기도 한다.이럴 때는 무조건 3x로 다시 저장하기보다 무엇을, 어디에, 얼마나 크게 사용할지부터 정하는 편이 빠르다. 화면 캡처와 개발용 아이콘은 같은 내보내기 설정을 쓸 이유가 없기 때문이다.이 글은 Figma Design의 정적 이미지 내보내기를 기준으로 PNG·JPG·SVG·PDF 선택법과 화질 깨짐, 투명 배경, 글꼴 문제의 확인 순서를 정리한다.30초 요약글자와 UI가 들어간 화면 이미지는 PNG부터 검토한다.사진 중심이고 투명 배경이 필요 없다면 JPG를 검토한다.확대해서 쓸 벡터 아이콘·로고는 SVG가 적합하다.검토용 문서나 고정된..

피그마에서 버튼 문구를 바꿨더니 글자가 밖으로 튀어나온다. 카드 너비를 늘렸는데 안쪽 텍스트는 그대로다. 튜토리얼에 보이는 ‘Fill container’가 내 화면에는 없다.오토레이아웃을 처음 쓸 때 자주 만나는 문제다. 대부분은 기능이 고장 난 게 아니라 어떤 레이어를 기준으로 크기가 바뀌는지 설정하지 않아서 생긴다.이 글에서는 피그마 오토레이아웃의 핵심인 Hug contents, Fill container, Fixed 차이를 정리하고, 버튼과 카드에 적용하는 방법까지 살펴본다.30초 요약Hug contents: 안쪽 콘텐츠에 맞춰 크기가 바뀐다.Fill container: 부모 오토레이아웃에서 사용 가능한 공간을 채운다.Fixed: 지정한 너비나 높이를 유지한다.너비와 높이는 각각 다르게 설정할 수 ..