# AI and design

> AI와 디자인. "AI의 도움으로 디자인하기"와 "AI가 가미된 제품/서비스를 디자인하기"라는 두 측면이 있다.

[AI](https://wiki.g15e.com/pages/Artificial%20intelligence.txt)와 [디자인](https://wiki.g15e.com/pages/Design.txt). "AI의 도움으로 디자인하기"와 "AI가 가미된 제품/서비스를 디자인하기"라는 두 측면이 있다.

## AI의 도움으로 디자인하기

<ToDo>

도구들

- https://magicpath.ai
  - <Figma> 스타일의 캔버스
  - 컴포넌트 단위로 생성
  - 제법 괜찮아 보이는 디자인 시스템 관리
- https://beta.reweb.so
  - Figma 스타일의 캔버스
  - 컴포넌트 단위로 생성
  - Theme 관리

## AI가 가미된 제품/서비스 디자인

도구가 만들어내는 결과물이 아니라, 결과물을 만드는 과정에서의 경험이 가장 중요한 산출물인 경우가 있다. 이 경우 [과도한 자동화](https://wiki.g15e.com/pages/Over-automation.txt)는 오히려 단점일 수 있다. 참고: [과정에 담긴 가치](https://wiki.g15e.com/pages/Values%20in%20the%20process.txt)

---

자동화는 인간의 단점을 보완하고 장점을 증강하는 방향으로 적용해야 한다. 내가 읽은 뉴스와 유사한 뉴스를 추천해주는 알고리즘은 단점(<선택적 노출 편향>)을 강화하는 방식이다.

---

자동화는 강화하는 피드백(<Reinforcing feedback loop>) 뿐 아니라 견제하는 피드백(<Balancing feedback loop>)도 제공해야 한다.

---

좋은 UI 사례:

- https://aitestkitchen.withgoogle.com/tools/music-fx-dj

## Publications

Books:

- [Human-centered AI](https://wiki.g15e.com/pages/Human-centered%20AI%20(book.txt))
- [People + AI guidebook](https://wiki.g15e.com/pages/People%20+%20AI%20guidebook.txt) (by [Google](https://wiki.g15e.com/pages/Google.txt))
- <Weapons of math destruction>

Papers:

- [Beyond safety: Toward a value-sensitive approach to the design of AI systems](https://wiki.g15e.com/pages/Beyond%20safety%20-%20Toward%20a%20value-sensitive%20approach%20to%20the%20design%20of%20AI%20systems.txt)
- <Value Sensitive Design: Shaping technology with moral imagination>
- [Designing multispecies worlds for robots, cats, and humans](https://wiki.g15e.com/pages/Designing%20multispecies%20worlds%20for%20robots,%20cats,%20and%20humans.txt)
- [Automatic generation of visualizations and infographics with LLMs](https://wiki.g15e.com/pages/Automatic%20generation%20of%20visualizations%20and%20infographics%20with%20LLMs.txt)
- [Evaluating large language models in generating synthetic HCI research data](https://wiki.g15e.com/pages/Evaluating%20large%20language%20models%20in%20generating%20synthetic%20HCI%20research%20data.txt)

## 각종 메모

- 2023-12 [AI-인간 상호작용 루프에서의 병목](https://wiki.g15e.com/pages/Bottleneck%20of%20AI-Human%20interaction%20loop.txt)
- 2023-12-12 - [Designing for AI: Panel Notes](https://www.lukew.com/ff/entry.asp?2043) by LukeW
    - Chat is a very flexible interface, people can define how they want to use it and when they want to use it. But it is a very direct interaction with the model itself. There's few affordances to help people understand the capabilities and limitations they are interacting with.
    - Text is a very imprecise medium, it's good for general direction but more controls are needed for specific use cases. In the future, we'll have a lot more powerful interfaces to AI models.
- 2023-12 - Google Gemini 데모. [즉석에서 UI를 만드는 방식](https://www.youtube.com/watch?v=v5tRc_5-8G4&t=2s)
- 2023-03 - [Building humane UI with LMs](https://www.youtube.com/watch?v=kqFNjIBdXAc)
    - 현재 방식이 "Text-in / Text-out" 위주이지만 사실은 "Anything-you-can-turn-into-text in / Anything-you-can-create-from-text out" 방식이 가능하다는 주장.
    - 내 생각엔 현재 방식은 "Text-in / Text-out"보다는 "Natural language-in / natural language-out"이라고 해야 좀 더 정확한 것 같다. "Text-in / Text-out"은 전통적인 Unix CLI. LLM 덕분에 가능해진 "NL-in / NL-out" 방식의 장점은 (전통적 [[Unix|UNIX]] CLI에 비해) 컴포지션이 더 유연하다는 점. "Anything-you-can-turn-into-text in / Anything-you-can-create-from-text out" 방식은 자칫 유연한 컴포지션을 해칠 수 있겠다. Google Gemini 데모 중 [즉석에서 UI를 만드는 방식](https://www.youtube.com/watch?v=v5tRc_5-8G4&t=2s)은 결과로 만들어진 UI와 인터랙션을 할 수 있지만 "NL-in / NL-out"에 비해 컴포지션이 어려운 느낌이 든다.

## Articles

- 2025-04-15 - [유저 리서치와 AI, 실무자 인사이트 엿보기 : 김은희님](https://maily.so/tipster/posts/8do78dnyrgq)
- 2024-05-13 - [A Design Space for Intelligent and Interactive Writing Assistants](https://programs.sigchi.org/chi/2024/program/content/146994)
- 2024-05-11- [DirectGPT: A Direct Manipulation Interface to Interact with Large Language Models](https://dl.acm.org/doi/10.1145/3613904.3642462)
- 2024-02-16 - [The UX of AI: Lessons from Perplexity](https://www.nngroup.com/articles/perplexity-henry-modisett/)
- 2024-02-16 - [AI Models and Headsets](https://www.lukew.com/ff/entry.asp?2052)
- 2023-10-27 - https://www.nngroup.com/articles/ai-roles-ux/
- 2023-03-03 - [How AI Technology Will Transform Design](https://www.smashingmagazine.com/2023/03/ai-technology-transform-design/)

## Tools

- https://readdy.ai - v0.dev와 유사한데 "디자이너를 위한 서비스"라고 명시적으로 포지셔닝.
  - shadcn/ui 등을 drop-down에서 선택한 뒤 프롬프트를 입력하면 코드를 생성.
  - 생성된 화면에서 특정 링크를 누르면 "그 링크"에 해당하는 페이지를 이어서 생성. 예: "블로그 목록" 화면에서 "블로그 글 제목" 링크를 클릭하면 "블로그 본문" 화면을 생성하는 식.
- https://magicpath.ai