1-3. Views

비지니스 로직에서 보내온 데이터를 사용자에게 보여주는 views를 구성해 봅시다!

자동판매기 캡슐의 뷰를 구성해보자!

자동판매기 캡슐은 사용자가 ‘차가운 커피 뽑아줘’라고 말을 하였을 때, 음료에 대한 정보를 보여주는 캡슐입니다. 비즈니스 로직에서 가공한 데이터를 사용자들에게 보여주는 화면을 구성 봅시다.

뷰는 Bixby의 UX/UI 구성을 담당하고 있습니다. 뷰의 종류에는 result-view, input-view 그리고 confirmation-view가 있습니다.

result-view는 결과를 보여주는 화면을 구성하고, input-view는 입력 화면 그리고 confirmation-view는 사용자의 승인 혹은 검토가 필요할 때 사용하는 화면을 구성합니다. Result-view를 토대로 뷰를 구성하는 방법에 대해 알아보도록 하겠습니다. 뷰의 추가 정보는 여기를 참조하시기 바랍니다.

먼저, Bixby Studio 왼쪽의 네비게이션바를 보면 위의 이미지와 같은 화면을 보실 수 있습니다.

resources 폴더 하위에 base와 ko-KR 폴더가 위치해 있습니다. 보통 Bixby capsule은 언어별로 달라질 수도 있고 디바이스별로 달라질 수 있습니다. ko-KR 폴더는 한국어에 특화된 resource들을 모아두는 곳입니다.반면에, 언어, 디바이스별 차이가 없는 capsule이라면 base 폴더에 공통적으로 사용되는 코드를 작성하여 사용합니다.

base 하위에 views 폴더에 있는 'Result_result.view.bxb' 코드를 보면서 view 구성에 대해 더 설명드리도록 하겠습니다.

1. views

-view{  // 이 부분에 들어갈 선언문을 작성해주세요.
    match: Result(this)
}

첫 부분의 -view는 어떤 뷰를 정의하는지를 선언하는 부분입니다. 경우에 따라서 result-view, input-view 그리고 confirmation-view를 선언하실 수 있습니다.

match에 해당하는 부분은 뷰에서 어떤 데이터를 보여주는지를 결정하는 부분입니다. Result의 alias인 this는 이 뷰에서는 Result 데이터를 this라는 이름으로 대체하여 쓰겠다는 선언을 하는 부분입니다.

현재 뷰의 종류를 선언하는 부분이 빠져있습니다. 이 부분에 들어갈 구문을 고민하시고 작성하여 주세요. * 뷰의 선언 종류인 result-view, input-view, confirmation-view 중에 알맞는 뷰를 찾아서 활용하여 봅시다.

2. message (dialog)

  message{    
    template ("선택하신 음료를 확인하여 보세요.")  
  }

message(dialog)는 Bixby가 사용자와 대화할 수 있도록 도와주는 부분입니다. 음성으로 말을 하거나 화면의 글로 Bixby의 행동을 표현합니다. 이 화면에서 Bixby는 ‘선택하신 음료를 확인하여 보세요.’를 화면에 표시함과 동시에 음성으로 말을 할 것입니다. message(dialog)는 뷰에서도 구성이 가능하지만, 좀 더 자연스러운 대화를 위하여 dialog라는 기능에서 세밀한 구현이 가능합니다. 이 부분은 여기에서 다루지 않습니만, 궁금하신 분들은 이 링크를 참조하여 주시기 바랍니다.

3. render (layout)

render{  
    if(!exists(this)){    
        nothing  
    }
    else{    
        layout{      
            section{        
                content{          
                    cell-card {            
                        slot2 {            
                            content {              
                                order (PrimarySecondary)              
                                primary ("[#{value(this.status)}] #{value()}") // 이 곳에 값을 채우세요.              
                                secondary ("가격: #{value(this.price)}")             
                            }          
                        }        
                    }      
                }    
            }   
        }  
    }
}

render(layout)는 사용자에게 보여지는 요소를 그리는 부분입니다. render에서는 분기를 통해서 상황마다 다른 요소를 설정하는 것이 가능합니다. 위 코드에서는 데이터가 존재하지 않으면 화면를 그리지 않겠다는 nothing 키워드가 사용되었습니다. 데이터가 있다면 layout에서 cell-card를 그리게 됩니다.

Bixby는 모든 UI에 template을 적용하고 있습니다. layout에 사용되는 요소들이 미리 만들어져 있기 때문에 개발자분들은 요소에 맞게 값을 채워주시면 됩니다. cell-card 키워드 안에 있는 내용은 cell-card template에 따라 작성한 것입니다. template 요소중 primary와 secondary는 ‘#{value()}’을 사용하였는데, this에 저장된 데이터를 불러올 때 사용됩니다. secondary 키워드에는 '#{value()}' this의 price 값을 가져오도록 구현되어 있습니다.

cell-card 이외에도 template 종류가 더 궁금하신 분들은 여기를 참조하시기 바랍니다.

현재 primary 키워드 내부에 들어갈 값이 비워져 있습니다. 이 부분에 들어갈 구문을 고민하시고 작성하여 주세요. * this 키워드에는 음료수 이름을 저장한 name과 가격 정보를 저장한 price등의 요소를 불러올 수 있습니다. primary 키워드내에 음료수 이름을 불러와 봅시다.

이제부턴 정말 트레이닝뿐이야!

뷰 구현이 완성되셨다면, 사용자가 자동판매기 캡슐을 활용할 수 있도록 트레이닝을 해봅시다.