블록 키트: 더 나은 협업 UI 구축을 위한 Slack의 기여

(이 기사는 후원을 받은 기사입니다.) 지난 몇 년 동안 회사가 일하는 방식에 큰 변화가 있었습니다. 더 많은 기업이 위치에 의존하지 않게 됨에 따라 협업 도구는 팀이 만나고 작업을 완료하는 표준 방법이 되었습니다.

즉, 연결된 비즈니스 프로세스와 도구를 통합하는 협업 앱이 있다고 해서 항상 최적의 효율성이나 생산성으로 이어지는 경험을 의미하지는 않습니다. 왜요? 글쎄, 때로는 불친절한 UI가 방해가됩니다.

그래서 오늘은 더 나은 협업 UI를 구축하기 위한 Slack의 기여인 Block Kit에 대해 이야기하겠습니다.

맞춤형 Slack 앱(앱 디렉토리용 또는 내부용)을 구축한 사용자에게는 이것이 새로운 디자인 도구에 대한 소개가 될 것입니다. 없으신 분들은 괜찮습니다. 협업을 개선할 매력적인 작업 공간을 만드는 요소의 측면에서 이것에서 얻을 수 있는 몇 가지 귀중한 교훈이 있습니다.

개발자 여러분, Slack이 어떤 작업을 하고 있는지 아십니까?

Slack은 2013년 출시 이후 엄청난 발전을 이뤘습니다. 원래 메시징 앱으로 시작한 것이 이제 강력한 협업 플랫폼으로 꽃을 피웠습니다.

이 글을 쓰는 현재: Slack은 매일 천만 명이 넘는 활성 사용자를 보유하고 있으며 전 세계(정확히 150개국 이상)에 살고 있습니다.

Slack을 사용하는 것은 개인만이 아닙니다. 플랫폼 내에서 3명 이상으로 구성된 거의 585,000개 팀이 협업합니다. Fortune 100대 기업 중 65개 기업도 Slack을 사용하고 있습니다.

이것은 모두 개발자가 Slack 작업 공간의 기능을 확장하는 공개적으로 사용 가능한 앱을 만들고 게시할 수 있는 문을 열어준 Slack API 덕분입니다.

이렇게 하면 Slack 사용자는 가장 일반적으로 사용하는 비즈니스 도구 사이를 이동할 필요가 없습니다. 관련 프로세스는 모두 Slack 내에서 발생할 수 있습니다.

그러나 때로는 Slack 앱 디렉토리에서 사용할 수 있는 것이 조직에서 내부적으로 필요로 하는 것만으로는 충분하지 않습니다. 비즈니스 도구를 사용하여 일부 간극을 메울 수는 있지만 사용자 정의 Slack 앱을 구축해야 하는 이유도 찾을 수 있습니다.

Slack의 블록 키트 소개

문제는 다음과 같습니다. Slack은 개발자가 자체 앱을 제작하여 플랫폼 내에서 공동 작업을 향상시키는 데 성공했지만 개발자는 Slack을 사용하여 좋은 경험을 만드는 방법을 어떻게 알 수 있습니까?

최근까지 Slack의 API 및 앱 디렉토리는 제한된 유연성과 제어 기능을 제공했습니다. 플랫폼의 총괄 관리자인 Brian Elliott는 다음과 같이 설명했습니다.

“오늘날 모든 앱은 풍부한 정보를 표시하기 위해 제한된 방법을 사용해야 합니다. Slack에서 다양한 앱을 모두 살펴보고 사용했다면 배포하려는 기능에 관계없이 많은 앱이 동일한 레이아웃으로 끝납니다. 실제로 필요한 것은 사람들이 더 쉽게 이해하고 소화하고 행동할 수 있는 풍부한 대화형 디스플레이를 구축할 수 있는 구성 요소 세트입니다.”

그래서 Slack은 Block Kit를 개발했습니다.

Block Kit는 개발자, 디자이너 및 프런트 엔드 빌더가 풍부하고 직관적인 대화형 UI를 통해 메시징 앱을 표시할 수 있도록 하는 UI 프레임워크입니다. 또한, 쌓을 수 있는 UI 요소 또는 블록 세트를 제공함으로써 이제 Block Kit는 개발자에게 앱 디자인 및 레이아웃에 대한 더 많은 제어와 유연성을 제공합니다.

참고 : Block Kit의 작동 방식을 보고 싶다면 곧 있을 Slack 세션인 "Building with Block Kit"에 참여하세요. 여기에서 라이브 제품 데모를 보고 앱 디자인을 사용자 정의하는 것이 얼마나 쉬운지 확인할 수 있습니다.

블록 키트에는 두 가지 주요 구성 요소가 있습니다.

1. 블록 키트 빌더

이 빌더 도구와 클라이언트용 웹 사이트 및 앱을 만드는 데 사용하는 다른 많은 도구 간의 유사점을 확인하세요.

건물 구성 요소는 왼쪽에 있습니다. 포함하려는 앱을 클릭하고 중앙에 있는 앱의 미리보기에 추가되는 것을 보기만 하면 됩니다.

추가 사용자 정의를 원하십니까? 오른쪽의 텍스트 편집기를 확인하십시오. Block Kit는 메시징 앱 디자인에 대한 모범 사례를 따르는 미리 만들어진 요소를 제공하지만 원하는 경우 직접 만들 수 있습니다.

2. 블록 키트 템플릿

빌더에서 직접 메시징 인터페이스를 만들 수는 있지만 제공된 템플릿도 살펴보는 것이 좋습니다.

Slack 팀은 이미 실제로 Slack 앱의 유용한 사례를 보았습니다. 말할 필요도 없이 그들은 조직이 향상된 협업을 위해 활용하기를 원하는 종류를 알고 있습니다.

그렇기 때문에 이미 구축된 다음과 같은 일반적인 작업을 찾을 수 있습니다.

• 승인 요청 검토
• 새로운 알림에 대한 조치 취하기
• 투표를 실행하고 결과를 모니터링합니다.
• 검색을 수행합니다.

Guru는 Block Kit를 활용하여 Slack 앱을 개선하는 도구 중 하나입니다.

Guru는 Slack 내에서 데이터베이스 검색 기능을 제공합니다. 이제 결과가 빠르게 검색 되고 Slack의 프런트엔드에 더 명확하게 표시됩니다 .

더 나은 협업 UI를 구축하기 위한 열쇠

이제 Block Kit와 관련된 내용을 살펴보았으므로 더 생산적인 협업으로 이어지는 앱을 만드는 데 블록 키트가 어떻게 도움이 되는지 이야기해야 합니다.

블록

나는 최근에 구텐베르그에 대해 이야기했고 디자이너가 어떻게 구텐베르크를 유리하게 사용할 수 있는지에 대해 이야기했습니다. 새로운 WordPress 편집기에는 분명히 결함이 있지만 WordPress 팀이 변경한 이유에는 의문의 여지가 없습니다.

블록 빌더는 웹 디자인의 미래입니다.

"

블록 빌더가 웹 디자이너와 DIY 사용자가 선호하는 도구라는 것을 알았습니다. 빌더는 시각적 프론트엔드 디자인을 허용하고 종종 풍부한 사용자 정의 옵션을 포함합니다.

그러나 Block Kit는 그 이상을 수행하므로 디자이너 와 개발자 모두 쉽게 맞춤형 앱을 구축할 수 있습니다.

암호

웹사이트 빌더와 블록 키트 빌더 사이의 주요 차이점은 코딩 측면입니다.

대부분의 경우 디자이너는 페이지 빌더를 사용하므로 코드에 신경 쓸 필요가 없습니다. 사용자 정의 CSS 클래스를 추가하거나 텍스트에 HTML을 추가할 수 있지만 일반적으로 그게 전부입니다. 개발자는 그렇게 일하지 않습니다.

Block Kit에는 개발자가 준비가 되면 자체 Slack 앱에 복사하여 붙여넣을 수 있는 미리 작성된 JSON이 포함된 패널이 포함되어 있습니다. 개발자가 직접 코드를 작성하게 하는 대신 Slack은 속도와 디자인에 대한 모범 사례를 활용하는 코드를 제공합니다.

이를 통해 개발자는 처음부터 앱을 빌드하는 대신 사용자 지정에 집중할 수 있습니다.

일관성

Slack 사용자는 플랫폼 내부에 들어서면 무엇을 기대해야 하는지 알고 있습니다. 모든 인터페이스는 작업 공간마다 동일합니다.

그러나 API를 통해 개발자가 해당 공간과 통합할 앱을 빌드할 수 있게 되면 잘 들리지 않는 요소가 도입될 위험이 있습니다. 그런 일이 발생하면 인터페이스의 예측 불가능성이 최종 사용자에게 혼란과 망설임을 유발할 수 있습니다. 부적합한 레이아웃 선택도 경험에 해를 끼칠 수 있습니다.

블록 키트를 사용하면 개발자가 시도하고 테스트한 스택 가능한 UI 구성 요소로 앱을 빌드할 수 있습니다. 이미 구축된 플랫폼 내에서 경험을 사용자 정의할 때 얼마나 멀리 갈 수 있는지 또는 작동하는지 알기 어려울 수 있습니다. Slack은 이러한 질문을 방정식에서 제외했습니다.

간격

이것은 전통적인 Slack 교환의 모습입니다:

단일 열의 앞뒤 교환인 경향이 있습니다. 그리고 이것은 협업이 간단한 Slack 채널에서 완벽하게 작동합니다. 작업 상태에 대한 직원 메시지. 클라이언트가 누락된 자산을 업로드합니다. CEO가 회사를 언급하는 보도 자료 링크를 공유합니다. 그러나 모든 작업 공간이 그렇게 단순하지는 않습니다.

Block Kit는 앱의 기능이 차지하는 공간을 최대화하고 향상시키는 데 도움이 됩니다. 예를 들어 Block Kit를 사용하면 Optimizely와 같은 회사에서 관련 정보를 2열 형식으로 표시하여 가독성을 높일 수 있습니다.

이것은 팀의 Slack 앱에서 관련 세부 정보를 공유하는 더 좋은 방법입니다.

풍부한 상호작용

앱을 향상시키는 또 다른 방법은 통합을 상호 작용이 풍부한 통합으로 바꾸는 것입니다.

블록은 Slack 협업에서 가장 일반적으로 사용되는 요소를 향상시키기 위해 특별히 개발되었습니다. 예를 들어:

• 더 나은 구성을 위해 Sectional 블록을 사용하십시오.
• 텍스트 블록을 사용하여 메시지가 표시되는 방식을 사용자 정의합니다.
• 적절한 크기의 이미지 블록을 사용하여 올바르게 표시되는지 여부에 대해 걱정하지 않아도 됩니다.
• 컨텍스트 블록을 사용하여 작성자, 댓글, 변경 사항 등과 같은 메시지에 대한 추가 컨텍스트 또는 바이라인을 표시합니다.
• 앱의 모양을 개선하려면 디바이더 블록을 사용하세요.
• 메뉴 선택, 버튼 선택, 달력 날짜와 같은 작업 블록을 사용하여 앱에 더 나은 기능을 추가하고 더 직관적으로 표시할 수 있습니다.
• 깔끔한 레이아웃을 위해 2섹션 블록을 사용하세요.

Doodle은 Block Kit를 사용하여 풍부한 상호작용으로 무엇을 할 수 있는지에 대한 아름다운 예를 보여줍니다.

보시다시피, 사용자는 타사 캘린더를 사용하는 것처럼 효과적으로 회의 일정을 잡기 위해 함께 작업할 수 있습니다. 유일한 차이점은 이제 Slack 작업 공간 내에서 이 모든 작업을 수행할 수 있다는 것입니다.

마무리

협업은 모든 조직의 성공에 필수적인 부분이며 3명으로 구성된 팀이든 300명으로 구성된 팀이든 중요하지 않습니다. 하지만 함께 일하는 것과 생산적 으로 협업 하는 것 사이에는 큰 차이가 있습니다.

Slack의 API 덕분에 개발자는 관련 프로세스와 도구를 플랫폼에 통합하는 몇 가지 멋진 방법을 만들었습니다. 그리고 Block Kit 덕분에 이러한 외부 기여는 요소 디자인이 부족하더라도 경험을 방해하지 않습니다.

직관적인 블록 구축 기능, 개발자 친화적인 코딩 옵션 등을 갖춘 Block Kit는 개발자가 Slack 플랫폼에 더 풍부한 경험과 더 나은 협업을 제공할 수 있도록 도와줍니다.

마지막으로 언급할 사항:

Slack의 Frontiers 컨퍼런스가 곧 다가옵니다. 4월 24일과 25일에 샌프란시스코에서 열릴 예정입니다. 참석할 계획이라면 개발자 트랙에는 워크샵, 새로운 기능 데모, 자습서 및 1회를 포함하여 Block Kit에 대한 하루 종일 교육 이 포함됩니다. 일대일 멘토링. 블록킷을 생각하고 계시다면 놓치고 싶지 않은 기회입니다.