컴포넌트3 AI 통합 함정 (컨텍스트 분기, 신뢰도 패턴, 인텐트 설계) 솔직히 이건 예상 밖이었습니다. 클라이언트 SaaS에 ChatGPT를 붙이고 나서 D7, 즉 출시 7일 차에 "왜 이런 답이 나왔지?"라는 컴플레인이 12건이나 쌓였을 때, 처음엔 모델 문제인 줄 알았습니다. 그런데 원인은 전혀 다른 곳에 있었고, 그걸 알게 된 건 AI UX 설계를 다룬 한 발표 영상 덕분이었습니다. 5년 차 프리랜서로 일하면서 ChatGPT 통합 관점이 이렇게 크게 바뀐 건 처음이었습니다.챗봇을 붙이면 끝이라고 생각했습니까저도 처음엔 그렇게 생각했습니다. AI 기능을 붙이는 일은 그냥 챗 UI(Chat UI)를 심는 것, 즉 입력창 하나에 LLM 응답을 출력하는 구조로 충분하다고 봤습니다. 여기서 챗 UI란 사용자가 자연어로 질문하고 AI가 실시간으로 응답하는 대화형 인터페이스를 말합.. 2026. 5. 13. Figma 드래그앤드롭 (컴포넌트, 인터랙션, 업로드 UX) 클릭 버튼 하나로만 파일을 올릴 수 있는 인터페이스, 한 번쯤 답답하게 느껴보신 적 있으실 겁니다. 저도 외주 작업에서 똑같은 상황을 겪었습니다. 클릭만 되는 업로드 버튼을 드래그앤드롭 병행 방식으로 바꾼 이후, 주간 업로드 건수가 14건에서 28건으로 두 배가 됐습니다. 그 전환점에 Figma 프로토타입이 있었습니다.컴포넌트 기반 설계가 왜 필요한가Figma에서 드래그앤드롭 인터랙션을 만들 때 많은 분들이 단순히 화면 두 개를 연결하는 것으로 충분하다고 생각하시는 경우가 있는데, 저는 그렇게 접근하면 반드시 막히는 지점이 온다고 봅니다.핵심은 Variants(베리언츠)입니다. 여기서 Variants란 하나의 컴포넌트 안에서 상태별 디자인 변형을 묶어두는 기능입니다. 파일 아이콘 하나에 '기본 상태'와 .. 2026. 5. 11. 피그마 대시보드 디자인 (레이아웃 그리드, 컴포넌트, 컬러 시스템) 대시보드 디자인에서 개발팀 피드백 1위는 단연 "간격이 화면마다 다르다"입니다. 저도 프리랜서 5년 차가 되기 전까지 이 말을 귀에 못이 박히도록 들었습니다. 레이아웃 그리드 하나 제대로 안 잡고 눈대중으로 요소를 쌓아올렸던 시절 얘기입니다. 피그마로 대시보드를 처음부터 완성하는 과정을 정리하면서, 제가 실제로 겪은 시행착오와 그걸 어떻게 넘었는지 함께 풀어보겠습니다.레이아웃 그리드와 컴포넌트 구조: 디자인 일관성의 실체1920x1080 해상도 프레임에 레이아웃 그리드를 설정하는 것이 대시보드 작업의 첫 단추입니다. 레이아웃 그리드란 화면을 일정한 컬럼과 여백으로 나누어 요소를 정렬하는 기준 격자를 말합니다. 쉽게 말해 도화지에 미리 줄을 그어두는 것과 같습니다. 마진 32, 거터 0 설정으로 콘텐츠 영.. 2026. 4. 10. 이전 1 다음
