💥노코드로 인공지능 서비스 프로토타입 만들어보기

Visual Blocks를 이용해 코딩 없이 프로토타입을 만들어 볼 수 있는 방법 알려 drill게요!

2024. 6. 9.

2024.06.10 | vol. 34 | 구독하기 | 지난호보기

미래에 할 수 있는 경험을 사전 예약하신 퓨처드릴 구독자, 드릴러 🛠️ 여러분 안녕하세요! AI와 UX의 알쏭달쏭한 점들을 시원하게 알려 drill 퓨처드릴 에디터 쏭🍄 입니다.

요즘 정말 많은 인공지능 서비스가 시장에 나오고 있는데요, 오늘은 사용법이 아닌 인공지능 서비스를 간략하게 프로토타입으로 만들어 볼 수 있는 프레임워크를 가지고 왔습니다. 프레임워크라고 하니 너무 거창한데 코딩을 전혀 모르시는 분들도 사용할 수 있도록 모듈들을 드래그 앤 드롭만 하면 간략하게 서비스를 구성해 볼 수 있는 아주 편리한 툴입니다.

이 툴을 어떤 분이 사용하면 좋을지 추천 대상부터, 핵심이 되는 7개의 모듈을 설명해 드리고 커뮤니티에 올라와 있는 예시를 이용해서 어떻게 파이프라인을 구성하는지까지 모두 알려drill게요~!

모두 follow me ~ 💖

시작하기 - Turning On the Drill

코딩 없이 인공지능 서비스 프로토타입을 만들 순 없을까?

지금까지 노코드로 분류 모델을 만드는 방법부터, 데이터 분석을 할 수 있는 방법까지 뉴스레터를 통해서 소개를 드렸는데요, 오늘은 무려 노코드로 인공지능 서비스 프로토타입을 만들어 볼 수 있는 툴을 알려드리려고 합니다. Visual Blocks는 구글에서 2023년도에 발표한 프레임워크로 아직 대중에게는 많이 알려지지 않은 도구입니다. 프레임워크라고는 하나 개발자만을 위한 도구는 아니고 오히려 개발을 잘 모르는 비개발직군에서 유용하게 쓰일 수 있는 툴입니다.

이름처럼 코드가 아닌 시각적으로 구분된 개별 블록들을 연결해 인공지능 파이프라인을 구성해 볼 수 있습니다. 이미 오픈소스로 풀린 모델들이 많다고 해도 머신러닝에 꼭 필요한 입력과 출력을 처리하기 위해서는 어느 정도 개발 지식이 필요한데요, 이렇게 블록들을 연결하여 전체 파이프라인을 구성할 수 있으니 코딩 지식 하나 없이도 가능합니다. 인공지능 서비스를 하나 만들기 위해서는 모델부터 데이터까지 생각해야 할 부분이 정말 많은데요, 그만큼 비용과 시간이 많이 필요한 복잡한 작업입니다. 이렇게 복잡한 과정을 무작정 시작하기보다 Visual Blocks를 이용해 간단히 프로토타입을 만들어보고 수정하는 과정을 거치면서 개발에 정말 필요한 부분과 필요하지 않은 부분을 가릴 수 있게 됩니다.

아래에서 더 자세히 설명 drill 게요~!

VisualBlocks? 무엇인가요?! 🤔

Visual Blocks는 머신 러닝 모델과 파이프라인을 빠르게 프로토타입하고 실험할 수 있는 비주얼 프로그래밍 프레임워크입니다. 이 도구를 사용하면 미리 만들어진 머신 러닝 모델과 파이프라인 구성 요소를 그래픽 편집기에서 쉽게 혼합하고 매칭할 수 있습니다. 위의 하나하나의 블록들을 모듈 집합에서 드래그 해서 선으로 연결하면 서비스의 전체 구성을 쉽게 만들 수 있습니다.

Visual Blocks는 왜 만들어졌나요?

최근 머신 러닝의 발전으로 실시간으로 이미지를 입력받아 바로 처리하는 고성능의 실시간 처리가 가능해졌습니다. 하지만 머신 러닝 기반의 멀티미디어 프로토타입을 반복적으로 개발하는 것은 전문가도 많이 필요하고, 비용이 많이 드는 작업입니다. 바로 이러한 문제를 해결하기 위해 Visual Blocks가 개발되었습니다. Visual Blocks의 비주얼 편집기를 이용하면 코딩 없이 다양한 구성 요소를 연결하여 ML 파이프라인을 신속하게 구축하고 실시간으로 결과를 확인할 수 있습니다.

이런 분들에게 Visual Blocks를 추천합니다! 👍

1. ML 기반 멀티미디어 애플리케이션을 빠르게 프로토타이핑해 보고 개발 속도를 높여보고 싶으신 분.
2. 코딩이나 기술적 세부 사항에 대한 걱정 없이 자유롭게 머신러닝 모델을 이용한 서비스를 기획해 보고 싶으신 분.
3. 일반적인 작업을 위한 미리 만들어진 모델과 데이터세트를 그대로 이용하고 싶으신 분.
4. 복잡한 입출력 데이터 처리 없이 전체 머신러닝 모델의 과정을 빠르게 테스트해 보고 싶으신 분.
5. 결과물을 쉽게 비교하고, 추가 배포 과정 없이 공유하고 싶으신 분.

Visual Blocks에 대해 더 배우고 싶다면? 🎯

📄 Visual Blocks 논문 (“Rapsai” was the initial name for Visual Blocks)
Rapsai: Accelerating Machine Learning Prototyping of Multimedia Applications through Visual Programming

🌐 Visual Blocks를 소개하는 구글 블로그

Visual Blocks for ML: Accelerating machine learning prototyping with interactive tools – Google AI Blog

24년 Google IO에서 Visual Blocks에서 커스텀 모듈을 만드는 방법을 다뤘습니다.

https://io.google/2024/explore/a4da7132-3f33-4723-8bb4-5989011dca7c/intl/ko/?_gl=1*99780q*_up*MQ..*_ga*ODU3MjI5NDU1LjE3MTc5NDIxMjk.*_ga_Y56JWV5N8T*MTcxNzk0MjEyOC4xLjAuMTcxNzk0MjEyOC4wLjAuMA..

VisualBlocks 커뮤니티 (흥미롭고 직접 만져볼 수 예제들이 있습니다.)

https://visualblocks.withgoogle.com/#/community

VisualBlocks의 7가지 핵심 모듈 살펴보기

1. 다양한 데이터 형식을 입력받을 수 있게 해주는 <Input>

머신러닝 모델에는 다양한 형식의 데이터가 입력됩니다. 원래 프로그래밍 했었다면 이미지 데이터 따로 텍스트 데이터 따로 처리를 해줘야 하지만 Visual Blocks에서는 Input 모듈에서 원하는 데이터를 간단히 선택할 수 있습니다. 기본적인 이미지와 텍스트 데이터 이외에도 카메라로 실시간 입력을 받을 수도 있고 손으로 그린 그림도 입력받을 수 있습니다.

2. 키워드를 기반으로 Google 검색을 수행할 수 있는 <Search>

구글에서 만든 서비스인 만큼, 구글 서비스의 핵심이라고 할 수 있는 검색 기능도 모듈로 간단히 이용할 수 있습니다! 기존의 구글 검색창에서 이루어지던 검색 기능을 모듈로 이용하면 사용자가 입력한 텍스트를 기반으로 검색이 이루어지고 이 검색 결과를 모델의 입력으로 이용하거나 또 다른 Input 모듈의 입력으로 사용할 수 있습니다.

3. 다양한 데이터를 목적에 맞게 처리해주는 <Processor>

Processor는 말 그대로 여러 가지 데이터 처리를 담당하는 모듈입니다. 머신러닝 모델에 입력으로 데이터를 넣을 때 기본으로 입력된 데이터를 추가 가공해 줘야 할 때가 있는데 이때 여기서 추가 가공을 해주면 됩니다. 원래는 ML 전문가가 프로그래밍해 줘야 하는 부분들을 이러한 그래픽 모듈로 쉽게 이용할 수 있습니다.

4. Visual Blocks의 핵심! 머신러닝 모델을 사용할 수 있는 <Model>

Model에서는 태스크에 맞는 머신러닝 모델을 선택할 수 있습니다. 현재는 14개의 태스크를 처리할 수 있는 모델이 있습니다. 하나의 태스크에 선택할 수 있는 여러 모델이 있어 모델의 성능을 비교할 수 있는 건 아니지만, 구글에서 제공하는 고성능의 모델을 쉽게 가져와 쓸 수 있는 만큼 추가 미세조정 없이 빠르게 모델을 프로토타이핑해 볼 수 있습니다.

5. 모델의 처리결과를 다양한 형태로 받아볼 수 있게 해주는 <Output>

모델의 결과를 다양한 형태로 출력해 볼 수 있는 Output 모듈입니다. 이미지를 출력하는 모델이라고 해서 꼭 결과물을 이미지로 받을 필요가 없습니다. HTML viewer를 이용해서 구조화된 문서 형태로도 결과를 받을 수 있습니다. 프로토타이핑할 때 제일 중요한 부분이 Output 부분인데, 별도의 코딩 없이 결과물을 다양한 형태로 출력해 볼 수 있다는 점이 큰 장점입니다.

6. 주어진 텐서를 목적에 맞게 가공할 수 있게 해주는 <Tensor>

여기서 텐서란 머신러닝 모델이 다루는 데이터의 기본 형식을 의미합니다. 사람은 이미지를 하나의 이미지로, 텍스트는 하나의 글로 인식합니다. 하지만 인공지능은 사람과 달리 이미지건, 텍스트건, 모두 숫자로 인식을 합니다. 여기서 인공지능이 처리하는 데이터의 규모란 어마어마합니다. 그렇기에 텐서라는 고차원 배열로 엄청나게 큰 규모의 숫자를 효율적으로 관리합니다. 즉 텐서란 인공지능이 우리가 입력한 데이터를 처리하는 데 이용하는 일종의 데이터 형식을 의미합니다.
왼쪽의 Tensor 모듈은 이러한 텐서들을 처리할 수 있는 기능들을 제공합니다. 어떤 것들은 이미지 입력 자체에서 처리되어야 하거나, 그 후 Processor 모듈을 통해 처리되어야 하지만 어떤 데이터들은 Tensor 모듈을 통해 처리되어야만 합니다. (가령 텐서의 타입을 Float 타입에서 int 타입으로 바꾸는 것)

7. 프로토타입을 만드는데 도움을 주는 확장기능들의 모음 <Advanced>

Advanced 모듈에서는 프로토타이핑 하는 데 도움을 줄 수 있는 추가적인 기능들을 제공합니다. 일반적으로 사용되진 않지만 여기 있는 기능들을 이용한다면 좀 더 복잡한 프로토타이핑도 가능해집니다. 예를 들어 코드 에디터를 이용한다면 일반적인 텍스트 입력이 아닌 코드를 모델의 입력으로 이용할 수도 있습니다.

[실전!] Visual Blocks를 이용해 간단히 개와 고양이 탐지해보기

Intro - Visual Blocks 인터페이스 살펴보기

본격적인 모듈 구성 전에 Visual Blocks의 핵심 구성 요소들을 알려드릴게요. Visual Blocks는 크게 네 부분으로 구성되어 있습니다.
제가 위에서 설명해 드린 7개의 핵심 모듈은 화면 왼쪽 아래에 구성되어 있습니다. 여기서 원하는 모듈들을 선택해 옆의 오른쪽 공간에 드래그하는 방식으로 모듈들을 추가할 수 있습니다.
이렇게 모듈과 모듈을 연결해서 입력부터 - 처리 - 모델에 넣기 - 출력이 잘 연결되었다면 위의 빨간색 결과 영역에서 처리 결과를 확인할 수 있습니다. 화면 오른쪽 제일 위쪽을 보시게 되면 이렇게 만든 프로젝트를 관리할 수 있는 영역이 있는데요, 남이 미리 만들어놓은 파일을 가져올 수도 있고 반대로 내가 만든 프로젝트를 내보내기 하여 다른 사람에게 전달할 수도 있습니다. 혹은 파일이 아닌 Share를 통해 링크를 공유해 쉽게 결과를 전달할 수도 있습니다.

아래 노란색 영역을 보시면 여러 모듈이 선으로 연결되어 있는데요, 모듈 기준으로 왼쪽에 있는 부분들은 이 모듈에 입력으로 들어오는 부분이고 오른쪽에 있는 부분들은 모듈을 거쳐 출력으로 나가는 부분입니다. 내가 지금 선택한 모듈에서 어떤 값이 입력으로 들어와야 하는지 다음에 어떤 모듈에 연결해야 하는지 헷갈릴 수도 있는데요, 그럴 때는 모듈을 클릭한 후 다른 모듈에 갖다 대면 연결할 수 있는 모듈일 경우 작게 파란색으로 표시가 되는 것을 볼 수 있습니다. 애초에 연결 불가능한 모듈이라면 선 자체가 이어지지 않고요. 토글 버튼으로 이루어진 모듈의 경우 토글의 켜고 끄면서 이것이 어떻게 반영되는지 위의 결과 공간에서 바로 확인할 수 있는 만큼 처음부터 모든 것을 배우고 시작할 필요 없이 만들면서 빠르게 배울 수 있다는 장점이 있습니다.

Main - 본격적인 파이프라인 구성하기 🎯

저희는 이번에 간단히 개와 고양이를 구분할 수 있는 서비스를 만들어 보려고 합니다. 개와 고양이를 구분한다고 하니 단순해 보이지만, 물체 감지는 머신러닝 분야에서 널리 쓰이는 기술로 개와 고양이가 아닌 다양한 산업군으로 확대한다면 쓰임새가 많은 기술입니다.

커뮤니티에 올라와 있는 기본 예제를 가지고 설명을 드릴테니 혹시 개와 고양이가 아닌 여러분이 가지고 있는 데이터를 가지고 감지 모델을 돌려보는 것도 좋습니다. (프로젝트 링크)

전체 구성은 아래와 같습니다.

아래 5개의 모듈들을 연결하여 개와 고양이가 함께 있는 사진을 입력했을 때 오른쪽과 같이 이것이 고양이일 확률과 개일 확률을 나타내주고 각 영역을 사각형 박스로 채워주는 파이프라인을 구성했습니다.

아래에서 각 단계별로 설명 드릴게요~!

1️⃣ Image Input으로 이미지 입력하기

입력 모듈 중에서도 이미지 입력을 고르게 되면 데스크톱에서 쉽게 파일을 추가할 수 있습니다. 이 프로젝트를 내보내기 할 수도 있는 만큼 'Allow user upload' 부분을 끄게 되면 기존에 있는 이미지만으로 하게끔 강제할 수도 있습니다.

2️⃣ Image Processor로 입력 이미지 변형하기

이미지 입력에서 우리가 선택한 이미지가 Image Processor의 입력으로 들어오게 됩니다. 오른쪽의 이미지를 보시면 이미지 아래 Brightness, Resize와 같은 이미지를 변경할 수 있는 부분이 있는데요, 머신러닝에 이미지를 넣을 때 학습의 안정성 부분을 고려해 일부러 이미지를 변형해서 모델에 넣는 경우도 있습니다. (이미지를 다양하게 변형해 다양한 사진들을 학습에 이용하면 인공지능의 학습 능력이 더욱 좋아지게 됩니다.)

3️⃣ Object detection 모델을 이용해 객체 탐지하기

이 부분은 위의 결과 창에서 확인할 수 없는데요, 이유는 시각적으로 확인할 수 있는 부분이 없고 이 모델의 결과를 다음 Output에 연결해 주어야만 결과를 확인할 수 있습니다.
여기서 두 번째에 Score를 선택하는 부분이 있는데요, 즉 이 점수 이상의 확률을 가진 객체만 사각형을 그려서 표시를 해줘~를 말하는 부분입니다. 예를 들어 고양이와 강아지가 있는 사진에서 고양이는 뚜렷하게 식별 가능하지만, 강아지는 일부분이 잘려서 명확하게 구분되지 않을 수 있는데요, 이렇게 되면 이것을 강아지라고 명확하게 인식할 확률이 낮아지게 됩니다. 이때 우리가 Score를 0.2 정도로 낮게 잡게 되면 "낮은 확률이라도 객체를 표시해 줘~"가 되고 이 값을 높이게 되면 정확도가 높게 나온 객체만 구분해서 볼 수 있습니다.

4️⃣ Bounding box visualizer로 객체 탐지 결과 확인하기

여기서는 앞에서 구분한 객체들에 박스로 표시하고 결과를 보여줍니다. 원하는 컬러로 지정할 수 있어 각 객체를 어떤 색으로 표시할 건지도 직접 정할 수 있습니다.

5️⃣ Image comparison로 전체 결과 한눈에 비교하기

마지막으로 저희가 입력한 원본 이미지, 후에 Processor를 이용해 변형한 이미지 그리고 모델에 넣고 나온 결과물을 한 번에 비교해서 확인할 수 있습니다. Reorder 부분을 클릭하면 어떤 순서로 이미지를 보여줄 것인지도 직접 변경할 수 있습니다.

내보내기 및 공유하기

내보내기

내보내기를 통해서는 프로젝트 이름과 설명을 쓸 수 있고 태그 또한 추가할 수 있습니다. 이렇게 해서 파일을 내보내면 나중에 import해서 사용할 수 있는 파일을 다운받을 수 있습니다.

공유하기에서는 프로젝트 파일을 JSON 형식으로 내보내고 이것을 깃허브에 업로드 하게 되면 사람들이 내가 만든 파일을 웹에서 접근할 수 있습니다. 다만 위에서 설명드렸던 결과창만 확인가능한 것이 아니라 밑에 옵션을 선택하는 부분까지 모두 공유가 되어 주의가 필요합니다.

마무리하기 - Turning Off the Drill

여러분 오늘 내용 어떠셨나요? 코딩 없이 블록을 드래그 앤 드롭해서 인공지능 서비스를 기획해 볼 수 있다니! 저한테는 여름의 단비 같은 고마운 도구였습니다. 이미 제공된 모델들을 쉽게 가져가 쓸 수 있다는 부분도 놀라운데 입력과 출력 같은 추가 개발이 필요한 부분도 쉽게 드래그 앤 드롭으로 처리할 수 있어 인공지능 서비스를 기획해 보고 싶은 비개발 직군 분들에게 아주 유용한 도구가 되리라 생각됩니다. 물론 제공된 모델을 쓸 수밖에 없기에 한계가 없진 않지만, 인공지능 서비스를 개발하는 데 아주 큰 비용이 소요되는 만큼 실제 모델 개발에 들어가기 전에 간단히 프로토타입을 개발해 보면서 개발자들과 소통하는 데 큰 도움을 줄 수 있으리라 생각됩니다. 막연히 "이렇게 동작하는 서비스야~" 하는 것보다 실제 입력 데이터를 넣어보고 모델의 결과를 같이 봤을 때 서로 합의하는 것이 더 쉬워질 것입니다.

오늘은 지면상의 한계로 다루지 못했지만, 위의 모듈 부분에서 직접 자신만의 커스텀 노드를 만들어 추가할 수도 있습니다. Processor나 Tensor를 통해 입력 데이터를 어느 정도는 처리할 수 있지만 우리 회사가 원하는 완벽한 기능이 없을 수도 있습니다. 이럴 때는 직접 자바스크립트 코드를 작성하고 개인 서버에 올려 Visual Blocks에서 사용할 수 있는 모듈로 등록할 수도 있습니다.

또한 모델의 결과를 Output으로 받고 이 결과 자체를 또 다른 모델의 Input으로 활용하여 좀 더 복잡한 서비스를 기획할 수도 있습니다. 직접 코딩하지 않는다고 해서 어떤 제한에 휩싸이기보다는 Visual Blocks에서 제공하는 기능들을 최대한 잘 조합한다면 실제 서비스와 유사한 기능을 만들 수도 있으니 지금 기획 중인 인공지능 서비스가 있다면 Visual Blocks를 통해 간단히 검증해 보시는 걸 추천해 드립니다.

전에 제가 다뤘던 뉴스레터 중에 Teachable Machine 사용법을 소개해 드린 뉴스레터(https://futuredrill.stibee.com/p/8/)가 있었는데 혹시 기억 나시나요? Teachable Machine의 경우 여러 데이터를 처리할 순 있긴 하지만 아쉽게도 분류 모델밖에 실험해 볼 수 없었는데요, 이처럼 다양한 태스크를 수행해 볼 수 있는 툴이 나와 너무 반가운 마음이 들었습니다. 앞으로도 구독자분들이 단순히 인공지능 서비스의 수혜자가 아닌 인공지능을 직접 다룰 수 있는 메이커가 될 수 있도록 도와드리겠습니다.

오늘도 긴 글 읽어주셔서 감사합니다.

📝 오늘의 단어: 텐서 (Tensor)

텐서는 데이터를 다루는 수학적인 개념으로, 간단하게는 여러 차원으로 구성된 배열이라고 생각할 수 있습니다. 이러한 배열은 다양한 유형의 데이터를 표현할 수 있습니다. 예를 들어, 이미지는 픽셀 값들의 배열로 표현될 수 있고, 텍스트는 단어들의 배열로 표현될 수 있습니다.

여기서 "텐서"라는 용어는 주로 머신 러닝이나 딥 러닝 분야에서 사용되는데, 이는 데이터를 모델에 입력하거나 모델에서 출력하는 데 사용됩니다. 예를 들어, 이미지를 처리하는 모델은 이미지를 텐서 형태로 입력으로 받아들이고, 이를 통해 이미지의 특징을 추출하거나 분류할 수 있습니다.

본 뉴스레터는 모두의연구소 AIX LAB에서 K-하이테크 플랫폼에 지원 받아 진행됐습니다.

📬퓨처드릴 구독하기

💌피드백으로 응원하기

👇🏻 퓨처드릴 인스타그램 계정 팔로우하고, 빠르게 소식을 확인하세요 👇🏻

퓨처드릴 - AIX를 구독하고 이메일로 받아보세요

AI Experience (AIX)의 이모저모를 전해드리는 '퓨처드릴'입니다!

이전 뉴스레터

💥 AI, 할리우드를 변화시키다

2024. 6. 2.

다음 뉴스레터

💫AGI 서비스, 원더랜드에 접속하시겠습니까?

2024. 6. 16.

퓨처드릴 - AIX

AI Experience (AIX)의 이모저모를 전해드리는 '퓨처드릴'입니다!