AI 미학

 (blog.jim-nielsen.com)
1P by GN⁺ | ★ favorite | 댓글 1개
  • 기술적 제약에 대응해 등장한 디자인 관용구 중 일부는 유행을 넘어 보편적인 소프트웨어 상호작용 방식으로 자리 잡음
  • AI 인터페이스는 ✨, 무지개색, 스트리밍 텍스트처럼 AI를 상징하거나 대화형 작동 방식에 특화된 시각·행동 패턴을 만들어냄
  • AI의 ‘생각 중’을 나타내던 반짝이는 텍스트는 데이터 가져오기나 계산 같은 일반적인 비동기 작업의 진행 상태를 표시하는 용도로 확산되고 있음
  • Claude, Codex, Cursor 같은 데스크톱 AI 앱은 Apple의 macOS 앱보다 작고 가는 아이콘을 사용해 운영체제 고유의 시각적 질감과 충돌함
  • 베이지·크림색, 주황색 강조, 세리프 글꼴, 위치가 계속 바뀌는 UI 제어 요소도 AI 특유의 미학을 형성하지만, 무엇이 장기적인 소프트웨어 관습으로 남을지는 아직 알 수 없음

AI가 만든 디자인 관용구

  • 시대마다 당면한 과제에 대응하는 새로운 디자인 관용구가 생기며, 일부는 유행과 함께 사라지고 일부는 기존 소프트웨어 상호작용 체계에 흡수됨
  • 햄버거 메뉴(≡)는 모바일의 제한된 화면 크기 때문에 널리 확산됐고, 이후 ‘더 많은 메뉴 콘텐츠’를 간결하게 나타내는 방식으로 다른 소프트웨어 영역에도 정착함
  • 과거에는 의미가 뚜렷하지 않았던 반짝이 이모지 ✨ 가 이제 무지개색과 함께 AI를 대표하는 시각 언어로 쓰임
  • 스트리밍 텍스트는 AI의 대화형 인터페이스를 위해 만들어지고 다듬어진 패턴이어서 다른 소프트웨어 상호작용 방식에서는 재사용 범위가 크지 않을 수 있음
  • AI가 ‘생각 중’임을 나타내는 반짝이는 텍스트는 생각하기, 가져오기, 계산하기 등 다양한 비동기 작업의 진행 상태를 보여주는 방식으로 재활용되기 시작함

확산되는 AI 인터페이스의 외형

  • Claude, Codex, Cursor 같은 데스크톱 Electron 앱은 Finder, Photos, Mail 같은 Apple의 macOS 앱보다 훨씬 작고 가는 아이콘을 사용함
  • AI와 연관된 다른 외형으로는 베이지·크림색, 주황색 강조, 세리프 글꼴이 있음
  • 토글을 클릭할 때마다 전체 UI가 다시 그려져 다음 조작을 위해 마우스를 다른 곳으로 옮겨야 하는 두더지 잡기식 UI도 나타남
    • AI의 비결정적인 성격이 UI와 사용자 경험까지 스며든 사례임
  • 현재 태어나는 AI 미학 가운데 일부는 사라지겠지만, 일부는 향후 수년 또는 수십 년 동안 일반적인 소프트웨어 상호작용 관습으로 자리 잡을 수 있음

함께 보면 좋은 글 β

GN⁺   [-]
Hacker News 의견들

  • LLM은 일관된 코드를 작성하도록 훈련되며, 백엔드나 결제 코드에는 장점이지만 디자인을 코드로 표현할 때는 결과가 평균적이고 획일적인 미학으로 수렴하게 됨
    Figma에서 AI 도구를 만들 때도 LLM으로 창의적이고 독특한 결과를 얻기가 매우 어려웠음
    이를 피하려면 확산 모델로 이미지를 먼저 만들고 웹페이지로 변환하는 접근을 추천함. gpt-image-2는 디자인 역량이 뛰어나고 Opus와 Fable은 이미지의 웹페이지 변환을 잘함
    이 방식을 직접 만들고 있어 편향은 있지만(https://news.ycombinator.com/item?id=48995754), gpt-image-2로 전반적인 분위기만 잡아도 디자인 차별화에 큰 도움이 됨
    실험 결과는 https://html.non.io/tarot/와 https://html.non.io/neonRamen/에서 볼 수 있음

    • 결과가 나쁘지는 않지만, AI로 만들었다는 사실을 몰라도 여전히 AI 특유의 인상이 남음
    • 원인은 일관성보다 디자인을 생성할 때의 온도와 초기 시드에 더 가까워 보임
      일관성은 한번 시작한 방향을 계속 확장하게 만들지만, 빈 컨텍스트에서 시작하는 Claude 5나 ChatGPT, Gemini의 초기 상태는 매번 거의 같음. 사용자가 스타일을 지정하지 않으면 5,000명이 “X를 수행하는 단일 페이지 웹 앱”을 요청해도 매우 비슷한 결과를 받게 됨
      Simon Willison의 ‘자전거를 탄 펠리컨’처럼 대부분 오른쪽을 향하고, 자전거도 리컴번트·화물·탠덤이 아닌 평범한 형태로 생성되는 현상과 비슷함
    • iPhone에서 도구를 써 봤지만 격자 위 첫 번째 입력 상자와 상호작용할 수 없었고, 캔버스를 움직이면 요소가 예상치 못하게 튀어 다녀 사용법을 파악하기 어려웠음
    • 꽤 기괴하고 독특한 것도 만들 수 있음. https://scores.lazer-kiwi.workers.dev/는 오스트랄라시아 1위 Dota 2 길드 사이트로, 봇이 점수를 추출해 구성원의 진행 상황을 표와 통계로 게시함
      구성원 번호에 마우스를 올리면 금색 조준경이 나타나고 클릭 시 여러 영상 연출과 거친 유머, 뉴질랜드·호주 라이벌 농담, 내부 장난이 나옴. 왼쪽 아래에는 모든 숨겨진 요소를 봤는지 알려 주는 비밀 카운터도 있지만 모바일에서는 이런 부가 기능이 빠짐
    • “Claude가 생성한 웹사이트 미학”이 싫어지고 있어 제품을 써 보고 싶지만, $0.13은 지나치게 저렴함

  • 이제 긴 대시뿐 아니라 주황색 강조의 중립 배경까지 AI가 가져가고 있음

    • 베이지·크림색과 주황색 강조는 사실상 HN 디자인 그 자체 아닌가 싶음
      개인적으로 Solarized 색상표를 좋아해서 분위기 코딩으로 만들었든 아니든 비슷한 디자인은 마음에 듦
    • 기억상 이런 디자인은 Fable 이후 나타나기 시작했음. 처음 생성한 HTML 문서도 크림색 세리프 글꼴과 주황색 강조를 썼고 멋지다고 생각했지만, 다른 모든 분위기 코딩 사이트에서도 보이기 시작했음

  • 더 큰 원인은 AI보다 디자이너와 디자인 조직이 서로의 작업을 보고 베끼는 경향이 강해진 데 있음. 다른 디자이너보다 못하다는 열등감 때문에 그들의 방식을 따라야 한다고 느끼는 듯함
    그 결과 Apple의 나쁜 결정까지 모두 따라 하며, AI 기업 로고가 전부 항문처럼 보이는 것도 비슷한 현상임
    제품 디자인도 예외가 아님. Tesla가 비원형 운전대를 도입하자 모두 따라 했지만, 도로용 자동차에서는 원형보다 모든 면에서 불리하고 유행이 끝날 때까지 반복될 뿐임
    AI 앱의 작은 아이콘도 AI라서가 아니라 디자인 조직끼리 서로 복제했기 때문에 생긴 결과로 보임

  • AI 덕분에 예전에는 구현할 수 없었던 창의적 구상을 직접 만들 수 있게 되어 오히려 디자인에 더 관심이 생겼음
    최근 회사 웹사이트에 RollerCoaster Tycoon 분위기를 넣고자 많은 실험과 조정, 예시를 거쳐 만족스러운 결과를 만들었음. 2년 전이었다면 디자이너를 고용하기 전까지 평범한 Bootstrap 사이트에 머물렀을 것임
    여전히 개선할 부분과 AI 느낌이 남아 있지만 대체로 좋은 평가를 받았고 무엇보다 스스로 마음에 듦. 디자인 배경이 전혀 없는 개발자로서 제작 과정을 글로 정리할 생각도 있음
    홍보를 피하려고 스크린샷만 공유함: https://imgur.com/a/xqKi6X6이며 실제 사이트에서는 공원 안의 모든 요소가 움직임

  • 작은 아이콘은 AI보다 훨씬 전부터 데스크톱 인터페이스에 있었고, 개인적으로는 가독성을 높여 준다고 봄

  • GitHub가 햄버거 메뉴를 팬케이크 이모지로 바꿨는데, 같은 날 발표한 쌓인 pull request와 관련됐을 수도 있음

    • 이미지 경로를 누군가 잘못 설정한 줄 알았음
    • 관련 글을 썼는지 궁금함. 시스템별로 팬케이크 모양이 달랐으므로 시스템 이모지를 사용하는 듯함
    • 어떤 사이트는 “와플” 메뉴도 사용하는데, 전부 음식인 점이 이상함

  • 좋은 UX 추상화는 나쁜 것보다 성과가 좋아 오래 살아남고 복제되며 암묵적인 표준이 됨. 햄버거 메뉴, 작은 아이콘, 스트리밍 텍스트의 자동 스크롤이 그 예임

    • 햄버거 메뉴는 좋은 UX 추상화가 아님. 그래서 대중적으로 사용된 기간도 짧았고, 대부분 탭 바처럼 더 명확한 패턴으로 옮겨 가고 있음
    • 그러다 모든 정밀 입력까지 텍스트 상자 대신 슬라이더로 표현하게 됨
    • 작은 아이콘이 왜 좋은 추상화인지 의문임
    • 스트리밍 텍스트가 적합하지 않은 곳에서도 다른 디자인 패턴보다 우세해지지 않기를 바람
    • 시대에 뒤떨어진 불평처럼 들릴 수 있지만, Windows 98 이후 등장한 많은 사례를 보면 좋은 UX가 살아남는다는 명제는 명백히 틀린 듯함

  • 이런 요소 중 상당수는 이전 유행의 연장선임. 반짝이는 텍스트 효과는 스켈레톤 UI를 채팅 인터페이스에 맞게 재활용한 것과 매우 비슷함
    디자인은 언제나 불연속적인 전환보다 연속적인 진화에 가까움

    • 반짝임 효과는 대부분의 회전형 로딩 표시보다 나음. 에이전트가 의도를 제대로 보여 준다면 회전 표시나 증가 속도가 점점 느려지는 진행 막대보다 적합함
    • 천천히 진행되다가 어느 순간 한꺼번에 바뀜

  • 특히 개발자 도구와 SaaS의 AI 생성 웹사이트는 어두운 배경과 차가운 색상, 다시 유행하는 보라색, 화려한 UI 위젯을 선호하는 경향이 뚜렷함

  • 좋든 나쁘든 AI 시대를 대표하는 미학은 TUI임
    더 흥미로운 질문은 AI 이후의 미학이 무엇이냐는 것인데, AI 이전의 더 행복했던 시대를 집요하게 재현하는 흐름과 LED로 뒤덮인 중국 도시 영상 같은 정반대의 극단으로 갈라질 듯함

    • 개발자 사이에서는 그럴 수 있지만 일반 사용자가 TUI와 상호작용하는 경우는 드묾. 은퇴한 어머니도 거의 매일 ChatGPT를 쓰지만 Claude Code를 내려받기까지는 한참 걸릴 듯함
답변달기