Bixby Developer Center

Guides
References

Bixby Views를 사용하여 디자인하기

Bixby에서는 view를 구성하여 캡슐의 사용자 인터페이스를 빌드할 수 있습니다. Bixby Views에는 Bixby 모델을 정의하는 데 사용되는 것과 동일한 언어가 사용됩니다. Bixby Views를 사용하면 단순하고 일관된 방식으로 Bixby를 위한 인터랙티브 디자인을 생성할 수 있습니다. 여기에는 Bixby 컨버세이션(conversation)의 moment 내용이 렌더링됩니다.

우주 리조트(Space Resorts) 예제를 사용하여 디자인하기

우주 리조트(Space Resorts) 샘플 캡슐을 사용해 Bixby Views 디자인 시스템을 살펴보겠습니다. 이 캡슐에서 사용자는 여러 행성의 호텔 객실을 예약할 수 있습니다. 여러분만의 캡슐을 직접 디자인하기 전에 이 예제를 케이스 스터디 삼아 따라 해보세요.

은하계에서 제일 좋은 우주 리조트 객실을 예약하고 싶어

Bixby: 이런 우주 리조트는 어떨까요?

case study introduction

1단계: 비즈니스 goal 정의

우주 리조트(Space Resorts) 캡슐에서는 사용자가 Samsung 디바이스에서 Bixby를 사용하여 우주 리조트(Space Resorts) 서비스를 통해 객실(또는 HabitatPods)을 둘러보고 예약할 수 있습니다.

우주 리조트(Space Resort)의 비즈니스 goal은 사용자가 이러한 HabitatPods를 둘러보고 예약하도록 하는 것입니다. 이 goal을 염두에 두고 팀 내 디자이너와 프로젝트 관리자는 머스트 워크(must-work) 사용 사례 몇 가지를 결정할 수 있습니다.

  1. 원하는 행성에서 스파 시설을 갖춘 호텔 객실 예약
  2. 최근 예약한 화성의 우주 리조트 예약 취소
  3. 최근 예약한 우주 리조트 예약 상태 확인
  4. 황금 연휴 동안 객실 요금이 1박에 500달러 미만인 멋진 최신 우주 리조트 검색

머스트 워크(must-work) 사용 사례를 정의하는 자세한 방법은 캡슐 planning 가이드에서 확인할 수 있습니다.

2단계: 메인 플로우 생성

1단계에서 정의한 머스트 워크(must-work) 사용 사례를 바탕으로 4~8개 정도로 구성된 메인 사용자 플로우를 생각해 봅니다. 이때, 사용자가 작업을 최대한 효율적으로 완료할 수 있도록 해야 합니다.

예를 들어, 위에 나온 머스트 워크(must-work) 사용 사례 1: '원하는 행성에서 스파 시설을 갖춘 호텔 객실 예약'의 플로우는 다음과 같이 만들어볼 수 있습니다.

스파가 있는 우주 리조트 예약해줘.

Step 2

또한 컨버세이션(conversation) 디자인하기 가이드를 살펴보면 사용할 플로우를 파악하는 데 도움이 됩니다.

3단계: Bixby의 dialog 작성

머스트 워크(must-work) 사용 사례를 바탕으로 Bixby가 이러한 컨버세이션(conversation) 중에 사용자에게 말할 실제 dialog를 생각해 봅니다.

스파가 있는 우주 리조트 예약해줘.

Step 3

캡슐에 적합한 dialog를 작성하는 지침은 디자인 가이드의 Dialog 작성하기에서 확인할 수 있고, dialog를 구현하는 자세한 방법은 개발자 가이드의 Dialog 구체화하기에서 배울 수 있습니다.

4단계: 정보 계층 정의

캡슐은 사용자의 요청에 대해 가장 의미 있는 결과만을 담은 내용을 간결하게 제공해야 합니다.

다음으로, 머스트 워크(must-work) 사용 사례를 바탕으로 정보 계층을 정의해 봅니다.

다중 결과

최우선 순위 정보를 3~5가지 정도 선택하여 결과 concept을 요약하여 보여줍니다.

  • 우선 순위 1: 근사한 리조트 사진을 보여주는 고해상도 이미지
  • 우선 순위 2: 리조트 이름
  • 우선 순위 3: 위치 및 제공 서비스
단일 결과

예약 가능한 우주 리조트의 고해상도 이미지를 보여주고 사용자가 각 리조트의 특징과 장점을 파악할 수 있도록 각 리조트에 대한 간략한 요약 설명을 제공합니다. 리조트에서 제공하는 편의 시설이 매우 다양하겠지만 여기서는 가장 중요한 세 가지를 제시해야 합니다. 우주 리조트(Space Resorts) 캡슐의 경우 사용자가 더 자세히 살펴볼 수 있도록 상세 보기로 객실 정보를 보여주어야 합니다.

  • 우선 순위 1: 더 많은 이미지
  • 우선 순위 2: 리조트 이름 및 부수적 정보
  • 우선 순위 3: 별점 및 리뷰 수
  • 우선 순위 4: 호텔 설명(5줄 이내)
  • 우선 순위 5: 편의 시설
  • 우선 순위 6: 객실 정보
Input

사용자가 객실을 예약할 수 있도록 하기 위해 표시해야 하는 정보를 input으로 고려해야 합니다.

  • 우선 순위 1: 객실 요금
  • 우선 순위 2: 객실 이름
  • 우선 순위 3: 객실 이미지
  • 우선 순위 4: 특가 이벤트
확인

또한 사용자가 선택한 사항의 세부 정보를 확인해야 합니다.

  • 우선 순위 1: 체크인 및 체크아웃 시간
  • 우선 순위 2: 선택한 객실
  • 우선 순위 3: 연락처 정보(이름, 전화번호, 이메일 주소)
  • 우선 순위 4: 결제 방법 및 총 결제 금액

5단계: 각 moment에 대한 최적의 구성 요소 찾기

이러한 구성 요소 각각에 대한 자세한 내용 그리고 각 구성 요소가 해당 moment에 유용한 이유는 구성 요소 및 레이아웃 패턴에서 확인할 수 있습니다.

다중 결과

image-card 또는 thumbnail-card를 사용하여 이러한 세 가지 우선 순위를 모두 포함할 수 있습니다.

우선 순위 1: 근사한 리조트 사진을 보여주는 고해상도 이미지
우선 순위 2: 리조트 이름
우선 순위 3: 위치 및 제공 서비스

텍스트 위치가 Overlayimage-card텍스트 위치가 Belowimage-card이미지를 왼쪽에 배치한 thumbnail-card
Step 5, Multiple results. image-card with text overlayStep 5, Multiple results. image-card with text belowStep 5, Multiple results. thumbnail-card with image on the left
단일 결과

더 큰 layout에서 다음 구성 요소를 사용하여 여러 우선 순위를 포함할 수 있습니다.

우선 순위 1: 더 많은 이미지

image-carouselimage-list
Step 5, Single Results, single-result-1Step 5, Single Results, single-result-1

우선 순위 2, 3, 4: 리조트 이름 및 부수적 정보, 별점 및 리뷰 수, 설명

title-areasingle-lineparagraph
Step 5, Single Results, single-result-234Step 5, Single Results, single-result-234Step 5, Single Results, single-result-234

우선 순위 5: 주요 편의 시설 3가지

partitionedsingle-line
Step 5, Single Results, single-result-5Step 5, Single Results, single-result-5

우선 순위 6: 객실 정보 및 옵션

이미지를 오른쪽에 배치한 thumbnail-card이미지를 왼쪽에 배치한 thumbnail-card
Step 5, Single Results, single-result-6 rightStep 5, Single Results, single-result-6 left
Input

사용자가 숙박할 객실을 선택할 수 있도록 예약 가능한 객실 목록을 표시합니다. 이 경우 제공된 input-view picker 중 하나를 사용해서는 안 되며, selection-of 키(key)를 사용하여 옵션 목록을 생성해야 합니다. 다음과 같이 [다중 결과](#다중 결과)에도 동일한 구성 요소를 사용하여 각 옵션을 표시합니다.

title-cardthumbnail-cardcompound-card
Step 5, InputStep 5, InputStep 5, Input

compound-card에는 title-areaimage-list가 함께 사용되었습니다.

그 외 다른 사용자 정보가 필요할 경우에는 input view picker 중 하나를 사용할 수 있습니다. 예를 들어 숙박 날짜에는 date-picker를 사용합니다.

확인

사용자가 변경할 수 없는 요약 정보에는 비인터랙티브 구성 요소를 사용합니다.

imagecell-areatitle-areasingle-lineparagraph
Step 5, Confirmation, imageStep 5, Confirmation, cell-areaStep 5, Confirmation, title-areaStep 5, Confirmation, single-lineStep 5, Confirmation, single-line
법적 고지 사항을 포함하려면 legal 텍스트 스타일을 사용합니다.

사용자가 변경할 수 있는 정보에는 input-cell 또는 split-input-cell을 사용합니다.

input-cell
Step 5, Confirmation, input-cell

디자인 팁

정보는 단순하고 간략하게

의도적으로 정보 계층을 사용합니다. 터치 기반의 UI 애플리케이션을 그대로 모방해서는 안 됩니다. Bixby Views 구성 요소는 최소한의 단순한 정보를 사용할 때 원활히 동작합니다.

금성에서 제일 좋은 리조트를 찾아줘.


잘된 예잘못된 예
Simple and minimal info, doSimple and minimal info, don't

음성 안내를 고려하여 디자인할 것

Bixby는 음성 인식을 기반으로 동작하는 서비스이므로 사용자가 보게 되는 시각적 정보와 음성으로 안내되는 내용이 한 화면에 조화롭게 배치되도록 디자인해야 합니다.

오늘 금성의 미세먼지 어때?


잘된 예잘못된 예
Simple and minimal info, doSimple and minimal info, don't

핵심 내용만 추려서 제공할 것

Bixby 캡슐은 사용자의 발화에 따라 가장 연관성 있는 핵심 내용만을 제공해야 합니다.

금성은 어디 있어?


잘된 예잘못된 예
Simple and minimal info, doSimple and minimal info, don't
Note

사용자가 Bixby Views 내에서 요청을 완료할 수 있도록 합니다. 하이퍼링크를 사용하면 인라인 후속 질문에서 벗어나게 됩니다. 따라서 하이퍼링크는 가급적 사용하지 않는 것이 좋습니다. Bixby Views에 요약된 내용에 대한 자세한 정보를 제공하려는 경우에는 필요에 따라 attribution-link를 사용하여 별도의 링크를 통해 외부로 이동할 수 있습니다. 이때, 외부 링크를 내부 링크와 동일하게 보이도록 만들면 안 됩니다.

Bixby Views에서 외부로 이동(Punch Out)하기

앱으로 이동(punch out)하는 방법을 통해 Bixby에서 나가 별도의 애플리케이션을 시작해야 할 경우 attribution-link를 사용하여 해당 내용을 view 맨 아래에 배치하도록 합니다. 또한 view 맨 아래에 on-click이 있는 카드를 사용하여 사용자가 Bixby를 떠날 수 있게 해도 됩니다. 이때 on-clickexternal-link-badge를 포함시켜 사용자가 카드를 탭하면 Bixby를 떠나게 된다는 것을 알려야 합니다. 이 정보를 내용의 시작 부분이나 중간에 배치하지 않도록 주의하세요.

경우에 따라 app-launch를 사용하여 사용자가 Bixby에서 완전히 나가 외부로 이동하도록 할 수 있습니다. 앱으로 이동(punch out)하는 것에 대한 자세한 내용은 앱으로 이동(Punch Out) 관련 정책을 참조하세요.

잘된 예잘못된 예
Simple and minimal info, doSimple and minimal info, don't Simple and minimal info, don't

또한 attribution-link를 사용하거나 on-clickexternal-link-badge와 함께 사용하는 경우에는 view의 주요 내용을 클릭할 수 없도록 만들어야 합니다. 예를 들어 on-click을 정의하지 않은 cell-card를 사용하여 셀 영역에 배치합니다. 구성 요소의 여러 부분이 아닌 한 부분만 탭할 수 있도록 해야 합니다.

결론

여기에서 설명한 모든 케이스 스터디 단계와 디자인 팁을 따라 Space Resorts(우주 리조트) 캡슐을 디자인하면 다음과 같은 결과물을 얻을 수 있습니다.

이 행성에서 제일 좋은 리조트를 찾아줘.

Space Resort Design

Yay I booked it