본문으로 건너뛰기
피드

인공지능 시대의 디자인 문법, 반짝이와 작은 아이콘은 살아남을까

frontend 약 4분
vote
0
댓글
북마크

이 글은 인공지능 앱들이 만든 시각적 관습이 다른 소프트웨어 인터페이스로 퍼지고 있다는 관찰을 다룸. 반짝이 아이콘, 무지개색, 스트리밍 텍스트, 반짝이는 로딩 텍스트, 작은 아이콘, 베이지톤 같은 요소가 일시적 유행인지 장기적인 디자인 문법이 될지 묻는 글임.

  • 1

    모바일 시대의 햄버거 메뉴처럼 특정 기술 시대는 고유한 인터페이스 관습을 남김

  • 2

    인공지능 서비스에서는 반짝이 아이콘과 무지개색이 사실상 인공지능의 시각적 은유처럼 쓰이고 있음

  • 3

    채팅 인터페이스에서 다듬어진 스트리밍 텍스트와 반짝이는 텍스트가 비동기 작업 표현으로 확산 중임

  • 4

    클로드, 코덱스, 커서 같은 데스크톱 인공지능 앱은 맥 운영체제 기본 앱보다 작고 얇은 아이콘을 쓰는 경향이 있음

  • 기술 시대마다 자기만의 인터페이스 문법이 생김

    • 모바일 시대에는 좁은 화면 때문에 햄버거 메뉴가 널리 퍼졌음
    • 처음에는 특정 제약에 대한 해법이었지만, 지금은 ‘여기에 더 많은 메뉴가 있다’는 짧은 기호로 자리 잡았음
    • 글쓴이는 인공지능 시대에도 비슷한 일이 벌어지고 있다고 봄
  • 지금 인공지능의 대표 기호는 반짝이와 무지개색에 가까움

    • 예전에는 반짝이 이모지가 뭘 뜻했는지 애매했지만, 이제는 많은 사람이 인공지능을 떠올림
    • 인공지능 제품들이 마법 같은 느낌을 주려고 반짝이, 무지개색, 부드러운 강조색을 반복해서 쓰기 때문임
    • 약간 웃긴 건, 대규모 행렬 연산과 확률적 생성 모델을 표현하는 상징이 결국 ‘반짝’이라는 점임
  • 어떤 패턴은 인공지능 인터랙션에 딱 붙어 있음

    • 대표적으로 스트리밍 텍스트가 있음
    • 챗봇이 답을 한 글자씩 뱉는 방식은 모델이 생성 중이라는 느낌을 주고, 기다리는 시간을 덜 비어 보이게 만듦
    • 다만 이 패턴이 모든 소프트웨어 인터페이스에 재사용될 만큼 보편적인지는 별개 문제임
  • 반대로 다른 앱으로 퍼질 가능성이 큰 패턴도 있음

    • 글쓴이는 ‘반짝이는 텍스트’를 예로 듦
    • 인공지능 앱에서는 모델이 생각 중이라는 의미였지만, 이제는 가져오기, 계산, 비동기 작업 같은 일반 처리 상태를 나타내는 데도 쓰이기 시작함
    • 로딩 스피너가 그랬듯, 특정 맥락에서 태어난 표현이 더 넓은 상태 표시 문법으로 번질 수 있음
  • 데스크톱 인공지능 앱에서는 작은 아이콘도 눈에 띈다고 함

    • 클로드, 코덱스, 커서 같은 일렉트론 기반 데스크톱 앱 아이콘은 맥 운영체제 기본 앱보다 더 작고 얇게 보인다는 관찰임
    • 파인더, 사진, 메일 같은 애플 앱의 시스템 질감과 비교하면 확실히 결이 다름
    • 글쓴이는 이 작은 아이콘 흐름이 컴퓨터 인터페이스의 미래가 되는 건 원치 않는다고 말함
  • 색과 타이포그래피에서도 인공지능 앱 특유의 분위기가 쌓이고 있음

    • 베이지나 크림 계열 배경, 주황색 강조, 세리프 서체 같은 조합이 인공지능 서비스에서 반복됨
    • 토글을 눌렀더니 화면 전체가 다시 그려지고, 방금 클릭하던 컨트롤이 다른 곳으로 이동하는 식의 정신없는 인터페이스도 언급함
    • 글쓴이는 인공지능의 비결정성이 사용자 인터페이스 경험까지 스며든 것 같다고 봄
  • 결론은 ‘이 중 무엇이 살아남을까’라는 질문임

    • 햄버거 메뉴처럼 장기적으로 남을 패턴도 있을 수 있음
    • 반짝이와 무지개색처럼 유행으로 지나갈 요소도 있을 수 있음
    • 제품을 만드는 입장에서는 지금 당장 인공지능처럼 보이는 것과, 실제로 사용자에게 의미 있는 상태를 전달하는 것을 구분해야 함

디자인 시스템을 만드는 사람에게는 꽤 실용적인 질문임. 지금 인공지능 앱에서 당연해 보이는 시각 언어가 진짜 의미를 전달하는지, 그냥 ‘인공지능처럼 보이기’인지 구분해야 할 시점임.

댓글

댓글

댓글을 불러오는 중...

frontend

이노그리드, 클라우드 통합 UI·UX로 K-디자인 어워드 수상

이노그리드가 자사 클라우드 솔루션에 적용한 통합 One UI·UX 디자인으로 K-디자인 어워드 2026 커뮤니케이션 부문 위너를 수상했다. 멀티·하이브리드 클라우드와 AI 인프라 운영이 복잡해지는 상황에서 제품별 화면 경험을 통일해 학습 부담을 줄인 점이 핵심이다.

frontend

Vision Pro로 집 설계 도면을 직접 걸어보니, 이게 진짜 킬러 앱일 수도 있겠다는 이야기

Christian Selig은 집을 짓는 과정에서 평면도 PDF만으로는 공간감을 알기 어려워 Vision Pro용 3D walkthrough를 직접 만들었다. Fusion 360으로 벽과 바닥을 만들고, IKEA·3D Warehouse 모델을 가져와 USDZ로 내보낸 뒤, Claude와 Codex로 컨트롤러 지원 USDZ 뷰어 Prospector를 만들었다는 경험담이다.

frontend

데모신 툴 UI 구경기: 예쁘고 불편하고 이상하게 실용적인 화면들

데모신 문화에서 쓰이던 자체 제작 도구들의 UI를 훑는 긴 글임. Amiga 어셈블러, 음악 트래커, 디스크 복사기, 압축 도구, ANSI 편집기까지 나오는데, 당시 제약과 문화가 UI에 얼마나 직접적으로 묻어나는지 보여줌.

frontend

UI 컴포넌트 이름 헷갈릴 때, 동작 계약까지 뽑아주는 퀴즈형 도구

NameThatUI는 웹 UI 요소의 이름을 맞히는 데서 끝나지 않고, 비슷한 UI 패턴을 비교한 뒤 구현 가능한 동작 명세로 정리해주는 도구다. Tooltip, Popover, Hover Card처럼 생긴 건 비슷하지만 접근성, 포커스, 닫힘 규칙이 다른 패턴을 구분하는 데 초점을 둔다. 코딩 에이전트나 컴포넌트 라이브러리에 잘못된 이름을 던져서 엉뚱한 구현이 나오는 문제를 줄이려는 접근이다.

frontend

포럼 소프트웨어에서 React 걷어내고 HTMX로 돌아가려는 이유

Misago 프로젝트가 React.js 기반 UI 구조를 걷어내고 Django 서버 렌더링과 HTMX 조합으로 단순화하려는 이유를 설명한 글이다. 같은 화면을 Django 템플릿과 React 컴포넌트로 두 번 구현하는 문제, 중복 번역 파일, JSON 직렬화 비용, 플러그인 개발 복잡도까지 꽤 현실적인 고통이 나온다. 결론은 포럼처럼 상호작용이 특정 영역에 몰린 서비스라면 풀 React 앱보다 서버 렌더링 HTML 조각 교체가 더 맞을 수 있다는 얘기다.