figma

Intercom AI 서밋의 (새 탭에서 열림)

Intercom의 AI 서밋 ‘Pioneer’ 브랜딩은 AI의 발전을 씨앗이 꽃피는 과정에 비유한 ‘외계적 슈퍼블룸’ 콘셉트로 제작됐다. Intercom Creative Studio는 꽃, 꽃가루 입자, 점묘 스타일, 3D 모션을 결합해 웹·영상·무대·인쇄물·굿즈까지 확장 가능한 시각 언어를 구축했다. 제작 전 과정을 Figma에서 협업하며 아이디어 탐색부터 프로토타이핑과 QA까지 하나의 작업 공간에서 진행한 점이 핵심이다.

인터콤의 브랜드를 확장하는 디자인 시스템

  • Intercom의 Creative Studio는 일반적인 브랜드 가이드라인을 넘어, Intercom과 AI 고객 서비스 에이전트 Fin, 캠페인, 제품 출시, 웹사이트, 이벤트별 하위 디자인 시스템을 구축한다.
  • 약 30명으로 구성된 글로벌 팀은 Figma를 디자인 시스템과 협업의 중심, 즉 ‘핵심 허브’로 사용한다.
  • Pioneer 2025의 브랜드는 웹사이트와 디지털 캠페인뿐 아니라 다음 행사 요소에도 적용되어야 했다.
    • 무대 디자인
    • 대형 디지털 스크린
    • 안내 표지와 동선 표시
    • 기념품
    • 정적 이미지와 모션 콘텐츠
  • 전년도 Pioneer의 ‘잠망경’ 콘셉트가 AI의 미래를 바라보는 시선을 표현했다면, 올해는 지난 아이디어가 성장하고 새로운 가능성으로 피어나는 모습을 표현하는 방향으로 전환했다.

폭넓은 크리에이티브 영역 탐색

  • 팀은 Figma Design에서 다양한 무드보드를 제작하며 여러 시각적 방향을 폭넓게 실험했다.
  • 무드보드에는 다음 자료를 함께 배치했다.
    • 모션 에셋
    • 정지 이미지
    • 벡터 파일
    • 로고
    • 영상 레퍼런스
  • 모션 디자이너, 브랜드 디자이너, 카피라이터가 같은 작업 공간에서 이미지 편집, 드로잉, 콜라주를 즉시 주고받았다.
  • 영상 임베드 기능을 활용해 초기 단계부터 모션 원칙을 검토했다.
    • 영상 위에 로고 스케치를 얹어 실제 커뮤니케이션에서 어떻게 보이는지 확인
    • 메시지와 움직임이 함께 작동하는지 조기에 테스트
  • 최종적으로 ‘AI 슈퍼블룸’이라는 콘셉트가 선택됐다.
    • 지난해 뿌린 씨앗이 올해 꽃으로 피어난다는 서사
    • 꽃을 AI 발전과 새로운 아이디어의 상징으로 활용
    • 꽃가루 입자를 연상시키는 점묘 스타일로 발표자 초상과 이미지를 표현
  • 이해관계자에게 콘셉트를 공유할 때는 긴 아트보드에 설명과 시안을 배치했다.
    • 발표 슬라이드처럼 넘기지 않고 스크롤하며 탐색 가능
    • 각 보드에 직접 댓글 작성 가능
    • 피드백 단계별로 별도 페이지를 만들어 검토 과정과 결과물을 체계적으로 관리

꽃과 꽃가루를 활용한 모션 언어

  • 추상적인 콘셉트를 구체화하기 위해 3D 꽃 렌더링을 제작했다.
  • 꽃은 현실적인 식물보다는 다음과 같은 ‘외계적’ 특성을 갖도록 디자인됐다.
    • 비현실적인 크기
    • 과장된 개화 속도
    • 낯설고 변형되는 형태
  • 이는 빠르게 변화하는 AI 기술의 성격과 연결된다.
  • 팀은 사실적인 표현 대신 꽃가루 입자에 집중해 차별화된 시각 언어를 만들었다.
    • 입자 밀도와 움직임을 조절해 풍부한 화면 구성 구현
    • Pioneer 로고와 정적 이미지에도 입자 기반 스타일 적용
    • 모션에서는 역동적으로, 인쇄물에서는 절제된 형태로 활용 가능
  • 외부 스튜디오 Colors and the Kids와 협업해 꽃의 종류와 개화 애니메이션을 탐색했다.
  • Figma Draw로 영상의 특정 프레임 위에 직접 주석과 드로잉을 추가했다.
    • 움직임의 방향과 속도 표시
    • 꽃잎 형태가 어떻게 바뀌어야 하는지 설명
    • 별도 프로그램으로 파일을 옮기지 않고 반복 수정

Figma에서 진행한 웹 경험 프로토타이핑

  • Pioneer 웹사이트의 디자인, 프로토타입 제작, QA를 모두 Figma 안에서 진행했다.
  • 플랫폼을 오가며 작업할 필요가 없어 디자인과 검수 과정이 단순해졌다.
  • 실시간 댓글 기능을 통해 디자이너와 협업자가 수정 중인 화면에 바로 의견을 남겼다.
    • Slack 등 별도 커뮤니케이션 도구로 맥락을 옮길 필요 감소
    • 변경 사항과 피드백을 같은 화면에서 확인
    • 개발자와 디자이너가 인터랙션을 조기에 검증
  • 웹사이트 프로토타입은 브랜드가 정적인 그래픽에 머물지 않고 실제 사용자 경험으로 어떻게 작동하는지 확인하는 수단이 됐다.

실용적인 시사점

  • 대규모 브랜딩 프로젝트에서는 초기 탐색, 모션 실험, 이해관계자 피드백, 웹 프로토타이핑을 하나의 협업 환경에 연결하면 작업 속도와 일관성을 높일 수 있다.
  • 콘셉트를 꽃이나 입자처럼 명확한 시각적 요소로 정의하되, 모션·인쇄·웹·공간 디자인에 모두 적용할 수 있도록 밀도와 움직임을 조절 가능한 시스템으로 설계하는 것이 중요하다.
  • 특히 초기 단계부터 정적 이미지와 모션을 함께 검토하면 최종 결과물에서 브랜드 경험이 매체별로 분리되는 문제를 줄일 수 있다.