두잇(DO-IT)

3️⃣
두잇(DO-IT)

D-1 "나만의 AI 모델 만들기" 챌린지도 참여하고, 애플 스토어 키프트 카드도 받고!✨✨

admin 3️⃣


안녕하세요! 🙋🏻🙋🏻‍♂️
"나만의 AI 모델 만들기" 챌린지가 내일이면 끝나요! (5/23 11:45PM KST 마감)
얼른
참가하러 가기(클릭)

1시간만 투자하면 내가 원하는 문장 스타일을 가진 AI를 만들고, 애플 스토어 기프트카드 상품 수상을 노려볼 수있어요.🤫 

참여 방법도 엄청 쉬운데요. 하나만 준비하면 돼요! 
  • 준비물: 내가 원하는 말투/ 문장 스타일을 가진 영어로 된 텍스트 데이터
  • 🤔🤔 "데이터를 어떻게 구하죠?" 저희 Knock-AI 구성원이 재밌는 데이터 찾은 방법 참고하러가기(링크)

플러스! 아래와 같은 고민이 있으신 분들, 아래 댓글 또는 챌린지 Q&A 게시판에 글을 남겨주시면 저희가 도와드릴게요!
  • 🤯  데이터 준비가 어려워서 고민이신 분들 
  • 🤓  같이 얘기하면 좋은 아이디어가 떠오를 것 같은 분들

그래도...너무 어렵다!🤯  하시는 분들은 걱정 마세요.🤫 나만의 AI 모델 만들기 위한 재밌는 아이디어만 있어도 참여할 수 있어요. 아이디어만 제출하기 (클릭)

벌써 재밌는 결과물을 제출해주신 분들이 있는데요. 한번, 다른 사람이 만든 예시 보고 영감을 받아보면 어떨까요? (클릭)

D-6 "나만의 AI 모델 만들기" 챌린지 도움 필요하신 분?🙋🏻🙋🏻‍♂️

admin 3️⃣
안녕하세요! 
어제 많은 분들께서 "나만의 AI 모델 만들기" 라이브 설명회에 참석해주셨는데요. 
라이브 설명회를 놓쳐서 아쉬워하시는 분들을 위해 발표 자료를 공유합니다. 

"나만의 AI 모델 만들기" 챌린지가 6일 뒤면 끝나요! 얼른 참가하러 가기(클릭)
1시간만 투자하면 내가 원하는 말투(문장 스타일)를 가진 AI를 만들 수 있어요. 

딱 하나만 준비하면 돼요! 
  • 준비물: 내가 원하는 말투/ 문장 스타일을 가진 영어로 된 텍스트 데이터

아래와 같은 고민이 있으신 분들, 아래 댓글을 남겨주시면 저희가 도와드릴게요!
  • 🤯  데이터 준비가 어려워서 고민이신 분들
  • 🤓  같이 얘기하면 좋은 아이디어가 떠오를 것 같은 분들

그래도...너무 어렵다!🤯  하시는 분들은 걱정 마세요.🤫 나만의 AI 모델 만들기 위한 재밌는 아이디어만 있어도 참여할 수 있어요. 아이디어만 제출하기 (클릭)

[온라인] 제 1회 Teachable NLP 챌린지 - 라이브 설명회(Q&A)

admin 3️⃣
다음주 월요일(5/17) 저녁 8시, 라이브 설명회에서 나만의 AI 모델 만들기 챌린지 우승 꿀팁을 대방출하려고 합니다.  궁금한 점 & 고민하는 점 무엇이든지 나누어 봅시다!

  • 일시: 5월 17일(월) 20:00~22:00
  • 세션 내용: 
1. Teachable NLP 사용법 및 챌린지 소개
2. Teachable NLP 챌린지 우승 꿀팁 대방출 🏆
3. 자유로운 질의 응답 세션이 준비되어 있습니다.
  • 참가 링크: https://link.ainize.ai/3eBGWFU
  • 준비물: 개인 PC/노트북(필수), 나만의 AI 모델 개발을 위한 .txt 형태의 데이터셋(선택 사항)

Teachable NLP란?

"Teachable(가르칠 수 있는)" + "NLP(자연어처리)"로 Ainize에서 지난 4월 런칭한 데이터 중심 AI 모델 개발을 돕는 서비스입니다. AI에 관심있는 누구나 본인이 원하는 데이터로 NLP 모델을 무료로 학습시키고 만들 수 있습니다.


Teachable NLP 챌린지란?

무료로 코딩없이 나만의 인공지능 자연어처리(NLP) 모델을 학습시키고 만드는 데 관심있는 모든 사람들을 위한 대회입니다. 코딩, 인공지능에 대한 지식이 없어도 좋은 아이디어와 텍스트 형태의 데이터셋만 준비하면 누구나 참가할 수 있습니다.
Like Comment

Teachable NLP 튜토리얼 - 나만의 자연어 처리(NLP) 모델 만들기

admin 3️⃣
안녕하세요! 이전 Peltarion 튜토리얼에서는 데이터 준비부터 딥러닝 모델링까지 진행을 했다면, 이번에는 데이터만 준비하면 되는 Teachable NLP를 소개하려 해요.

Teachable NLP는 코드 없이 나만의 자연어 처리 모델을 만들 수 있는 서비스이에요. 🙂  

  • 자연어(Nautral Language)란 인간이 일상에서 사용하는 언어를 말해요.
  • 자연어 처리(Natural Laguage Processing)란 기계가 자연어를 이해하고 해석하여 처리할 수 있도록 하는 일을 말해요. (출처: 링크)



조금 더 이해를 돕기 위해, 자연어 처리(NLP)가 활용되는 분야에는 어떤 것이 있는지 설명해드리려고 해요. 

  • 텍스트 분류(Text Classification): 텍스트가 특정 카테고리에 속하는 것을 예측하는 기법이에요. 스팸 메일 분류나 뉴스 기사의 내용을 기반으로 연애/정치/사회/문화 중 어떤 카테고리에 속하는지 자동으로 분류해주는 프로그램이 이에 속해요.
  • 감성 분석(Sentiment Analysis): 텍스트에 나타나는 감정/기분 등의 주관적 요소를 분석하는 기법을 말해요. SNS의 글을 분석하여 글쓴이의 감정을 분석하는 것, 영화 및 제품의 리뷰를 분석하는 것 등이 이에 속해요.
  • 텍스트 요약(Summarization): 텍스트에서 중요한 주제를 추출하여 요약하는 기법을 의미해요.
  • 기계 번역(Translation): 구글 번역기나 파파고와 같은 번역기에도 활용돼요.
  • 대화 시스템 및 자동 질의응답 시스템: 애플의 시리나 삼성 갤럭시의 빅스비, 챗봇 등이 이에 속해요. (출처: 링크)

이렇게 저희 일상에서 활발하게 활용되고 있는 누구나 쉽게 노코드로 자연어 처리(NLP) 모델을 학습시킬 수 있는 Teachable NLP를 무료로 사용할 수 있다고 하니, 사용하지 않을 이유가 없겠죠? 😎



  1. Teachable NLP 시작하기!

먼저, Teachable NLP를 사용하기 위해서 'Join with Github'을 클릭하신 후, Github으로 로그인하세요.

Github 계정이 없으신 경우, 아래와 같이 뜨는 팝업에서 'Create an account'를 클릭하면 간편하게 계정을 만들 수 있어요.



2. "영어로 구성된" 데이터 준비하기

데이터를 준비하기 전, 자연어처리(NLP) 모델로 무엇을 만들고 싶은지를 먼저 정하는 것이 데이터를 선정할 때 도움이 돼요. 아이디어가 바로 떠오르지 않는다면, 다른 사람들이 Teachable NLP로 만든 예시 참고해보세요. 
다른 사람들이 Teachable NLP로 만든 예시 확인하러 가기

예를 들어서, 팝송 가사 생성을 해주는 AI를 만들고 싶을 경우, 팝송 가사 데이터를 수집해야겠죠? Kaggle과 같이 이미 다양한 데이터가 모아둔 곳을 활용하셔도 좋아요. 공개된 데이터를 수집할 때 중요하게 보아야 할 것은 저작권(license)이에요. CC0 Public Domain license로 표시가 되어있다면 저작권이 없는 데이터여서 자유롭게 사용하실 수 있어요. 그래서 꼭! 사용하시려는 데이터의 저작권을 확인하시고 목적에 맞게 사용하세요.

아래 이미지는 Kaggle에서 팝송 가사를 모아놓은 Dataset 이에요. 아래 이미지 왼쪽 적힌 Data Explore 아래에서 보실 수 있듯이, 해당 데이터는 여러 텍스트 파일로 이루어져있어서 하나의 텍스트 파일에 모든 가사 데이터를 합치는 작업이 필요해요.

*Teachable NLP는 텍스트(. txt) 파일 형식만 지원하고, 모델을 학습시키기 위해서 최소 1MB의 데이터가 필요해요! 그리고 반드시 영어로 구성된 데이터만 학습 가능합니다.


Teachable NLP로 나만의 팝송 가사 생성 모델 만드는 방법 보러가기(한글)

위와 같이 데이터를 바로 사용할 수 있는 운 좋은 경우도 있지만, 본인이 만들고자 하는 AI 모델과 상관없는 내용이 생성되지 않도록 불필요한 텍스트, 여백, 기호 등을 제거를 해줘야 하는 경우도 있어요.

예를 들어, 논문을 생성해주는 AI 모델에서 논문 저자의 기본 정보에 대한 데이터는 생성하지 않았으면 하는 경우, 논문 저자의 기본 정보를 포함한 영역을 모두 찾아서 삭제해주시면 돼요. 삭제하기 위해서 논문 데이터 파일을 열고 Control(Command) + F로 특정 단어를 검색하여 쉽게 삭제할 수 있어요.

Teachable NLP로 머신러닝 분야 논문을 생성해주는 모델 만드는 방법 보러가기(영문)



3. 준비한 데이터(텍스트 파일) 업로드하기

'Upload text file'을 클릭하여 준비하신 데이터를 업로드해주세요.

*Teachable NLP는 텍스트(. txt) 파일 형식만 지원하고,최소 1MB의 데이터가 필요해요! 

Teachable NLP에서는 바로 사용해볼 수 있는 텍스트 데이터를 제공해주는데요. 아래와 같은 툴팁에 있는 SongLyrics.txt(팝송 가사 데이터) 또는 LordOfTheRIngs.txt(반지의 제왕 소설 데이터)를 자유롭게 다운로드하셔서 사용해보셔도 좋아요!



4. 이제 자연어 처리 (NLP) 모델을 학습시켜볼까요?

위에서 준비한 데이터를 모델에 학습시킬 차례예요! 모델을 학습시키기 위해서 모델 타입에폭을 설정해주세요. 

  • 모델 타입이란? Teachable NLP가 제공하는 자연어 처리(NLP) 모델은 GPT-2 모델로 크기가 small, medium, large가 있어요. 각 모델의 크기는 모델 학습에 들어간 데이터와 파라미터 수를 의미해요. 일반적으로 모델의 크기가 커질수록 데이터에 대해 잘 학습하며 학습에 걸리는 시간은 길어져요.
  • 에폭이란? 1 에폭(epoch)은 전체 데이터 샘플을 모델이 한 번 학습하는 것을 의미해요. 일반적으로 에폭 값이 증가할수록 모델 성능이 좋아져요. (에폭에 대해 쉽게 설명한 글이 있어서, 더 자세히 이해하고 싶으신 분들은 다음 링크를 확인해보세요.)

모델 타입과 에폭을 설정한 뒤, 'Train Model'을 클릭해요.



5. 더 빨리 모델 학습을 시키고 싶으신 분을 위한 새치기 기능!

본인의 모델이 몇 번째 순서로 학습되는지 확인할 수 있어요. 아래에서는 제 모델이 36번째로 학습될 예정이라는데요, 만약 나의 모델을 더 빨리 학습시키고 싶으면 Cut-in (새치기) 기능을 클릭할 수 있어요.

'Cut-in'을 클릭하면 모든 사용자의 모델 학습 진행 순서에서 나의 모델 학습 진행 순번을 확인할 수 있어요. 배정된 순서보다 더 빠른 순번을 클릭하여 새치기(Cut-in)를 할 수 있는데요.

초록색 글씨로 'Training'이라고 적혀있는 영역은 클릭할 수 없으니 유의하세요. 그 외에 원하는 순번에 마우스를 가져다 놓으면 'Click to Cut-in here'이 뜨고, 해당 부분을 클릭할 수 있어요.

그 다음으로는 Cut-in 비용을 지불을 위한 팝업이 뜨는데요. Cut-in 비용을 지불하기 위해서는 멤버십 플랜을 구독해야 해요. 선택한 멤버십 플랜에 따라 AIN이 지급되고, 해당 AIN을 Cut-in 비용으로 사용할 수 있어요. 멤버십 플랜은 곧 오픈 될 예정이라고 해요. 
오픈 전에 초기 이벤트로 Teachable NLP를 '첫 사용자'에게 모두 무료로 100 AIN을 지급해준다고 하니, 이 기회를 모두 놓치지 마세요!

Cut-in 비용은 팝업에 명시되어있는 Minimum Cut-in fee 이상을 입력해야 합니다. 만약 Minimum Cut-in fee가 아래 이미지처럼 100 AIN으로 되어있을 경우, Cut-in fee는 100 AIN 이상을 입력하셔야 해요.

* 다른 사용자가 더 많은 AIN을 내고 내가 선택한 순번으로 새치기를 할 수 있어서 내가 원하는 순번보다 낮은 순번으로 변동되는 경우도 발생해요.




6. 거의 다 왔습니다. 여러분이 학습시킨 자연어 처리(NLP) 모델을 확인해볼까요?

자연어 처리 (NLP) 모델 학습이 완료되면, Teachable NLP에서 여러분이 로그인하신 이메일 주소로 완료 메일을 발송할 거예요. 해당 메일을 열고 'Check your model'을 클릭하세요.


본인이 작업했던 화면으로 넘어와서 'View API' 를 클릭하면 내가 만든 자연어 처리(NLP)모델의 API를 확인하실 수 있어요. 
API란 무엇인지, 어떻게 API를 사용해서 서비스를 만들 수 있는지에 대해 Knock-AI Epoch 1 게시판에서 자세히 다루고 있으니 다음 링크를 확인해보세요. 


'Test your model'을 클릭하시면 모델을 테스트해볼 수 있는 아래처럼 TabTab 화면으로 연결되는데요.


TabTab 입력 칸에 본인이 원하시는 문장 또는 단어를 입력하고 'Run autocomplete' 또는 Tab 키를 누르면 작성하신 문장을 기반으로 다음 문장을 추천해줘서 원하시는 문장으로 선택하실 수 있어요.


만약 Run autocomplete 버튼 아래에 위와 같이 'Wait for few minutes to activate the container'라는 멘트와 함께 얼음 이모지가 뜨면 준비중이라는 메시지이므로 잠시 기다리시면 아래와 같이 'Container is ready. Test your model!' 과 같은 멘트와 함께 불 이모지가 뜨고, TabTab을 이용하실 수 있으니 해당 멘트를 확인하시고 사용하세요.


💡 다른 사람들이 Teachable NLP로 재밌는 자연어처리(NLP) 모델을 만든 것도 확인할 수 있는데요. 어떤 모델을 만들었는지 하나씩 확인해보시면서 재밌는 아이디어를 얻어보세요.✨


위 내용을 보시고 한번 따라서 Teachable NLP를 사용해보시면서 여러분들이 만든 '나만의 자연어 처리(NLP)모델'을 쇼케이스에 공유해주세요! 진행하면서 궁금한 점 & 어려운 부분이 생기시면 자유롭게 댓글을 남겨주세요.😁
Like Comment

광고 클릭 여부를 예측해주는 AI 서비스

admin 3️⃣
안녕하세요.

No-code 딥러닝 모델링 툴을 활용하여 광고 클릭 여부와 광고를 클릭할 잠재 사용자 정보를 예측해주는 Advertisement Click Prediction AI 서비스를 만들었습니다.


  1. AI를 통해 해결하고자 하는 문제 정의
많은 비용을 들여 온라인 광고를 돌리는데, 타깃 사용자와 광고 헤드라인을 잘못 설정하여 비용과 시간을 낭비하는 경우가 많습니다. 이를 해결하기 위해 타깃 사용자의 정보와 광고 헤드라인을 입력하면 광고 클릭 여부를 예측해주는 서비스를 No-code 툴로 구현했습니다.

2. 데이터 셋 선정 및 특성 선택
Kaggle에서 제공하는 온라인 광고 클릭한 사용자와 클릭하지 않은 사용자 정보가 담긴 데이터 셋입니다.


(1) 데이터의 특성은 총 10개로 다음과 같습니다.
  • 나이, 성별, 도시, 나라, 인터넷 사용시간, 광고가 올려진 사이트를 이용한 시간, 수입, 광고 헤드라인, 광고를 클릭한 시간, 광고 클릭 여부

(2) 여기서 중요한 특성은 ‘Clicked on Ad’입니다. 해당 데이터 셋에서는 광고를 클릭했을 경우를 1로, 광고를 클릭하지 않았을 경우를 0으로 표기되어 있습니다. 나머지 9 특성이 ‘Clicked on Ad’ 특성을 정확히 예측하는 것에 도움을 주는지 확인하기 위해 데이터의 특성을 먼저 살펴보며 유용한 특성을 선별하는 과정을 거쳤습니다.

  • 모델의 학습하는데 있어서 특성이 많기만 하면 *과대 적합을 시킬 수 있습니다. (*과대 적합이란 모델이 훈련 데이터에 너무 잘 맞지만 일반성이 떨어진다는 의미입니다.) 해당 이슈를 줄이기 위해서 모든 특성 조합을 다 시도해보고 가장 좋은 셋을 찾는 방법을 선택했습니다.
    • 예를 들어, '인터넷 사용시간' 특성을 포함하지 않은 모델의 정확도는 76%가 나왔고 특성을 포함한 경우에는 정확도가 100%가 나왔습니다.
    • 위 방법을 통해서 다음 특성을 선택했습니다.: 나이, 성별, 인터넷 사용시간, 사이트 이용 시간, 수입, 광고 헤드라인

3. No-code 딥러닝 모델링 툴, Peltarion을 이용한 딥러닝 모델링 방법
(1) 데이터 전처리

선별한 특성으로 구성된 데이터 셋을 Peltarion이라는 No-code 딥러닝 모델링 플랫폼으로 불러와서 모델링을 하였습니다. Peltarion에서 모델링에 대해 상세한 방법은 Epoch 2 딥러닝- Pelatrion 게시판에서 다뤘으니 자세한 내용은 해당 게시판으로 가셔서 확인해주세요.

데이터를 업로드한 후, 문제 타입을 *이진 분류(Binary Classification)문제로 선택하면 모델링 아키텍쳐가 생성됩니다. (*이진 분류란 딥러닝으로 구분하고자 하는 결괏값이 2가지인 경우를 말합니다. 저의 문제의 경우는, 온라인 광고를 클릭한 경우와 클릭하지 않은 경우 이렇게 결괏값이 2가지입니다.)


데이터 특성 중 '광고 헤드라인'은 텍스트 데이터로 BERT TokenizerEnglish BERT encoder을 통해 데이터 전처리를 합니다. 텍스트를 나누는 단위를 토큰(token) 이라고 하고 텍스트를 토큰으로 나누는 것을 토큰화(tokenization) 라고 합니다. 텍스트 데이터는 토큰화를 적용하고 수치형 벡터에 연결하는 작업이 필요합니다.
  • BERT는 2018년 구글이 발표한 자연 언어 처리(NLP) AI의 딥러닝 모델로 자연어(텍스트)를 기계가 이해할 수 있는 고차원의 벡터로 바꿔주는 역할을 합니다. BERT는 양방향성을 포함하여 문맥을 더욱 자연스럽게 파악할 수 있습니다. 예를 들어, 이전의 대부분 모델은 문장을 이해할 때 문장 왼쪽에서 오른쪽 순으로 봤다면, BERT는 왼쪽 → 오른쪽 순 & 오른쪽 → 왼쪽 순 모두 포함하여 문장을 이해합니다.

(2) 모델 정확도 확인
제가 Peltarion을 통해서 만든 모델의 검증 정확도가 훈련 정확도 보다 높게 나왔습니다. 일반적으로 훈련 정확도가 검증 정확도 보다 높게 나오는데, 검증 데이터가 쉬운 데이터여서 발생한 문제일 수 있기 때문에 교차 검증이 필요합니다. 교차 검증을 Peltarion에서 가능한지 찾아보았지만, 방법을 찾지 못했는데 해당 방법을 알고 계시는 분은 댓글로 알려주시면 감사하겠습니다.


(3) 모델 API화
Peltarion에서 만들어진 모델은 배포할 수 있도록 API화가 됩니다. 해당 API를 Bubble을 이용해서 서비스를 구현하였습니다.

4. No-code 툴, Bubble 연결하여 서비스 구현
Bubble에서는 Peltarion 플러그인을 제공해서 아주 쉽게 모델 API를 연결하여 서비스를 만들 수 있습니다. 
사용자가 본인이 만든 광고를 노출시키고 싶은 예상 타깃 고객의 정보와 광고 헤드라인을 입력한 뒤 예측 버튼을 누르면 간편하게 예측결과를 알 수 있도록 디자인하였습니다.


사용자가 예상 타겟고객의 정보(나이, 성별, 수입, 인터넷 사용시간, 광고를 올린 사이트에서 보내는 시간)과 광고 헤드라인을 입력하면 광고 클릭 여부 결괏값은 0~1 범위 안에서 보여줍니다. 해당 모델에서 광고를 클릭하지 않은 경우는 모두 0.5 미만 값으로 나왔고, 광고를 클릭한 경우는 모두 0.5 초과 값으로 나옵니다 (아래 이미지 참고).


그래서 다음과 같은 조건으로 각각 다른 텍스트를 표출하도록 했습니다.
  • 결괏값이 0.5보다 작은 경우, '당신의 광고를 클릭하지 않을 것입니다.'라는 메시지를 표출하게 하였고
  • 결괏값이 0.5보다 큰 경우, '당신의 광고를 클릭할 것입니다.'라는 메시지를 표출하도록 하였습니다.

해당 AI 서비스의 신뢰도를 확인하기 위해서는 위에서 언급한 교차검증 과정과 실제로 AI가 예측한 광고를 클릭할 고객의 정보대로 타깃하여 광로를 노출했을 때 실제 클릭 여부와 비교하는 방법이 있을 것 같습니다. 해당 모델 및 서비스에 대해 자유로운 의견 환영합니다. 😁
Like Comment

👿 NOMASK MONSTER👿 - 마스크 착용 여부를 판별해주는 AI

admin 3️⃣
안녕하세요.

Ainize에 있는 Face Mask Detection API(마스크 착용 여부를 분별하는 AI)를 활용하여 마스크 착용을 불편해하는 아이들에게 재밌는 경험을 선물하고자 NOMASK MONSTER 서비스를 구현해보았습니다. 서비스에 대한 피드백 환영입니다. 😄
(*모바일에서 사용할 수 있도록 디자인하였기 때문에 모바일에 최적화된 화면 사이즈입니다.)



  1.  문제정의 및 해결방안
코로나 19로 인해, 어린 자녀를 둔 부모님들께서 마스크 착용을 불편해하는 아이들에게 올바른 마스크 착용을 하도록 하는 것에 어려움을 겪고 있다는 뉴스를 보았습니다. 마스크 착용을 거부하는 아이들에게 해결책으로 일상에서 놀이 등을 통해 마스크에 대한 거부감을 줄여주는 것이 필요하다고 합니다.

그래서 아이들이 마스크를 올바르게 착용해야 하는 이유를 재밌는 놀이 경험으로 이해할 수 있도록 돕는 서비스를 만들기로 했습니다.

육안으로 보이지 않는 '코로나바이러스'를 '몬스터'의 형태로 시각화하여 마스크를 올바르게 착용하면 몬스터(코로나바이러스)를 이길 수 있음을 경험할 수 있도록 디자인했습니다.

코로나바이러스를 어떤 몬스터의 모습으로 그리면 좋을까를 고민하던 중, 문득 '아이들이 코로나바이러스를 몬스터로 표현한다면 어떤 모습일까?'라는 궁금증이 생겼습니다. 그래서 초등학생인 사촌동생에게 코로나바이러스를 몬스터로 표현하면 어떤 모습일지 상상하여 직접 그려달라고 부탁하였고 다음과 같은 몬스터가 나오게 되었습니다. 해당 몬스터는 아이들이 마스크를 착용하는 것을 방해하는 능력을 갖고 있기 때문에 'NOMASK MONSTER'라는 이름을 붙여줬습니다.



2.  UIUX 디자인
Sketch와 Figma을 활용하여 UI를 디자인하였고, 서비스 User Flow와 UIUX는 아래와 같이 설계했습니다. 아이들을 위한 서비스를 디자인하는 것이 목적이었기 때문에, 아이들에게 친근한 그림체와 손글씨로 전체 디자인 톤을 구성했습니다. 
3. 구현 방법
Sketch와 Figma을 활용하여 UI를 디자인한 뒤, Figma파일을 Bubble로 불러와 Bubble에서 Ainize에 있는 Face Mask Detection API연결을 아래와 같이 하였습니다. JSON Key 값에서 마스크 착용 여부에 따라 달라지는 값을 추출해야 했기 때문에 Data type을 JSON으로 설정했습니다.


Bubble에서는 Workflow Edit을 통해, 화면의 흐름 순서와 API의 결과에 따라 어떤 Element가 보여야 하는지를 설정했습니다.

(예시)



다음과 같은 Response로 마스크 착용여부를 분별합니다.

(1) 앞의 숫자 1이 나오면 마스크 미착용한 이미지를 인식한 것이고, 
"[[1, 0.9999951124191284, 105, 125, 320, 408]]"
(2) 앞의 숫자가 0이 나오면 마스크 착용한 이미지를 인식한 것입니다. 
"[[0, 0.9999874830245972, 48, 31, 147, 162]]"

마스크 착용여부를 나타내는 숫자 1 또는 0을 추출하기 위해 다음과 같은 정규 표현식(Regex Pattern)을 이용하였습니다.

Regex Pattern: [0-1](?=,)

위 (1)과 (2)에서 보이는 [    ](대괄호)안에 숫자 01 중  ,(콤마)앞의 숫자를 추출할 수 있도록 하였습니다. 이 과정에서는 정규 표현식을 테스트 할 수 있는 Regular expression tester를 이용하였습니다.

(1) 추출한 콤마 앞에 숫자 0 또는 1중 first item is '1' 인 경우는 마스크를 미착용 또는 잘못 착용한 것인기 때문에  'You Lose'라는 메시지를 표출하고,

(2) 추출한 콤마 앞에 숫자 0 또는 1중 first item is '0' 인 경우는 마스크를 올바르게 착용한 것인기 때문에  'You Win'이라는 메시지를 표출합니다.

Bubble에서는 문제가 생기신다면 Debugger 이라는 기능을 이용하시는 것을 추천합니다. 이번 서비스 구현과정에서 가장 막혔던 부분이 있었는데, Debugger에서 'Slow'모드로 설정한 뒤 Workflow에서 각 단계별 결과를 텍스트로 확인할 수 있어, 어느 부분에서 문제가 발생하는지 확인한 덕분에 문제를 해결할 수 있었습니다.


서비스 또는 구현 과정에 대한 피드백 환영입니다. 😄
Like Comment