AI Canvas는 코딩 없이, 인공지능을 만들어 볼 수 있는 협업툴로 AI 교육 컨텐츠 또한 함께 제공하는 SaaS 제품 입니다.

“10년 동안 진료를 해오면서 수천장의 동물들 의료 기록이 있어요. 날이 갈수록 바빠지는데.. X-ray 사진을 분석해서 간단하게라도 뼈에 금이 갔는지, 골절인지 다른 문제인지 분류되면 정말 도움이 될것 같아요!”

수의사 A씨가 자신의 개인 병원에 사용할 강아지 X-ray 사진 분석 제품을 만들려면 어디서 부터, 어떻게 시작해야 할까요🤔

📆 작업기간

08/01/2022 → Present

✍️ 내 작업

기획, 리서치, 제품 컨셉/전략 수립, IA, UX/UI, 프로토타이핑, 개발F/U

🙋 내 역할

디자인 파트 리딩 (팀 : CTO1, 개발자 5명, 인공지능 전문가 2명, UXUI디자이너 3명, 그래픽 디자이너 1명), UXUI 50%

Background

Algorithm Labs’ mission
인공지능의 대중화

알고리즘랩스은 인공지능 교육과 특정 도메인별 AI솔루션 사업으로 성장해왔습니다.

2022년 5월 인공지능 교육시 실습 툴(Orange Data Mining, Azure)로 사용하고 있던 프로그램은 인공지능 성능 개발에 특화되어 비전공자의 사용 교육 기간이 길었으며, 가벼운 AI 모델링이 필요한 교육 환경에 적합하지 않아 카이스트 개발팀에서 간단하게 인공지능 제작 프로토타이핑 할 수 있는 컨셉을 만들었고, 어떤 방향으로 디벨롭 할 수 있을지 아이디어 제안을 요청했습니다.

*개발팀으로부터 공유 받은 캔버스 초기 컨셉 (데이터-머신러닝-평가 프로토타이핑)

  • image

    *Orange data mining 데이터 히트맵 시각화 뷰

    image

    *Azure AI 제작 프로젝트 뷰

저는 왜 현재 사용 툴을 대체해서 사용해야 하는지, 어떤 문제를 해결하고자 하는지, 사용자의 목적이 무엇인지, 이 제품이 어떤 방향성을 가져야 되는지에 대하여 근본적으로 사용자 관점에서 바라보았습니다.

사용자의 목적은 인공지능을 제작하는것 자체가 아니라 AI를 수단으로 가지고 있는 문제를 해결 하는것이었습니다.

알고리즘랩스가 보유하고 있는 8212개의 수많은 도메인들의 POC 중 교육이 끝나고 높은 생산성 향상이 예상되는 POC는 상부 승인을 받아 알고리즘랩스와 파트너쉽을 맺고 AI 솔루션으로 상용화를 진행해왔습니다.

🔎 8000개의 POC 중 상용화된 인공지능 제품은 10개

POC 리스트 예시

알고리즘랩스의 Clickar (차량 파손 예측 POC를 디벨롭한 상용화 AI제품)

알고리즘랩스의 기업교육 전 과정과 AI솔루션의 개발 과정을 살펴본 결과, 최소 5명, 6개월, 약 3억원 이상의 비용 소요가 되는 것을 발견했습니다. 그리고 당사의 AI 솔루션 서비스 또한 각 회사의 환경에 따라 최적화 및 유지보수 작업에 많은 시간과 인력이 필수적으로 투입되어야 했습니다. 이 비효율성 문제를 해결하며, 인공지능을 제작/관리하기 쉬운 도구가 핵심 니즈라는 것을 알 수 있었습니다.

🔎 개발 비용과 인력, 전문성 부족의 문제로 아이디어로만 머무름

대표님과 CTO와의 회의를 통해 인공지능 전문가가 아니더라도 가장 효율적으로 자신의 아이디어를 사용 가능한 AI 제품으로 구현할 수 있는 플랫폼으로 방향성을 정하고, 프로젝트의 phase 별 MVP와 목표, 사용 유저를 설정하고 프로젝트를 시작하게 되었습니다.

Research

1. 사용자&경쟁사 분석

AI 어플리케이션 개발과정과 각 단계에서 해야하는 일들, 그리고 활용되는 프로그램 및 툴과
제작에 관여하는 실무자들에 대해서 조사하였습니다.

💡 Orange, Dataiku, MLOps, Azure 등 현재 솔루션들은 인공지능 학습 영역에서 높은 성능을 이끌어내기 위한 전문적이고 특화된 목적으로 사용되고 있습니다.

2. 문제와 니즈파인딩

교육~AI 제품 개발 각 단계에서의 담당 업무와 긍/부정적 경험을 찾기 위해
Focus Group Interview를 모더레이터로 리딩하였습니다.

사내 AI솔루션 개발 진행팀(기업 교육 담당자1, 인공지능 전문가2명, 개발자4명,디자이너1명) 대상으로 약 1시간 진행

  • 🔑 최소 4개월 소요

    1. 머신러닝 개발이 가능한 수준으로 프로그래밍 언어(파이썬)를 배우는데 최소 3개월+

    2. 프로그램 별 활용할 수 있는 만큼 숙련도를 가지는데 걸리는 학습기간 1개월+

    1. 아이디어는 누구나 가지고 있습니다.
      아이디어는 무궁무진 하지만, 이는 코딩을 할 수 있는 스킬 및 개발적 지식이 필요한 영역이기에 전문가가 아니라면 실행에 옮기는 비율은 아주 적음

      “대학에서 강의를 하는 교수님이 얼굴 인식을 활용해서 출석체크를 할 수 있는 어플리케이션을 만들어보고자 했지만 끝내 기술적 한계로 실패하셨다고 했죠..” -기업교육 담당자

    2. AI 프로그램 도입의 시기
      AI제품 Prototyping 단계에서는 프로그램 도입은 배보다 배꼽이 더 큰 일임
      “ML Ops 와 같이 Data 및 AI의 lifecycle을 관리할 수 있는 툴은 존재하지만, 이는 AI 기반 어플리케이션 프로젝트가 어느정도 진행이 되어 AI의 명세가 어느정도 확정되었거나, AI의 성능이 전체 프로젝트의 핵심적인 기능을 할 때 의미가 있음. 일반적인 개발 프로젝트에서 아직 방향에 대한 확신이 없는 Prototype을 개발하는 데에 DevOps를 미리 붙이는 것이 아주 비효율적임.” -AI 전문가

    3. AI 툴의 높은 전문성& 낮은 활용성
      기존의 AI 모델들이 체계적으로 정리되어 있고 사용자가 쉽게 활용해볼 수 있는 환경을 제공하는 플랫폼이 없음

      “Orange 등 AI 모델링 툴을 시도해봤는데 개발자라 하더라도 분야가 특화되어 있어, AI engineer가 실질적으로 frontend, backend를 고려하여 어플리케이션을 스스로 제작하는 것은 현실적으로 어려운 작업이었음..” -백엔드 개발자

  • 🔑 실제로 쓰이기 위한 AI를 구현하는 것이 핵심 (사례조사)

    음석 인식 기술을 활용한 검색 시스템
    이 시스템 구현을 위해서는 이는 Speech recognition 뿐만 아니라 검색 결과를 보여주는 List view가 있어야 하며, Speech recognition의 결과가 틀렸을 경우 사용자가 인식된 text 수정할 수 있는 인터랙션이 제공되어야 함. 이 경우 end-user는 speech recognition의 성능이 수치적으로 얼마나 되는지, 학습 데이터가 무엇인지는 관심 없으며 Speech recognition의 결과가 틀리지 않기만을 바람.

    얼굴 인식 기술을 활용한 휴대폰 잠금 해제 기능
    이 기능 구현을 위해서는 얼굴 인식 뿐만 아니라 얼굴 인식의 결과가 계속해서 틀릴 때를 대비하여 잠금 화면을 통해 잠금 해제하는 UI가 함께 준비되어야 함. 이 경우에도 마찬가지로 end-user는 모델의 성능 및 여러 지표, 학습 데이터 등에 관심이 없음.

    자율 주행 자동차의 사용자 인터페이스 개발
    자율 주행 자동차의 판단을 항상 믿을 수 없기 때문에 사용자에게 현재 자율 주행 자동차가 어떤 판단을 하고있고, 상황 판단을 어떻게 하고 있는지를 쉽고 빠르게 보여주는 것이 필요함. 또한, 해당 상황 판단이 적절하지 않거나 (ex. 차량 앞에 장애물이 있지만 이를 멈춰 있는 자동차라고 판단함, 차선을 제대로 판별하지 못했음) 상황 판단에 대한 자율 주행 엔진의 action이 적절하지 않을 때 (ex. 1m 앞의 길이 뚫려있음에도 불구하고 막혀있다고 판단하여 돌아서 갈려고 함) 사용자가 그 action을 쉽고 빠르게 수정할 수 있어야 함. 이러한 interface의 경우 모델의 성능 및 여러 지표와는 관계 없으며, 사용자 레벨의 인터랙션과 해당 인터랙션을 어떻게 가능하게 할지를 고민해야 함.

    1. 각 분야의 다른 언어가 때문에 심각한 오류가 발생
      협업 과정에서 구체적인 데이터, 모델 및 모델과 관련된 수치, UI prototype 등을 함께 보면서 구체적으로 같은 페이지를 바라보며 합의를 이끌어내야되지만, 서로 해석하는 의미가 다름으로 인한 오해가 쌓이고, 결국 큰 문제를 야기함
      “디자이너가 모델의 성능을 알아보기 위해 AI 엔지니어에게 이러한 예측을 하는 것이 가능하냐고 물어봤을 때, AI 엔지니어가 “가능하다” 라고 대답을 함. 근데 여기서 “가능하다”의 의미는 디자이너의 경우 “모든 경우에 reliable하게 잘 동작한다” 였지만, AI 엔지니어의 경우 “제한된 환경에서 예측 결과가 나오고 오류를 포함할 수 있음” 임.” -디자이너

    2. AI 기반 “피그마”와 같은 협업툴 없음*
      기존에 협업을 위한 툴 및 프로젝트 management 툴은 여러가지가 있지만, 이는 범용적으로 디자인 되었으므로 AI 기반 어플리케이션 제작에 필요한 구체적인 기능들이 부재

      “이탈 모델과 데이터를 연결해서 대시보드로 구현할 수 있는 적당한 툴을 찾아봤는데 포기... 협업 툴 내에서 간단하게 모델링, 모델의 성능 시각화, 모델을 직접 UI prototyping 해보면 좋을것 같아요.” -프론트 개발자

  • 인공지능 교육 현황 :

    - 취업 혹은 자기개발을 위한 인공지능 교육

    - 프로그래밍 언어 및 이론을 배우는 전문가 교육

    - AI 도구 자체를 배우는 강의

    - 활용하여 결과물을 만드는 교육 존재 ex. AI로 생성형 콘텐츠 제작에 집중

💫 비개발자가 사용할 수 있는 수준으로 코딩 없이 인공지능을 제작하고 관리할 수 있다면, AI 전문가가 아니더라도 아이디어를 구현할 수 있다.

💫 모델링 부터 Application 까지 커스텀할 수 있게 되면 쉬운 유지보수가 가능하다.

💫 실시간 협업, 시각화, 소통 도구를 제공한다면 효율적인 협업이 가능할 것이다.

💫 캔버스를 활용한 교육 컨텐츠를 제공한다면 유저의 목표 달성이 더욱 쉬워질 것이다.

Our Concept

누구나 아이디어를 인공지능 어플리케이션으로 제일 가볍고 쉽게 구현할 수 있는 방법.

AI Canvas는 노코드 방식으로 데이터 분석과 가공 → AI 모델링 → AI 평가 → 사용 가능한 AI 애플리케이션 배포의 인공지능 개발 프로젝트 전반을 다이어그램 연결과 인터렉션으로 만들 수 있는 협업툴입니다.

  • 사용자 친화적이고 직관적인 인터페이스 + UI 및 앱 구축

  • 기존 Application을 제작하는 비용을 획기적으로 감소

Development

1. 비즈니스 플랜과 우선순위

서비스의 단기/중기/장기적 사업 계획에 따른 전략, BM을 논의하고, 그에 따른 액션 플랜과 디자인과 개발작업의 우선순위를 정했습니다.

2. UX, Interaction 컨셉 디벨롭

구조와 틀을 짜고, 유저 케이스 시나리오들을 그려보며 플로우를 구상하고, 카이스트 연구개발팀과 핵심 캔버스 UX와 인터렉션을 프로토타이핑 해보는 과정이었습니다.

  • image

    image

    Computer vision (이미지 분류) 인공지능을 캔버스로 구현할때의 컴포넌트들과 UX/UI를 Low fidelity 화면으로 그려보며 기술팀과 소통

3. IA, 와이어프레임

Information Architecture과 와이어프레임 스케치를 통해 화면과 플로우를 정리했습니다.

4. 컴포넌트 정의

공통적으로 적용되는 로직과 인터렉션, 그리고 베리에이션의 규칙을 정했습니다.

5. 화면 별 기능정의

섹션별로 메인 기능을 성격에 따라 분류, 위계를 정하고, 메뉴와 레이아웃을 작업했습니다.

6. 디자인 시스템과 협업 가이드라인 제작

기존의 알고리즘랩스 디자인 시스템을 바탕으로 AI Canvas의 새로운 브랜딩에 맞춰 레이아웃과 컴포넌트, 디자인 시스템을 추가하여, 앱 전체에서 일관성을 유지하고 빠른 적용이 가능하도록했습니다.

  • image

    🚧 다양한 Use case 별로 기획된 화면들을 탐색, 개발 상태를 명확하게 하기 위해 협업 가이드라인을 만들어 일의 효율을 높혔습니다.

Solution

1. 해결 전략

  • 쉽고 친절한 가이드와 Docs, 교육 컨텐츠 제공 🎓

  • 코딩 없이 데이터를 가공하여 머신러닝 작업한 AI 모델을 관리 💿

  • 데이터와 기술을 직관적으로 이해하고 소통할 수 있는 시각화 📊

  • 발표를 위한 위젯을 연결하여 UI를 간단하게 구현 바로 어플리케이션으로 배포 💻

  • 팀과 웹 기반 링크를 통해 실시간으로 공유하며 협업 🤝

2. 역할

디자이너 = 기술과 유저사이 메신저

디자이너 입장에서 먼저 이 AI가 뭘 기반으로 어떻게 동작하고, 언제 잘되고 언제 잘 안되는지 capability를 잘 이해하고 가장 쉽게 사용자에게 전달하는 역할을 수행했습니다.

Canvas

데이터 업로드, 전처리 → 인공지능 모델링 → 모델 성능 평가 → 예측(Training)의 전반의 AI 제작 과정은 다이어그램을 잇는것 만으로 가능하다는 컨셉으로, 코딩을 모르는 비 전문가도 충분히 인공지능 모델링을 할 수 있을 정도로 사용성에 집중하였습니다.

다양한 기능들을 분류하고, 작동 원리를 이해하여 UI를 배치하고, 기능별 주제별 동작 시나리오들을 분석하여 유저가 직관적으로 사용할 수 있게끔 UX를 설계했습니다.

Drag&Drop&Connect 인터렉션

노드, 포트, 위젯, 툴 등의 컴포넌트간의 상관관계를 고려하여 룰을 정하고, 인터렉션 로직을 정의하였습니다.

데이터 시각화

약 50개의 시각화 그래프의 작동 원리에 따라 그래프 디자인과 위젯과 RNB 내부 컴포넌트를 베리에이션 했습니다.

Application

제작한 인공지능을 사용하기 위한 상용화 제품을 만들수 있습니다. 위젯과 UI를 연결하고 어플리케이션 페이지로 배치, 구성하여 → 배포하여 바로 웹 주소를 통해 공유 할 수 있습니다.

application 제작의 러닝커브를 최대한 줄이며, 커스텀이 가능하도록 테스트와 벤치마킹을 통해 가장 필수 기능과 UI 요소들을 선별하였습니다.

Education&Gallery

유저의 산업 및 주제별로 탐색한 교육과 갤러리 컨텐츠를 통해 인공지능 제작과 활용을 돕고, 서비스에 머물러 있는 시간을 늘리려고 하였습니다.

일상 예제, 문구를 통해 인공지능 주제, 기술적 정보에 대한 이해가 쉽게될 수 있도록컨텐츠 제작 가이드를 전달했습니다.

Collaboration

양방향성, 실시간성을 고려하여 협업에 필요한 도구와 서비스들 디자인했습니다.
그리고 팀과-프로젝트-권한의 위계를 설계하고 있습니다. 개발자-디자이너-기획자 등의 혁신적인 업무 도구 변화를 일으킨 피그마를 벤치마킹했습니다.

Branding

서비스 value에 맞는 브랜드 이미지와 성격을 정의하고, 그래픽 디자이너와 조율하면서 브랜딩을 매니징 하였습니다.

랜딩페이지

랜딩페이지의 전체적인 흐름과 메시지 비주얼 컨셉 디렉션, 유관부서에 컨텐츠 요청 등의 역할을 수행했습니다.

3. 사용성 테스트와 개선

QA, 전사 사용 피드백 & 내부 교육 코치분들 대상으로 UT를 리딩하여 진행했습니다. 결과를 분석하여 중요도를 정하고, 제품의 불편함을 개선해왔습니다.

The Launch

AI Solution Saas 제품으로서 2024년 3월 AI Canvas는 세계 IT SHOW와 AI EXPO에 참여하였고, 긍정적인 피드백과 함께 신규 유저가 유입되면서, 데이터를 통한 분석과 개선을 진행하며 고도화하고 있습니다.

성과

1. 시리즈 B투자를 이끌어낸 핵심 제품

2. 혁신적인 비용 절감

사내 AI 프로젝트 업무 툴을 AI Canvas로 교체하면서 투입 인력, 소요 시간 감소되었습니다.

[한 프로젝트 당 평균 인력, 기간 비교]

  • ex. 고객사 LG 디스플레이

    디스플레이 단가 책정에 있어서 여러가지 정보들을 취합하느라 7일정도 걸렸는데, 교육을 통해 예측 모델을 생성, 활용하여 단가 책정을 2~3일 정도로 단축시키는 데에 성공하여 업무 효율화를 이끌어낸 사례

정량 평가

유저수 16배 증가, 활성유저 23%

런칭 이후 3달, 마케팅 없이 기업교육 수강생 재방문, 바이럴을 통한 신규 유입

🔍 MAU 58(23%)과 가입 이후 이탈 80(31%)의 지표를 통해서 신규유저의 이탈문제를 발견했고, 분석을 통한 온보딩 개선을 진행하였습니다.

정성 평가

AI Canvas 만족도 4.78점

💬 평가 대상 : 교육 고객 대상으로 실습 사용, 경기도교육청 소속 교사연구회 12명 (2024.01.24)

👍 기존 머신러닝 툴 비교하여 깔끔한 데이터 시각화, 사용성 높은 UXUI의 인터페이스

👍 AI Canvas를 학생들/직원들 교육용으로 실습과 함께 진행하는 점에 가장 큰 가치

🤔 실제 비즈니스 적용 사례와 더 많은 교육 콘텐츠에 대한 니즈

🤔 회사 데이터 사용 및 온프레미스 등 보안 제약사항 대응에 대한 의문

유료화를 위한 고객 리서치&UX 고도화

🎯 1차 메인 타겟 선정 : 기업 내 팀/담당자

명확한 타겟군을 찾아 유료화 기회를 발견하기 위해 타겟별(공교육,대학생,직장인, 소규모 사업자) 베타 서비스 사용 설문, 피드백, 인터뷰를 진행하였습니다.

이중 직장인 고객군에서 해결하고자하는 명확한 문제, 성과를 내어야 하는 상황, 리소스 투입이 원활한 점 등 가장 높은 니즈와 실행력을 발견했습니다. 캔버스로 진행되는 기업교육을 통한 신규 유입과 알고리즘랩스가 보유하고 있는 대량의 기업 고객 데이터를 이용한 마케팅 전략을 기회로 보았고, 회사 내부 팀/담당자를 첫번째 유료화 타겟으로 정하였습니다.

B2B 고객의 니즈를 분석하여, 서비스를 최적화를 위한 전략을 도출하였습니다.

2. 잠재 고객 리서치

💬 2024 코엑스 IT show, AI Expo 컨퍼런스를 참여하여 부스 방문객 70명 대상 의견 수집

💡 대부분의 회사 혹은 부서들이 아직 인공지능을 도입하거나 도입 가능한 수준의 개발 인력을 갖추지 못한 상황이었고, DX에 대한 니즈를 분명히 확인할 수 있었습니다.

💡 ai canvas가 회사의 산업군에 적용될 수 있는지, 사내 시스템/데이터와 연동될 수 있는지 명확히 드러낼 필요가 있음을 발견했습니다.

3. 1:1 In-depth 인터뷰

인터뷰 대상은 코엑스 컨퍼런스에서 캔버스를 알게 되었고, 사내 데이터 자동화와 AI 접목하는데 캔버스를 이용하기 위해 상세 미팅을 요청하였고, 함께 리서치를 진행했습니다.

해당 팀은 AI 도입 관련하여 회사의 선행주자 역할, AI 활용성을 회사에 입증해야 하는 단계였습니다. 캔버스를 이용한 생산성 검토가 이루어 지면, 회사의 고객들 대상으로 다양한 제조장비 결함을 예측하도록 상품화 할 목적이었습니다.

  • 클라우드 vs 온프레미스 와의 장단점에 대한 고려

  • 예측 정확도가 나올만큼의 데이터 사용과 프로토타이핑 니즈 (400GB의 데이터 보유)

  • 현재 사용중인 환경(쿠퍼네티스)와 연동시 소요 시간, 호환성에 대한 의문

  • 구독 형태의 가격 체계 부담, 회사 특성상 한 번의 큰 계약으로 진행하는것이 유리

💬 제조 및 시스템 자동화 분야 기업 RnD 선행팀 심층 인터뷰

💡 B2B2C(Business to Business to Customer), 유저가 제작된 캔버스를 자신의 고객에게 팔거나 제공하여 가치를 창출 하려는 경우에 대응 할 수 있어야 합니다.

4. 디자인 전략 수립

자신의 기업 환경과 캔버스가 연동 될 수 있다는 것을 안다면, 사용성이 높아질 것이다.

산업군과 캔버스 적용 사례를 통해 서비스에 대한 이해를 높일 수 있을 것이다.

회사의 환경에 맞는 비용 책정을 쉽게 받을 수 있다면 문의가 더 많아질 것이다.

중요 기능의 스펙을 전면 노출하면, 캔버스로의 유입이 늘어날 것이다.

유저 권한별 (팀-유저-하위 유저) UX가 최적화된 시스템을 제공하면, 구매 전환이 높아질 것이다.

랜딩페이지 개선

1. 기업형 과금 플랜 (온프레미스,데이터 양, 컨설팅 등) 패키지 추가

2. 산업군 예시, 캔버스 사례 추가

3. 연동 가능한 환경(azure, 도커, 쿠버네티스 등), 커스텀(파이썬 스크립트 추가) 등 중요 기능 리스팅

4. 클라우드 사용시 데이터 보안 체계 명확히 설명

맞춤형 플랜 : 사용 환경에 따른 (데이터 양, 인퍼런스 수, 유저수) 견적 UI

B2B2C에서의 시나리오를 고려하여 유저/팀 관리, 권한 설정, 공유 등 UX 고도화

5. 디자인 전략을 바탕으로 상세 scope과 우선순위를 협의하고, 고도화 작업을 진행중입니다.