The Expected (and Unexpected) Benefits of Building with Block Kit

Slack의 새로운 블록 키트는 Guru 앱 사용자와 Guru 팀 모두에게 더 효율적인 경험을 제공합니다. 이제 Guru 앱을 사용하는 것이 그 어느 때보다 쉽습니다. 우리 팀이 Slack의 블록 키트 제공을 어떻게 활용했는지 알아보세요.
Table of Contents

이 게시물은 Slack 플랫폼 블로그를 위해 작성되었습니다. 원본 항목 읽기 여기.

Guru의 Slack 통합은 봇의 초기 단계에서 시작되었으며, 이 경험은 대부분 텍스트 기반이었고, Slack이 대화형 메시지 및 앱 작업과 같은 더 많은 기능을 도입함에 따라 기능이 확장되었습니다. 우리는 즉시 블록 키트의 이점을 보았습니다. 이는 우리의 사용자가 기대하는 풍부하고 깊이 있는 경험을 더 친숙한 UI/UX 패턴과 대화형 콘텐츠로 구축할 수 있는 기회였습니다. 그러나 우리가 예상하지 못했던 것은 블록 키트가 우리 개발 및 디자인 팀의 협업 방식을 어떻게 변화시킬 것인지였습니다.

slack-and-guru.png

더 나은 온보딩 경험 구축

우리는 처음으로 블록 키트를 적용하여 앱의 도움말 메뉴를 개편했습니다. 이전에는 사용자가 시작하는 경우 도움말 메뉴가 정보 텍스트의 벽으로 그들을 맞이했습니다. 이 텍스트는 스캔하기 어려웠을 뿐만 아니라 사용자가 어떤 작업을 수행하기 위해 명령어를 입력해야 했습니다. 앱 온보딩은 우리의 사용자에게 매우 중요하며, 블록 키트를 사용하여 완전히 새로운 경험을 상상했습니다 — 두 가지 주요 방법으로:

  • 구분자를 사용하여 유사한 콘텐츠를 그룹화함으로써 정보 텍스트의 벽을 스타일링하여 더 쉽게 소화할 수 있고 읽기 쉽게 만들었습니다.
  • 인라인 버튼과 오버플로 메뉴는 대화형이며 행동 지향적인 온보딩 경험을 가능하게 했습니다. 이제 사용자는 키 명령을 입력할 필요 없이 버튼을 선택하고 신속하게 작업을 수행할 수 있습니다.
Guru%20help%20menu%20in%20Slack.png

도움말 메뉴는 블록 키트가 Guru 앱 경험을 높이는 한 가지 장소일 뿐이었습니다. 활동 피드 인터페이스의 인라인 버튼은 행동 촉구를 해당 정보에 더 가깝게 가져옵니다. 오버플로 메뉴는 이제 덜 자주 사용되는 작업을 숨겨 사용자가 주요 정보에 집중할 수 있도록 합니다. 우리는 단지 표면을 긁어내기만 했습니다 — 블록 키트가 앱을 더 대화형으로 만들 수 있는 방법은 여전히 무수히 많습니다.

같은 언어를 구사하기

Guru에서 모든 인터페이스(웹 애플리케이션, 브라우저 확장 및 Slack 앱)에서 일관된 경험을 만드는 것은 도전이 될 수 있습니다. 디자인과 개발 팀이 우리의 사용자에게 원활한 경험을 보장하기 위해 끊임없이 노력하는 동안, 이는 많은 의견 교환이 필요한 협력 프로세스입니다. 이전에는 디자인 팀(일반적으로 Slack에서 구축하는 데 익숙하지 않음)이 빈 캔버스로 시작하여 불가피하게 기술적 제한에 부딪혔습니다 — 특히 그들의 디자인이 개발로 전환될 때, 최종 디자인에 도달하기 위해 수많은 반복이 필요했습니다.

비효율적이긴 해도 이런 과정은 대부분의 개발자들이 익숙한 과정입니다. 우리는 블록 키트를 사용하여 더 풍부하고 대화형 경험을 구축할 것으로 예상했지만, 블록 키트 빌더가 디자인과 개발 간의 파트너십을 얼마나 변화시킬 것인지 예상하지 못했습니다. 블록 키트 빌더는 시각적 프로토타입 샌드박스이며, 사용 가능한 블록을 선택, 쌓고 사용자 정의할 수 있습니다.

Guru에 있어 블록 키트 빌더는 디자인과 엔지니어링의 간극을 메우며, 우리의 디자이너가 이상적인 사용자 경험을 쉽게 프로토타입할 수 있도록 하여, 개발이 그들의 비전을 구현하는 데 필요한 정확한 JSON을 생성합니다. 우리의 디자인 팀은 더 이상 빈 슬레이트에서 시작해야 하지 않습니다. 다음과 같은 질문을 던져야 합니다: 이 버튼을 어디에 두지? 또는 어떤 텍스트를 사용해야 할까? 이제 레이아웃을 만들고 URL을 공유한 후 의견을 교환하는 것이 그리 어렵지 않습니다.

Slack%20Block%20Kit.png

블록 키트 빌더는 또한 개발이 문제 있는 JSON을 디버그하는 도구로 작동합니다. 앱 메시지가 올바르게 렌더링되지 않는 경우, 우리는 simplesmente 코드를 빌더에 붙여넣어 즉시 문제를 식별할 수 있습니다.

최고의 효율성

블록 키트와 블록 키트 빌더의 조합은 앱 사용자와 Guru 팀 모두에게 더 효율적인 경험을 제공합니다. 블록 키트는 독특한 앱 UI를 구축하기 위한 새로운 프레임워크를 제공할 뿐만 아니라 정보의 순서 및 레이아웃에 대한 유연성과 제어를 제공합니다. 이제 Guru 앱을 사용하는 것이 그 어느 때보다 쉽고, 업데이트된 도움말 메뉴는 사용자가 신속하게 시작할 수 있도록 지원합니다.

궁금하시나요? Guru의 새롭게 업데이트된 블록 키트 지원 앱을 Slack 앱 디렉토리에서 확인해보세요. slack.com/apps.

이 게시물은 Slack 플랫폼 블로그를 위해 작성되었습니다. 원본 항목 읽기 여기.

Guru의 Slack 통합은 봇의 초기 단계에서 시작되었으며, 이 경험은 대부분 텍스트 기반이었고, Slack이 대화형 메시지 및 앱 작업과 같은 더 많은 기능을 도입함에 따라 기능이 확장되었습니다. 우리는 즉시 블록 키트의 이점을 보았습니다. 이는 우리의 사용자가 기대하는 풍부하고 깊이 있는 경험을 더 친숙한 UI/UX 패턴과 대화형 콘텐츠로 구축할 수 있는 기회였습니다. 그러나 우리가 예상하지 못했던 것은 블록 키트가 우리 개발 및 디자인 팀의 협업 방식을 어떻게 변화시킬 것인지였습니다.

slack-and-guru.png

더 나은 온보딩 경험 구축

우리는 처음으로 블록 키트를 적용하여 앱의 도움말 메뉴를 개편했습니다. 이전에는 사용자가 시작하는 경우 도움말 메뉴가 정보 텍스트의 벽으로 그들을 맞이했습니다. 이 텍스트는 스캔하기 어려웠을 뿐만 아니라 사용자가 어떤 작업을 수행하기 위해 명령어를 입력해야 했습니다. 앱 온보딩은 우리의 사용자에게 매우 중요하며, 블록 키트를 사용하여 완전히 새로운 경험을 상상했습니다 — 두 가지 주요 방법으로:

  • 구분자를 사용하여 유사한 콘텐츠를 그룹화함으로써 정보 텍스트의 벽을 스타일링하여 더 쉽게 소화할 수 있고 읽기 쉽게 만들었습니다.
  • 인라인 버튼과 오버플로 메뉴는 대화형이며 행동 지향적인 온보딩 경험을 가능하게 했습니다. 이제 사용자는 키 명령을 입력할 필요 없이 버튼을 선택하고 신속하게 작업을 수행할 수 있습니다.
Guru%20help%20menu%20in%20Slack.png

도움말 메뉴는 블록 키트가 Guru 앱 경험을 높이는 한 가지 장소일 뿐이었습니다. 활동 피드 인터페이스의 인라인 버튼은 행동 촉구를 해당 정보에 더 가깝게 가져옵니다. 오버플로 메뉴는 이제 덜 자주 사용되는 작업을 숨겨 사용자가 주요 정보에 집중할 수 있도록 합니다. 우리는 단지 표면을 긁어내기만 했습니다 — 블록 키트가 앱을 더 대화형으로 만들 수 있는 방법은 여전히 무수히 많습니다.

같은 언어를 구사하기

Guru에서 모든 인터페이스(웹 애플리케이션, 브라우저 확장 및 Slack 앱)에서 일관된 경험을 만드는 것은 도전이 될 수 있습니다. 디자인과 개발 팀이 우리의 사용자에게 원활한 경험을 보장하기 위해 끊임없이 노력하는 동안, 이는 많은 의견 교환이 필요한 협력 프로세스입니다. 이전에는 디자인 팀(일반적으로 Slack에서 구축하는 데 익숙하지 않음)이 빈 캔버스로 시작하여 불가피하게 기술적 제한에 부딪혔습니다 — 특히 그들의 디자인이 개발로 전환될 때, 최종 디자인에 도달하기 위해 수많은 반복이 필요했습니다.

비효율적이긴 해도 이런 과정은 대부분의 개발자들이 익숙한 과정입니다. 우리는 블록 키트를 사용하여 더 풍부하고 대화형 경험을 구축할 것으로 예상했지만, 블록 키트 빌더가 디자인과 개발 간의 파트너십을 얼마나 변화시킬 것인지 예상하지 못했습니다. 블록 키트 빌더는 시각적 프로토타입 샌드박스이며, 사용 가능한 블록을 선택, 쌓고 사용자 정의할 수 있습니다.

Guru에 있어 블록 키트 빌더는 디자인과 엔지니어링의 간극을 메우며, 우리의 디자이너가 이상적인 사용자 경험을 쉽게 프로토타입할 수 있도록 하여, 개발이 그들의 비전을 구현하는 데 필요한 정확한 JSON을 생성합니다. 우리의 디자인 팀은 더 이상 빈 슬레이트에서 시작해야 하지 않습니다. 다음과 같은 질문을 던져야 합니다: 이 버튼을 어디에 두지? 또는 어떤 텍스트를 사용해야 할까? 이제 레이아웃을 만들고 URL을 공유한 후 의견을 교환하는 것이 그리 어렵지 않습니다.

Slack%20Block%20Kit.png

블록 키트 빌더는 또한 개발이 문제 있는 JSON을 디버그하는 도구로 작동합니다. 앱 메시지가 올바르게 렌더링되지 않는 경우, 우리는 simplesmente 코드를 빌더에 붙여넣어 즉시 문제를 식별할 수 있습니다.

최고의 효율성

블록 키트와 블록 키트 빌더의 조합은 앱 사용자와 Guru 팀 모두에게 더 효율적인 경험을 제공합니다. 블록 키트는 독특한 앱 UI를 구축하기 위한 새로운 프레임워크를 제공할 뿐만 아니라 정보의 순서 및 레이아웃에 대한 유연성과 제어를 제공합니다. 이제 Guru 앱을 사용하는 것이 그 어느 때보다 쉽고, 업데이트된 도움말 메뉴는 사용자가 신속하게 시작할 수 있도록 지원합니다.

궁금하시나요? Guru의 새롭게 업데이트된 블록 키트 지원 앱을 Slack 앱 디렉토리에서 확인해보세요. slack.com/apps.

Experience the power of the Guru platform firsthand – take our interactive product tour
투어 신청