<div id="readability-page-1" class="page"><div itemprop="articleBody">
    <h2 id="bixby-capsule">Bixby Capsule</h2>

<p>최근 삼성전자에서 <code>빅스비 마켓플레이스</code>를 오픈했고, <code>빅스비 챌린지 시즌2</code> 등의 빅스비 캡슐 관련 행사들을 많이 개최하면서 서비스 확장을 하기 위해 노력하고 있습니다.<br>
좋은 기회로 빅스비 개발자분과 모각코를 하게 되면서, <code>빅스비 챌린지 시즌2</code>에도 도전해보게 되었습니다.</p>

<blockquote>
  <p>참고 뉴스<br>
<a href="https://bit.ly/2o7fzMF">나만의 빅스비를 만드는 공간, ‘빅스비 마켓플레이스’ 오픈</a><br>
<a href="https://bit.ly/2OtJklz">일상을 풍요롭게…새로운 빅스비 캡슐들 ‘매력 발산’</a></p>
</blockquote>

<p><code>빅스비 캡슐</code>은 빅스비 플랫폼으로 개발되며, 빅스비 지원 기기에서 이용할 수 있는 서비스입니다.<br>
SW Expert Academy에서 <a href="https://swexpertacademy.com/main/learn/course/subjectList.do?courseId=BIXBY_CAPSULE">Bixby Capsule 강의</a>를 제공하고 있고, <br>
Bixby Developer Center에서는 <a href="https://bixbydevelopers.com/dev/docs/get-started/quick-start#download-and-install-bixby-developer-studio">Quick Start Guide</a>를 볼 수 있습니다.</p>

<p>SW Expert Academy에서 강의를 들을 예정이지만, 먼저 전체적으로 훑기 위해 <code>Quick Start Guide</code>를 해보기로 했고, 따라하는 과정을 적어보려합니다.</p>

<h2 id="install">Install</h2>

<p><a href="https://bixbydevelopers.com/">Bixby Developer Center</a>에서 <code>Bixby Developer Studio</code>를 다운받고, 설치합니다.</p>

<p><img src="https://miryang.dev/files/img/create-bixby-capsule/1.PNG" alt="1"></p>

<h2 id="create">Create</h2>

<p>원래는 File &gt; New Capsule로 만들어야하지만, 이 과정에서는 미리 만들어진 샘플 캡슐을 클론해서 오픈합니다.</p>

<div><pre><code>git clone https://github.com/bixbydevelopers/capsule-sample-dice.git
</code></pre></div>

<p><strong>File &gt; Open Capsule</strong> 로 클론한 <code>capsule-sample-dice</code>를 열어줍니다.</p>

<h2 id="concepts--actions">Concepts &amp; Actions</h2>

<p><code>Concepts</code>는 빅스비가 알아야 하는 것들(Variables), <code>Actions</code>는 빅스비가 할 수 있는 동작(Verb)을 의미합니다.<br>
Bixby는 이 모델링을 기반으로 필요한 입력과 출력을 자동으로 구성합니다.<br>
지금 오픈한 캡슐에서는 <em>dice/models</em>에 위치하고 있습니다.</p>

<p><strong>primitives</strong> 안의 파일들 열어보면 type을 정의한 코드를 볼 수 있습니다.<br>
<strong>primitives</strong> 폴더의 <code>NumDice.model.bxb</code>에 <em>NumDiceConcept</em>이 integer로 정의되어 있는 것을 볼 수 있습니다.</p>
<div><pre><code>integer (NumDiceConcept) {
  description (The number of dice to throw.)
}
</code></pre></div>

<p><code>RollResult.model.bxb</code>에는 다수의 모델을 포함하는 타입인 structure가 정의됩니다.</p>

<div><pre><code>structure (RollResultConcept) {
  description (The result object produced by the RollDice action.)
  property (sum) {
    type (SumConcept)
    min (Required)
    max (One)
  }
  property (roll) {
    description (The list of results for each dice roll.)
    type (RollConcept)
    min (Required)
    max (Many)
  }      
}
</code></pre></div>

<h2 id="test">Test</h2>

<p>캡슐을 시뮬레이터에서 테스트할 수 있습니다.<br>
View &gt; Open Simulator 로 <code>Simulator</code>를 열고, 아래 intent를 입력하여 결과를 확인할 수 있습니다.<br>
<em>주사위 두 번 굴려줘</em> 등은 아직 자연어 처리를 하지 않아서 사용할 수 없습니다.</p>

<div><pre><code>intent {
  goal: example.dice.RollResultConcept
  value: example.dice.NumSidesConcept (6)
  value: example.dice.NumDiceConcept (2)
}
</code></pre></div>

<p><img src="https://miryang.dev/files/img/create-bixby-capsule/2.PNG" alt="2"></p>

<p><strong>Debug Console</strong>을 열면, 실행 그래프를 볼 수 있습니다.</p>

<p><img src="https://miryang.dev/files/img/create-bixby-capsule/3.PNG" alt="3"></p>

<h2 id="view">View</h2>

<p>발화하고 수행한 결과를 어떻게 나타낼지 작성한 코드를 <code>Views</code>에 구성합니다. <br>
<em>/resources/en/views</em> 의 <code>RollResult.view.bxb</code>를 오픈해서 커스텀 코드를 작성합니다.</p>

<div><pre><code> result-view {
   match {
     RollResultConcept (rollResult)
   }

   render {
     layout {
       section {
         content {
           single-line {
             text {
               style (Detail_M)
               value ("* Sum: #{value(rollResult.sum)}")
             }
           }
           single-line {
             text {
               style (Detail_M)
               value ("* Rolls: #{value(rollResult.roll)}")
             }
           }
         }
       }
     }
   }
 }
</code></pre></div>

<p>다시 intent를 입력하면, view가 변경된 것을 확인할 수 있습니다.</p>

<p><img src="https://miryang.dev/files/img/create-bixby-capsule/4.PNG" alt="4"></p>

<h2 id="dialog">Dialog</h2>

<p><code>dialog</code>는 상단의 표시되는 텍스트를 의미합니다.<br></p>

<p><em>/resources/en/dialog</em>의 <code>NumSides.dialog.bxb</code> 를 열어서 다음 코드를 입력합니다.<br>
<strong>NumSidesConcept</strong>이 매치하면 즉, 주사위의 면수를 입력받을 때 나오는 화면의 기본 다이얼로그를 커스텀 템플릿으로 변경하는 코드입니다.</p>

<div><pre><code> dialog (Concept) {
   match {
     // Look for this type
     NumSidesConcept
   }
   // Use the following template text with this type
   template ("number of sides")
 }
</code></pre></div>

<p><em>/resources/en/dialog</em>의 <code>NumDice.dialog.bxb</code> 를 열어서 다음 코드를 입력합니다.<br>
<strong>NumDiceConcept</strong>이 매치하면 기본 다이얼로그를 커스텀 템플릿으로 변경하는 코드입니다.</p>

<div><pre><code> dialog (Concept) {
   match {
     // Look for this type
     NumDiceConcept
   }
   // Use this template text with this type
   template ("number of dice")
 }
</code></pre></div>

<p><em>/resources/en/dialog</em>의 <code>RollResult.dialog</code> 를 열어서 다음 코드를 입력합니다.<br>
결과화면에 두 개의 템플릿 중 랜덤으로 한 개가 출력됩니다.</p>

<div><pre><code> dialog (Result) {
   // bind the variable "rollResult" to the result 
   match {
     RollResultConcept (rollResult)
   }
   // define a condition that changes the dialog depending on whether there
   // is one or more dice rolls
   if (size(rollResult.roll) == 1) {
     template ("You've got a ${value(rollResult.roll)}!!!")    
   }
   else-if (size(rollResult.roll) &gt; 1) {
     choose (Random) {
       template ("The sum is ${value(rollResult.sum)}")
       template ("You rolled ${list(rollResult.roll, 'value')}")    
     }
   }
 }
</code></pre></div>

<p><img src="https://miryang.dev/files/img/create-bixby-capsule/5.PNG" alt="5"></p>

<h2 id="training">Training</h2>

<p>사용자의 다양한 입력을 준비할 수 있도록 자연어 학습 예제를 추가합니다.</p>

<p><em>/resources/en</em>의 <code>training</code>을 열어서, 아래의 예문을 입력 후 ADD 합니다.</p>



<p><strong>NL</strong> 필드에서 2를 클릭해 <code>NumDiceConcept</code>, 6을 클릭해 <code>NumSidesConcept</code>를 Node에 입력합니다.</p>

<p><img src="https://miryang.dev/files/img/create-bixby-capsule/6.PNG" alt="6"></p>

<p><strong>Compile NL Model</strong>을 클릭해 모델을 컴파일해 <strong>Learned</strong>로 변경되길 기다립니다.</p>

<p><img src="https://miryang.dev/files/img/create-bixby-capsule/7.PNG" alt="7"></p>

<p>이제 시뮬레이터에서 자연어 발화를 입력해도 처리되는 것을 볼 수 있습니다.</p>

<p><img src="https://miryang.dev/files/img/create-bixby-capsule/8.PNG" alt="8"></p>

<h2 id="end">End</h2>

<p>AI에는 관심이 없었는데 간단하지만 이렇게 작동되는 것을 보니 흥미가 생겼습니다.<br>
그리고 실시간으로 질문할 수 있는 Slack도 있어 실제로 공부를 하다가 모르는 점을 부담없이 물어보고, 빠르게 답을 얻을 수 있는 장점도 있습니다.</p>

<blockquote>
  <p><a href="https://join.slack.com/t/bixbydeveloperskorea/shared_invite/enQtNTY2Mjc1NjUzNjA1LTYzOWYwZWE4MjExNTg4ZWUyNDg4OWViNDRiOWUyMjg0Yzg5NWI5N2NlNGU4Nzg4ZThiZGI0ZGEzZGY1OGE1MjI">Bixby Capsule 개발자 커뮤니티</a></p>
</blockquote>

  </div></div>

MiryangJung

Bixby Capsule
최근 삼성전자에서 빅스비 마켓플레이스를 오픈했고, 빅스비 챌린지 시즌2 등의 빅스비 캡슐 관련 행사들을 많이 개최하면서 서비스 확장을 하기 위해 노력하고 있습니다.
빅스비 챌린지 시즌2에도 도전해보게 되었습니다.
참고 뉴스
나만의 빅스비를 만드는 공간, ‘빅스비 마켓플레이스’ 오픈
일상을 풍요롭게…새로운 빅스비 캡슐들 ‘매력 발산’
빅스비 캡슐은 빅스비 플랫폼으로 개발되며, 빅스비 지원 기기에서 이용할 수 있는 서비스입니다.
Bixby Capsule 강의를 제공하고 있고, 
Quick Start Guide를 볼 수 있습니다.
SW Expert Academy에서 강의를 들을 예정이지만, 먼저 전체적으로 훑기 위해 Quick Start Guide를 해보기로 했고, 따라하는 과정을 적어보려합니다.
Install
Bixby Developer Center에서 Bixby Developer Studio를 다운받고, 설치합니다.
Create
원래는 File > New Capsule로 만들어야하지만, 이 과정에서는 미리 만들어진 샘플 캡슐을 클론해서 오픈합니다.
git clone https://github.com/bixbydevelopers/capsule-sample-dice.git
File > Open Capsule 로 클론한 capsule-sample-dice를 열어줍니다.
Concepts & Actions
Concepts는 빅스비가 알아야 하는 것들(Variables), Actions는 빅스비가 할 수 있는 동작(Verb)을 의미합니다.
dice/models에 위치하고 있습니다.
primitives 안의 파일들 열어보면 type을 정의한 코드를 볼 수 있습니다.
primitives 폴더의 NumDice.model.bxb에 NumDiceConcept이 integer로 정의되어 있는 것을 볼 수 있습니다.
integer (NumDiceConcept) {
  description (The number of dice to throw.)
}
RollResult.model.bxb에는 다수의 모델을 포함하는 타입인 structure가 정의됩니다.
structure (RollResultConcept) {
  description (The result object produced by the RollDice action.)
  property (sum) {
    type (SumConcept)
    min (Required)
    max (One)
  }
  property (roll) {
    description (The list of results for each dice roll.)
    type (RollConcept)
    min (Required)
    max (Many)
  }      
}
Test
캡슐을 시뮬레이터에서 테스트할 수 있습니다.
Simulator를 열고, 아래 intent를 입력하여 결과를 확인할 수 있습니다.
주사위 두 번 굴려줘 등은 아직 자연어 처리를 하지 않아서 사용할 수 없습니다.
intent {
  goal: example.dice.RollResultConcept
  value: example.dice.NumSidesConcept (6)
  value: example.dice.NumDiceConcept (2)
}
Debug Console을 열면, 실행 그래프를 볼 수 있습니다.
View
발화하고 수행한 결과를 어떻게 나타낼지 작성한 코드를 Views에 구성합니다. 
/resources/en/views 의 RollResult.view.bxb를 오픈해서 커스텀 코드를 작성합니다.
 result-view {
   match {
     RollResultConcept (rollResult)
   }
   render {
     layout {
       section {
         content {
           single-line {
             text {
               style (Detail_M)
               value ("* Sum: #{value(rollResult.sum)}")
             }
           }
           single-line {
             text {
               style (Detail_M)
               value ("* Rolls: #{value(rollResult.roll)}")
             }
           }
         }
       }
     }
   }
 }
다시 intent를 입력하면, view가 변경된 것을 확인할 수 있습니다.
Dialog
dialog는 상단의 표시되는 텍스트를 의미합니다.
/resources/en/dialog의 NumSides.dialog.bxb 를 열어서 다음 코드를 입력합니다.
NumSidesConcept이 매치하면 즉, 주사위의 면수를 입력받을 때 나오는 화면의 기본 다이얼로그를 커스텀 템플릿으로 변경하는 코드입니다.
 dialog (Concept) {
   match {
     // Look for this type
     NumSidesConcept
   }
   // Use the following template text with this type
   template ("number of sides")
 }
/resources/en/dialog의 NumDice.dialog.bxb 를 열어서 다음 코드를 입력합니다.
NumDiceConcept이 매치하면 기본 다이얼로그를 커스텀 템플릿으로 변경하는 코드입니다.
 dialog (Concept) {
   match {
     // Look for this type
     NumDiceConcept
   }
   // Use this template text with this type
   template ("number of dice")
 }
/resources/en/dialog의 RollResult.dialog 를 열어서 다음 코드를 입력합니다.
 dialog (Result) {
   // bind the variable "rollResult" to the result 
   match {
     RollResultConcept (rollResult)
   }
   // define a condition that changes the dialog depending on whether there
   // is one or more dice rolls
   if (size(rollResult.roll) == 1) {
     template ("You've got a ${value(rollResult.roll)}!!!")    
   }
   else-if (size(rollResult.roll) > 1) {
     choose (Random) {
       template ("The sum is ${value(rollResult.sum)}")
       template ("You rolled ${list(rollResult.roll, 'value')}")    
     }
   }
 }
Training
사용자의 다양한 입력을 준비할 수 있도록 자연어 학습 예제를 추가합니다.
/resources/en의 training을 열어서, 아래의 예문을 입력 후 ADD 합니다.
roll 2 6-sided dice
NL 필드에서 2를 클릭해 NumDiceConcept, 6을 클릭해 NumSidesConcept를 Node에 입력합니다.
Compile NL Model을 클릭해 모델을 컴파일해 Learned로 변경되길 기다립니다.
이제 시뮬레이터에서 자연어 발화를 입력해도 처리되는 것을 볼 수 있습니다.
End
AI에는 관심이 없었는데 간단하지만 이렇게 작동되는 것을 보니 흥미가 생겼습니다.
Bixby Capsule 개발자 커뮤니티

Bixby Capsule (빅스비 캡슐) Quick 개발하기

댓글