NCG LAB
Back to Lab
AI UX/UIALPHAL2Updated 2026-04-22

NIA · NEO Persona UX/UI

두 개의 브랜드 페르소나를 시각과 모션으로 구현한 경험 실험

#persona#ux#motion#brand

Why

AI 서비스가 "기능"으로만 접근될 때, 사용자는 빠르게 식는다. 브랜드에 얼굴과 말투, 호흡과 움직임을 부여하면 관계가 생긴다. NIA (따뜻한 안내자) 와 NEO (실험적 탐험가) 라는 두 개의 페르소나로 이 가설을 검증한다.

Approach

  • 페르소나 2인의 정의: 톤, 어휘, 대화 리듬, 시각 모티프
  • 모션 언어: breathing · emergence cascade · iridescent glow
  • 반응형 존재감: 페이지 흐름에 맞춰 등장 / 유지 / 소멸
  • 접근성: motion reduction 모드에서도 의미가 유지되도록 디자인

NIA - 브랜드 인텔리전스 앰비언트

NIA (NCG Intelligence Ambient) 는 홈 진입 시 가장 먼저 마주하는 시각 경험이다. 하나의 canvas, 하나의 파티클 배열이 인트로부터 내러티브 루프까지 전 구간을 담당한다. 톤은 "따뜻하게 마중하는 안내자".

인트로 → 내러티브 스토리라인

인트로는 약 6.5 초에 걸쳐 일곱 개의 phase 를 통과한 뒤, 이어지는 내러티브 루프에서 네 개의 act 를 반복한다. phase 라벨은 아래 뷰어의 우상단에서 실시간으로 확인할 수 있다.

구간Phase의미
0.0 - 0.15 sseed하나의 점에서 시작
0.15 - 1.0 smitosis128 개로 분열
1.0 - 2.5 sscatter공간으로 퍼져나가는 분산
2.5 - 3.6 sreveal전경으로 드러남
3.6 - 5.0 sgather수렴으로 재구성
5.0 - 6.5 ssettle오브 주위에 자리 잡음
6.5 s +narrative내러티브 루프로 진입

내러티브 루프는 네 개의 act (diagnose → strategize → build → measure) 를 순환하며, 각 act 마다 대응하는 coherent form (scan-bars / decision-tree / neural-lattice / rising-pulse) 이 파티클로 그려졌다가 해체된다. 커서를 오브 위에 올려두면 잠깐 정지하고, 길게 누르면 N → I → A 로 NCG 로고가 세 번 맺힌 뒤 인트로가 한 번 더 재생된다.

실제 필드

Live · NIA
phase: seed

NEO - 실험적 탐험가

NEO (Next Evolution Observer) 는 NIA 의 대응 페르소나다. NIA 가 호흡하듯 유연하다면, NEO 는 기하학적 · 구조적 · 실험적이다. 동일한 iridescent 팔레트를 공유해 같은 패밀리로 묶이되, 형태 언어가 다르다.

구성 요소

  • Glass core: 블러와 블룸이 레이어된 중앙 오브. 가끔 모서리를 바꾼다.
  • Particle canvas: NIA 보다 조금 더 작고 촘촘한 점들. 저주파 noise 기반 drift.
  • Grid layer: 12 × 12 SVG 투시 격자. 호버 · 탭 · 릴리즈 모멘트에 반응.

실제 필드

Live · NEOstage: 420px

Viewer & 구현 개요

두 페르소나는 모노레포 내 @ncg/nia-neo 패키지로 라이브러리화되어 있다. 홈페이지 (apps/web) 와 연구노트 (apps/lab) 가 같은 구현체를 공유한다.

  • 패키지 경로: packages/nia-neo/src/
  • 주요 exports: Nia, NiaField (+ NiaFieldHandle, NiaPhase, NiaActName, NiaFormName), NEO → NeoField, ParticleField, PerspectiveGrid, LiquidGlassOrb, createSimplex2D
  • 공유 스타일시트: @ncg/nia-neo/styles.css - 양쪽 앱의 layout.tsx 에서 한 번만 import
  • 공유 팔레트: core #7f6ff0 → mid #a39af5 → edge #c97bda 의 iridescent gradient
  • 모션 엔진: simplex noise 2D + rAF 루프. 모든 phase 전환은 단일 time line 에서 처리된다.

뷰어 설계

  • 두 뷰어 모두 container-scoped 로 렌더된다. Fullscreen fixed 가 아니라 연구노트의 figure 안에서 position: absolute; inset: 0 로 필드를 채운다.
  • NIA 뷰어는 orbCenter 를 컨테이너 resize 에 맞춰 매 프레임 재계산해 정중앙에 고정한다.
  • NEO 뷰어는 stageSize 만 전달하면 내부에서 canvas · SVG grid · glass core 의 비율이 동기화된다.
  • 두 뷰어 공통으로 prefers-reduced-motion 을 감지해 감쇠된 상태로 렌더한다.

Learnings (진행 중)

  • 두 페르소나가 상충하지 않으면서 보완하는가
  • 모션 복잡도와 인지 부하의 교환 비
  • 브랜드 일관성과 개성 표현 사이의 균형점
  • prefers-reduced-motion 대응이 존재감을 얼마나 유지할 수 있는가

Roadmap

NIA 와 NEO 는 지금 시각과 모션의 언어로만 존재한다. 호흡하고, 분열하고, 다시 모이지만 아직 말이 없다. 다음 단계는 이 페르소나에 생명을 불어넣는 것 - AI / LLM 과의 융합이다.

  • Voice 연결 (진행 중)
    별도 실험 NIA · Voice Agent Pilot 에서 OpenAI Realtime API 로 NIA 에게 목소리와 실시간 대화 능력을 부여한다. 시각 · 음성의 동시 반응이 첫 마일스톤.

  • 컨텍스트 바인딩
    NIA 가 같은 페이지의 내용을 참조해 답한다. NEO 는 대칭 페르소나로서 "다르게 보는 관점" 을 제시하는 역할을 맡는다.

  • 도구 호출
    NIA · NEO 가 읽기 전용에서 벗어나 내부 도구 (Prompt Lens · CMS Content Studio 등) 를 직접 호출해 결과까지 가져온다.

  • 상용화
    다듬어진 구조를 "NCG Voice Studio" (가칭) 라인으로 편입해, 고객사 브랜드 페르소나를 동일 엔진으로 찍어낼 수 있게 한다. Lab 은 그 다음 실험으로 이동한다.

결국 이것은 시각 실험이 아니라, AI 가 브랜드의 몸을 갖는 방법에 대한 실험이다.

Back to Lab