# 1-3. Views

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

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

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

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

<div align="left"><img src="https://273918599-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lrq1jp4p9KfAreFLMyA%2F-LsZZG5sSMVw28u9TVKZ%2F-LsZZIuBOd90qns5ZGYB%2F13.PNG?alt=media&#x26;token=4a431e33-587c-4f1e-9da5-a05d7b9042b8" alt=""></div>

먼저, **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라는 이름으로 대체하여 쓰겠다는 선언**을 하는 부분입니다.

{% hint style="danger" %}
현재 뷰의 종류를 선언하는 부분이 빠져있습니다. 이 부분에 들어갈 구문을 고민하시고 작성하여 주세요. \
\&#xNAN;**\* 뷰의 선언 종류인 result-view, input-view, confirmation-view 중에 알맞는 뷰를 찾아서 활용하여 봅시다.**
{% endhint %}

### 2. message (dialog)

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

**message(dialog)는 Bixby가 사용자와 대화할 수 있도록 도와주는 부분입니다.** 음성으로 말을 하거나 화면의 글로 Bixby의 행동을 표현합니다. 이 화면에서 Bixby는 ‘선택하신 음료를 확인하여 보세요.’를 화면에 표시함과 동시에 음성으로 말을 할 것입니다. message(dialog)는 뷰에서도 구성이 가능하지만, 좀 더 **자연스러운 대화를 위하여 dialog라는 기능**에서 세밀한 구현이 가능합니다. 이 부분은 여기에서 다루지 않습니만, 궁금하신 분들은 이 [링크](https://bixbydevelopers.com/dev/docs/dev-guide/developers/refining-dialog.intro-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 종류가 더 궁금하신 분들은 [여기](https://bixbydevelopers.com/dev/docs/dev-guide/developers/building-views.components)를 참조하시기 바랍니다.

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

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

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